/* ==========================================================================
   RAPTIX · raptix.app home, v2 (LIVE — served at / and /ar)
   Six sections, under 600 words, one film. Plain CSS, no build step.

   Adapted from site-assets/site.css. What changed and why:
   - The decorative layer is gone. No drifting radial glow, no grain, no motes.
     The brand guide bans particle effects and decorative gradients; the only
     gradients left are the scrims over live footage, which exist to buy the
     type its contrast, not to decorate.
   - The hero's scroll travel is ONE constant (--hero-travel), and it is three
     viewports instead of nine.
   - The caption bands no longer own the first frame. A solid lower-third does.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root{
  --canvas:#0B0C10;
  --canvas-deep:#07080B;
  --panel:#14161C;
  --panel-line:#242833;
  --line-strong:#39404F;
  --accent:#D8A94E;               /* the site accent. Action and decision only. */
  --accent-hover:#F0C877;
  --accent-muted:rgba(216,169,78,.24);
  --hold:#7C93AE;                 /* anything pending — status, never action */
  --ok:#7FB98A;
  --text-primary:#F2F0EA;
  --text-secondary:#98A0AE;
  --text-dim:#7A8394;
  --nav-ink:#B4BAC6;              /* nav links while the bar sits on raw footage */
  --ink:5,5,10;                   /* the one black every scrim is mixed from */

  /* ---------------------------------------------------------------------
     THE HERO CONSTANT. This is the distance the reader scrolls while the
     film plays, and the full 18.04 s of the film is mapped onto exactly it.
     The old page used nine viewports; three is the plan's figure (§4.1).
     The hero section is this plus the one viewport it stays pinned for.
     --------------------------------------------------------------------- */
  --hero-travel:300vh;

  --poster-scrub:url(/site-assets/hero-poster.jpg?v=20260824j);
  --poster-static:url(/site-assets/hero-ending.jpg?v=20260824j);

  --display:"Alexandria","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* type over live footage. Four layers; the first is a tight 0-offset rim that
     wraps every glyph edge, without which white type reads grey over a bright
     frame even at 7:1 measured contrast. */
  --tshadow:0 0 3px rgba(5,5,10,.92),0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gut:clamp(20px,5vw,64px);
  --measure:1120px;

  /* z-index has names here, not numbers scattered through the file */
  --z-env:0;
  --z-page:1;
  --z-stage-copy:2;
  --z-nav:60;
  --z-skip:200;
}

@media (orientation:portrait){
  :root{
    --poster-scrub:url(/site-assets/hero-poster-portrait.jpg?v=20260824j);
    --poster-static:url(/site-assets/hero-ending-portrait.jpg?v=20260824j);
  }
}

html[lang="ar"]{
  --display:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --body:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}

/* --- 2. Reset and base --------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  overflow-x:hidden;
  overflow-x:clip;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0}
/* ol too, not just ul: the case section is an ordered list because it is a real
   chronology, but its order is carried by the visible clock times, so a second
   set of numbers beside them is noise */
ul,ol{list-style:none;padding:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* clipped, not parked off-canvas: a negative inset-inline-start inflates
   scrollWidth by its own value once the document is RTL */
.skip{
  position:absolute;inset-inline-start:0;top:0;z-index:var(--z-skip);
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--accent);color:#0B0C10;padding:12px 20px;font-weight:600;border-radius:0 0 6px 0;
}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* the honeypot. Off the tab order, off the accessibility tree, and never
   display:none — a bot reads computed style, a careless human never sees it. */
.trap{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;
  pointer-events:none;
}

/* --- 3. Chrome: nav ------------------------------------------------------ */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav-in{
  max-width:1240px;margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  min-height:65px;
  display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);
}
/* at the top the bar sits on raw footage, so it carries its own ceiling until
   the solid bar takes over. Measured at 4.28:1 without it, under the 4.5 floor. */
.nav::before{
  content:"";position:absolute;inset:0 0 auto;height:150px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(7,8,11,.92) 0%,rgba(7,8,11,.70) 46%,rgba(7,8,11,0) 100%);
  transition:opacity .5s var(--ease);
}
.nav.solid::before{opacity:0}
.nav.solid{background:rgba(7,8,11,.96);border-bottom-color:var(--panel-line)}

.brand{display:flex;align-items:center;flex:none;line-height:0;min-height:44px}
.brand img{display:block;height:21px;width:auto;flex:none;transition:opacity .3s var(--ease)}
.brand:hover img{opacity:.82}
.foot .brand img{height:30px}
@media (max-width:640px){
  .brand img{height:18px}
  .foot .brand img{height:28px}
}
/* The Arabic lockup is the same lockup in the other script: «رابتيكس» with the
   gold disc first in reading order — which in RTL puts it on the RIGHT of the
   word. Its asset box carries real ascenders and descenders where the Latin one
   carries only a cap band, so at an identical CSS height the Arabic letters
   would read a third smaller. These heights are the Latin ones scaled by
   1.207 = (cap/box 0.8097) / (alef/box 0.6710), which puts the alef at exactly
   the Latin cap height and the disc at the same size as the Latin one. */
html[lang="ar"] .brand img{height:25px}
html[lang="ar"] .foot .brand img{height:36px}
@media (max-width:640px){
  html[lang="ar"] .brand img{height:22px}
  html[lang="ar"] .foot .brand img{height:34px}
}

.nav-links{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);margin-inline-start:auto}
.nav-links a{font-size:14px;font-weight:500;color:var(--nav-ink);
  transition:color .3s var(--ease);white-space:nowrap}
.nav-links a:hover{color:var(--text-primary)}
.nav-sep{width:1px;height:18px;background:var(--line-strong);flex:none}
.nav-signin{color:var(--text-primary)}

.nav-end{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex:none}
.nav .btn-sm{font-size:14px;padding:10px 18px;min-height:40px;border-radius:7px}

.lang{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  border:1px solid var(--line-strong);border-radius:6px;padding:6px 10px;
  color:var(--nav-ink);transition:color .3s var(--ease),border-color .3s var(--ease);
  white-space:nowrap;
}
.lang:hover{color:var(--accent);border-color:var(--accent-muted)}
/* an Arabic string inside an LTR document is still Arabic: a Latin mono face has
   no Arabic glyphs and .08em tracking pulls the cursive joins apart */
.lang[lang="ar"]{
  font-family:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,Arial,sans-serif;
  font-size:14px;font-weight:500;letter-spacing:normal;padding:5px 12px;
}

.nav-links a,.foot nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
@media (pointer:coarse){ .foot nav a{min-width:44px} }

.nav-toggle{
  display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:7px;color:var(--text-primary);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.nav-toggle:hover{border-color:var(--accent-muted);color:var(--accent)}
.nav-toggle span{position:relative;display:block;width:16px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease-out),opacity .2s linear}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease-out)}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
.nav.open .nav-toggle span{transform:rotate(45deg)}
.nav.open .nav-toggle span::before{transform:translateY(5px) rotate(-90deg)}
.nav.open .nav-toggle span::after{opacity:0}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-end{margin-inline-start:auto}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    margin:0;flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,4vw,40px) 18px;
    background:rgba(7,8,11,.98);
    border-bottom:1px solid var(--panel-line);
    display:none;
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{justify-content:flex-start;min-height:48px;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-links a:last-child{border-bottom:0}
  .nav-sep{display:none}
}
@media (max-width:560px){
  .nav-in{gap:8px}
  .nav .btn-sm{padding:9px 13px;font-size:13px}
  .lang[lang="ar"]{font-size:13px;padding:5px 9px}
}

/* --- 4. Buttons and links ------------------------------------------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  min-height:44px;padding:14px 24px;border-radius:8px;
  transition:transform .35s var(--ease-out),background .35s var(--ease),
             border-color .35s var(--ease),color .35s var(--ease);
  text-shadow:none;
}
/* ink on gold, never white on gold */
.btn-primary{background:var(--accent);color:#1A1407}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent-muted);color:var(--accent);transform:translateY(-2px)}
.btn[hidden]{display:none}

/* the quiet text link, with a direction-aware arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  color:var(--accent);font-weight:500;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.tlink:hover{border-bottom-color:var(--accent-muted)}
.tlink::after{content:"\2192";font-family:var(--mono);transition:transform .3s var(--ease-out)}
.tlink:hover::after{transform:translateX(3px)}
html[dir="rtl"] .tlink::after{content:"\2190"}
html[dir="rtl"] .tlink:hover::after{transform:translateX(-3px)}

/* --- 5. The hero --------------------------------------------------------- */
/* The static hero is the DEFAULT: no JavaScript, a failed script, reduced
   motion, a metered link or a viewport too short for a caption all land here,
   and on its own it is a complete hero — the closing frame plus the overlay,
   which carries the definition, the product line, Start free and the skip link.
   html.scrub-on is added by next.js only once the scroll engine is running. */

.hero{position:relative;z-index:var(--z-page);height:auto}
.stage{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;align-items:end;
  background:var(--canvas-deep);
}
html.scrub-on .hero{height:calc(100vh + var(--hero-travel))}
html.scrub-on .stage{position:sticky;top:0;height:100vh;min-height:0;display:block}

.stage .poster{
  position:absolute;inset:0;
  background-image:var(--poster-static);background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease);
}
html.scrub-on .stage .poster{background-image:var(--poster-scrub)}

.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
html:not(.scrub-on) .stage video{display:none}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(var(--ink),0) 35%,rgba(var(--ink),.62) 100%);
}
.scrim-floor{
  position:absolute;left:0;right:0;bottom:0;height:38vh;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,12,16,0),rgba(11,12,16,.92));
}

.ring{
  position:absolute;bottom:38px;inset-inline-end:38px;width:34px;height:34px;
  color:var(--accent);opacity:.72;z-index:var(--z-stage-copy);
}
.ring circle{transition:stroke-dashoffset .18s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}
.cue{
  position:absolute;bottom:34px;inset-inline-end:34px;width:34px;height:34px;color:var(--accent);
  opacity:.6;z-index:var(--z-stage-copy);
}
html:not(.scrub-on) .ring,html:not(.scrub-on) .cue{display:none}
@media (max-height:560px){ .ring,.cue{display:none} }

/* ---- 5a. The lower third, over the first frame -------------------------- */
/* Readable before any scrolling, on a 390px phone, over live footage. It is a
   near-solid panel and not a blur: a backdrop-filter inherits whatever the
   frame under it happens to be, which is exactly the guarantee this needs to
   make. Measured on the panel: primary text 17.6:1, the product line 8.2:1. */

.lower{
  position:absolute;inset-inline:0;bottom:0;z-index:var(--z-stage-copy);
  background:rgba(7,8,11,.95);
  border-top:1px solid var(--panel-line);
  padding:clamp(20px,3.2vh,34px) var(--gut) clamp(22px,3.4vh,36px);
  transition:opacity .35s var(--ease);
}
.lower-in{max-width:var(--measure);margin:0 auto}
.lower .def{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.4vw,31px);line-height:1.24;letter-spacing:-.02em;
  max-width:26ch;text-wrap:balance;
}
.lower .prod{
  margin-top:.85em;color:var(--text-secondary);
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;max-width:62ch;text-wrap:pretty;
}
.lower .acts{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:clamp(16px,2.2vh,24px)}
.lower .jump{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;
  color:var(--text-primary);font-weight:500;font-size:15px;
  border-bottom:1px solid var(--line-strong);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.lower .jump:hover{border-bottom-color:var(--accent-muted);color:var(--accent)}
/* down, not sideways: the link moves the reader down the page, so the glyph
   needs no RTL mirror */
.lower .jump::after{content:"\2193";font-family:var(--mono)}

@media (max-width:520px){
  .lower .def{font-size:clamp(19px,5.4vw,25px);max-width:none}
  .lower .prod{font-size:14.5px;max-width:none}
  .lower .acts{gap:16px}
  .lower .acts .btn{flex:1 1 auto;justify-content:center}
}
/* a landscape phone has no room for three stacked blocks over a film */
@media (orientation:landscape) and (max-height:560px){
  .lower .prod{display:none}
  .lower{padding-block:14px 16px}
}

/* --- 6. Caption bands ---------------------------------------------------- */

.bands{position:relative;inset:auto;padding:22vh var(--gut) 30vh;pointer-events:none}
html.scrub-on .bands{position:absolute;inset:0;padding:0}

.band{
  position:relative;inset:auto;display:none;align-content:center;
  opacity:1;text-shadow:var(--tshadow);
}
html.scrub-on .band{
  position:absolute;inset:0;display:grid;
  /* the copy shares the header's left edge wherever the header is contained */
  padding-inline:clamp(var(--gut),calc((100vw - 1240px)/2 + 40px),200px);
  padding-bottom:34vh;                 /* clear of the lower third's footprint */
  opacity:0;
}

/* only the band on screen gets a compositor layer: its opacity and its scrim's
   are written every frame, and each write otherwise repainted a viewport-sized
   radial gradient on the main thread */
html.scrub-on .band:not([aria-hidden="true"]),
html.scrub-on .band:not([aria-hidden="true"])::before,
html.scrub-on .band:not([aria-hidden="true"])::after{will-change:opacity}

.band::before,.band::after{
  content:"";position:absolute;inset:0;width:auto;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band::before{
  background:radial-gradient(ellipse 88% 112% at 0% 50%,rgba(var(--ink),.86) 0%,rgba(var(--ink),.66) 31%,rgba(var(--ink),.26) 58%,rgba(var(--ink),0) 100%);
}
.band::after{
  background:radial-gradient(ellipse 88% 112% at 100% 50%,rgba(var(--ink),.86) 0%,rgba(var(--ink),.66) 31%,rgba(var(--ink),.26) 58%,rgba(var(--ink),0) 100%);
}
.band.left::after,.band.right::before{display:none}
/* left and right are logical text positions: mirror the physical gradient in
   RTL so its darkest point stays behind the copy */
html[dir="rtl"] .band.left::before{
  background:radial-gradient(ellipse 88% 112% at 100% 50%,rgba(var(--ink),.86) 0%,rgba(var(--ink),.66) 31%,rgba(var(--ink),.26) 58%,rgba(var(--ink),0) 100%);
}
html[dir="rtl"] .band.right::after{
  background:radial-gradient(ellipse 88% 112% at 0% 50%,rgba(var(--ink),.86) 0%,rgba(var(--ink),.66) 31%,rgba(var(--ink),.26) 58%,rgba(var(--ink),0) 100%);
}
.band.settle::after{display:none}
.band.settle{text-shadow:0 1px 2px rgba(var(--ink),.68),0 3px 10px rgba(var(--ink),.34)}
.band.settle::before{
  background:radial-gradient(ellipse 62% 20% at 50% 54%,rgba(var(--ink),.66) 0%,rgba(var(--ink),.42) 42%,rgba(var(--ink),0) 78%);
}

.band .col{
  /* z-index, not just position: ::before is the band's first child and ::after
     its last, so at z-index:auto the ::after scrim paints ON TOP of the text */
  position:relative;z-index:1;
  /* px, not ch: `ch` resolves against .col's own inherited 16px body face while
     the heading inside it is 60px, so a ch measure lands at two thirds of what
     it looks like it should */
  width:clamp(360px,44vw,880px);
}
.band.wide .col{width:clamp(420px,52vw,1040px)}
.band.long .col{width:clamp(400px,50vw,980px)}
.band.long h2{font-size:clamp(28px,3.7vw,66px)}
.band.left  .col{justify-self:start;text-align:start}
.band.right .col{justify-self:end;text-align:end}
.band.settle .col{justify-self:center;text-align:center;
  width:min(1000px,calc(100vw - 2 * var(--gut)))}

.band h2,.band .hero-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.2vw,78px);
  line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;
}
.band .sub{
  margin-top:.7em;color:var(--text-primary);
  font-size:clamp(18px,1.6vw,25px);line-height:1.5;text-wrap:pretty;
}
/* --k is written by the engine while scrubbing and pinned to 1 the moment the
   engine stands down, so this one rule serves both states */
.hero-ready .band .sub{
  --ks:clamp(0,(var(--k,0) - .5)*2.8,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*10px));
}
.band.settle .hero-title{font-size:clamp(30px,3.4vw,52px)}
.band.settle .sub{max-width:900px;margin:10px auto 0;font-size:clamp(17px,1.4vw,20px)}
html[lang="en"] .band.settle .hero-title{
  font-family:var(--body);font-weight:600;letter-spacing:-.025em;
}

/* --- 7. Text choreography ------------------------------------------------ */
/* transform and opacity only, scrubbed off each band's --k, fully reversible */

.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block}
.band:not([aria-hidden="true"]) .split .c{will-change:transform,opacity}

/* grid snap-align: horizontal only, ordered threshold */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:calc(.70 + .30*var(--kc));
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* lifted out of the pile: each piece starts displaced, tilted and set back,
   then settles into the line */
.e-lift .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:calc(.14 + .86*var(--kc));
  transform:
    translate(calc((1 - var(--kc)) * var(--jx,0px) * 1.9),
              calc((1 - var(--kc)) * var(--jy,0px) * 2.4))
    rotate(calc((1 - var(--kc)) * var(--jr,0deg) * 1.5))
    scale(calc(.82 + .18*var(--kc)));
}
/* word-punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:calc(.72 + .28*var(--kc));
  transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:0.24;--sd:0.16;--ss:2.6}
/* word-by-word rise */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:calc(.72 + .28*var(--kc));
  transform:translateY(calc((1 - var(--kc))*26px));
}
.hero-ready .band.settle .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*16px))}

/* the held breath: the rule fills under one word, then holds. Scoped to the
   BAND — .e-hold sits on the h2 while .fill lives in the .sub beside it. */
.has-breath .fill{position:relative;display:inline-block}
.has-breath .fill::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-.16em;height:2px;
  width:calc(100%*clamp(0,(var(--k,0) - .3)*2.4,1));
  background:var(--accent);
}
.band.breathing .fill::after{animation:breathe 3.2s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}

/* --- 8. Sections: the shared shell --------------------------------------- */

main{position:relative;z-index:var(--z-page);background:var(--canvas)}
.sec{position:relative;padding:clamp(84px,12vh,150px) var(--gut)}
.wrap{max-width:var(--measure);margin:0 auto}
.wrap-narrow{max-width:760px;margin:0 auto}

/* the rhythm is deliberately uneven: the case is the long one, start is short */
#case{padding-block:clamp(96px,15vh,180px)}
#start{padding-block:clamp(72px,10vh,120px)}
#close{padding-block:clamp(96px,16vh,190px)}

.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.02em;
  max-width:20ch;text-wrap:balance;
}
.lede{margin-top:1.1em;color:var(--text-secondary);
  font-size:clamp(16px,1.2vw,18.5px);max-width:62ch;text-wrap:pretty}

/* the section entrance. It enhances an already-visible default: .part is only
   hidden once next.js has proved its observer exists, so a script that never
   loads leaves every word on the page. */
.js-ready .rv .part{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out)}
.rv.in .part{opacity:1;transform:none}
.rv.in .part:nth-child(2){transition-delay:.07s}
.rv.in .part:nth-child(3){transition-delay:.14s}
.rv.in .part:nth-child(4){transition-delay:.21s}
.rv.in .part:nth-child(5){transition-delay:.28s}
.rv.done .part:nth-child(n){transition-delay:0s!important}

/* --- 9. The ledger ------------------------------------------------------- */
/* The one structural device on the page, used only where the content really is
   a record: a hairline rule with a mono fact in the leading position. Section 2
   is a chronology, so its rules carry clock times; section 3's carry a label. */

.ledger{margin-top:clamp(44px,7vh,84px);border-top:1px solid var(--panel-line)}
.ledger > li{border-bottom:1px solid var(--panel-line);padding-block:clamp(26px,4vh,44px)}
.led-head{
  display:flex;align-items:baseline;gap:clamp(14px,2.4vw,34px);
  flex-wrap:wrap;
}
.led-time{
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;
  color:var(--text-secondary);flex:none;
  font-variant-numeric:tabular-nums;
}
.led-say{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,1.9vw,25px);line-height:1.35;letter-spacing:-.012em;
  flex:1 1 22ch;min-width:0;text-wrap:pretty;
}
.led-shot{
  margin:clamp(20px,3vh,32px) 0 0;overflow:hidden;
  border:1px solid var(--panel-line);border-radius:12px;background:#08090b;
}
.led-shot picture{display:block}
.led-shot img{display:block;width:100%;height:auto}
/* the reply still is the tallest and the least dense: it does not need to run
   the full measure to be read */
.led-shot--narrow{max-width:820px}
/* Under 720px a <source> swaps in a crop with a different aspect ratio. The
   img element keeps the DESKTOP width/height attributes, so without this the
   browser reserves the desktop box and the layout jumps when the crop paints. */
@media (max-width:719px){
  .led-shot img{aspect-ratio:auto}
  .led-shot--narrow{max-width:none}
}

.case-film{margin-top:clamp(30px,4vh,44px)}
.case-learn{
  margin-top:clamp(34px,5vh,56px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,1.9vw,25px);line-height:1.45;letter-spacing:-.012em;
  max-width:40ch;text-wrap:pretty;
}

/* --- 10. Section 3: automatic, and yours --------------------------------- */

.split-lead{
  margin-top:1.2em;font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.1vw,28px);line-height:1.38;letter-spacing:-.015em;
  max-width:34ch;text-wrap:pretty;
}
/* No labels here on purpose. Every label would be a word the copy deck does not
   contain, and the deck is the only source of words on this page. The hairline
   does the separating that a label would have done. */
/* the measure lives on the list, not on each item: with it on the item, the
   top rule ran the full column while every rule under it stopped 230px short */
.facts{margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--panel-line);
  max-width:64ch}
.facts > li{
  border-bottom:1px solid var(--panel-line);
  padding-block:clamp(18px,2.6vh,26px);
  color:var(--text-secondary);font-size:clamp(15.5px,1.15vw,17px);line-height:1.62;
  text-wrap:pretty;
}

/* the status chip. Never gold: gold on this page means an action you can take,
   and "being built now" is not one. */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid rgba(124,147,174,.42);border-radius:99px;
  padding:4px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hold);white-space:nowrap;line-height:1.5;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hold);flex:none}
a.chip{transition:border-color .3s var(--ease),color .3s var(--ease)}
a.chip:hover{border-color:var(--hold);color:#9DB3CB}
/* Arabic has no uppercase and takes no tracking */
html[dir="rtl"] .chip{
  font-family:var(--body);letter-spacing:normal;text-transform:none;font-size:12.5px;
}

.autonomy{
  margin-top:clamp(30px,4.5vh,52px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 18px;
  border-inline-start:1px solid var(--line-strong);padding-inline-start:clamp(18px,2vw,26px);
}
.autonomy p{color:var(--text-secondary);font-size:clamp(15.5px,1.15vw,17px);max-width:56ch;
  text-wrap:pretty}

/* --- 11. Section 4: how to start ----------------------------------------- */

.start-body{margin-top:1.2em;font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.1vw,28px);line-height:1.4;letter-spacing:-.015em;max-width:32ch;
  text-wrap:pretty}
.start-trial{
  margin-top:clamp(26px,3.6vh,40px);padding-block:clamp(16px,2.2vh,22px);
  border-block:1px solid var(--panel-line);
  font-family:var(--mono);font-size:clamp(13.5px,1.05vw,15px);letter-spacing:.02em;
  color:var(--text-primary);
}
html[dir="rtl"] .start-trial{font-family:var(--body);letter-spacing:normal;font-size:16px}
.start-acts{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;
  margin-top:clamp(24px,3.4vh,36px)}

/* --- 12. Section 5: is it only support ----------------------------------- */

.more-lead{margin-top:1.2em;font-family:var(--display);font-weight:600;
  font-size:clamp(18px,1.9vw,25px);line-height:1.4;letter-spacing:-.015em;max-width:34ch}
.desk{
  margin-top:clamp(40px,6vh,72px);
  border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);
  padding-block:clamp(26px,4vh,40px);
}
.desk-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.desk-name{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,30px);
  line-height:1.25;letter-spacing:-.015em}
.desk-body{margin-top:1em;color:var(--text-secondary);font-size:clamp(15.5px,1.15vw,17px);
  max-width:58ch;text-wrap:pretty}
.more-roster{margin-top:clamp(28px,4vh,40px)}

/* --- 13. The tell-us form ------------------------------------------------ */

.tell{margin-top:clamp(22px,3vh,30px)}
.tell > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;
  min-height:44px;color:var(--accent);font-weight:600;font-size:15px;
  border:1px solid var(--accent-muted);border-radius:8px;padding:12px 20px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tell > summary::-webkit-details-marker{display:none}
.tell > summary:hover{border-color:var(--accent);color:var(--accent-hover)}
.tell[open] > summary{color:var(--text-secondary);border-color:var(--line-strong)}
.tell[open] > summary:hover{color:var(--text-primary);border-color:var(--line-strong)}
.tell > summary::after{content:"+";font-family:var(--mono);font-size:16px;line-height:1}
.tell[open] > summary::after{content:"\2212"}

.tell-form{margin-top:clamp(22px,3vh,30px);max-width:640px}
.tell-form h4.q{
  font-family:var(--body);font-weight:500;font-size:14.5px;line-height:1.5;
  color:var(--text-secondary);
}
.tell-form label.q{
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);
  line-height:1.4;letter-spacing:-.012em;display:block;margin-top:1.1em;
  color:var(--text-primary);text-wrap:pretty;
}
.tell-form .hint{margin-top:.6em;color:var(--text-dim);font-size:14.5px;text-wrap:pretty}
.tell-form textarea,.tell-form input[type="email"]{
  display:block;width:100%;margin-top:14px;
  font-family:var(--body);font-size:16px;line-height:1.6;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;
  padding:13px 15px;transition:border-color .3s var(--ease);
}
.tell-form textarea{min-height:132px;resize:vertical}
.tell-form textarea:focus,.tell-form input[type="email"]:focus{border-color:var(--accent-muted)}
.tell-form ::placeholder{color:var(--text-secondary);opacity:1}
.tell-form label{display:block;margin-top:22px;font-size:14.5px;color:var(--text-primary);font-weight:500}
.tell-form .sub-label{margin-top:.35em;color:var(--text-dim);font-size:13.5px;font-weight:400}
.tell-form .privacy{margin-top:22px;color:var(--text-dim);font-size:13px;line-height:1.62;
  max-width:58ch;text-wrap:pretty}
.tell-form .send-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.tell-form .cf{margin-top:20px;min-height:0}
.tell-form .err{
  margin-top:14px;color:#F0C877;font-size:14.5px;line-height:1.55;max-width:52ch;
  border-inline-start:1px solid var(--accent);padding-inline-start:14px;
}
.tell-form .err:empty{display:none}
.tell-done{border-inline-start:1px solid var(--ok);padding-inline-start:16px;max-width:52ch}
.tell-done .ok{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.8vw,22px);
  line-height:1.4}
.tell-done .code-note{margin-top:.9em;color:var(--text-secondary);font-size:14.5px;text-wrap:pretty}
.tell-done .code{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:16px;letter-spacing:.1em;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:6px;padding:10px 14px;
  color:var(--text-primary);word-break:break-all;
}
.tell-done .commit{margin-top:1.2em;color:var(--text-dim);font-size:13px;line-height:1.62;
  max-width:56ch;text-wrap:pretty}
html[dir="rtl"] .tell-done .code{direction:ltr;unicode-bidi:isolate}

/* --- 14. Section 6: objections and the close ----------------------------- */

.faq{margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--panel-line)}
.faq details{border-bottom:1px solid var(--panel-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.6vh,26px) 0;
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);line-height:1.35;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .mk{flex:none;width:14px;height:14px;position:relative;
  margin-inline-start:auto;align-self:center}
.faq summary .mk::before,.faq summary .mk::after{
  content:"";position:absolute;background:var(--text-dim);
  transition:transform .4s var(--ease),background .3s var(--ease)}
.faq summary:hover .mk::before,.faq summary:hover .mk::after,
.faq details[open] summary .mk::before{background:var(--accent)}
.faq summary .mk::before{left:0;right:0;top:6px;height:2px}
.faq summary .mk::after{top:0;bottom:0;left:6px;width:2px}
.faq details[open] summary .mk::after{transform:scaleY(0)}
.faq .ans{padding:0 0 clamp(22px,3vh,30px);color:var(--text-secondary);max-width:66ch;
  font-size:16.5px;line-height:1.62;text-wrap:pretty}

.day14{margin-top:clamp(30px,4vh,44px);color:var(--text-secondary);
  font-size:clamp(15.5px,1.15vw,17px);max-width:52ch}
.obj-acts{margin-top:clamp(26px,3.6vh,38px)}

.close-line{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4vw,58px);line-height:1.1;letter-spacing:-.025em;
  max-width:17ch;text-wrap:balance;
}

/* --- 15. Footer ---------------------------------------------------------- */

.foot{border-top:1px solid var(--panel-line);padding:clamp(48px,7vh,80px) var(--gut) 40px;
  position:relative;z-index:var(--z-page);background:var(--canvas-deep)}
.foot-grid{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);justify-content:space-between;
  max-width:var(--measure);margin:0 auto}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tagline{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.45;
  color:var(--text-secondary);max-width:28ch}
.operator{color:var(--text-dim);font-size:13.5px;max-width:34ch}
.foot nav{display:flex;flex-wrap:wrap;gap:2px 26px;max-width:760px}
.foot nav a{font-size:14.5px;color:var(--text-secondary);transition:color .3s var(--ease)}
.foot nav a:hover{color:var(--accent)}
.foot .fine{max-width:var(--measure);margin:clamp(34px,5vh,56px) auto 0;padding-top:26px;
  border-top:1px solid var(--panel-line);display:flex;flex-wrap:wrap;gap:14px 30px;
  justify-content:space-between;color:var(--text-dim);font-size:13px}

/* --- 16. The hero on a phone, and the hero at rest ----------------------- */
/* Two things live here, in this order on purpose:
   (b) the small-screen scrub — a phone runs the same film, but the copy sits
       full width above the lower third instead of in a side column, because a
       portrait frame has no room beside its subject;
   (a) the resting hero, written LAST so it wins every tie. */

@media (max-width:720px), (orientation:portrait) and (max-width:1024px){
  html.scrub-on .band{align-content:end;padding-bottom:44vh}
  html.scrub-on .band .col,
  html.scrub-on .band.left .col,
  html.scrub-on .band.right .col,
  html.scrub-on .band.wide .col,
  html.scrub-on .band.long .col{width:100%;justify-self:start;text-align:start}
  html.scrub-on .band h2,
  html.scrub-on .band.long h2{font-size:clamp(28px,8.2vw,44px);line-height:1.1}
  html.scrub-on .band .sub{font-size:clamp(16.5px,4.4vw,20px);margin-top:.6em}
  /* one bottom-up scrim instead of two side vignettes: on a portrait frame the
     copy sits over the foreground, not beside it */
  html.scrub-on .band::before,
  html.scrub-on .band::after,
  html[dir="rtl"].scrub-on .band.left::before,
  html[dir="rtl"].scrub-on .band.right::after,
  html.scrub-on .band.settle::before{
    background:linear-gradient(to top,rgba(var(--ink),.93) 0%,rgba(var(--ink),.78) 24%,rgba(var(--ink),.36) 54%,rgba(var(--ink),0) 86%);
  }
  html.scrub-on .band.settle{align-content:end}
  html.scrub-on .band.settle .col{width:100%;justify-self:center;text-align:center}
  html.scrub-on .band.settle .hero-title{font-size:clamp(28px,8.2vw,42px)}
  html.scrub-on .band.settle .sub{font-size:clamp(16.5px,4.4vw,19px);margin-top:.6em;max-width:none}
}

/* ---- (a) the resting hero ----------------------------------------------- */
/* No film: the closing frame, and the overlay carries every word and both
   actions. The caption bands have no film to caption, so they stand down. */
html:not(.scrub-on) .bands{display:none}
html:not(.scrub-on) .stage{min-height:100svh}
html:not(.scrub-on) .lower{opacity:1!important}

/* --- 17. RTL ------------------------------------------------------------- */

/* wide tracking and a Latin mono face are Latin devices: on Arabic they pull a
   cursive word apart and drop it to a fallback font */
html[dir="rtl"] .led-time{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  letter-spacing:.06em}
html[dir="rtl"] .band h2,
html[dir="rtl"] .band .hero-title,
html[dir="rtl"] .lower .def{
  line-height:1.25;letter-spacing:0;word-spacing:.035em;
  font-kerning:normal;font-synthesis:none;
  font-variant-ligatures:common-ligatures contextual;
  font-feature-settings:"kern" 1,"liga" 1,"rlig" 1,"calt" 1,"mark" 1,"mkmk" 1;
}
/* each animated unit keeps one complete Arabic word: isolating its bidi context
   preserves cursive joining and mark placement while the unit moves */
html[dir="rtl"] .band .split,
html[dir="rtl"] .band .w,
html[dir="rtl"] .band .c{direction:rtl;unicode-bidi:isolate;letter-spacing:normal}
html[dir="rtl"] .h2,
html[dir="rtl"] .led-say,
html[dir="rtl"] .split-lead,
html[dir="rtl"] .start-body,
html[dir="rtl"] .more-lead,
html[dir="rtl"] .desk-name,
html[dir="rtl"] .case-learn,
html[dir="rtl"] .close-line,
html[dir="rtl"] .tell-form .q{line-height:1.4;letter-spacing:0;text-wrap:pretty}
html[dir="rtl"] .band.settle .sub{text-wrap:balance}
/* Arabic prose keeps Arabic-Indic numerals; mono facts stay Latin digits */
html[dir="rtl"] .mono-latin{direction:ltr;unicode-bidi:isolate;font-family:var(--mono)}
bdi{unicode-bidi:isolate}

/* --- 18. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .rv .part{opacity:1;transform:none}
}