/* AppDial site — built on the ThreeUI "Kage" landing page stylesheet (ThreeUI Pro source),
   re-coloured to the AppDial palette with a light theme. */

/* ============================================================= tokens
   AppDial palette. Dark: the city at night (bone-white type, the D's white,
   brand orange). Light: the same page by day — ink type on a pale sky, the
   orange darkened wherever it is small text so it keeps its contrast. The
   scrims and text shadows are written against --scrim-rgb, so they turn
   from dark washes into light ones with the theme. */
:root{
  --ink:#0b0d10;          /* page black */
  --ink-2:#12151a;        /* raised black */
  --bone:#F8F6F1;         /* the white of the D */
  --bone-dim:#C9C7C1;
  --muted:#8E929A;
  --t1:#C6C8CC; --t2:#A3A7AE; --t3:#858A92;
  --bone-rgb:248,246,241;
  --scrim-rgb:7,9,12;
  --brand-rgb:250,116,30;
  --line:rgba(var(--bone-rgb),.13);
  --line-soft:rgba(var(--bone-rgb),.07);
  --vermilion:#FA741E;    /* brand orange (fills, bars, dots) */
  --ember:#FF8A3D;
  --accent-text:#FF8A3D;  /* orange as small text */
  --gold:#c9a24a;
  --field-bg:rgba(var(--scrim-rgb),.55);
  --on-bone:#0b0d10;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
html[data-theme="light"]{
  color-scheme:light;
  --ink:#E9ECEF;
  --ink-2:#F4F5F6;
  --bone:#17191D;
  --bone-dim:#3B3F46;
  --muted:#5E626B;
  --t1:#2A2D33; --t2:#454950; --t3:#5E626B;
  --bone-rgb:23,25,29;
  --scrim-rgb:236,239,242;
  --line:rgba(var(--bone-rgb),.16);
  --line-soft:rgba(var(--bone-rgb),.09);
  --vermilion:#FA741E;
  --ember:#E8620F;
  --accent-text:#B8500A;
  --field-bg:rgba(255,255,255,.72);
  --on-bone:#F4F5F6;
}
html[data-theme="dark"]{ color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Satoshi',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--vermilion); color:#fff; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================================================= layers */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; background:var(--ink);
}
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(var(--scrim-rgb),.55) 100%);
}
.page{ position:relative; z-index:10; }

/* ============================================================= type */
.eyebrow{
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); text-shadow:0 1px 16px rgba(var(--scrim-rgb),.9);
}
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button{
  font-family:'IBM Plex Sans Arabic','Satoshi',system-ui,sans-serif; }
html[lang="ar"] .display, html[lang="ar"] .eyebrow, html[lang="ar"] .nav-link, html[lang="ar"] .sec-head .k,
html[lang="ar"] .chip b, html[lang="ar"] .cta, html[lang="ar"] .arrowlink{ letter-spacing:0; text-transform:none; }
html[lang="ar"] .display{ line-height:1.25; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.005em; }
.display{
  text-transform:uppercase; line-height:1.055; letter-spacing:-.012em;
  font-weight:400; text-shadow:0 2px 34px rgba(var(--scrim-rgb),.72);
}
.h-hero{ font-size:clamp(26px,3.05vw,46px); }
.h-sec{ font-size:clamp(30px,4.0vw,60px); }
.body-lg{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:var(--t1); font-weight:300; text-shadow:0 1px 20px rgba(var(--scrim-rgb),.88); }
.body{ font-size:14px; line-height:1.68; color:var(--t2); font-weight:300; text-shadow:0 1px 18px rgba(var(--scrim-rgb),.85); }
.num{ font-size:clamp(26px,2.5vw,36px); font-weight:300; letter-spacing:-.02em; color:var(--bone); font-variant-numeric:tabular-nums; }

/* ============================================================= reveal */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,26px,0); }
[data-rv="fade"]{ transform:none; }
[data-rv].rv-in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
.mask-line{ display:block; overflow:hidden; }
.mask-line:not(.word-reveal) > span{ display:block; transform:translate3d(0,110%,0); }
.rv-in .mask-line:not(.word-reveal) > span, .mask-line:not(.word-reveal).rv-in > span{ transform:none; }
.mask-line:not(.word-reveal) > span{ transition:transform 1.05s var(--ease-out); }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word{
  display:inline-block; opacity:0; transform:translate3d(0,112%,0); will-change:transform,opacity;
  transition:transform .82s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
.word-reveal.rv-in .word{ opacity:1; transform:none; }

/* ============================================================= preloader */
#pre{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-in{ width:min(420px,74vw); text-align:center; }
.pre-mark{ margin:0 auto 26px; width:44px; height:44px; opacity:.9; }
.pre-mark svg{ width:100%; height:100%; display:block; }
.pre-jp{ font-size:12px; letter-spacing:.5em; color:var(--bone-dim); margin-bottom:20px; }
.pre-bar{ position:relative; height:1px; background:rgba(var(--bone-rgb),.14); overflow:hidden; }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--bone); transition:right .35s linear; }
.pre-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pre-meta b{ font-weight:500; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

/* ============================================================= nav */
.nav{
  /* Width comes from --vw, not from right:0. A fixed element resolves its
     inset against the initial containing block, and the page's own horizontal
     overflow makes that block wider than the screen — 437 against a 390 phone,
     860 against a 768 tablet — which carried the burger off the right edge.
     --vw is the layout viewport, written on every resize. */
  position:fixed; top:0; left:0; width:var(--vw, 100%); height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease);
}
/* The sticky wash sits on its own layer rather than on the bar. A
   backdrop-filter promotes its element to the containing block for any
   position:fixed descendant, and the bar holds the mobile menu sheet — put the
   blur here and the sheet was measured against an 84px bar instead of the
   frame, for as long as the blur took to fade. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(var(--scrim-rgb),.62);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1; }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ width:34px; height:34px; display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:12px; font-weight:500; letter-spacing:.26em; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.34em; color:var(--muted); }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s; }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--bone); letter-spacing:.32em; }
.nav-link:hover span{ transform:translate3d(0,-100%,0); }
.nav-link:hover .alt{ transform:none; }
.nav-link.on{ color:var(--bone); }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--vermilion); }
.nav-burger{ margin-left:clamp(18px,2.6vw,42px); width:26px; height:16px; position:relative; flex:0 0 auto; }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:width .45s var(--ease-out), transform .45s var(--ease-out); }
.nav-burger i:nth-child(1){ top:4px; width:26px; }
.nav-burger i:nth-child(2){ top:11px; width:17px; }
.nav-burger:hover i:nth-child(2){ width:26px; }
.nav-burger:hover i:nth-child(1){ width:17px; }

/* ============================================================= hero */
.hero{ position:relative; min-height:100svh; padding:0 var(--pad); display:flex; flex-direction:column; }
/* the street behind the headline is busy (houses, lamps), so the text column
   gets its own soft shade from the side it sits on, as well as the top one */
.hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none;
  background:linear-gradient(rgba(var(--scrim-rgb),.72), rgba(var(--scrim-rgb),.34) 21%, transparent 46%),
             linear-gradient(90deg, rgba(var(--scrim-rgb),.80), rgba(var(--scrim-rgb),.52) 28%, rgba(var(--scrim-rgb),0) 50%); }
html[dir="rtl"] .hero::before{
  background:linear-gradient(rgba(var(--scrim-rgb),.72), rgba(var(--scrim-rgb),.34) 21%, transparent 46%),
             linear-gradient(270deg, rgba(var(--scrim-rgb),.80), rgba(var(--scrim-rgb),.52) 28%, rgba(var(--scrim-rgb),0) 50%); }
/* by day the houses are white walls and dark roofs, so the shade has to be denser to keep the type clean */
html[data-theme="light"] .hero::before{
  background:linear-gradient(rgba(var(--scrim-rgb),.85), rgba(var(--scrim-rgb),.5) 22%, transparent 46%),
             linear-gradient(90deg, rgba(var(--scrim-rgb),.95), rgba(var(--scrim-rgb),.82) 32%, rgba(var(--scrim-rgb),0) 56%); }
html[data-theme="light"][dir="rtl"] .hero::before{
  background:linear-gradient(rgba(var(--scrim-rgb),.85), rgba(var(--scrim-rgb),.5) 22%, transparent 46%),
             linear-gradient(270deg, rgba(var(--scrim-rgb),.95), rgba(var(--scrim-rgb),.82) 32%, rgba(var(--scrim-rgb),0) 56%); }
@media (max-width:820px){
  html[data-theme="light"] .hero::before, html[data-theme="light"][dir="rtl"] .hero::before{
    background:linear-gradient(rgba(var(--scrim-rgb),.94), rgba(var(--scrim-rgb),.8) 32%, rgba(var(--scrim-rgb),.3) 52%, transparent 64%); }
  .hero::before, html[dir="rtl"] .hero::before{
    background:linear-gradient(rgba(var(--scrim-rgb),.80), rgba(var(--scrim-rgb),.55) 30%, rgba(var(--scrim-rgb),.15) 50%, transparent 62%); }
}
.hero-top{ padding-top:calc(var(--nav-h) + clamp(12px,2.6vh,34px)); max-width:min(560px,46vw); position:relative; z-index:2; }
.hero-top .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.hero-top .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion); box-shadow:0 0 10px var(--vermilion); }
.hero h1{ margin-bottom:18px; }
.hero-sub{ max-width:322px; text-shadow:0 1px 26px rgba(var(--scrim-rgb),.95); }
.hero-spacer{ flex:1 1 auto; min-height:clamp(140px,26vh,300px); }
.hero-foot{ padding-bottom:clamp(22px,4.2vh,42px); position:relative; z-index:2; }
.hero-cue{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:14px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero-cue .track i{ position:absolute; inset:0; background:var(--bone); transform-origin:left;
  animation:cue 2.8s var(--ease-io) infinite; }
.chapters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px);
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.chip{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.chip .num{ line-height:1; flex:0 0 auto; transition:color .4s, transform .5s var(--ease-out); }
.chip .tx{ min-width:0; padding-top:3px; }
.chip b{ display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:6px; transition:color .4s;
  text-shadow:0 1px 16px rgba(var(--scrim-rgb),.9); }
.chip p{ margin:0; font-size:11px; line-height:1.5; color:var(--t3); max-width:22ch;
  transition:color .4s; }
.chip:hover .num{ color:var(--accent-text); transform:translate3d(0,-2px,0); }
.chip:hover b{ color:var(--bone); }
.chip:hover p{ color:var(--bone-dim); }
.chip.on .num{ color:var(--accent-text); }
.chip.on b{ color:var(--bone); }
/* the floating window: a generated Sanmon still carried over the hero */
.peek{
  position:absolute; z-index:2; right:clamp(78px,11vw,190px); top:clamp(132px,25vh,238px);
  width:clamp(150px,16vw,262px); display:block;
  transition:transform .8s var(--ease-out);
}
.peek-fr{ display:block; aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb),.04) 24%, rgba(var(--scrim-rgb),.48) 100%),
    url('assets/plates/live.svg') center / cover no-repeat;
  outline:1px solid rgba(var(--bone-rgb),.16); outline-offset:-1px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.9); transition:outline-color .5s; }
.peek:hover{ transform:translate3d(0,-5px,0); }
.peek:hover .peek-fr{ outline-color:rgba(var(--bone-rgb),.42); }
.peek-play{ position:absolute; top:0; right:0; left:0; bottom:auto; aspect-ratio:16/10;
  display:grid; place-items:center; pointer-events:none; }
.peek-play svg{ width:clamp(30px,3.2vw,46px); height:auto; filter:drop-shadow(0 2px 12px rgba(0,0,0,.7));
  transition:transform .55s var(--ease-out); }
.peek:hover .peek-play svg{ transform:scale(1.14); }
.peek-cap{ display:flex; align-items:baseline; gap:9px; margin-top:9px; }
.peek-cap b{ font-size:11px; font-weight:400; letter-spacing:.24em; color:var(--bone-dim); }
.peek-cap i{ font-style:normal; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .peek{ display:none; } }

.hero-side{
  position:absolute; z-index:2; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.hero-side .v{ writing-mode:vertical-rl; font-size:13px; letter-spacing:.62em; color:rgba(var(--bone-rgb),.5); }
@keyframes cue{ 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* ============================================================= sections */
.sec{ position:relative; padding:clamp(88px,15vh,190px) var(--pad); }
.sec::before{
  content:''; position:absolute; inset:-22% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 62% at 30% 50%, rgba(var(--scrim-rgb),.88), rgba(var(--scrim-rgb),.62) 42%, rgba(var(--scrim-rgb),.18) 74%, rgba(var(--scrim-rgb),0));
  /* A chapter's scrim is there to hold its own copy off the sanctuary, and it
     is inset -22% so its edges never land as a seam. That overshoot, plus the
     section's top padding, means it was washing most of a screen of scene
     above the chapter — the frame stayed masked long after the hero had let
     go of it. The mask takes the top of it back off: nothing at the very top,
     full strength by the time the chapter's own first line arrives. */
  -webkit-mask-image:linear-gradient(transparent, #000 44%);
          mask-image:linear-gradient(transparent, #000 44%);
}
#pathways::before{ background:radial-gradient(108% 64% at 50% 50%, rgba(var(--scrim-rgb),.70), rgba(var(--scrim-rgb),.44) 50%, rgba(var(--scrim-rgb),0)); }
#eternity::before{ background:radial-gradient(82% 58% at 50% 46%, rgba(var(--scrim-rgb),.26), rgba(var(--scrim-rgb),.66) 56%, rgba(var(--scrim-rgb),.90) 82%, rgba(var(--scrim-rgb),0)); }
.foot::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(var(--scrim-rgb),.55), rgba(var(--scrim-rgb),.94) 40%, rgba(var(--scrim-rgb),.98));
}
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
.sec-head .k{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.sec-head .k b{ color:var(--accent-text); font-weight:500; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }

/* — chapter I: the gate */
.gate-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,5vw,90px); align-items:start; }
.gate-grid h2{ max-width:11ch; }
.gate-copy{ padding-top:6px; }
.gate-copy .lead{ font-size:clamp(15px,1.16vw,19px); line-height:1.66; color:var(--t1); text-shadow:0 1px 20px rgba(var(--scrim-rgb),.9); }
.gate-copy .lead + p{ margin-top:20px; }
.arrowlink{ display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); }
.arrowlink .ar{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), border-color .45s, transform .5s var(--ease-out); }
.arrowlink .ar svg{ width:13px; height:13px; transition:transform .5s var(--ease-out); }
.arrowlink:hover .ar{ background:var(--bone); border-color:var(--bone); }
.arrowlink:hover .ar svg{ transform:translate3d(2px,-2px,0); }
.arrowlink:hover .ar svg path{ stroke:var(--on-bone); }
.gate-stats{ display:flex; gap:clamp(24px,4vw,62px); margin-top:clamp(46px,8vh,96px); border-top:1px solid var(--line-soft); padding-top:24px; }
.gate-stats div b{ display:block; font-size:clamp(22px,2.1vw,32px); font-weight:300; letter-spacing:-.02em; }
.gate-stats div span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* — chapter II: pathways cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); align-items:start; }
.card{ position:relative; cursor:pointer; }
.card:nth-child(1){ transform:translateY(0); }
.card:nth-child(2){ transform:translateY(clamp(26px,5vw,74px)); }
.card:nth-child(3){ transform:translateY(clamp(52px,10vw,148px)); }
/* the frame is a hole punched in the page — the scene is rendered straight
   into this rectangle with a scissored viewport, so each card is a live
   window onto a different corner of the sanctuary */
.card-fr{
  position:relative; aspect-ratio:4/5; background:transparent;
  outline:1px solid var(--line-soft); outline-offset:-1px;
  transition:outline-color .5s var(--ease);
}
.card:hover .card-fr{ outline-color:rgba(var(--bone-rgb),.30); }
.card:nth-child(1) .card-fr{
  background:
    linear-gradient(180deg,rgba(var(--scrim-rgb),.04) 36%,rgba(var(--scrim-rgb),.72) 100%),
    url('assets/plates/driver.svg') center / cover no-repeat;
}
.card:nth-child(2) .card-fr{
  background:
    linear-gradient(180deg,rgba(var(--scrim-rgb),.06) 36%,rgba(var(--scrim-rgb),.74) 100%),
    url('assets/plates/customer.svg') center / cover no-repeat;
}
.card:nth-child(3) .card-fr{
  background:
    linear-gradient(180deg,rgba(var(--scrim-rgb),.05) 36%,rgba(var(--scrim-rgb),.74) 100%),
    url('assets/plates/ops.svg') center / cover no-repeat;
}
.card-fr::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 46%, rgba(var(--scrim-rgb),.80)); pointer-events:none; }
/* The fabric overdraws its card by CL_BLEED on every side so the billow and
   the contact shadow have somewhere to go, so the frame cannot clip it. The
   card's outline is not here at all: it is drawn in the cloth shader, where it
   can follow the folds instead of tracing the flat box behind them. */
.cloth-out{ position:absolute; pointer-events:none; z-index:1; }
.on-cloth{ background:none !important; outline:0 !important; overflow:visible; }
.on-cloth::after{ display:none; }

/* ------------------------------------------------- the lights in the stills
   The three plates each have one source in them — two blood moons and a lit
   stone lantern — and they are the only warm thing in an otherwise cold set of
   images. A glow laid over each one, screened so it adds light rather than
   painting over it, is enough to make a flat still look like it is burning.

   Two tracks per light, at durations that do not divide into each other: the
   wrapper swells, the gradient inside it pulses. One track on its own reads as
   a loop within a couple of seconds; two beating against each other do not
   come back around inside the time anyone looks at a card.

   The moon and the lantern are not the same event. A flame gutters — short,
   irregular, deep — so the lantern's track is written unevenly by hand. A moon
   only breathes through moving air, so the moons get a slow, shallow swell and
   nothing more. Giving them both a flicker is what makes this kind of thing
   look like a novelty; the difference is the whole effect. */
.card-fr{ isolation:isolate; }        /* keep the screen blend inside the card */
.glow{
  position:absolute; z-index:1; pointer-events:none;
  left:var(--gx); top:var(--gy); width:calc(var(--gr) * 2); aspect-ratio:1;
  translate:-50% -50%;                /* leaves transform free for the swell */
  mix-blend-mode:screen;
  animation:glow-swell var(--gt2) var(--ease-io) infinite alternate;
}
.glow::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side, var(--gc1), var(--gc2) 40%, transparent 72%);
  animation:glow-pulse var(--gt) var(--ease-io) infinite;
}
@keyframes glow-swell{ from{ transform:scale(.93); } to{ transform:scale(1.07); } }
@keyframes glow-pulse{ from{ opacity:.78; } 50%{ opacity:1; } to{ opacity:.78; } }
/* a flame does not breathe, it gutters */
@keyframes glow-flame{
  0%{ opacity:.74 }   6%{ opacity:.97 }  12%{ opacity:.63 }  19%{ opacity:.90 }
  27%{ opacity:.55 }  34%{ opacity:.94 } 42%{ opacity:.71 }  51%{ opacity:1 }
  58%{ opacity:.60 }  66%{ opacity:.88 } 74%{ opacity:.67 }  83%{ opacity:.96 }
  91%{ opacity:.72 } 100%{ opacity:.74 }
}
.glow--flame::before{ animation-name:glow-flame; }
.glow--flame{ animation-duration:var(--gt2); }
@media (prefers-reduced-motion:reduce){
  .glow, .glow::before{ animation:none; }
}
.no-webgl .card-fr{ background:linear-gradient(150deg,#101a1d,#0a0d10 62%,#1a0c0b); }
/* If WebGL will not start, the page stays a page: the scene simply becomes a
   still, and the wordmark moves from the 3-D layer into the document. */
.word-fb{ display:none; }
.no-webgl #gl, .no-webgl .peek-play{ display:none; }
/* fixed, or the gradient is measured against a 6000-pixel body box and the
   moon ends up somewhere around the curriculum table */
.no-webgl body{ background:
  radial-gradient(11vw 11vw at 73% 17%, rgba(232,52,28,.95), rgba(158,20,16,.62) 44%, rgba(96,12,12,.20) 64%, transparent 72%),
  radial-gradient(38vw 32vw at 50% 46%, rgba(228,104,24,.40), rgba(122,42,10,.18) 54%, transparent 74%),
  radial-gradient(120% 80% at 50% 0%, rgba(120,150,158,.16), transparent 60%), var(--ink);
  background-attachment:fixed; }
.no-webgl .peek-fr{ background:linear-gradient(160deg,#162326,#0b1013 55%,#241010); }
.no-webgl .word-fb{
  display:block; position:absolute; left:0; right:0; bottom:16%; z-index:1;
  font-family:'Clash Display','Satoshi',sans-serif; font-weight:600; font-size:17vw; line-height:.78;
  letter-spacing:.01em; text-align:center; pointer-events:none; color:var(--bone);
}
/* The live hero has no foot scrim, but the fallback still needs one: there it
   stands on a bright CSS sky rather than a night scene, and the chips and the
   wordmark have nothing else holding them off it. So this carries the whole
   declaration now rather than re-colouring one it used to inherit. */
.no-webgl .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; background:linear-gradient(transparent, rgba(var(--scrim-rgb),.72) 52%, rgba(var(--scrim-rgb),.96)); }
.no-webgl .sec::before, .no-webgl #pathways::before, .no-webgl #eternity::before{ background:none; }
.card-lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.card-lab b{ font-size:clamp(13px,1.15vw,17px); font-weight:400; letter-spacing:.02em; text-transform:uppercase; }
.card-lab .jp{ font-size:11px; letter-spacing:.3em; color:rgba(var(--bone-rgb),.62); }
.card-ar{ position:absolute; top:14px; right:14px; z-index:2; width:26px; height:26px;
  opacity:0; transform:translate3d(-4px,4px,0); transition:.5s var(--ease-out); }
.card:hover .card-ar{ opacity:1; transform:none; }
.card-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* — chapter III: curriculum */
.cur-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,5vw,90px); align-items:end; margin-bottom:clamp(34px,6vh,72px); }
.cur-head h2{ max-width:13ch; }
.cur{ border-top:1px solid var(--line-soft); }
.les{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.25fr) 86px;
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:padding .5s var(--ease-out);
}
.les::before{ content:''; position:absolute; left:calc(var(--pad) * -1); right:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(var(--brand-rgb),.09), transparent 46%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.les:hover::before{ opacity:1; }
.les:hover{ padding-left:clamp(8px,1.2vw,18px); }
.les .k{ font-size:11px; letter-spacing:.16em; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .4s; }
.les:hover .k{ color:var(--accent-text); }
.les h3{ font-size:clamp(16px,1.5vw,23px); font-weight:400; letter-spacing:-.005em; }
.les h3 em{ font-style:normal; font-size:.62em; color:var(--muted); margin-inline-start:12px; letter-spacing:.18em; text-transform:uppercase; }
.les p{ margin:0; font-size:13px; line-height:1.6; color:var(--t2); text-shadow:0 1px 16px rgba(var(--scrim-rgb),.92); }
.les .t{ text-align:right; font-size:11px; letter-spacing:.14em; color:var(--t2); font-variant-numeric:tabular-nums; text-shadow:0 1px 16px rgba(var(--scrim-rgb),.92); }
.les .bar{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--vermilion);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out); }
.les:hover .bar{ transform:scaleX(1); }

/* — chapter IV: eternity */
.fin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.fin > .eyebrow{ margin-bottom:26px; }
.fin > h2{ font-size:clamp(38px,7.4vw,124px); line-height:.94; letter-spacing:-.03em; text-transform:uppercase; }
.fin > p{ max-width:44ch; margin:26px auto 0; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:14px; margin-top:44px;
  padding:17px 30px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s;
}
.cta i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform .62s var(--ease-out); z-index:-1; }
.cta span,.cta svg{ position:relative; z-index:1; }
.cta:hover{ color:var(--on-bone); border-color:var(--bone); }
.cta:hover i{ transform:none; }
.cta:hover svg path{ stroke:var(--on-bone); }

/* — footer */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px);
  border-top:1px solid var(--line-soft); }
.foot-grid,.foot-base{ position:relative; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr)); gap:clamp(22px,4vw,60px); }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13px; color:var(--t2); transition:color .35s; }
.foot li a:hover{ color:var(--bone); }
.foot-brand p{ margin:16px 0 0; max-width:34ch; font-size:13px; color:var(--t3); }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================= progress rail */
.rail{ position:fixed; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail button{ width:22px; height:10px; display:grid; place-items:center; }
.rail i{ display:block; width:14px; height:1px; background:rgba(var(--bone-rgb),.26); transition:.5s var(--ease-out); }
.rail button.on i{ width:22px; background:var(--bone); }
.rail button:hover i{ width:22px; background:var(--bone-dim); }

/* ============================================================= cursor */
.cur-dot{ position:fixed; z-index:80; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(var(--bone-rgb),.42); border-radius:50%; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s, border-color .35s, opacity .3s; opacity:0; }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(var(--bone-rgb),.07); border-color:rgba(var(--bone-rgb),.6); }
@media (hover:hover) and (pointer:fine){ .cur-dot{ opacity:1 } }

/* ============================================================= responsive */
@media (max-width:1080px){
  .hero-top{ max-width:none; }
  .gate-grid{ grid-template-columns:1fr; gap:26px; }
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .les{ grid-template-columns:44px minmax(0,1fr) 74px; }
  .les p{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(var(--scrim-rgb),.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .65s var(--ease-out), opacity .4s, visibility 0s linear .65s;
  }
  .nav.menu-open .nav-links{
    transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .nav-links .nav-link{
    width:100%; height:auto; padding:17px 0; overflow:visible; border-bottom:1px solid var(--line-soft);
    font-size:17px; line-height:1.2;
  }
  .nav-links .nav-link span{ height:auto; line-height:1.2; transform:none !important; }
  .nav-links .nav-link .alt{ position:static; margin-top:6px; font-size:10px; color:var(--muted); }
  /* The links panel leaves the flow to become the slide-in sheet, taking its
     margin-left:auto with it, so without this the burger sits tucked against
     the wordmark instead of out at the edge where a thumb reaches. */
  /* A transform *or* a backdrop-filter makes an element the containing block
     for its position:fixed descendants. This panel is a child of the bar, so
     once the bar went sticky and started hiding on scroll the open panel was
     measured against the bar instead of the viewport: 146px tall, dragged off
     the top, with the page showing through beside it. Neither may apply while
     the sheet is open — it covers the frame, so there is nothing left to blur. */
  /* A hide transform still promotes the bar, so drop it the instant the sheet
     opens. Without transition:none it eases out over .55s and the sheet spends
     that whole time measured against the bar. */
  .nav.menu-open{ transform:none; transition:none; }
  .nav-burger{ margin-left:auto; }
  .nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
  .nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  html.nav-open,html.nav-open body{ overflow:hidden; }
  .rail{ display:none; }
  .hero-side{ display:none; }
  .chapters{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .chip p{ font-size:10px; }
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card:nth-child(2),.card:nth-child(3){ transform:none; }
  .gate-stats{ flex-wrap:wrap; gap:20px 34px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cue{ display:none; }
}
/* ================================================== section layouts (B set)
   The six sections ship their B compositions — hero split, story spread,
   gardens mosaic, chapter atlas, gallery closing, manifesto footer. They are
   keyed off stable body data attributes so the rules above keep reading as
   the plain grammar of the page and every B override stays in one block.   */

/* — hero B · split: an editorial reading column holds the left, a compact
     numbered index sits under it, and the live scene window becomes a low,
     right-hand counterweight. The scene itself remains untouched.

     The column carried a 90° scrim over the left three-quarters of the frame.
     It has gone: the sanctuary is already near-black behind the reading, and
     measured against it the copy loses almost nothing without it — the
     headline 15.98:1 to 15.47:1, the standfirst 7.94:1 to 7.75:1, the index
     16.11:1 to 16.08:1, all far past what either needs. It was darkening the
     approach, the gate and the lower steps to buy half a point of contrast
     nobody was short of. */
body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:min(590px,46vw); }
body[data-layout-hero="b"] .hero-foot{ width:min(480px,40vw); margin-left:0; }
body[data-layout-hero="b"] .hero-cue{ justify-content:flex-start; }
body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body[data-layout-hero="b"] .chip{ position:relative; flex-direction:column; gap:0; }
body[data-layout-hero="b"] .chip .num{ font-size:clamp(29px,3.1vw,48px); }
body[data-layout-hero="b"] .chip .tx{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}
/* the live window drops into the open right corner, away from the reading
   column and the oversized 3-D wordmark */
body[data-layout-hero="b"] .peek{
  left:auto; right:var(--pad); top:auto; bottom:clamp(38px,7vh,96px);
}

/* The Japanese title reads down the right edge, hung under the navigation —
   the one mark on that side of the frame now that the romanization has gone. */
body[data-layout-hero="b"] .hero-side{
  left:auto; right:var(--pad); top:calc(var(--nav-h) + clamp(14px,3vh,42px));
  bottom:auto; transform:none; display:block;
}
body[data-layout-hero="b"] .hero-side .v{
  position:static; transform:none;
  font-size:clamp(13px,1.1vw,18px); letter-spacing:.34em; color:rgba(var(--bone-rgb),.62);
}

/* — story B · spread: the title crosses two columns, the reading column is
     held to the right, and the figures become a ruled band. */
body[data-layout-story="b"] .gate-grid{
  grid-template-columns:minmax(120px,.38fr) minmax(0,1.08fr) minmax(280px,.88fr);
  gap:clamp(20px,3vw,54px);
}
body[data-layout-story="b"] .gate-grid h2{ grid-column:1 / 3; max-width:13ch; }
body[data-layout-story="b"] .gate-copy{ grid-column:3; }
body[data-layout-story="b"] .gate-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
body[data-layout-story="b"] .gate-stats div{ min-height:108px; padding:18px; border-left:1px solid var(--line-soft); }
body[data-layout-story="b"] .gate-stats div:last-child{ border-right:1px solid var(--line-soft); }

/* — gardens B · mosaic: one immersive live window beside two stacked ones.
     The cards stretch to their rows and the frames flex, so the two small
     viewports meet the tall one exactly instead of drifting apart. */
body[data-layout-gallery="b"] .cards{
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px; align-items:stretch;
}
body[data-layout-gallery="b"] .card{ transform:none; display:flex; flex-direction:column; min-height:0; }
body[data-layout-gallery="b"] .card-fr{ aspect-ratio:auto; flex:1 1 auto; min-height:0; }
body[data-layout-gallery="b"] .card:first-child{ grid-row:1 / 3; }
body[data-layout-gallery="b"] .card:first-child .card-fr{ flex:0 0 auto; height:min(72vh,760px); }
body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ min-height:200px; }

/* — chapters B · atlas: a two-then-three plate grid instead of a syllabus.
     Number and title sit at the top of each plate, the running time drops to
     the foot of it. */
body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:minmax(0,.72fr) minmax(0,1.2fr); align-items:start; }
body[data-layout-curriculum="b"] .cur{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
body[data-layout-curriculum="b"] .les{
  display:flex; flex-direction:column; align-items:flex-start; min-height:250px;
  padding:24px; gap:14px; border:0; background:rgba(var(--scrim-rgb),.84); overflow:hidden;
}
body[data-layout-curriculum="b"] .les:nth-child(-n+2){ grid-column:span 3; }
body[data-layout-curriculum="b"] .les:nth-child(n+3){ grid-column:span 2; }
body[data-layout-curriculum="b"] .les::before{ left:0; background:linear-gradient(145deg,rgba(var(--brand-rgb),.13),transparent 58%); }
body[data-layout-curriculum="b"] .les:hover{ padding-left:32px; }
body[data-layout-curriculum="b"] .les h3{ font-size:clamp(20px,2vw,30px); }
body[data-layout-curriculum="b"] .les p{ display:block; max-width:34ch; }
body[data-layout-curriculum="b"] .les .t{ text-align:left; margin-top:auto; }

/* — closing B · gallery: the title hangs vertically on the right while the
     chapter mark, the last line and the call to action run down the left. */
body[data-layout-closing="b"] .fin{
  display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); grid-template-rows:auto auto auto;
  align-content:center; align-items:end; text-align:left;
  column-gap:clamp(40px,7vw,120px); row-gap:clamp(16px,2.6vh,30px);
}
body[data-layout-closing="b"] .fin > .eyebrow{ grid-column:1; grid-row:1; margin:0; }
body[data-layout-closing="b"] .fin > h2{
  grid-column:2; grid-row:1 / 4; align-self:center; justify-self:end;
  font-size:clamp(52px,6vw,82px); writing-mode:vertical-rl;
}
body[data-layout-closing="b"] .fin > p{ grid-column:1; grid-row:2; margin:0; }
body[data-layout-closing="b"] .fin > .cta{ grid-column:1; grid-row:3; justify-self:start; margin-top:4px; }

/* — footer B · manifesto: the statement leads, the navigation becomes a
     compact ruled index beneath it. */
body[data-layout-footer="b"] .foot-grid{ grid-template-columns:repeat(3,1fr); }
body[data-layout-footer="b"] .foot-brand{
  grid-column:1 / -1; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center;
  padding-bottom:34px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-brand svg{ width:54px; height:54px; }
body[data-layout-footer="b"] .foot-brand p{
  margin:0; max-width:48ch; font-size:clamp(18px,2vw,30px); line-height:1.35; color:var(--bone-dim);
}
body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){
  padding-left:clamp(18px,2.2vw,34px); border-left:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-base{ display:grid; grid-template-columns:1fr auto 1fr; }
body[data-layout-footer="b"] .foot-base span:last-child{ text-align:right; }

/* ================================================= foreground layers (KAGE)
   The transparent PNG library in secret-pathways-assets/foreground/png is
   introduced as a near plane. Each section carries one .fg box holding a few
   cut-outs that stand between the live sanctuary and the reading: the scene
   itself is untouched, this is only the garden that grows in front of it.

   The cut-outs are the nearest plane on the page, so they sit in front of the
   reading rather than behind it. Inside .page — itself z-index:10, above the
   #gl canvas at 0:
     -1   .sec::before / .foot::before   the section scrims
      2   headings, copy, links, cards, stats, CTA
      3   .fg                            the cut-outs: aria-hidden, inert
   .page caps everything it holds at tier 10, which is under the fixed
   furniture (rail 45, nav 50), so the chapter's live near plane is moved out
   to #fg-sky at 52 — over the layout and the navigation both, and still under
   the passes that treat the frame as one image: vignette 55, grain 60,
   cursor 80.

   A stage is only ever shown while its own chapter holds the viewport, and
   only in the fixed bottom-anchored form. Parked back in its section it is
   inert and invisible: a near plane that scrolls with the page reads as
   wallpaper printed on the document rather than as something standing between
   the camera and the scene, so there is no second, section-owned appearance.
   Every piece is therefore placed from the bottom edge of that fixed plane —
   left/right and bottom, never top.

   The entrance is driven by the chapter, not by the scroll observer: each
   [data-fg-in] piece rises from the edge it is anchored to when its stage goes
   live, one every 90ms in DOM order, and the reduced-motion block at the foot
   of this sheet flattens it. The wrapper owns the entrance and animates
   opacity and transform only; the artwork itself remains at full opacity, with
   the reading protected by the layer order rather than a translucent
   foreground treatment. */
.fg{
  position:absolute; inset:0; z-index:3;
  overflow:visible; pointer-events:none;
}
/* Nothing inside a section may widen the document. The foreground cut-outs and
   the cloth canvases are placed to hang past the frame edges on purpose, and as
   ordinary in-flow descendants they dragged the page box out with them — 194px
   past a 1440 frame. Clip the horizontal axis at the section, which is exactly
   viewport-wide, so each overhang is cut precisely where it leaves the screen.
   `clip` pairs with `visible` without coercing it, so no scroll container is
   created and every bit of vertical bleed survives. */
.sec, .foot{ overflow-x:clip; overflow-y:visible; }
/* the host for whichever chapter currently owns the near plane — no box of
   its own, since every stage it holds is position:fixed to the viewport */
#fg-sky{
  position:fixed; left:0; top:0; width:0; height:0;
  z-index:52; pointer-events:none;
}
.sec > *:not(.fg), .foot > *:not(.fg){ position:relative; z-index:2; }
.fg-el{ position:absolute; display:block; opacity:0; }
.fg-el > img{
  width:100%; height:auto;   /* the width/height attrs hold the box before the lazy image lands */
  opacity:1;
  filter:saturate(.95) brightness(.92);
}
html[data-theme="light"] .fg-el > img{ filter:none; }
.fg-el--flip > img{ transform:scaleX(-1); }
/* each piece waits off the edge it is anchored to until its chapter is called */
[data-fg-in="up"]   { transform:translate3d(0,13%,0); }
[data-fg-in="left"] { transform:translate3d(-11%,6%,0); }
[data-fg-in="right"]{ transform:translate3d(11%,6%,0); }
/* one slow breath, on the two lightest layers only */
@keyframes fg-sway{
  from{ transform:rotate(-.45deg) translate3d(0,2px,0); }
  to  { transform:rotate(.45deg)  translate3d(0,-6px,0); }
}
.fg-el--sway > img{ animation:fg-sway 21s var(--ease-io) infinite alternate; transform-origin:0% 45%; }

/* The active chapter owns a bottom-anchored near plane. Its former stage is
   retained only long enough to dissolve into the next chapter's scene. */
.fg.fg-active,.fg.fg-retiring{
  position:fixed; left:0; right:0; top:auto; bottom:0; height:min(56svh,680px);
  z-index:1; overflow:visible; pointer-events:none;
}
.fg.fg-active .fg-el{
  opacity:1; transform:none;
  transition:opacity 1.2s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay:var(--fg-delay,0ms);
}
.fg .fg-el:nth-child(2){ --fg-delay:90ms; }
.fg .fg-el:nth-child(3){ --fg-delay:180ms; }
.fg .fg-el:nth-child(4){ --fg-delay:270ms; }
.fg.fg-retiring .fg-el{
  opacity:0; transform:translate3d(0,8vh,0) scale(.98); filter:blur(18px);
  transition:opacity .68s var(--ease-out),transform .78s var(--ease-out),filter .78s var(--ease-out);
}

/* Placement is keyed off [data-fg] rather than the section id, because the
   stage of the live chapter is re-parented into #fg-sky and stops being a
   descendant of its own section for as long as it holds the near plane.

   Every piece is anchored from the bottom of that plane, which is the bottom
   of the viewport. The cut-outs in png/ are trimmed flush to their own lowest
   opaque row, so a negative bottom here is a real amount of artwork buried off
   the foot of the frame, not slack in the file — the ground-sitting pieces
   carry enough of it that their base line never lifts off the edge. */

/* — I · the gate: the wall runs along the lower-left frame, a pine holds the
     far edge, and one bank of grass closes the foot of the chapter */
/* Wall against the left edge, pine against the right: the chapter is framed
   by the two of them with the court open between.

   left:0, not a negative offset — the plate is trimmed to its own artwork, so
   pulling it off-frame cuts the gate itself rather than trimming empty margin.
   Its left edge sits on the viewport's. */
[data-fg="gate"] .fg-wall  { left:0; bottom:-150px; width:clamp(430px,47vw,780px); }
[data-fg="gate"] .fg-pine  { right:4%; bottom:-120px; width:clamp(170px,17vw,300px); }
[data-fg="gate"] .fg-grass { left:3%;   bottom:-150px; width:clamp(420px,60vw,1050px); }

/* — II · still gardens: sakura and maple sweep in from the two lower corners
     and carry their whole length, a lit lantern and a low bush hold the edges */
[data-fg="pathways"] .fg-sakura { left:-2.5%;  bottom:-70px;  width:clamp(190px,17vw,300px); }
[data-fg="pathways"] .fg-leaves { right:-2.5%; bottom:-80px;  width:clamp(190px,17vw,300px); }
[data-fg="pathways"] .fg-lantern{ left:-1%;  bottom:-60px;  width:clamp(70px,7vw,120px); }
[data-fg="pathways"] .fg-bush   { right:-4%; bottom:-38px;  width:clamp(250px,30vw,530px); }
/* the lantern is the one lit object in the library — it keeps its ember */
[data-fg="pathways"] .fg-lantern > img{ filter:saturate(.96) brightness(1); }
[data-fg="pathways"] .fg-leaves > img{ transform-origin:100% 40%; }

/* — III · sacred craft: basalt and a low wall fragment bracket the atlas and
     a stand of grass ties them together, all three below the plate grid */
[data-fg="lessons"] .fg-wall   { right:-2%; bottom:-110px; width:clamp(240px,24vw,420px); }
[data-fg="lessons"] .fg-stones { left:-4%;  bottom:-48px; width:clamp(250px,30vw,530px); }
[data-fg="lessons"] .fg-grass  { left:24%;  bottom:-84px; width:clamp(280px,33vw,580px); }

/* — IV · afterlight: a far hill closes the horizon, the shrine ruins stand at
     the left of it, grass banks the right, one branch hangs into the corner */
[data-fg="eternity"] .fg-hill   { left:-8%; width:min(150vh,116%); bottom:calc(-1 * min(34vh,26vw)); }
[data-fg="eternity"] .fg-ruins  { left:1%;  bottom:-50px; width:clamp(70px,7vw,120px); }
[data-fg="eternity"] .fg-grass  { right:-7%; bottom:-60px; width:clamp(300px,37vw,670px); }
[data-fg="eternity"] .fg-sakura { left:-15%; bottom:-70px; width:clamp(280px,33vw,580px); }

/* — colophon: one restrained planting along the lower edge, nothing above it */
[data-fg="foot"] .fg-bush   { left:-6%;  bottom:-110px; width:clamp(230px,28vw,480px); }
[data-fg="foot"] .fg-grass  { right:-5%; bottom:-98px;  width:clamp(255px,30vw,530px); }
[data-fg="foot"] .fg-stones { left:40%;  bottom:-80px; width:clamp(60px,6vw,100px); }

@media (max-width:1080px){
  /* the columns have collapsed and the copy has taken the width back, so the
     framing layers step down rather than crowd it */
  [data-fg="gate"] .fg-wall      { width:clamp(390px,42vw,600px); }
  [data-fg="pathways"] .fg-sakura{ width:clamp(400px,46vw,660px); }
  [data-fg="pathways"] .fg-leaves{ width:clamp(310px,35vw,500px); }
  [data-fg="lessons"] .fg-wall   { width:clamp(360px,45vw,640px); }
  [data-fg="eternity"] .fg-sakura{ width:clamp(260px,30vw,430px); }
}
@media (max-width:820px){
  /* one or two anchors per section: the stacked cards, the atlas plates and
     the call to action own the whole width here, so every duplicated piece
     of ornament goes and what stays is smaller */
  [data-fg="gate"] .fg-pine, [data-fg="pathways"] .fg-sakura,
  [data-fg="pathways"] .fg-leaves, [data-fg="lessons"] .fg-wall,
  [data-fg="eternity"] .fg-sakura, [data-fg="foot"] .fg-stones{ display:none; }
  [data-fg="gate"] .fg-wall     { left:-14%; bottom:-22px; width:min(82vw,440px); }
  [data-fg="gate"] .fg-grass    { left:auto; right:-10%; bottom:-76px; width:min(94vw,530px); }
  [data-fg="pathways"] .fg-lantern{ left:-2%;   bottom:-40px; width:clamp(50px,13vw,80px); }
  [data-fg="pathways"] .fg-bush   { right:-10%; bottom:-38px; width:min(72vw,400px); }
  [data-fg="lessons"] .fg-stones  { left:-8%; bottom:-34px; width:min(66vw,360px); }
  [data-fg="lessons"] .fg-grass   { left:auto; right:-8%; bottom:-44px; width:min(70vw,380px); }
  [data-fg="eternity"] .fg-ruins  { left:-2%;   bottom:-25px; width:clamp(50px,13vw,80px); }
  [data-fg="eternity"] .fg-grass  { right:-12%; bottom:-34px; width:min(80vw,440px); }
  [data-fg="foot"] .fg-bush  { left:-12%;  bottom:-26px; width:min(68vw,340px); }
  [data-fg="foot"] .fg-grass { right:-12%; bottom:-30px; width:min(74vw,380px); }
}
@media (prefers-reduced-motion:reduce){
  .fg-el--sway > img{ animation:none; }
  .fg.fg-retiring .fg-el{ transition:none !important; filter:none !important; }
}

@media (max-width:1080px){
  body[data-layout-hero="b"] .chapters{ gap:16px 20px; }
  body[data-layout-story="b"] .gate-grid{ grid-template-columns:1fr; }
  body[data-layout-story="b"] .gate-grid h2,
  body[data-layout-story="b"] .gate-copy{ grid-column:auto; }
  body[data-layout-story="b"] .gate-grid h2{ max-width:16ch; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:span 3; }
  body[data-layout-curriculum="b"] .les:last-child{ grid-column:span 6; }
}
@media (max-width:820px){
  /* the split collapses and the copy takes the page back */
  body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:none; }
  body[data-layout-hero="b"] .hero-foot{ width:100%; }
  /* The four-column strip is set on a selector specific enough to survive the
     plain .chapters override below 820, so it has to be unset here by name or
     the chips stay four across on a phone and wrap a word to a line. */
  body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  body[data-layout-hero="b"] .chip{ flex-direction:row; gap:14px; }
  /* Same shape of bug: the layout selector outranks the plain single-column
     rule, so the heading kept a 37% column while its words are set at 30px —
     "CHAPTERS." alone is wider than that, and it spilled over the paragraph. */
  body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(26px,8vw,36px); }
  body[data-layout-hero="b"] .chip .tx{
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
    clip-path:none; white-space:normal;
  }

  body[data-layout-story="b"] .gate-stats{ grid-template-columns:repeat(2,1fr); border-right:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div{ min-height:86px; padding:14px; }
  body[data-layout-story="b"] .gate-stats div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div:last-child{ border-right:0; }

  /* the mosaic unstacks, but the rhythm survives: the lead window stays the
     tall one and the two field notes stay letterbox */
  body[data-layout-gallery="b"] .cards{ grid-template-columns:1fr; grid-template-rows:auto; }
  body[data-layout-gallery="b"] .card:first-child{ grid-row:auto; }
  body[data-layout-gallery="b"] .card-fr{ flex:0 0 auto; height:auto; }
  body[data-layout-gallery="b"] .card:first-child .card-fr{ height:auto; aspect-ratio:4 / 5; }
  body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ aspect-ratio:16 / 10; min-height:0; }

  body[data-layout-curriculum="b"] .cur{ grid-template-columns:1fr; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:auto; min-height:0; padding:20px; }
  body[data-layout-curriculum="b"] .les:hover{ padding-left:20px; }

  body[data-layout-closing="b"] .fin{ display:flex; align-items:center; text-align:center; gap:0; }
  body[data-layout-closing="b"] .fin > .eyebrow{ margin:0 0 26px; }
  body[data-layout-closing="b"] .fin > h2{ writing-mode:horizontal-tb; font-size:clamp(38px,7.4vw,124px); }
  body[data-layout-closing="b"] .fin > p{ margin:26px auto 0; }
  body[data-layout-closing="b"] .fin > .cta{ margin-top:40px; }

  body[data-layout-footer="b"] .foot-grid{ grid-template-columns:1fr; }
  body[data-layout-footer="b"] .foot-brand{ grid-column:auto; grid-template-columns:minmax(0,1fr); row-gap:16px; }
  body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; }
  body[data-layout-footer="b"] .foot-base{ display:flex; }
  body[data-layout-footer="b"] .foot-base span:last-child{ text-align:left; }
}

/* On a phone two columns leave the chip's copy about 110px once the numeral
   and its gutter are taken out, which is narrow enough to wrap a single word
   to a line. Standing the numeral above the label gives the copy the whole
   column back. */
@media (max-width:560px){
  body[data-layout-hero="b"] .chip{ flex-direction:column; gap:4px; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(22px,7.4vw,30px); }
  body[data-layout-hero="b"] .chip .tx{ padding-top:0; }
  body[data-layout-hero="b"] .chip p{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask-line > span,.word{ opacity:1 !important; transform:none !important; }
}


/* ============================================================= AppDial additions */
.dmark{ display:block; color:var(--bone); }
.brand .dmark{ width:30px; height:auto; }
.brand-tx b{ letter-spacing:.2em; }
.brand-tx b .o, .word-fb .o{ color:var(--vermilion); }
.pre-mark .dmark{ width:44px; height:auto; }
.pre-jp{ letter-spacing:.42em; text-transform:uppercase; }

/* nav tools: language + theme */
.nav-tools{ display:flex; align-items:center; gap:10px; margin-inline-start:clamp(14px,2vw,34px); flex:0 0 auto; }
.pill{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:100px;
  border:1px solid var(--line); color:var(--bone-dim); font-size:11px; font-weight:500; letter-spacing:.06em;
  transition:border-color .35s, color .35s, background .35s;
}
.pill:hover{ color:var(--bone); border-color:rgba(var(--bone-rgb),.36); background:rgba(var(--bone-rgb),.05); }
.theme-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:none; }
html[data-theme="light"] .theme-btn .ic-sun,
html[data-theme="dark"] .theme-btn .ic-moon{ display:block; }
@media (max-width:820px){
  .nav-tools{ margin-inline-start:auto; gap:8px; }
  .nav-burger{ margin-left:14px !important; }
  .theme-label{ display:none; }
  .pill{ padding:0 10px; }
}

/* early access form — the closing chapter's call to action */
.ea{ width:min(560px,100%); }
body[data-layout-closing="b"] .fin > .ea{ grid-column:1; grid-row:3; }
body[data-layout-closing="b"] .fin{ grid-template-rows:auto auto auto; }
#ea-form{ display:grid; gap:12px; }
.ea-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ea label{ display:grid; gap:6px; font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-align:start; }
html[lang="ar"] .ea label{ letter-spacing:0; font-size:12px; }
.ea input, .ea select, .ea textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--field-bg); color:var(--bone); font:inherit; font-size:15px; letter-spacing:0; text-transform:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s, box-shadow .3s;
}
.ea select option{ color:#17191D; }
.ea textarea{ resize:vertical; min-height:84px; }
.ea input:focus, .ea select:focus, .ea textarea:focus{ outline:none; border-color:var(--vermilion); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.22); }
.ea .cta{ margin-top:6px; justify-self:start; background:rgba(var(--brand-rgb),.14); border-color:rgba(var(--brand-rgb),.55); cursor:pointer; }
.ea .cta:disabled{ opacity:.55; cursor:default; }
.ea-fine{ margin:4px 0 0; font-size:11px; color:var(--muted); text-align:start; }
.ea-error{ min-height:1em; font-size:13px; color:#f87171; text-align:start; }
html[data-theme="light"] .ea-error{ color:#B91C1C; }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none; }
.ea-done{ display:none; text-align:start; padding:10px 0; }
.ea-done .dmark{ width:40px; height:auto; margin-bottom:14px; color:var(--vermilion); }
.ea-done h3{ font-size:clamp(20px,2vw,28px); margin-bottom:8px; }
.ea-done p{ margin:0; color:var(--t2); }
.ea.sent #ea-form{ display:none; }
.ea.sent .ea-done{ display:block; }
@media (max-width:820px){
  .ea{ margin-top:30px; }
  .ea-row{ grid-template-columns:1fr; }
  .ea .cta{ justify-self:center; }
  .ea-fine, .ea-error, .ea label, .ea-done{ text-align:center; }
}

/* right-to-left: the grid and flex rules mirror on their own; these are the
   pieces that were placed from a physical side */
html[dir="rtl"] .hero-side{ right:auto; left:var(--pad); }
html[dir="rtl"] body[data-layout-hero="b"] .hero-side{ right:auto; left:var(--pad); }
html[dir="rtl"] body[data-layout-hero="b"] .peek{ right:auto; left:var(--pad); }
html[dir="rtl"] .rail{ right:auto; left:calc(var(--pad) - 4px); }
html[dir="rtl"] .card-lab{ direction:rtl; }
html[dir="rtl"] .les::before{ left:0; right:calc(var(--pad) * -1); background:linear-gradient(270deg, rgba(var(--brand-rgb),.09), transparent 46%); }
html[dir="rtl"] body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; padding-right:clamp(18px,2.2vw,34px); border-right:1px solid var(--line-soft); }
html[dir="rtl"] body[data-layout-footer="b"] .foot-base span:last-child{ text-align:left; }
html[dir="rtl"] .arrowlink .ar svg, html[dir="rtl"] .cta svg{ transform:scaleX(-1); }
@media (max-width:820px){
  html[dir="rtl"] .nav-links{ right:auto; left:0; border-left:0; border-right:1px solid var(--line-soft); transform:translate3d(-100%,0,0); }
  html[dir="rtl"] .nav.menu-open .nav-links{ transform:none; }
  html[dir="rtl"] body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-right:0; border-right:0; }
}

/* light mode: the scene carries a pale sky, so the section scrims become a
   light wash (via --scrim-rgb) and a few pieces need their own values */
html[data-theme="light"] #vignette{ background:radial-gradient(125% 95% at 50% 42%, transparent 50%, rgba(var(--scrim-rgb),.45) 100%); }
html[data-theme="light"] #grain{ opacity:.035; mix-blend-mode:multiply; }
html[data-theme="light"] .nav::before{ background:rgba(var(--scrim-rgb),.72); }
html[data-theme="light"] .cur-dot{ border-color:rgba(var(--bone-rgb),.35); }
html[data-theme="light"] body[data-layout-curriculum="b"] .les{ background:rgba(255,255,255,.66); }
html[data-theme="light"] .card-lab b, html[data-theme="light"] .card-lab span{ color:#F8F6F1; }
html[data-theme="light"] .card-ar{ color:#F8F6F1; }
.card-ar{ color:#F8F6F1; }
.card-lab b{ color:#F8F6F1; }
.card-lab span{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(248,246,241,.66); }
.card-meta span:first-child{ text-transform:none; letter-spacing:.02em; font-size:12px; line-height:1.5; max-width:34ch; }
html[lang="ar"] .card-meta span:first-child{ font-size:13px; }
.peek-play{ color:#F8F6F1; }
.peek-cap b{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.hero-side .v{ font-family:'Satoshi',sans-serif; font-weight:500; text-transform:uppercase; }

/* by day the hero's foot stands on grass and path, so it gets a light wash to read on */
html[data-theme="light"] .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:30%; pointer-events:none; z-index:1;
  background:linear-gradient(transparent, rgba(var(--scrim-rgb),.72) 55%, rgba(var(--scrim-rgb),.9)); }
/* the vertical label has no free edge on a phone; the B layout had turned it back on */
@media (max-width:820px){ body[data-layout-hero="b"] .hero-side{ display:none; } }
/* two-word nav labels must not wrap: the link is a fixed 15px-high window */
.nav-link, .nav-link span{ white-space:nowrap; }
@media (max-width:1100px) and (min-width:821px){ .nav-links{ gap:18px; } .nav-link{ letter-spacing:.14em; } .theme-label{ display:none; } }


/* ================================================================ type
   Clash Display for every heading — set in sentence case, tight and calm —
   and Satoshi for the reading and the small uppercase labels. Arabic keeps
   IBM Plex Sans Arabic (the rules above scoped to html[lang="ar"]). */
.display, h1, h2, h3, .num, .gate-stats div b, .chip .num, .brand-tx b, .card-lab b, .ea-done h3{
  font-family:'Clash Display','Satoshi',system-ui,sans-serif;
}
.display{ text-transform:none; font-weight:500; letter-spacing:-.022em; line-height:1.02; }
.h-hero{ font-size:clamp(34px,4.1vw,64px); }
.h-sec{ font-size:clamp(34px,4.3vw,66px); }
.fin > h2{ text-transform:none; font-weight:500; letter-spacing:-.03em; }
.les h3{ font-weight:500; letter-spacing:-.01em; }
.card-lab b{ text-transform:none; font-weight:500; letter-spacing:0; font-size:clamp(17px,1.5vw,22px); }
.chip .num, .gate-stats div b{ font-weight:400; letter-spacing:-.03em; }
.brand-tx b{ font-weight:600; letter-spacing:.02em; font-size:15px; }
.brand-tx i{ letter-spacing:.2em; }
body{ font-weight:400; }
.body, .body-lg, .lead, .gate-copy .lead{ font-weight:400; }
.eyebrow, .sec-head .k, .nav-link, .chip b, .cta, .arrowlink, .foot h4, .ea label, .card-meta, .foot-base{ font-weight:500; }
html[lang="ar"] .display, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .card-lab b{
  font-family:'IBM Plex Sans Arabic','Clash Display',sans-serif; font-weight:600; letter-spacing:0; }

/* the brand mark, as in the logo: white D on dark, ink D on light */
.dmark{ color:#F8F6F1; }
html[data-theme="light"] .dmark{ color:#17191D; }
.ea-done .dmark{ color:var(--vermilion); }


/* ================================================================ orange, by day and by night */
.mask-line.accent .word, .mask-line.accent > span{ color:var(--vermilion); }
html[data-theme="light"] .mask-line.accent .word, html[data-theme="light"] .mask-line.accent > span{ color:#E8620F; }
.gate-stats div b{ color:var(--vermilion); }
html[data-theme="light"] .gate-stats div b{ color:#E8620F; }
.chip .num{ transition:color .4s, transform .5s var(--ease-out); }
.ea .cta{ background:var(--vermilion); border-color:var(--vermilion); color:#fff; }
.ea .cta i{ background:#fff; }
.ea .cta:hover{ color:#17191D; border-color:#fff; }
.ea .cta:hover svg path{ stroke:#17191D; }
.arrowlink .ar{ border-color:rgba(var(--brand-rgb),.55); }
.arrowlink:hover .ar{ background:var(--vermilion); border-color:var(--vermilion); }
.arrowlink:hover .ar svg path{ stroke:#fff; }

/* light mode: warm white, and the scrims only a veil — the scene has to show */
html[data-theme="light"]{ --ink:#E9E3DA; --ink-2:#F1ECE5; --scrim-rgb:233,227,218; }
html[data-theme="light"] .sec::before, html[data-theme="light"] .foot::before{ opacity:.42; }
html[data-theme="light"] #pathways::before{ opacity:.35; }
html[data-theme="light"] #eternity::before{ opacity:.22; }
html[data-theme="light"] .hero::after{ opacity:.8; }
html[data-theme="light"] body[data-layout-curriculum="b"] .les{ background:rgba(255,255,255,.78); }
html[data-theme="light"] .ea input, html[data-theme="light"] .ea select, html[data-theme="light"] .ea textarea{
  background:rgba(255,255,255,.9); border-color:rgba(250,116,30,.28); }
html[data-theme="light"] .sec-head .rule{ background:rgba(250,116,30,.25); }
html[data-theme="light"] .nav::after{ background:rgba(250,116,30,.25); }

/* theme changes ease instead of snapping */
body, .nav::before, .ea input, .ea select, .ea textarea, .les, .pill, .sec::before{
  transition:background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), opacity .6s var(--ease); }

/* ================================================================ the app shots */
.shots-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,5vw,90px); align-items:end; margin-bottom:clamp(36px,6vh,70px); }
.shots-head h2{ max-width:14ch; }
.phones{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2.2vw,34px); align-items:start; }
.phone{ margin:0; translate:0 var(--par,0px); will-change:translate; }
.phone:nth-child(2){ margin-top:clamp(20px,5vw,80px); }
.phone:nth-child(4){ margin-top:clamp(20px,5vw,80px); }
.phone-fr{
  position:relative; aspect-ratio:390/844; border-radius:clamp(22px,2.6vw,38px); overflow:hidden;
  border:1px solid rgba(var(--bone-rgb),.14); background:#0b0d10;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75), 0 0 0 6px rgba(var(--bone-rgb),.04);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
html[data-theme="light"] .phone-fr{ background:#F6F4EF; border-color:rgba(23,25,29,.10);
  box-shadow:0 40px 80px -42px rgba(120,60,20,.35), 0 0 0 6px rgba(250,116,30,.06); }
.phone:hover .phone-fr{ transform:translate3d(0,-8px,0); box-shadow:0 60px 110px -40px rgba(250,116,30,.35), 0 0 0 6px rgba(250,116,30,.10); }
.scr{ width:100%; height:100%; object-fit:cover; display:block; }
.phone-fr .scr, .browser-fr .scr{ position:absolute; inset:0; transition:opacity .6s var(--ease); }
.scr-light{ opacity:0; }
html[data-theme="light"] .scr-light{ opacity:1; }
html[data-theme="light"] .scr-dark{ opacity:0; }
.phone figcaption, .browser figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:16px; }
.phone figcaption b, .browser figcaption b{ font-family:'Clash Display','Satoshi',sans-serif; font-weight:500; font-size:17px; color:var(--bone); }
.phone figcaption span, .browser figcaption span{ font-size:13px; color:var(--t2); }
.browser{ margin:clamp(40px,8vh,90px) 0 0; }
.browser-bar{ display:flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:1px solid rgba(var(--bone-rgb),.12); border-bottom:0;
  border-radius:16px 16px 0 0; background:rgba(var(--bone-rgb),.05); }
.browser-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(var(--bone-rgb),.2); }
.browser-bar i:first-child{ background:#FA741E; }
.browser-bar span{ margin-inline-start:14px; font-size:12px; color:var(--muted); }
.browser-fr{ position:relative; aspect-ratio:1440/900; overflow:hidden; border:1px solid rgba(var(--bone-rgb),.12); border-radius:0 0 16px 16px;
  background:#0b0d10; box-shadow:0 50px 120px -60px rgba(0,0,0,.8); }
html[data-theme="light"] .browser-fr{ background:#F6F4EF; box-shadow:0 50px 110px -60px rgba(120,60,20,.35); }
@media (max-width:1080px){ .shots-head{ grid-template-columns:1fr; gap:16px; } }
@media (max-width:820px){
  .phones{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .phone:nth-child(2), .phone:nth-child(4){ margin-top:36px; }
}

/* two phones, large and centred, the second one set lower */
.phones.two{ grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center; gap:clamp(28px,6vw,110px); }
.phones.two .phone:nth-child(2){ margin-top:clamp(40px,8vw,120px); }
.phone-fr .scr:not(.scr-dark):not(.scr-light){ opacity:1; }
@media (max-width:820px){ .phones.two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .phones.two .phone:nth-child(2){ margin-top:40px; } }

/* three phones; the real screenshots are 960×2000, so the frame follows them
   and the taller incoming render is cropped from the top */
.phones.three{ grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:clamp(22px,4.5vw,80px); }
.phones.three .phone:nth-child(2){ margin-top:clamp(40px,7vw,110px); }
.phones.three .phone-fr{ aspect-ratio:960/2000; }
.phones.three .scr{ object-position:top center; }
@media (max-width:820px){
  .phones.three{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .phones.three .phone:nth-child(2){ margin-top:30px; }
  .phones.three figcaption span{ display:none; }
}

/* the real home screenshot follows the page's language (no separate "In Arabic" phone) */
.scr-ar{ display:none; }
html[lang="ar"] .scr-ar{ display:block; }
html[lang="ar"] .scr-en{ display:none; }
/* four phones: mine (dark/light) first, then the real screenshots and the incoming call */
.phones.four{ grid-template-columns:repeat(4,minmax(0,270px)); justify-content:center; gap:clamp(16px,3vw,56px); }
.phones.four .phone:nth-child(even){ margin-top:clamp(36px,6vw,100px); }
.phones.four .phone-fr{ aspect-ratio:960/2000; }
.phones.four .scr{ object-position:top center; }
@media (max-width:820px){
  .phones.four{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .phones.four .phone:nth-child(even){ margin-top:36px; }
}

/* ================================================================ phone hover */
.phones{ perspective:1400px; }
.phone{ transition:opacity .5s var(--ease), filter .5s var(--ease); }
.phone-fr{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out), box-shadow .6s var(--ease-out);
}
.phone:hover .phone-fr{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-12px,0) scale(1.035);
  transition:transform .18s linear, box-shadow .6s var(--ease-out);
  box-shadow:0 70px 120px -46px rgba(250,116,30,.42), 0 0 0 1px rgba(250,116,30,.35), 0 0 0 7px rgba(250,116,30,.10);
}
/* the shine: a soft highlight that follows the pointer across the glass */
.phone-fr::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:radial-gradient(60% 45% at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen; opacity:0; transition:opacity .45s var(--ease);
}
.phone:hover .phone-fr::after{ opacity:1; }
/* the others step back while one is looked at */
.phones:hover .phone:not(:hover){ opacity:.55; filter:saturate(.7); }
.phone figcaption b{ transition:color .4s var(--ease); }
.phone:hover figcaption b{ color:var(--vermilion); }
@media (prefers-reduced-motion:reduce){ .phone-fr, .phone:hover .phone-fr{ transform:none; } }

/* ================================================================ soft light
   Pure white hurt the eyes: by day the page is warm stone (#E9E3DA), panels a
   shade lighter, text a soft ink, and nothing on the page is brighter than
   #F4EFE8. The orange reads stronger on it. */
html[data-theme="light"]{
  --bone:#1F2126; --bone-dim:#3E4249; --muted:#666A72;
  --t1:#2B2E34; --t2:#4A4E55; --t3:#666A72;
  --field-bg:rgba(244,239,232,.82);
}
html[data-theme="light"] body{ background:var(--ink); }
html[data-theme="light"] .ea input, html[data-theme="light"] .ea select, html[data-theme="light"] .ea textarea{
  background:rgba(244,239,232,.85); border-color:rgba(240,106,20,.30); }
html[data-theme="light"] body[data-layout-curriculum="b"] .les{ background:rgba(241,236,229,.86); }
html[data-theme="light"] .nav::before{ background:rgba(233,227,218,.82); }
html[data-theme="light"] .pill{ background:rgba(244,239,232,.6); }
html[data-theme="light"] .phone-fr{ background:#EFE9E1; }
html[data-theme="light"] #vignette{ background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(120,90,60,.16) 100%); }
html[data-theme="light"] ::selection{ background:#F06A14; color:#fff; }

/* ================================================================ try a call */
.try-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:clamp(32px,6vw,110px); align-items:center; }
.try-copy h2{ max-width:13ch; margin-bottom:22px; }
.try-copy .body-lg{ max-width:46ch; }
.try-points{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; }
.try-points li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--t1); }
.try-points svg, .case li svg{ width:15px; height:15px; flex:none; color:var(--accent-text); }

.dcall{ position:relative; width:100%; max-width:460px; justify-self:end; }
.dcall-glow{ position:absolute; inset:-34px; border-radius:44px; background:radial-gradient(60% 60% at 50% 45%, rgba(var(--brand-rgb),.22), transparent 72%); filter:blur(18px); pointer-events:none; }
.dcall-card{ position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--line);
  background:rgba(var(--scrim-rgb),.78); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.45); animation:dcall-float 7s ease-in-out infinite; }
@keyframes dcall-float{ 0%,100%{ transform:translateY(0) rotate(-.6deg); } 50%{ transform:translateY(-10px) rotate(.6deg); } }
.dcall-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 22px; border-bottom:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.dcall-app{ display:flex; align-items:center; gap:10px; }
.dcall-pulse{ width:7px; height:7px; border-radius:50%; background:var(--vermilion); animation:dcall-blink 2.4s ease-in-out infinite; }
@keyframes dcall-blink{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.dcall-meta b{ display:none; font-weight:500; color:var(--bone); font-variant-numeric:tabular-nums; }
.dcall[data-state="connected"] .dcall-meta .m-order{ display:none; }
.dcall[data-state="connected"] .dcall-meta b{ display:inline; }
.dcall-body{ padding:22px; }
.dcall-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dcall-eyebrow{ margin:0; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-text); }
.dcall-top h3{ margin-top:6px; font-size:26px; font-weight:500; letter-spacing:-.03em; color:var(--bone); }
.dcall-who{ margin:4px 0 0; font-size:12px; color:var(--muted); }
.dcall-who .sep{ opacity:.4; margin:0 4px; }
.dcall-orb{ display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:50%; position:relative;
  color:var(--accent-text); background:rgba(var(--brand-rgb),.14); border:1px solid rgba(var(--brand-rgb),.38); }
.dcall-orb svg{ width:20px; height:20px; }
.dcall[data-state="incoming"] .dcall-orb{ animation:dcall-ring 2.4s ease-in-out infinite; }
.dcall[data-state="incoming"] .dcall-orb::before, .dcall[data-state="incoming"] .dcall-orb::after{
  content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--vermilion); opacity:0; animation:dcall-wave 2.4s ease-out infinite; }
.dcall[data-state="incoming"] .dcall-orb::after{ animation-delay:1.2s; }
.dcall[data-state="connected"] .dcall-orb{ color:#fff; background:var(--vermilion); border-color:var(--vermilion); }
@keyframes dcall-ring{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@keyframes dcall-wave{ 0%{ transform:scale(.8); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }
.dcall-order{ margin-top:20px; padding:14px; border-radius:14px; border:1px solid rgba(var(--brand-rgb),.22); background:rgba(var(--brand-rgb),.06); }
.dcall-order-h{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.dcall-items{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.dcall-item{ display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11px; font-weight:500; color:var(--bone); text-align:center; }
.dcall-item .th{ display:grid; place-items:center; width:100%; height:54px; border-radius:10px; background:rgba(var(--brand-rgb),.10); }
.dcall-item svg{ width:42px; height:42px; }
.dcall-dest{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:10px; background:rgba(var(--bone-rgb),.05); font-size:12px; color:var(--t2); }
.dcall-dest i{ width:9px; height:9px; flex:none; border-radius:50%; border:2px solid var(--vermilion); }
.dcall-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); }
.dcall-status{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--t2); }
.dcall-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--vermilion); animation:dcall-blink 2.4s ease-in-out infinite; }
.dcall[data-state="connected"] .dcall-status .dot{ background:#2E9A5C; animation:none; }
.dcall[data-state="ended"] .dcall-status .dot, .dcall[data-state="declined"] .dcall-status .dot{ background:var(--muted); animation:none; }
.dcall .st, .dcall .act-in, .dcall .act-on, .dcall .after-ended, .dcall .after-declined, .dcall-after{ display:none; }
.dcall[data-state="incoming"] .st-incoming, .dcall[data-state="connected"] .st-connected,
.dcall[data-state="ended"] .st-ended, .dcall[data-state="declined"] .st-declined{ display:inline; }
.dcall[data-state="incoming"] .act-in, .dcall[data-state="connected"] .act-on{ display:grid; }
.dcall[data-state="ended"] .dcall-after, .dcall[data-state="declined"] .dcall-after{ display:block; animation:dcall-in .4s var(--ease-out) both; }
.dcall[data-state="ended"] .after-ended, .dcall[data-state="declined"] .after-declined{ display:flex; }
@keyframes dcall-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.dcall-actions{ display:flex; gap:10px; }
.cc{ place-items:center; width:40px; height:40px; border:0; border-radius:50%; color:#fff; cursor:pointer; transition:transform .2s var(--ease-out), filter .2s; }
.cc svg{ width:17px; height:17px; }
.cc:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.cc:focus-visible, .dcall-again:focus-visible, .cases-tabs button:focus-visible{ outline:2px solid var(--vermilion); outline-offset:3px; }
.cc-no{ background:#C9343B; }
.cc-no svg{ transform:rotate(135deg); }
.cc-yes{ background:#17834C; box-shadow:0 0 0 0 rgba(23,131,76,.5); animation:cc-pulse 1.8s ease-out infinite; }
@keyframes cc-pulse{ 0%{ box-shadow:0 0 0 0 rgba(23,131,76,.5); } 100%{ box-shadow:0 0 0 12px rgba(23,131,76,0); } }
.dcall-after{ margin-top:14px; }
.dcall-after p{ align-items:center; gap:8px; margin:0 0 10px; font-size:12px; line-height:1.5; color:var(--t2); }
.dcall-after b{ font-weight:500; color:var(--bone); font-variant-numeric:tabular-nums; }
.dcall-after .rec{ width:8px; height:8px; flex:none; border-radius:50%; background:#C9343B; }
.dcall-again{ width:100%; padding:10px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--t1);
  font:inherit; font-size:12px; font-weight:500; cursor:pointer; transition:border-color .25s, color .25s; }
.dcall-again:hover{ border-color:var(--vermilion); color:var(--accent-text); }
.dcall-fine{ margin:16px 0 0; text-align:center; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .dcall-bar, html[lang="ar"] .dcall-eyebrow, html[lang="ar"] .dcall-order-h, html[lang="ar"] .dcall-fine{ letter-spacing:0; text-transform:none; font-size:11px; }
@media (max-width:980px){ .try-grid{ grid-template-columns:1fr; } .dcall{ justify-self:center; } }
@media (max-width:420px){ .dcall-body{ padding:16px; } .dcall-bar{ padding:13px 16px; } .dcall-item .th{ height:46px; } .dcall-item svg{ width:36px; height:36px; } }

/* ================================================================ use cases */
.cases-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.6fr); gap:clamp(24px,5vw,90px); align-items:end; margin-bottom:clamp(36px,6vh,64px); }
.cases-head h2{ max-width:14ch; }
.cases-grid{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(24px,4vw,64px); align-items:stretch; }
.cases-tabs{ display:flex; flex-direction:column; }
.cases-tabs button{ display:flex; align-items:center; gap:14px; padding:18px 2px; border:0; border-bottom:1px solid var(--line); background:none;
  color:var(--muted); font:inherit; font-size:15px; font-weight:500; text-align:start; cursor:pointer; transition:color .3s, border-color .3s; }
.cases-tabs button .n{ font-size:10px; letter-spacing:.16em; color:var(--muted); font-variant-numeric:tabular-nums; }
.cases-tabs button svg{ width:14px; height:14px; margin-inline-start:auto; color:var(--accent-text); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s var(--ease-out); }
html[dir="rtl"] .cases-tabs button svg{ transform:scaleX(-1) translateX(-6px); }
.cases-tabs button:hover{ color:var(--bone); }
.cases-tabs button:hover svg{ opacity:.6; transform:none; }
html[dir="rtl"] .cases-tabs button:hover svg{ transform:scaleX(-1); }
.cases-tabs button[aria-selected="true"]{ color:var(--bone); border-bottom-color:var(--vermilion); }
.cases-tabs button[aria-selected="true"] .n{ color:var(--accent-text); }
.cases-tabs button[aria-selected="true"] svg{ opacity:1; transform:none; }
html[dir="rtl"] .cases-tabs button[aria-selected="true"] svg{ transform:scaleX(-1); }
.cases-panel{ position:relative; overflow:hidden; min-height:340px; padding:clamp(26px,3.4vw,46px); border-radius:18px; border:1px solid var(--line);
  background:rgba(var(--scrim-rgb),.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.cases-ring{ position:absolute; inset-inline-end:-40px; top:-60px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(var(--brand-rgb),.34); pointer-events:none; }
.cases-ring.r2{ inset-inline-end:10px; top:-10px; width:120px; height:120px; border-color:rgba(var(--brand-rgb),.22); background:radial-gradient(circle, rgba(var(--brand-rgb),.14), transparent 70%); }
.case{ position:relative; animation:dcall-in .5s var(--ease-out) both; }
.case-k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-text); }
.case h3{ max-width:16ch; margin-top:20px; font-size:clamp(26px,2.6vw,40px); font-weight:500; line-height:1.08; letter-spacing:-.03em; color:var(--bone); }
.case p{ max-width:52ch; margin:18px 0 0; font-size:15px; line-height:1.7; color:var(--t1); }
.case ul{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:30px 0 0; padding:0; }
.case li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; color:var(--t2); }
.case li svg{ margin-top:2px; }
html[lang="ar"] .case-k, html[lang="ar"] .cases-tabs .n{ letter-spacing:0; text-transform:none; font-size:12px; }
@media (max-width:980px){
  .cases-head{ grid-template-columns:1fr; gap:16px; }
  .cases-grid{ grid-template-columns:1fr; }
  .cases-tabs{ flex-direction:row; overflow-x:auto; gap:18px; scrollbar-width:none; }
  .cases-tabs::-webkit-scrollbar{ display:none; }
  .cases-tabs button{ flex:none; padding:12px 2px; }
  .cases-tabs button svg{ display:none; }
  .case ul{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .dcall-card, .dcall-orb, .dcall-orb::before, .dcall-orb::after, .cc-yes, .dcall-pulse, .dcall-status .dot{ animation:none !important; } }

/* ================================================================ light, readable
   The stone light was still hard to read: thin (300) grey type with pale halos
   around it. By day now: a warmer, more orange stone (#EADFD2), near-black type
   at a normal weight (400), darker greys for the small labels, no text halos,
   and more orange in the accents (section numbers, eyebrows, rules, a soft
   orange wash from the top corner). */
html[data-theme="light"]{
  --ink:#EADFD2; --ink-2:#F2E9DF;
  --bone:#16171A; --bone-dim:#2F3238; --muted:#52565D;
  --t1:#212328; --t2:#363940; --t3:#52565D;
  --bone-rgb:22,23,26; --scrim-rgb:234,223,210;
  --line:rgba(22,23,26,.15); --line-soft:rgba(22,23,26,.09);
  --ember:#E25F0E; --accent-text:#B3460A;
  --field-bg:rgba(245,238,230,.9);
}
html[data-theme="light"] body, html[data-theme="light"] .body, html[data-theme="light"] .body-lg,
html[data-theme="light"] .lead, html[data-theme="light"] .gate-copy .lead{ font-weight:400; }
html[data-theme="light"] *{ text-shadow:none !important; }
html[data-theme="light"] .sec-head .k b, html[data-theme="light"] .eyebrow, html[data-theme="light"] .fin > .eyebrow{ color:var(--accent-text); }
html[data-theme="light"] .sec-head .rule{ background:linear-gradient(90deg, rgba(var(--brand-rgb),.55), rgba(var(--brand-rgb),.08)); }
html[dir="rtl"][data-theme="light"] .sec-head .rule{ background:linear-gradient(270deg, rgba(var(--brand-rgb),.55), rgba(var(--brand-rgb),.08)); }
html[data-theme="light"] .chip p, html[data-theme="light"] .card-meta, html[data-theme="light"] .les p{ color:var(--t2); }
html[data-theme="light"] .hero-side .v{ color:rgba(179,70,10,.7); }
html[data-theme="light"] .nav::before{ background:rgba(234,223,210,.86); }
html[data-theme="light"] .pill{ background:rgba(245,238,230,.7); border-color:rgba(var(--brand-rgb),.28); }
html[data-theme="light"] .ea input, html[data-theme="light"] .ea select, html[data-theme="light"] .ea textarea{
  background:rgba(245,238,230,.9); border-color:rgba(var(--brand-rgb),.34); color:var(--bone); }
html[data-theme="light"] body[data-layout-curriculum="b"] .les{ background:rgba(242,233,223,.9); }
html[data-theme="light"] .phone-fr{ background:#F0E6DA; }
html[data-theme="light"] .dcall-card{ background:rgba(245,238,230,.9); box-shadow:0 30px 70px -34px rgba(120,60,20,.45); }
html[data-theme="light"] .cases-panel{ background:rgba(245,238,230,.88); }
html[data-theme="light"] #vignette{ background:
  radial-gradient(70% 55% at 88% 6%, rgba(250,116,30,.13), transparent 70%),
  radial-gradient(60% 50% at 6% 96%, rgba(250,116,30,.08), transparent 70%),
  radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(130,70,25,.15) 100%); }

/* ================================================================ the ring, clearer
   While the call is incoming and on screen (.is-live) the card buzzes once
   every ring (2.6s, in step with the sound), the answer button bobs and its
   phone wiggles inside two green waves, and decline breathes. */
.dcall-foot{ margin-top:20px; }
.dcall-actions{ display:flex; justify-content:center; gap:clamp(48px,9vw,86px); margin-top:18px; }
.cc-wrap{ display:none; flex-direction:column; align-items:center; gap:9px; font-size:12px; font-weight:500; color:var(--t2); }
.dcall[data-state="incoming"] .cc-wrap.act-in, .dcall[data-state="connected"] .cc-wrap.act-on{ display:flex; }
.dcall .cc{ display:grid; position:relative; width:58px; height:58px; transform:translate(var(--mx,0),var(--my,0)); }
.dcall .cc svg{ width:22px; height:22px; position:relative; }
.cc-yes{ animation:none; box-shadow:0 10px 26px -8px rgba(23,131,76,.7); }
.cc-no{ box-shadow:0 10px 26px -8px rgba(201,52,59,.65); }
.cc-wave{ position:absolute; inset:0; border-radius:50%; border:2px solid #1FA463; opacity:0; pointer-events:none; }
.dcall.is-live .cc-wrap.act-in:nth-child(2){ animation:cc-bob 1.3s var(--ease-io) infinite; }
.dcall.is-live .cc-yes svg{ animation:cc-wiggle 1.3s ease-in-out infinite; }
.dcall.is-live .cc-wave{ animation:cc-wave 1.6s ease-out infinite; }
.dcall.is-live .cc-wave.w2{ animation-delay:.8s; }
.dcall.is-live .cc-wrap.act-in:first-child .cc{ animation:cc-breathe 2.6s ease-in-out infinite; }
.dcall.is-live .dcall-card{ animation:dcall-float 7s ease-in-out infinite, dcall-buzz 2.6s linear infinite; }
.dcall.is-live .dcall-orb{ animation:dcall-ring 1.3s ease-in-out infinite; }
@keyframes cc-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes cc-wiggle{ 0%,40%,100%{ transform:rotate(0); } 8%{ transform:rotate(-16deg); } 16%{ transform:rotate(14deg); } 24%{ transform:rotate(-10deg); } 32%{ transform:rotate(6deg); } }
@keyframes cc-wave{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
@keyframes cc-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.94); } }
@keyframes dcall-buzz{ 0%,20%,100%{ translate:0 0; } 2%{ translate:-3px 0; } 4%{ translate:3px 0; } 6%{ translate:-3px 0; } 8%{ translate:3px 0; } 10%{ translate:-2px 0; } 12%{ translate:2px 0; } 14%{ translate:-1px 0; } }
.dcall[data-state="connected"] .cc-wrap.act-on{ animation:dcall-in .4s var(--ease-out) both; }
/* the sound toggle and the hint */
.dcall-meta{ display:flex; align-items:center; gap:12px; }
.dcall-snd{ display:grid; place-items:center; width:26px; height:26px; margin:-6px -6px -6px 0; border:1px solid var(--line); border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; transition:color .25s, border-color .25s; }
.dcall-snd svg{ width:13px; height:13px; }
.dcall-snd:hover{ color:var(--accent-text); border-color:var(--vermilion); }
.dcall-snd .i-off, .dcall.is-muted .dcall-snd .i-on{ display:none; }
.dcall.is-muted .dcall-snd .i-off{ display:block; }
.dcall-hint{ position:absolute; z-index:3; top:-18px; left:50%; display:flex; align-items:center; gap:8px; padding:9px 16px; border:0; border-radius:999px;
  background:var(--vermilion); color:#fff; font:inherit; font-size:12px; font-weight:500; white-space:nowrap; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(var(--brand-rgb),.8); opacity:0; pointer-events:none; transform:translate(-50%,6px); transition:opacity .35s, transform .35s var(--ease-out); }
.dcall-hint svg{ width:15px; height:15px; }
.dcall.needs-tap .dcall-hint{ opacity:1; pointer-events:auto; transform:translate(-50%,0); animation:hint-nudge 2.6s ease-in-out infinite; }
@keyframes hint-nudge{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-4px); } }
.dcall-hint:focus-visible, .dcall-snd:focus-visible{ outline:2px solid var(--vermilion); outline-offset:3px; }

/* ================================================================ motion, site-wide */
.prog{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none; }
.prog i{ display:block; height:100%; background:linear-gradient(90deg, var(--vermilion), var(--ember)); transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(var(--brand-rgb),.6); }
html[dir="rtl"] .prog i{ transform-origin:100% 50%; }
.sec-head .rule{ transform-origin:0 50%; transform:scaleX(0); transition:transform 1.3s var(--ease-out) .15s; }
html[dir="rtl"] .sec-head .rule{ transform-origin:100% 50%; }
.sec-head.drawn .rule{ transform:none; }
.sec-head .k b{ display:inline-block; transition:transform .9s var(--ease-out), opacity .9s; }
.sec-head:not(.drawn) .k b{ transform:translateY(60%); opacity:0; }
[data-rv="up"]{ filter:blur(6px); }
[data-rv="up"].rv-in{ filter:none; transition-property:opacity, transform, filter; }
.stagger > *, .try-points > li, .case ul > li, .cases-tabs > button{ opacity:0; transform:translate3d(0,14px,0); }
.stagger-in > *{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.stagger-in > :nth-child(2){ transition-delay:.08s; } .stagger-in > :nth-child(3){ transition-delay:.16s; } .stagger-in > :nth-child(4){ transition-delay:.24s; }
.case h3, .case p{ animation:dcall-in .6s var(--ease-out) both; }
.case p{ animation-delay:.07s; }
.magnet{ transform:translate(var(--mx,0),var(--my,0)); transition:transform .45s var(--ease-out), color .3s, background .3s, border-color .3s; }
.card-fr, .les, .cases-panel{ transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), outline-color .4s, background .4s; }
@media (hover:hover) and (pointer:fine){
  .card:hover .card-fr{ transform:translateY(-6px); box-shadow:0 26px 60px -30px rgba(var(--brand-rgb),.55); }
  .les:hover{ transform:translateY(-4px); }
  .cases-panel:hover{ box-shadow:0 30px 70px -40px rgba(var(--brand-rgb),.5); }
}
@media (prefers-reduced-motion:reduce){
  .sec-head .rule, .sec-head:not(.drawn) .k b{ transform:none !important; opacity:1 !important; }
  [data-rv="up"]{ filter:none !important; }
  .try-points > li, .case ul > li, .cases-tabs > button{ opacity:1 !important; transform:none !important; }
  .dcall.is-live .dcall-card, .dcall.is-live .cc-wrap, .dcall.is-live .cc, .dcall.is-live .cc svg, .dcall.is-live .cc-wave, .dcall-hint{ animation:none !important; }
  .prog{ display:none; }
}

/* chapter 01 by day: the paragraph on the right sits over the white houses, so
   the veil covers both columns, not only the headline's side */
html[data-theme="light"] #gate::before{ opacity:1;
  background:radial-gradient(130% 78% at 50% 44%, rgba(var(--scrim-rgb),.93), rgba(var(--scrim-rgb),.80) 48%, rgba(var(--scrim-rgb),.35) 78%, rgba(var(--scrim-rgb),0)); }