/* Ihsan: site styles on top of scrollcraft.css.
   scrollcraft.css is the engine's floor (tokens, devices) and is never edited.
   Everything Ihsan-specific lives here: the six colour roles, the two faces,
   the shared bar and footer, the home page's acts and the inner-page parts. */

@font-face {
  font-family: "Amiri Ihsan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/amiri-ihsan-700.woff2) format("woff2");
}

:root {
  /* The site's own palette, light by default and dark when the browser asks
     for it. Scroll-craft supplies only the motion. --hue is each page's own
     colour, used for its header wash; the accent stays the brand teal. */
  --hue: 176;
  --acc-s: 70%; --acc-l: 35%;
  --sc-canvas: #F5F6F8;
  --ground-2: #ECEEF2;
  --sc-surface: #FFFFFF;
  --panel-2: #EEF0F4;
  --sc-ink: #10141C;
  --sc-ink-soft: #566070;
  --sc-accent: #12796A;
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --arabic: "Amiri Ihsan", "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", serif;

  --sc-shadow-color: 220 30% 20%;
  --sc-maxw: 84rem;
  --r: 20px;
  --bar-h: 4.25rem;
  --sc-t-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acc-s: 78%; --acc-l: 68%;
    --sc-canvas: #0A0C12; --ground-2: #0E1119; --sc-surface: #151A25; --panel-2: #1C2230;
    --sc-ink: #EEF1F6; --sc-ink-soft: #97A1B2;
    --sc-accent: #35D0B5; --sc-accent-ink: #0A0C12;
    --sc-shadow-color: 220 40% 2%;
  }
}
:root[data-theme="dark"] {
  --acc-s: 78%; --acc-l: 68%;
  --sc-canvas: #0A0C12; --ground-2: #0E1119; --sc-surface: #151A25; --panel-2: #1C2230;
  --sc-ink: #EEF1F6; --sc-ink-soft: #97A1B2;
  --sc-accent: #35D0B5; --sc-accent-ink: #0A0C12;
  --sc-shadow-color: 220 40% 2%;
}
/* Grain lifts a dark ground; on the light one it would read as dirt. */
.sc-grain { opacity: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-grain { opacity: .04; } }
:root[data-theme="dark"] .sc-grain { opacity: .04; }

html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { background: var(--sc-canvas); font-size: var(--sc-t-base); line-height: 1.62; letter-spacing: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; }
.sc-wrap { padding-inline: var(--sc-gutter); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 99; padding: .6rem 1rem; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------ the mark -- */
.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--sc-ink); }
.mark svg { width: 1.6rem; height: 1.6rem; flex: none; }
.mark .dot { fill: var(--sc-accent); transition: fill var(--sc-d-base) var(--sc-ease-out); }

/* ------------------------------------------------------------- the bar -- */
.bar { position: sticky; top: 0; z-index: var(--sc-z-chrome); background: var(--sc-canvas);  }
/* Home: the bar stays on screen, clear over the first screen and solid once the page moves. */
.bar--float { position: fixed; inset: 0 0 auto 0; background: transparent; transition: background-color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out); }
.bar--float.is-solid { background: var(--sc-canvas); }
.bar__in { display: flex; align-items: center; gap: 2rem; height: var(--bar-h); }
.bar__nav { margin-left: auto; display: flex; gap: 1.6rem; font-size: .95rem; font-weight: 500; }
.bar__nav a { text-decoration: none; color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { color: var(--sc-ink); }
.bar__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .5em; }
.bar__cta { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--sc-accent-ink); background: var(--sc-accent); transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.bar__cta:hover { filter: brightness(1.08); }
.bar__cta:active { transform: translateY(1px); }

.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer; border-radius: 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--sc-ink); border-radius: 2px; position: relative; }
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { top: 0; rotate: 45deg; }
.menu[open] summary span::after { top: 0; rotate: -45deg; }
.menu div { position: absolute; right: 0; top: 3.3rem; min-width: 14rem; padding: .5rem; display: grid; background: var(--sc-surface); border-radius: 16px; box-shadow: var(--sc-e3); } /* taste-skill-ignore: the open menu really floats */
.menu div a { padding: .75rem .9rem; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu div a:hover, .menu div a[aria-current] { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
@media (max-width: 860px) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
  .bar__in { gap: .6rem; }
  .menu { display: block; }
}

/* ------------------------------------------------------------- buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0 1.6rem; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: filter var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.line { background: var(--ground-2); color: var(--sc-ink); }
.btn.line:hover { background: var(--panel-2); filter: none; }
.btn.small { min-height: 2.5rem; padding: 0 1.1rem; font-size: .95rem; }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* The poster's link CTA: words, an underline in the accent, an arrow that moves. */
.go { display: inline-flex; align-items: baseline; gap: .5em; font-weight: 600; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .35em; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.go::after { content: "\2192"; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.go:hover { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .go:hover::after { transform: translateX(4px); } }
.go--quiet { text-decoration-color: var(--sc-hairline-strong); font-weight: 500; color: var(--sc-ink-soft); }

/* ================================================================ HOME == */

/* act 1: the name, on three planes ----------------------------------- */
.hero__stage { display: grid; }
.hero__word, .hero__copy { grid-area: 1 / 1; }
.hero__word {
  position: absolute; left: var(--sc-gutter); top: max(5.5rem, 11vh); z-index: 1;
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(7rem, 27vw, 30rem); line-height: .8; letter-spacing: -.06em;
  color: var(--sc-ink);
  transform-origin: 0 0; will-change: transform;
  pointer-events: none; user-select: none;
}
/* The tittle on the i is the app mark's dot, in the accent. */
.hero__word .i { position: relative; display: inline-block; }
.hero__word .tittle { position: absolute; left: 50%; top: -.05em; width: .2em; height: .2em; translate: -50% 0; border-radius: 50%; background: var(--sc-accent); transition: background-color var(--sc-d-base) var(--sc-ease-out); }
/* Zero-size markers on the text baseline, used to line the hero word up with the logo. */
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* Home: the bar's logo starts empty. site.js flies the hero word into it on scroll:
   the word shrinks into the logo text, the dot of the i arcs onto the tick, and the
   tick draws itself in. */
.home .bar .mark .mark__t, .home .bar .mark .dot { opacity: 0; }
.home .bar .mark.is-docked .mark__t, .home .bar .mark.is-docked .dot { opacity: 1; }
.flydot { position: fixed; left: 0; top: 0; z-index: calc(var(--sc-z-chrome) + 1); border-radius: 50%; background: var(--sc-accent); pointer-events: none; transform-origin: 0 0; will-change: transform; }
.hero__copy { position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6.5rem); max-width: 58rem; }
.hero__claim { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; max-width: 28ch; color: var(--sc-ink); }
.hero__copy p:not(.hero__claim) { margin-top: 1.4rem; max-width: 34rem; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
.hero__copy .links { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .9rem 2rem; align-items: center; }
@media (max-width: 700px) {
  .hero__stage { display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding: var(--bar-h) var(--sc-gutter) 1.5rem; }
  .hero__word, .hero__copy { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; }
  .hero__word { font-size: 36vw; }
  .hero__claim { font-size: 1.5rem; }
  .hero__copy p:not(.hero__claim) { font-size: 1.05rem; }
}

/* act 2: one sentence at four sizes ---------------------------------- */
.tension { padding-block: clamp(5rem, 14vh, 10rem) clamp(4rem, 10vh, 8rem); }
/* It slides up over the pinned first screen, so it needs its own ground and to sit above it. */
.tension { position: relative; z-index: 2; background: var(--sc-canvas); }
.tension .t-small { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); letter-spacing: -.02em; color: var(--sc-ink-soft); }
.tension .t-huge { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.6rem, 14vw, 15rem); line-height: .86; letter-spacing: -.055em; }
.tension .t-huge--trail { text-align: right; color: var(--sc-accent); transition: color var(--sc-d-base) var(--sc-ease-out); }
.tension .t-small--trail { text-align: right; margin-top: .6rem; }
.tension .t-small:first-child { margin-bottom: .8rem; }
.tension__body { margin-top: clamp(3rem, 8vh, 5rem); max-width: 30rem; font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.tension__body strong { font-weight: 600; color: var(--sc-ink); }

/* act 3: the dial ------------------------------------------------------
   The original Ihsan dial, unchanged in markup and behaviour (index.js).
   Its own palette names are mapped onto the navy ground here. */
.dial{
  --bg:var(--sc-canvas); --bg-2:var(--ground-2); --panel:var(--sc-surface);
  --ink:var(--sc-ink); --muted:var(--sc-ink-soft); --line:var(--sc-hairline); --line-strong:var(--sc-hairline-strong);
  --teal:var(--sc-accent); --on-acc:var(--sc-accent-ink);
  --display:var(--sc-font-display); --body:var(--sc-font-text);
  font-size:17px; line-height:1.55;
}
.dial .wrap{width:min(1180px,100% - 48px); margin-inline:auto}
.dial .ticks{max-width:none}
.dial h2,.dial h3,.dial p{margin:0}
/* ---------- the dial ---------- */
.dial{--h:176; --acc:hsl(var(--h) var(--acc-s) var(--acc-l)); position:relative; background:var(--bg-2)}
.dial-intro{padding:88px 0 36px}
.dial.is-live .dial-intro h2{max-width:none}
.dial.is-live.tight .dial-intro p{display:none}
.dial.is-live.hide-intro .dial-intro{display:none}
.dial-intro h2,.dial .sec h2{font-family:var(--display); font-weight:800; font-size:clamp(30px,4.2vw,56px); line-height:1; letter-spacing:-.035em; max-width:15ch}
.dial-intro p,.dial .sec .sub{margin-top:16px; color:var(--muted); max-width:34em}
.dial .stage{position:relative}
.dial .ring,.dial .ticks,.dial .wash{display:none}
.dial.is-live .wash{display:block; position:absolute; inset:0; z-index:1; opacity:0; will-change:opacity; background:color-mix(in srgb,hsl(var(--hh) var(--acc-s) var(--acc-l)) 9%,transparent)}
.dial .stops{width:min(1180px,100% - 48px); margin-inline:auto; padding:0 0 88px; display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.dial .stop{--hh:var(--h); --a:hsl(var(--hh) var(--acc-s) var(--acc-l)); background:var(--panel); border:1px solid var(--line); border-radius:28px; padding:30px} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .stop .co{display:inline-block; font-weight:600; font-size:14.5px; color:var(--a)}
.dial .stop h3{font-family:var(--display); font-weight:800; font-size:clamp(25px,2.7vw,38px); line-height:1.02; letter-spacing:-.03em; margin-top:10px}
.dial .stop .say{margin-top:12px; color:var(--muted); font-size:16.5px; max-width:31em}
.dial .chat{margin-top:22px; display:grid; gap:10px; font-size:15px}
.dial .bub{max-width:88%; padding:12px 16px; border-radius:20px} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .bub small{display:block; font-size:13px; font-weight:600; margin-bottom:2px; color:var(--muted)}
.dial .bub.q{justify-self:end; background:var(--panel-2); border-bottom-right-radius:6px} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .bub.a{justify-self:start; background:color-mix(in srgb,var(--a) 12%,var(--panel)); border:1.5px solid var(--a); border-bottom-left-radius:6px} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .bub.a small{color:color-mix(in srgb,var(--a) 72%,var(--ink))}
.dial .bub .tag2{display:block; font-size:13px; font-weight:600; color:var(--a); margin-top:8px}
.dial .bub .tag2:first-of-type{margin-top:0}
.dial .mention{font-weight:600; color:var(--a)}
.dial .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.dial .chip{font-size:13px; font-weight:500; padding:2px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--a); color:var(--a)} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .todo{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:6px}
.dial .todo li{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.dial .todo .st{font-size:13px; font-weight:600; color:color-mix(in srgb,var(--a) 72%,var(--ink)); white-space:nowrap}
.dial .todo .st.wait{color:var(--ink)}
/* live */
.dial.is-live{height:calc(5 * 72vh + 100vh)}
.dial.is-live .dial-intro{position:absolute; z-index:6; top:0; right:0; left:0; padding:86px 0 0; pointer-events:none; transition:opacity .35s}
.dial.is-live .dial-intro .wrap{width:auto; margin:0; padding-left:calc(var(--px) + 30px)}
.dial.is-live .dial-intro .in{width:var(--pw,600px); max-width:100%}
.dial.is-live .dial-intro h2{font-size:clamp(22px,2.2vw,30px)}
.dial.is-live .dial-intro p{font-size:15px; margin-top:6px}
.dial.is-live.turning .dial-intro{opacity:0}
.dial.is-live .stage{position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden} /* taste-skill-ignore: 100dvh follows as the real value */
.dial.is-live .ring{display:block; position:absolute; left:var(--cx); top:var(--cy); width:0; height:0; z-index:3}
.dial.is-live .ticks{will-change:transform; display:block; position:absolute; left:var(--cx); top:var(--cy); z-index:2; overflow:visible}
.dial .ticks circle{fill:none; stroke:var(--line-strong)}
.dial .ticks .t1{stroke-width:14; stroke-dasharray:1.5 16}
.dial .ticks .t2{stroke-width:1.5}
.dial .ticks .t3{stroke-width:1; stroke-dasharray:3 10}
.dial .ring .node{all:unset; position:absolute; left:0; top:0; width:0; height:0; cursor:pointer}
.dial .ring .node i{position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--bg); border:2px solid var(--line-strong); transition:scale .3s, background .3s, border-color .3s} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .ring .node::before{content:""; position:absolute; left:-24px; top:-24px; width:48px; height:48px}
.dial .ring .node span{position:absolute; right:26px; top:0; translate:0 -50%; white-space:nowrap; font-family:var(--display); font-weight:700; font-size:clamp(17px,1.7vw,24px); letter-spacing:-.02em; color:var(--muted); transition:color .3s, scale .3s; transform-origin:right center}
.dial .ring .node{--na:hsl(var(--hh) var(--acc-s) var(--acc-l))}
.dial .ring .node.on i{background:var(--na); border-color:var(--na); scale:1.5; box-shadow:0 0 0 8px color-mix(in srgb,var(--na) 22%,transparent)} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .ring .node.on span{color:var(--ink); scale:1.35}
.dial .ring .node:focus-visible i{outline:2px solid var(--teal); outline-offset:4px}
.dial.is-live .stops{position:absolute; inset:0; width:auto; padding:0; margin:0; display:block; z-index:4}
.dial.is-live .stop{position:absolute; left:var(--px); top:var(--py); width:var(--pw); translate:0 -48%; opacity:0; visibility:hidden; pointer-events:none; will-change:transform,opacity; box-shadow:0 40px 90px -46px rgba(0,0,0,.5); border-color:color-mix(in srgb,var(--a) 35%,var(--line))} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial.is-live .stop.here{pointer-events:auto}
@media (max-width:860px){
.dial .ring .node span{right:auto; left:0; top:-34px; translate:-50% -50%; transform-origin:center; font-size:15px}
.dial .ring .node.on span{scale:1.2}
.dial.is-live .stop{top:var(--py); translate:none; padding:20px; border-radius:24px} /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.dial .stop h3{font-size:24px; margin-top:6px}
.dial .stop .say{font-size:15px; margin-top:8px}
.dial .chat{margin-top:14px; font-size:14px; gap:8px}
.dial .bub{padding:10px 13px; max-width:94%}
.dial.is-live .dial-intro{top:calc(100vh - 96px); top:calc(100dvh - 96px); padding:0; text-align:center}
.dial.is-live .dial-intro .wrap{padding:0 24px}
.dial.is-live .dial-intro .in{width:auto}
.dial.is-live .dial-intro h2{max-width:none}
.dial.is-live .dial-intro p{display:none}
}

/* act 4: connections on a rail ---------------------------------------- */
/* The connections rail sits on a whole field of the brand navy, in both themes. */
.conns { --sc-ink: #EAF4F1; --sc-ink-soft: #B5CCD2; --ground-2: #16384C; --sc-accent: #2CC7AD; color: var(--sc-ink); background: #0E2A3B; }
.conns__stage { display: flex; align-items: center; background: #0E2A3B; }
.rail { gap: clamp(3rem, 6vw, 6rem); padding-inline: var(--sc-gutter); align-items: flex-start; }
.rail > * { flex: none; }
.rail__lead { width: min(34rem, 82vw); padding-top: .5rem; }
.rail__lead h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.rail__lead p { margin-top: 1.4rem; color: var(--sc-ink); max-width: 28rem; }
.rgroup { width: min(23rem, 78vw); }
.rgroup h3 { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); }
.rgroup ul { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.1rem; }
.rgroup li { display: flex; align-items: center; gap: 1rem; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; }
.rgroup li.more .tile.plus { font-family: inherit; }
.rgroup li.more { color: var(--sc-ink-soft); font-weight: 500; font-family: var(--sc-font-text); font-size: var(--sc-t-lg); letter-spacing: 0; }
.rgroup .note { margin-top: 1.4rem; color: var(--sc-ink); font-size: var(--sc-t-base); max-width: 24rem; }
.rgroup--end { width: min(26rem, 80vw); }
.tile { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: #FFFFFF; display: grid; place-items: center; }
.tile svg { width: 1.75rem; height: 1.75rem; }
.tile.navy { background: #16384C; }
.tile.navy svg { width: 1.7rem; height: 1.7rem; }
.tile.plus { background: var(--ground-2); font-family: var(--sc-font-display); font-size: 1.4rem; font-weight: 500; color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) { opacity: max(.55, min(1, calc(var(--sc-p, 0) * 6 - var(--k, 0) * .9 + .4))); transition: opacity 200ms linear; }
}
@media (max-width: 700px) {
  .rail__lead h2 { font-size: 2.3rem; }
  .rgroup li { font-size: 1.35rem; }
  .tile { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
  .tile svg { width: 1.2rem; height: 1.2rem; }
}

/* act 5: the wipe, then plain facts ------------------------------------- */
.start { padding-top: clamp(3.5rem, 8vh, 6rem); }
.start__h { padding-block: .1em .12em; }
.start__h h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.8rem, 7.4vw, 7.6rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; max-width: 15ch; }
.plain { padding-block: clamp(3rem, 7vw, 5rem) var(--sc-section); }
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1.15fr 1fr .95fr; gap: 2.5rem clamp(2rem, 4vw, 4rem); counter-reset: s; }
.steps3 li { counter-increment: s; }
.steps3 li::before { content: counter(s); display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--sc-accent); margin-bottom: 1rem; }
.steps3 h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: -.02em; line-height: 1.15; }
.steps3 p { margin-top: .6rem; color: var(--sc-ink); max-width: 24rem; }
.trust { margin-top: clamp(5rem, 12vw, 9rem); display: grid; grid-template-columns: 1fr; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.trust h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.trust dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.trust dl div { display: grid; align-content: start; gap: .5rem; padding: 1.6rem; background: var(--ground-2); }
.trust dt { font-weight: 600; }
.trust dd { color: var(--sc-ink); }
.trust .go { margin-top: 1.6rem; }
.more-line { margin-top: clamp(4rem, 9vw, 7rem); padding: 2rem; background: var(--ground-2); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }
.more-line p { color: var(--sc-ink); max-width: 36rem; margin-right: auto; }
@media (max-width: 860px) {
  .steps3, .trust { grid-template-columns: 1fr; }
  .trust dl { grid-template-columns: 1fr; }
}

/* act 6: the close ---------------------------------------------------- */
.close__stage { display: grid; place-items: center; align-content: center; gap: 2.2rem; padding-inline: var(--sc-gutter); text-align: center; }
.close__ar { font-family: var(--arabic); font-weight: 700; font-size: clamp(6rem, 17vw, 15rem); line-height: 1.25; color: var(--sc-accent); transition: color var(--sc-d-base) var(--sc-ease-out); }
.close__text { display: grid; gap: 1rem; justify-items: center; max-width: 30rem; }
.close__text .meaning { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-wrap: balance; }
.close__text h2 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: 0; }

/* ============================================================ FOOTER == */
.foot { padding-block: 4rem 2.5rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); background: var(--ground-2); position: relative; z-index: 2; }
.foot__in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.2rem; align-items: start; }
.foot h4 { margin: 0 0 .8rem; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot a { text-decoration: none; }
.foot ul a:hover { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); }
.foot__about p { margin-top: .8rem; max-width: 20rem; }
.foot__legal { grid-column: 1 / -1; padding-top: 1rem; }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__about { grid-column: 1 / -1; } }

/* ======================================================= INNER PAGES == */
/* The page header is a small scene: a grid floor running toward the reader,
   a glow in the page's own hue, the headline rising in word by word, and the
   page's name in giant outline letters sliding sideways in its own band. */
.ph { --ph-c: hsl(var(--hue) var(--acc-s) var(--acc-l)); position: relative; isolation: isolate; overflow: clip; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -3; background: color-mix(in srgb, var(--ph-c) 11%, var(--sc-canvas)); }
.ph > .sc-wrap { position: relative; }
.ph__word { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); white-space: nowrap; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(4.5rem, 15vw, 15rem); line-height: .78; letter-spacing: -.055em; color: var(--ph-c); transform: translate3d(min(0px, calc((.55 - var(--sc-p, .55)) * 30vw)), 0, 0); padding-left: var(--sc-gutter); user-select: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ph__word { transform: none; } }
/* headline words rise from behind a mask (split by site.js) */
.ph h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.ph h1 .w > span { display: inline-block; transform: translate3d(0, 108%, 0); animation: ph-rise 900ms var(--sc-ease-out) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes ph-rise { to { transform: none; } }


/* Section headings wipe in when their section arrives. */
.sec h2 { clip-path: inset(-.2em -.3em -.35em 0); transition: clip-path 1000ms var(--sc-ease-out) 120ms; }
.sec [data-sc-in]:not(.sc-in) h2 { clip-path: inset(-.2em 100% -.35em 0); }
@media (prefers-reduced-motion: reduce) { .sec h2, .sec [data-sc-in]:not(.sc-in) h2 { clip-path: none; transition: none; } }

/* The "on this page" rail (built by site.js on pages with three or more sections). */
.hud { position: fixed; z-index: 40; right: clamp(.8rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%; display: none; }
@media (min-width: 1100px) { .hud { display: block; } }
.hud ol { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; gap: .9rem; position: relative; }
.hud ol::before { content: ""; position: absolute; right: 3px; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--ground-2); }
.hud__fill { position: absolute; right: 3px; top: 5px; width: 3px; border-radius: 3px; height: calc((100% - 10px) * var(--hud, 0)); background: var(--sc-accent); }
.hud a { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; text-decoration: none; font-size: .8125rem; font-weight: 600; color: var(--sc-ink-soft); min-height: 1.4rem; }
.hud a span { opacity: 0; translate: 6px 0; transition: opacity var(--sc-d-fast) var(--sc-ease-out), translate var(--sc-d-fast) var(--sc-ease-out); white-space: nowrap; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); }
.hud a i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); position: relative; z-index: 1; transition: background-color var(--sc-d-fast), border-color var(--sc-d-fast), scale var(--sc-d-fast); }
.hud a:hover span, .hud a:focus-visible span { opacity: 1; translate: 0 0; }
.hud a[aria-current="true"] { color: var(--sc-ink); }
.hud a[aria-current="true"] i { background: var(--sc-accent); scale: 1.3; }


.close { position: relative; isolation: isolate; overflow: clip; }

.ph h1 { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -.05em; max-width: 20ch; text-wrap: balance; }
.ph .lede { margin-top: 1.8rem; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); max-width: 36rem; text-wrap: pretty; }
.ph .lede strong { color: var(--sc-ink); font-weight: 600; }
.ph .ar { font-family: var(--arabic); font-size: 1.5em; color: var(--sc-accent); margin-right: .25em; }
.fine { margin-top: .9rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.sec { padding-block: var(--sc-section); }
.alt { background: var(--ground-2); }
.sec h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -.04em; max-width: 18ch; text-wrap: balance; }
.sec .sub { margin-top: 1.1rem; color: var(--sc-ink); max-width: 40rem; }
.sec h2 + .caps, .sec h2 + .facts { margin-top: 3rem; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.prose p { max-width: 40rem; }
.prose p + p { margin-top: 1rem; }
.prose a, .sub a, .faqs a, .legal a, .inds a, .facts a { color: var(--sc-accent); font-weight: 600; text-decoration-thickness: 1px; }

/* Capability rows: a spread, not a card. Dialogue typeset, not bubbles. */
.caps { display: grid; gap: 0; }
.caprow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: start; padding: 2.2rem 1.4rem; margin-inline: -1.4rem; transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
.caprow:hover { background: var(--panel-2); }
.caprow h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.caprow p { margin-top: .7rem; color: var(--sc-ink); max-width: 30rem; }
@media (max-width: 860px) { .caprow { grid-template-columns: 1fr; } }
.caprow .chat { display: grid; gap: .7rem; padding: 1.5rem; border-radius: 22px; background: var(--sc-surface); font-size: .95rem; }
.alt .caprow .chat { background: var(--sc-canvas); }
.caprow .bub { max-width: 90%; padding: .8rem 1rem; border-radius: 18px; line-height: 1.5; }
.caprow .bub small { display: block; font-size: var(--sc-t-xs); font-weight: 600; color: var(--sc-ink-soft); margin-bottom: .15rem; }
.caprow .bub.q { justify-self: end; background: var(--panel-2); border-bottom-right-radius: 6px; }
.caprow .bub.a { justify-self: start; background: color-mix(in srgb, var(--sc-accent) 10%, var(--sc-surface)); border: 1.5px solid var(--sc-accent); border-bottom-left-radius: 6px; } /* taste-skill-ignore: part of a real interface fragment (data-ui) */
.caprow .bub.a small { color: var(--sc-accent); }
.caprow .bub .tag2 { display: block; font-size: var(--sc-t-xs); font-weight: 600; color: var(--sc-accent); margin-top: .5rem; }
.caprow .bub .tag2:first-of-type { margin-top: 0; }
.caprow .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.caprow .chip { font-size: var(--sc-t-xs); padding: .1rem .6rem; border-radius: 999px; background: var(--sc-surface); color: var(--sc-accent); }
.caprow .mention { font-weight: 600; color: var(--sc-accent); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.facts > div { padding: 1.6rem; background: var(--sc-surface); transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
.facts > div:hover { background: var(--panel-2); }
.alt .facts > div { background: var(--sc-canvas); }
.facts h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; }
.facts p { margin-top: .6rem; color: var(--sc-ink); }

.table { list-style: none; padding: 0; margin: 2.2rem 0; max-width: 48rem; display: grid; gap: .3rem; }
.table li { display: grid; grid-template-columns: 11em 1fr; gap: 1rem; padding: 1rem 1.2rem; background: var(--ground-2); }
.table span { color: var(--sc-ink-soft); }
@media (max-width: 560px) { .table li { grid-template-columns: 1fr; gap: .2rem; } }

.faqs { display: grid; gap: .5rem; }
.faqs details { background: var(--ground-2); padding-inline: 1.3rem; transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
.faqs details:hover, .faqs details[open] { background: var(--panel-2); }
.faqs summary { cursor: pointer; list-style: none; padding: 1.3rem 2.6rem 1.3rem 0; font-weight: 600; font-size: 1.12rem; position: relative; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font-family: var(--sc-font-display); font-size: 1.8rem; font-weight: 500; color: var(--sc-accent); transition: rotate var(--sc-d-fast) var(--sc-ease-out); }
.faqs details[open] summary::after { rotate: 45deg; }
.faqs details p { padding: 0 0 1.4rem; color: var(--sc-ink); max-width: 40rem; }

.steps { margin: 3rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: 3.2rem; line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--sc-accent); margin-bottom: .8rem; }
.steps h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; }
.steps p { margin-top: .4rem; color: var(--sc-ink); }
.steps.v { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.cardbox { background: var(--sc-surface); border-radius: var(--r); padding: clamp(1.6rem, 3.4vw, 2.8rem); }
.cardbox h3 { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-xl); letter-spacing: -.03em; line-height: 1.05; }
.cardbox p { margin-top: .7rem; color: var(--sc-ink-soft); }
.cardbox .btn { margin-top: 1.5rem; }

.legal h2 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.025em; margin: 3rem 0 .8rem; max-width: none; line-height: 1.1; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2em; max-width: 40rem; display: grid; gap: .6rem; margin: .9rem 0; }
.legal li::marker { color: var(--sc-accent); }
.legal p + p { margin-top: 1rem; }
.draft { padding: 1rem 1.25rem; border-radius: 14px; background: var(--panel-2); font-size: var(--sc-t-sm); font-weight: 500; }

.inds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem 2.5rem; }
.inds li { --a: hsl(var(--hh, var(--hue)) var(--acc-s) var(--acc-l)); padding: 1.4rem 1.1rem; border-left: 5px solid var(--a); transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
.inds li:hover { background: color-mix(in srgb, var(--a) 10%, transparent); }
.inds h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.15; color: var(--a); }
.inds p { margin-top: .5rem; color: var(--sc-ink); }

/* The inner pages' closing band: quiet, one line and one action. */
.close { padding-block: clamp(6rem, 14vw, 11rem); text-align: left; background: #0E2A3B; color: #EAF4F1; }
.close h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.05em; max-width: 20ch; text-wrap: balance; }
.close .btn { margin-top: 2.2rem; background: #2CC7AD; color: #04161C; }

/* Connector logos on the capabilities page. */
.conn { margin-top: 3.2rem; display: grid; gap: 3rem; }
.cgroup h3 { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); }
.cgroup ul { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 2.2rem clamp(1.8rem, 5vw, 4rem); }
.cgroup li { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 7rem; text-align: center; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.lg { flex: none; width: 4rem; height: 4rem; border-radius: 18px; background: #FFFFFF; display: grid; place-items: center; }
.lg svg { width: 2.1rem; height: 2.1rem; display: block; }
.lg.navy { background: #0E2A3B; }
.lg.navy svg { width: 2.5rem; height: 2.5rem; }
.lg.sm { width: 3rem; height: 3rem; border-radius: 14px; }
.lg.sm svg { width: 1.55rem; height: 1.55rem; }
.lg.plus { background: var(--ground-2); font-family: var(--sc-font-display); font-size: 1.7rem; font-weight: 500; color: var(--sc-ink-soft); line-height: 1; }
.lg.sm.plus { font-size: 1.4rem; }
.cgroup li.more { color: var(--sc-ink-soft); }
.gnote { margin-top: 1.6rem; color: var(--sc-ink-soft); max-width: 38rem; }
.suite { margin-top: 2.5rem; display: grid; grid-template-columns: 7rem 1fr; align-items: start; }
.suite .parent { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.suite .kids { margin: 2rem 0 0; gap: 0; flex-wrap: nowrap; }
.suite .kids li { position: relative; width: auto; flex: 1 1 0; min-width: 0; max-width: 6.75rem; padding-top: 1.6rem; font-size: .85rem; font-weight: 500; gap: .55rem; }
.suite .kids li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1.5px solid var(--sc-hairline-strong); } /* taste-skill-ignore: tree lines that show which apps belong to the suite */
.suite .kids li:last-child::before { right: 50%; }
.suite .kids li::after { content: ""; position: absolute; top: 0; left: 50%; height: 1.25rem; border-left: 1.5px solid var(--sc-hairline-strong); } /* taste-skill-ignore: tree lines that show which apps belong to the suite */
@media (max-width: 860px) {
  .suite { grid-template-columns: 1fr; justify-items: start; }
  .suite .parent { flex-direction: row; text-align: left; gap: .9rem; }
  .suite .kids { margin: 0 0 0 2rem; padding: 1.1rem 0 0 1.4rem; border-left: 1.5px solid var(--sc-hairline-strong); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem .4rem; width: calc(100% - 2rem); } /* taste-skill-ignore: tree lines that show which apps belong to the suite */
  .suite .kids li { padding-top: 0; max-width: none; font-size: .78rem; }
  .suite .kids li::before, .suite .kids li::after { display: none; }
}
.hookrow { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.hookrow h3 { grid-column: 1 / -1; }
.hookrow p { margin-top: 1.8rem; color: var(--sc-ink-soft); max-width: 36rem; }
@media (max-width: 640px) { .cgroup ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem .5rem; } .cgroup li { width: auto; } .hookrow { grid-template-columns: 1fr; } .hookrow p { margin-top: 1.1rem; } }

@media (prefers-reduced-motion: reduce) {
  .hero__word { transform: none; }
}