/* =====================================================================
   THEOS - THE OPERATING SPACE
   Palette:  Emerald Void #06110E · Periwinkle #7C7CFF · Aqua #3FE0C8
             Coral #FF9E7A · Violet #C08BFF
   Type:     Bricolage Grotesque (display) · Manrope (UI) · JetBrains Mono
   Surfaces: layered glass - tinted fill + inner light edge + outer glow
   ===================================================================== */

:root,[data-theme="dark"]{
  --bg:#06110E;
  --bg-2:#0A1713;
  --bg-3:#12312842;
  --fg:#FFFFFF;
  --fg-2:#B8BFDB;
  --fg-3:#7A82A6;
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.025);
  --glass-hi:rgba(255,255,255,.14);
  --shadow:0 30px 80px -30px rgba(0,12,8,.88);
  --aurora-o:1;
  --grid-o:.05;
  --scheme:dark;
  --emerald-glow:#0E6B52;
  --emerald-deep:#031B14;
}
[data-theme="light"]{
  --bg:#F5F6FC;
  --bg-2:#FFFFFF;
  --bg-3:#EEF0FA80;
  --fg:#0B0D1A;
  --fg-2:#454C68;
  --fg-3:#6A7292;
  --edge:rgba(11,13,26,.11);
  --edge-2:rgba(11,13,26,.06);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.5);
  --glass-hi:rgba(255,255,255,.95);
  --shadow:0 30px 70px -34px rgba(28,34,80,.34);
  --aurora-o:.62;
  --grid-o:.05;
  --scheme:light;
}
:root{
  --peri:#7C7CFF;
  --aqua:#3FE0C8;
  --coral:#FF9E7A;
  --violet:#C08BFF;
  --peri-d:#4B4BE8;
  --ok:#3FE0C8;
  --max:1200px;
  --gut:20px;
  --nav-h:68px;
  /* TheOS type system - restored to the original visual treatment. */
  --ff-d:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --ff:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --ff-m:"JetBrains Mono",ui-monospace,monospace;
  --e:cubic-bezier(.22,.68,.24,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}
@media(min-width:600px){:root{--gut:28px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{
  margin:0;background:
    radial-gradient(1200px 780px at 50% -10%,rgba(12,91,67,.16),transparent 62%),
    linear-gradient(180deg,#06110E 0%,var(--bg) 38%,#04100D 100%);color:var(--fg);
  font-family:var(--ff);font-size:16.5px;line-height:1.62;font-weight:450;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s var(--e),color .5s var(--e);
  color-scheme:var(--scheme);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--peri);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:12px;z-index:999;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:10px}
.skip:focus{left:12px}

/* ---------- TYPE SCALE (tight, one column of prose, never sprayed) ---------- */
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--ff-d);letter-spacing:-.035em;line-height:1.02;text-wrap:balance;font-weight:700}
.d1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.96;letter-spacing:-.045em;font-weight:750}
.d2{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.04em}
.d3{font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.03em;line-height:1.1}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);font-weight:500;
}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--peri);box-shadow:0 0 0 4px color-mix(in srgb,var(--peri) 22%,transparent)}
.lede{font-size:clamp(1.04rem,1.6vw,1.22rem);line-height:1.6;color:var(--fg-2);max-width:58ch;font-weight:450}
.muted{color:var(--fg-3);font-size:.9rem}
.grad{background:linear-gradient(100deg,var(--peri),var(--aqua) 46%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- ATMOSPHERE ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--aurora-o);transition:opacity .6s var(--e)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle,color-mix(in srgb,var(--peri) 76%,#0D7A59),transparent 66%);animation:fl1 26s var(--e) infinite}
.aurora i:nth-child(2){width:46vw;height:46vw;right:-14vw;top:4vw;background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 78%,#075A43),transparent 66%);animation:fl2 32s var(--e) infinite}
.aurora i:nth-child(3){width:44vw;height:44vw;left:22vw;bottom:-18vw;background:radial-gradient(circle,var(--violet),transparent 66%);animation:fl3 29s var(--e) infinite}
.aurora i:nth-child(4){width:34vw;height:34vw;right:8vw;bottom:2vw;background:radial-gradient(circle,var(--coral),transparent 66%);animation:fl1 35s var(--e) infinite reverse}
@keyframes fl1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,7vh,0) scale(1.14)}}
@keyframes fl2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-7vw,5vh,0) scale(.92)}}
@keyframes fl3{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(5vw,-6vh,0) scale(1.16)}}
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grid-o);
  background-image:linear-gradient(var(--fg) 1px,transparent 1px),linear-gradient(90deg,var(--fg) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 76%);
}
main,.site-footer,.topbar{position:relative;z-index:1}

/* ---------- SURFACES (morphism, done in layers) ---------- */
.glass{
  position:relative;background:var(--glass);
  border:1px solid var(--edge);border-radius:20px;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,var(--glass-hi),transparent 34%);opacity:.5}
/* cursor-follow sheen on interactive surfaces */
.lit{position:relative}
.lit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tint,var(--peri)) 20%,transparent),transparent 62%);
  opacity:0;transition:opacity .35s var(--e);
}
.lit:hover::after,.lit.is-press::after{opacity:1}

/* ---------- PROGRESS + NAV ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--peri),var(--aqua),var(--coral));box-shadow:0 0 14px color-mix(in srgb,var(--peri) 60%,transparent)}

.topbar{position:sticky;top:0;z-index:100}
.topbar__in{
  display:flex;align-items:center;gap:22px;height:var(--nav-h);margin-top:12px;
  padding:0 8px 0 18px;border-radius:16px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border:1px solid var(--edge);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  transition:box-shadow .4s var(--e),background .4s var(--e);
}
.topbar.is-stuck .topbar__in{box-shadow:0 18px 40px -22px rgba(0,12,8,.78)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-d);font-weight:800;letter-spacing:-.04em;font-size:1.1rem}
.brand__mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--peri),var(--aqua));position:relative;flex:0 0 auto;box-shadow:0 0 18px -4px var(--peri)}
.brand__mark::after{content:"";position:absolute;inset:6px 6px auto 6px;height:2px;border-radius:2px;background:rgba(255,255,255,.9)}
.brand small{font-family:var(--ff);font-weight:500;color:var(--fg-3);font-size:.76rem;letter-spacing:0}
.navlinks{display:none;gap:4px;margin-left:auto}
.navlinks a{padding:9px 13px;border-radius:10px;font-size:.88rem;font-weight:550;color:var(--fg-2);transition:.22s var(--e)}
.navlinks a:hover{color:var(--fg);background:var(--glass)}
.topbar__act{margin-left:auto;display:flex;align-items:center;gap:8px}
@media(min-width:1000px){.navlinks{display:flex}.topbar__act{margin-left:0}}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--edge);display:grid;place-items:center;transition:.24s var(--e);background:var(--glass-2)}
.icon-btn:hover{background:var(--glass);transform:translateY(-1px)}
.icon-btn svg{width:17px;height:17px}
.theme-btn .moon{display:none}
[data-theme="light"] .theme-btn .sun{display:none}
[data-theme="light"] .theme-btn .moon{display:block}
.burger{display:grid}
@media(min-width:1000px){.burger{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none;overflow:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(3,12,9,.66);opacity:0;transition:opacity .4s var(--e);backdrop-filter:blur(6px)}
.drawer__panel{
  position:absolute;right:0;top:0;bottom:0;width:min(86vw,360px);
  background:var(--bg-2);border-left:1px solid var(--edge);
  padding:22px;transform:translateX(102%);transition:transform .48s var(--e-out);
  display:flex;flex-direction:column;gap:6px;
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__panel a{padding:15px 14px;border-radius:12px;font-family:var(--ff-d);font-size:1.15rem;font-weight:650;letter-spacing:-.03em;border-bottom:1px solid var(--edge-2)}
.drawer__panel a:active{background:var(--glass)}
.drawer__top{display:flex;justify-content:flex-end;margin-bottom:10px}
.drawer__panel a.btn{border-bottom:0;padding:14px 24px;font-size:.94rem;font-family:var(--ff);letter-spacing:-.005em;justify-content:center}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;border-radius:13px;
  font-weight:650;font-size:.94rem;letter-spacing:-.005em;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .24s var(--e),box-shadow .3s var(--e),background .3s var(--e),border-color .3s var(--e);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--pri{background:linear-gradient(120deg,var(--peri),var(--peri-d));color:#fff;box-shadow:0 14px 34px -14px var(--peri)}
.btn--pri:hover{box-shadow:0 20px 44px -14px var(--peri)}
.btn--pri:hover svg{transform:translateX(4px)}
.btn--pri::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-120%);transition:transform .7s var(--e)}
.btn--pri:hover::before{transform:translateX(120%)}
.btn--ghost{border-color:var(--edge);color:var(--fg);background:var(--glass-2);backdrop-filter:blur(12px)}
.btn--ghost:hover{background:var(--glass);border-color:var(--glass-hi)}
.btn-row{display:flex;flex-wrap:wrap;gap:11px}

.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  font-size:.79rem;font-weight:600;border:1px solid var(--edge);background:var(--glass-2);
  transition:.24s var(--e);white-space:nowrap;
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--tint,var(--peri));flex:0 0 auto}
.status{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap;font-weight:500}
.status--now{color:#0C2E26;background:var(--aqua)}
.status--road{color:var(--fg-2);background:var(--glass);border:1px solid var(--edge)}
[data-theme="dark"] .status--now{color:#04120F}

/* ---------- SECTION RHYTHM ---------- */
.sec{padding:clamp(72px,9vw,132px) 0;position:relative}
.sec-head{max-width:760px;margin-bottom:clamp(34px,4.6vw,58px)}
.sec-head .kicker{margin-bottom:18px}
.sec-head h2{margin-bottom:18px}
.sec-head .lede{max-width:62ch}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .lede{margin-inline:auto}
.sec-head--center .kicker{justify-content:center}

/* ---------- HERO ---------- */
.hero{padding:clamp(46px,6vw,78px) 0 clamp(56px,7vw,96px);position:relative}
.hero__grid{display:grid;gap:clamp(40px,5vw,60px);align-items:center}
@media(min-width:1020px){.hero__grid{grid-template-columns:1.02fr .98fr}}
.hero__copy>*+*{margin-top:22px}
.hero h1{max-width:11ch}
.hero__id{display:flex;align-items:center;gap:13px;font-family:var(--ff-d);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;letter-spacing:-.03em}
.hero__id::before{content:"";width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--peri),var(--aqua));flex:0 0 auto}
.hero .lede{max-width:52ch}
.hero__proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.hero__proof .chip{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}

/* the stack */
.scene{position:relative;perspective:1400px;min-height:440px;display:grid;place-items:center}
.stack{width:min(100%,540px);position:relative;transform-style:preserve-3d;transition:transform .6s var(--e-out);will-change:transform}
.layer{position:relative;margin-inline:auto;border-radius:18px;border:1px solid var(--edge);transition:transform .7s var(--e-out),box-shadow .7s var(--e)}
.layer--space{
  padding:22px;border-radius:24px;background:var(--glass);
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:0 40px 90px -34px rgba(0,14,9,.84),0 0 0 1px var(--edge-2);
  transform:translateZ(58px);
}
.layer--space::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 80% at 6% 4%,color-mix(in srgb,var(--peri) 32%,transparent),transparent 62%),radial-gradient(56% 76% at 96% 8%,color-mix(in srgb,var(--aqua) 26%,transparent),transparent 64%),radial-gradient(58% 80% at 70% 104%,color-mix(in srgb,var(--coral) 22%,transparent),transparent 66%)}
.layer--space::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,var(--glass-hi),transparent 30%);opacity:.55}
.layer__head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.layer__t{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:7px}
.layer__n{font-family:var(--ff-d);font-size:1.28rem;font-weight:750;letter-spacing:-.04em}
.pulse{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--aqua) 16%,transparent);border:1px solid color-mix(in srgb,var(--aqua) 34%,transparent);color:var(--aqua)}
.pulse i{width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:blip 2s var(--e) infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--aqua) 60%,transparent)}50%{opacity:.5;box-shadow:0 0 0 7px transparent}}
.duo{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duo__col{padding:14px;border-radius:14px;background:var(--glass-2);border:1px solid var(--edge-2)}
.duo__col h3{font-family:var(--ff-m);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:11px;font-weight:500}
.mini{display:flex;flex-wrap:wrap;gap:6px}
.mini span{font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--edge-2)}
.spine{position:relative;z-index:2;margin-top:12px;padding:10px;border-radius:12px;text-align:center;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);background:var(--glass-2);border:1px solid var(--edge-2);line-height:1.7}
.layer--os,.layer--dev{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--glass-2);backdrop-filter:blur(10px)}
.layer--os{width:92%;height:60px;margin-top:14px;transform:translateZ(24px)}
.layer--dev{width:84%;height:54px;margin-top:10px;transform:translateZ(0)}
.layer--os small,.layer--dev small{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.layer--os b,.layer--dev b{font-size:.78rem;font-weight:600;color:var(--fg-2)}
.scene__cap{text-align:center;margin-top:18px;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3)}
.node{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--peri);box-shadow:0 0 0 6px color-mix(in srgb,var(--peri) 16%,transparent),0 0 20px var(--peri);animation:orb 9s var(--e) infinite}
.node:nth-of-type(1){left:-2%;top:14%}
.node:nth-of-type(2){right:-1%;top:6%;background:var(--aqua);box-shadow:0 0 0 6px color-mix(in srgb,var(--aqua) 16%,transparent),0 0 20px var(--aqua);animation-delay:-3s}
.node:nth-of-type(3){right:4%;bottom:22%;background:var(--coral);box-shadow:0 0 0 6px color-mix(in srgb,var(--coral) 16%,transparent),0 0 20px var(--coral);animation-delay:-6s}
.node:nth-of-type(4){left:6%;bottom:12%;background:var(--violet);box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 16%,transparent),0 0 20px var(--violet);animation-delay:-1.5s}
@keyframes orb{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(10px,-16px,0)}}

/* ---------- MARQUEE ---------- */
.ticker{border-block:1px solid var(--edge);padding:15px 0;overflow:hidden;background:var(--glass-2);backdrop-filter:blur(10px)}
.ticker__t{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
.ticker__t span{display:inline-flex;align-items:center;gap:14px;padding:0 26px;font-family:var(--ff-m);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.ticker__t span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--peri);opacity:.65}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- SHIFT STEPS ---------- */
.steps{display:grid;gap:14px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:28px;border-radius:20px;transition:transform .4s var(--e),border-color .4s var(--e)}
.step:hover{transform:translateY(-5px)}
.step__n{font-family:var(--ff-m);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-bottom:34px;display:block}
.step h3{font-size:1.32rem;margin-bottom:11px}
.step p{color:var(--fg-2);font-size:.95rem}
.quote{margin-top:38px;padding:32px 0 0;border-top:1px solid var(--edge);font-family:var(--ff-d);font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.04em;max-width:26ch;font-weight:650}

/* ---------- TWO WORLDS ---------- */
.worlds{display:grid;gap:16px;align-items:stretch}
@media(min-width:980px){.worlds{grid-template-columns:1fr 150px 1fr}}
.world{padding:clamp(26px,3vw,36px);border-radius:22px}
.world h3{margin-bottom:12px}
.world p{color:var(--fg-2);font-size:.95rem}
.world .mini{margin-top:22px;gap:7px}
.world .mini span{padding:7px 12px;font-size:.76rem}
.bridge{display:grid;place-items:center;position:relative;min-height:140px}
.bridge__l{position:absolute;background:linear-gradient(90deg,transparent,var(--peri),transparent);height:1px;width:100%;top:50%;opacity:.5}
@media(max-width:979px){.bridge__l{width:1px;height:100%;left:50%;top:0;background:linear-gradient(180deg,transparent,var(--peri),transparent)}}
.bridge__c{
  position:relative;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-family:var(--ff-m);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.7;color:var(--fg);
  background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(18px);
  box-shadow:0 0 60px -18px var(--peri);
}
.bridge__c::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--edge);animation:ring 4.5s var(--e) infinite}
@keyframes ring{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.22);opacity:0}}

/* ---------- CAPABILITY EXPLORER (interactive) ---------- */
.explorer{display:grid;gap:16px}
@media(min-width:940px){.explorer{grid-template-columns:290px 1fr;align-items:start}}
.exp-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.exp-tabs::-webkit-scrollbar{display:none}
@media(min-width:940px){.exp-tabs{flex-direction:column;overflow:visible;gap:5px}}
.exp-tab{
  display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;
  border:1px solid transparent;font-weight:600;font-size:.92rem;text-align:left;
  transition:.28s var(--e);white-space:nowrap;flex:0 0 auto;width:100%;
}
@media(max-width:939px){.exp-tab{width:auto}}
.exp-tab i{width:8px;height:8px;border-radius:50%;background:var(--tint);flex:0 0 auto;transition:.28s var(--e)}
.exp-tab:hover{background:var(--glass-2)}
.exp-tab[aria-selected="true"]{background:var(--glass);border-color:var(--edge);box-shadow:0 10px 30px -18px rgba(0,12,8,.78)}
.exp-tab[aria-selected="true"] i{box-shadow:0 0 0 5px color-mix(in srgb,var(--tint) 22%,transparent),0 0 16px var(--tint)}
.exp-panel{padding:clamp(26px,3.4vw,42px);border-radius:24px;min-height:392px;position:relative}
.exp-panel__glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;transition:background .6s var(--e);
  background:radial-gradient(70% 90% at 88% 4%,color-mix(in srgb,var(--tint) 26%,transparent),transparent 62%)}
.exp-body{position:relative;z-index:2;animation:fade .5s var(--e-out)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.exp-body__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.exp-name{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tint);font-weight:500}
.exp-body h3{font-size:clamp(1.6rem,3vw,2.35rem);margin-bottom:16px;max-width:18ch}
.exp-body>p{color:var(--fg-2);max-width:56ch;font-size:1.02rem}
.exp-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
@media(min-width:620px){.exp-list{grid-template-columns:1fr 1fr;gap:2px 24px}}
.exp-list li{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--edge-2);font-size:.9rem;color:var(--fg-2)}
.exp-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tint);margin-top:.6em;flex:0 0 auto}

/* ---------- FLOW STEPPER (code motion) ---------- */
.flow{border-radius:24px;overflow:hidden;--flow-tint:var(--peri)}
.flow__ask{display:flex;gap:14px;align-items:flex-start;padding:24px;border-bottom:1px solid var(--edge);background:linear-gradient(100deg,color-mix(in srgb,var(--peri) 14%,transparent),color-mix(in srgb,var(--aqua) 10%,transparent),color-mix(in srgb,var(--coral) 12%,transparent))}
.flow__av{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(140deg,var(--peri),var(--aqua));color:#fff;font-family:var(--ff-d);font-weight:800;font-size:.82rem;box-shadow:0 0 0 6px color-mix(in srgb,var(--peri) 10%,transparent)}
.flow__ask p{font-size:1.02rem;font-weight:600;max-width:64ch;line-height:1.5}
.flow__motion{position:relative;padding:34px 22px 28px;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 68%,transparent),transparent);overflow:hidden}
.flow__motion::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 120% at var(--flow-x,8%) 50%,color-mix(in srgb,var(--flow-tint) 13%,transparent),transparent 72%);transition:background .7s var(--e)}
.flow__track{position:absolute;left:6.5%;right:6.5%;top:59px;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--peri) 28%,transparent),color-mix(in srgb,var(--aqua) 22%,transparent),color-mix(in srgb,var(--coral) 22%,transparent));opacity:.62}
.flow__track::after{content:"";position:absolute;inset:-1px 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--flow-tint) 72%,transparent),transparent);filter:blur(4px);animation:trackBreath 3.4s ease-in-out infinite}
@keyframes trackBreath{0%,100%{opacity:.25}50%{opacity:.9}}
.flow__rail{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;scrollbar-width:none}
.flow__rail::-webkit-scrollbar{display:none}
.fstep{min-width:0;padding:52px 7px 2px;text-align:center;position:relative;transition:opacity .38s var(--e),transform .5s var(--e-out),color .35s var(--e);opacity:.38}
.fstep::before{content:"";position:absolute;top:16px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg-2);border:2px solid var(--fg-3);box-shadow:0 0 0 7px color-mix(in srgb,var(--bg) 72%,transparent);transition:all .45s var(--e-out)}
.fstep::after{content:"";position:absolute;top:11px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;border:1px solid transparent;transform:scale(.6);opacity:0;transition:.45s var(--e-out)}
.fstep.is-done{opacity:.7}
.fstep.is-done::before{border-color:color-mix(in srgb,var(--aqua) 66%,var(--peri));background:color-mix(in srgb,var(--aqua) 30%,var(--bg-2))}
.fstep[aria-selected="true"]{opacity:1;transform:translateY(-3px)}
.fstep[aria-selected="true"]::before{width:18px;height:18px;margin-left:-9px;top:14px;border-color:var(--flow-tint);background:var(--flow-tint);box-shadow:0 0 0 7px color-mix(in srgb,var(--flow-tint) 14%,transparent),0 0 26px color-mix(in srgb,var(--flow-tint) 70%,transparent)}
.fstep[aria-selected="true"]::after{border-color:color-mix(in srgb,var(--flow-tint) 46%,transparent);transform:scale(1.4);opacity:1;animation:flowRing 1.8s ease-out infinite}
@keyframes flowRing{0%{transform:scale(.8);opacity:.75}100%{transform:scale(2.1);opacity:0}}
.fstep small{font-family:var(--ff-m);font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:6px;white-space:nowrap}
.fstep b{font-family:var(--ff-d);font-size:.9rem;letter-spacing:-.025em;display:block;white-space:nowrap}
.flow-packet{position:absolute;z-index:4;top:51px;left:0;width:16px;height:16px;margin:-1px 0 0 -8px;border-radius:50%;background:var(--flow-tint);box-shadow:0 0 0 6px color-mix(in srgb,var(--flow-tint) 13%,transparent),0 0 22px var(--flow-tint);pointer-events:none;transition:left .86s cubic-bezier(.18,.82,.21,1),background .5s var(--e),box-shadow .5s var(--e);will-change:left}
.flow-packet::before,.flow-packet::after{content:"";position:absolute;top:50%;right:9px;height:2px;border-radius:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--flow-tint) 62%,transparent))}
.flow-packet::before{width:30px;opacity:.65}.flow-packet::after{width:54px;opacity:.24;filter:blur(2px)}
.flow__signal{position:relative;z-index:2;margin:20px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;max-width:100%;padding:7px 12px;border-radius:999px;border:1px solid var(--edge-2);background:var(--glass-2);font-family:var(--ff-m);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.flow__signal i{width:6px;height:6px;border-radius:50%;background:var(--flow-tint);box-shadow:0 0 14px var(--flow-tint);transition:background .5s var(--e)}
.flow__out{position:relative;padding:26px;display:grid;gap:6px;min-height:118px;overflow:hidden}
.flow__out::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 150% at 0% 50%,color-mix(in srgb,var(--flow-tint) 8%,transparent),transparent 70%);transition:background .5s var(--e)}
.flow__out>*{position:relative;z-index:1}.flow__out h4{font-size:1.15rem;letter-spacing:-.03em}.flow__out p{color:var(--fg-2);font-size:.95rem;max-width:60ch}
.flow__foot{padding:18px 26px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--glass-2)}
.flow__foot b{font-family:var(--ff-d);letter-spacing:-.025em;font-size:1rem}

@media(max-width:760px){
  .flow__motion{padding:26px 18px 22px;overflow:hidden}
  .flow__track{left:31px;right:auto;top:39px;bottom:39px;width:2px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--peri) 30%,transparent),color-mix(in srgb,var(--aqua) 24%,transparent),color-mix(in srgb,var(--coral) 24%,transparent))}
  .flow__rail{display:grid;grid-template-columns:1fr;gap:3px}
  .fstep{padding:12px 10px 12px 58px;text-align:left;min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px}
  .fstep::before{top:50%;left:13px;margin:-7px 0 0 0}.fstep::after{top:50%;left:8px;margin:-12px 0 0 0}
  .fstep[aria-selected="true"]{transform:translateX(4px);background:var(--glass-2)}
  .fstep[aria-selected="true"]::before{top:50%;left:11px;margin:-9px 0 0 0}
  .fstep small{margin:0;white-space:normal}.fstep b{font-size:.95rem}
  .flow-packet{top:0;left:31px!important;margin:-8px 0 0 -8px;transition:top .86s cubic-bezier(.18,.82,.21,1),background .5s var(--e),box-shadow .5s var(--e)}
  .flow-packet::before,.flow-packet::after{top:auto;right:auto;left:50%;bottom:9px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--flow-tint) 62%,transparent))}
  .flow-packet::before{height:30px;opacity:.65}.flow-packet::after{height:54px;opacity:.24;width:2px}
  .flow__signal{margin-top:14px;font-size:.52rem;white-space:normal;text-align:center}
}

/* ---------- MEMORY GRAPH ---------- */
.mem{display:grid;gap:44px;align-items:center}
@media(min-width:980px){.mem{grid-template-columns:.9fr 1.1fr;gap:64px}}
.mem-list{display:grid;margin-top:26px}
.mem-item{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:17px 0;border-top:1px solid var(--edge-2)}
.mem-item span:first-child{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--ff-m);font-size:.62rem;background:var(--glass);border:1px solid var(--edge-2);color:var(--peri)}
.mem-item b{display:block;font-family:var(--ff-d);letter-spacing:-.025em;font-size:.99rem;margin-bottom:2px}
.mem-item em{font-style:normal;color:var(--fg-2);font-size:.89rem}
.graph{border-radius:26px;padding:12px;aspect-ratio:1.1/1}
.graph svg{width:100%;height:100%}
.graph .lnk{stroke:var(--peri);stroke-opacity:.4;stroke-width:1.2;fill:none;stroke-dasharray:5 7;animation:dash 3.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.graph .nd{animation:pop 4.4s var(--e) infinite}
.graph .nd:nth-of-type(2){animation-delay:-.7s}.graph .nd:nth-of-type(3){animation-delay:-1.4s}
.graph .nd:nth-of-type(4){animation-delay:-2.1s}.graph .nd:nth-of-type(5){animation-delay:-2.8s}.graph .nd:nth-of-type(6){animation-delay:-3.5s}
@keyframes pop{0%,100%{r:8;opacity:.85}50%{r:11;opacity:1}}
.graph .core{animation:core 3s var(--e) infinite}
@keyframes core{0%,100%{opacity:.28;r:44}50%{opacity:.6;r:52}}
.graph text{font-family:var(--ff-m);font-size:11px;letter-spacing:1.2px;fill:var(--fg-3)}

/* ---------- COMPUTE ROUTER (policy-routing motion) ---------- */
.router{display:grid;gap:16px}
@media(min-width:980px){.router{grid-template-columns:.8fr 1.2fr;align-items:stretch}}
.paths{display:grid;gap:9px;align-content:start}
.path{display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:16px;border:1px solid var(--edge-2);text-align:left;transition:transform .35s var(--e-out),background .3s var(--e),border-color .35s var(--e),box-shadow .35s var(--e);background:var(--glass-2);width:100%}
.path:hover{background:var(--glass);transform:translateX(4px)}
.path[aria-selected="true"]{background:var(--glass);border-color:color-mix(in srgb,var(--tint) 46%,transparent);box-shadow:0 0 42px -20px var(--tint);transform:translateX(5px)}
.path i{width:11px;height:11px;border-radius:50%;background:var(--tint);flex:0 0 auto;transition:.3s var(--e)}
.path[aria-selected="true"] i{box-shadow:0 0 0 6px color-mix(in srgb,var(--tint) 20%,transparent),0 0 18px var(--tint);animation:pathPulse 1.8s ease-out infinite}
@keyframes pathPulse{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 24%,transparent),0 0 16px var(--tint)}100%{box-shadow:0 0 0 10px transparent,0 0 22px color-mix(in srgb,var(--tint) 30%,transparent)}}
.path b{font-family:var(--ff-d);font-size:1.02rem;letter-spacing:-.028em;display:block}.path small{color:var(--fg-3);font-size:.8rem}
.router__view{padding:clamp(22px,3vw,34px);border-radius:22px;display:flex;flex-direction:column;gap:18px;position:relative;min-height:430px;overflow:hidden}
.router__view::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 72% 52%,color-mix(in srgb,var(--tint) 10%,transparent),transparent 72%);pointer-events:none;transition:background .55s var(--e)}
.router__view>*{position:relative;z-index:2}.router__view h3{font-size:1.5rem;letter-spacing:-.035em}.router__view p{color:var(--fg-2);font-size:.96rem;max-width:50ch}
.router__diagram{margin-top:auto;border:1px solid var(--edge-2);border-radius:18px;background:color-mix(in srgb,var(--bg-2) 56%,transparent);padding:8px;overflow:hidden}
.router__diagram svg{width:100%;height:auto;min-height:240px}
.route-base{fill:none;stroke:var(--edge);stroke-width:1.4}.route-active{fill:none;stroke:var(--tint);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 9;animation:routeDash 1.1s linear infinite;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tint) 55%,transparent))}
@keyframes routeDash{to{stroke-dashoffset:-32}}
.route-box{fill:color-mix(in srgb,var(--glass) 86%,transparent);stroke:var(--edge);stroke-width:1}.route-box.is-active{stroke:var(--tint);stroke-width:1.6;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tint) 35%,transparent))}
.route-policy-ring{fill:none;stroke:var(--tint);stroke-width:1.4;transform-origin:300px 150px;animation:policyRing 2.2s ease-out infinite}
@keyframes policyRing{0%{r:35;opacity:.8}100%{r:52;opacity:0}}
.route-policy-core{fill:color-mix(in srgb,var(--tint) 18%,var(--bg-2));stroke:var(--tint);stroke-width:1.4;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tint) 35%,transparent))}
.route-packet{fill:var(--tint);filter:drop-shadow(0 0 8px var(--tint))}.route-packet-trail{fill:color-mix(in srgb,var(--tint) 42%,transparent)}
.route-title{font-family:var(--ff-d);font-size:12px;font-weight:700;fill:var(--fg);letter-spacing:-.2px}.route-label{font-family:var(--ff-m);font-size:8.5px;letter-spacing:1px;fill:var(--fg-3)}.route-check{font-family:var(--ff-m);font-size:7.6px;letter-spacing:.7px;fill:var(--fg-3)}
.route-chip{fill:color-mix(in srgb,var(--glass) 80%,transparent);stroke:var(--edge-2)}
.route-dest{opacity:.42;transition:opacity .45s var(--e)}.route-dest.is-active{opacity:1}
.router__status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px;font-family:var(--ff-m);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.router__status span{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;background:var(--glass-2);border:1px solid var(--edge-2)}.router__status i{width:6px;height:6px;border-radius:50%;background:var(--tint);box-shadow:0 0 10px var(--tint)}
@media(max-width:700px){.router__view{min-height:0}.router__diagram{padding:4px}.router__diagram svg{min-height:0}.route-title{font-size:11px}.route-label{font-size:7.4px}.route-check{display:none}}

.policy{margin-top:16px;padding:clamp(26px,3.6vw,44px);border-radius:24px}
.policy h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:12px;max-width:20ch}
.policy>p{color:var(--fg-2);max-width:50ch}
.pol-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
@media(min-width:720px){.pol-list{grid-template-columns:1fr 1fr;column-gap:34px}}
.pol-list li{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--edge-2);font-size:.9rem;color:var(--fg-2)}
.pol-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);margin-top:.6em;flex:0 0 auto}

.exec{margin-top:16px;padding:clamp(26px,3.6vw,44px);border-radius:24px;display:grid;gap:30px}
@media(min-width:900px){.exec{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.exec h3{font-size:clamp(1.45rem,2.6vw,2.05rem);margin:14px 0 14px;max-width:20ch}
.exec p{color:var(--fg-2);max-width:48ch;font-size:.97rem}
.rules{display:grid}
.rule{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-top:1px solid var(--edge-2);font-size:.91rem;color:var(--fg-2)}
.rule:last-child{border-bottom:1px solid var(--edge-2)}
.rule b{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--aqua);font-weight:500}
.rule.deny b{color:var(--coral)}

/* ---------- FABRIC ---------- */
.fabric{display:grid;gap:14px}
@media(min-width:900px){.fabric{grid-template-columns:repeat(3,1fr)}}
.fab{padding:30px;border-radius:22px;display:flex;flex-direction:column;transition:transform .4s var(--e)}
.fab:hover{transform:translateY(-6px)}
.fab .status{align-self:flex-start;margin-bottom:52px}
.fab h3{font-size:1.28rem;margin-bottom:11px}
.fab p{color:var(--fg-2);font-size:.93rem}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto}
.qa{border-bottom:1px solid var(--edge-2)}
.qa summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-family:var(--ff-d);font-size:clamp(1.02rem,1.7vw,1.24rem);font-weight:650;letter-spacing:-.03em;transition:color .25s var(--e)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--peri)}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);transform:rotate(45deg);transition:transform .35s var(--e)}
.qa[open] summary::after{transform:rotate(-135deg);border-color:var(--peri)}
.qa__a{padding:0 0 26px;color:var(--fg-2);font-size:.96rem;max-width:70ch;animation:fade .4s var(--e-out)}

/* ---------- FINALE ---------- */
.finale{padding:clamp(84px,12vw,168px) 0;text-align:center;position:relative}
.finale h2{max-width:13ch;margin-inline:auto}
.finale p{font-family:var(--ff-d);font-size:clamp(1.15rem,2.3vw,1.7rem);color:var(--fg-2);margin:22px auto 32px;font-weight:500;letter-spacing:-.03em}
.finale .btn-row{justify-content:center}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--edge);padding:60px 0 30px;background:var(--glass-2);backdrop-filter:blur(14px)}
.foot-grid{display:grid;gap:32px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer h4{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:16px;font-weight:500}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{color:var(--fg-2);font-size:.9rem;transition:color .2s}
.site-footer a:hover{color:var(--fg)}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--edge-2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:.82rem;color:var(--fg-3)}

/* ---------- REVEAL ---------- */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.js .rv.in{opacity:1;transform:none}
@media(max-width:600px){
  .duo{grid-template-columns:1fr}
  .duo__col:nth-child(2){display:none}
  .scene{min-height:380px}
  .btn-row .btn,.drawer__panel .btn{width:100%}
  .exp-panel{min-height:0}
  .flow__ask{padding:20px}
  .fstep{flex:1 0 132px}
  .quote{margin-top:30px;padding-top:26px}
}


/* =====================================================================
   V5 REFINEMENT - responsive composition + subtle motion physics
   Keeps the V4 visual language; improves phone/tablet ergonomics.
   ===================================================================== */

:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}
html{scroll-padding-top:calc(var(--nav-h) + 30px)}
body{text-rendering:optimizeLegibility}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
p,.lede,.world p,.step p,.fab p,.qa__a,.flow__out p,.router__view p{text-wrap:pretty}
.topbar{padding-top:var(--safe-t)}
.drawer__panel{
  padding:max(22px,var(--safe-t)) max(22px,var(--safe-r)) max(22px,var(--safe-b)) 22px;
  overscroll-behavior:contain;
}

/* Keep motion composable. JS only changes these custom properties. */
.btn{
  --mag-x:0px;--mag-y:0px;--lift:0px;--press:1;
  transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0) scale(var(--press));
}
/* V27: promote only while a control is actually being driven. A permanent
   will-change on every button and card holds a compositor layer each, which on
   a phone costs more memory than the promotion saves. */
.btn:hover,.btn:active,.btn:focus-visible{will-change:transform}
.btn:hover{--lift:-2px;transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0) scale(var(--press))}
.btn:active{--lift:0px;--press:.985;transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0) scale(var(--press))}
.step,.fab{--surface-lift:0px;--surface-scale:1;transform:translate3d(0,var(--surface-lift),0) scale(var(--surface-scale))}
.step:hover,.fab:hover,.step:active,.fab:active,.lit.is-press{will-change:transform}
.step:hover{--surface-lift:-4px;transform:translate3d(0,var(--surface-lift),0) scale(var(--surface-scale))}
.fab:hover{--surface-lift:-5px;transform:translate3d(0,var(--surface-lift),0) scale(var(--surface-scale))}
.lit.is-press{--surface-scale:.992}
.aurora{transform:translate3d(var(--ambient-x,0px),var(--ambient-y,0px),0);will-change:transform}

/* Better balance for centered and left-aligned section copy. */
.sec-head{width:min(100%,760px)}
.sec-head:not(.sec-head--center) h2{max-width:18ch}
.sec-head:not(.sec-head--center) .lede{max-width:57ch}
.quote{max-width:29ch}

/* Tablet: compose intentionally instead of merely scaling the phone layout. */
@media (min-width:600px) and (max-width:1099px){
  :root{--gut:clamp(28px,4vw,40px)}
  .hero{padding-top:clamp(42px,6vw,64px)}
  .hero__copy{max-width:760px}
  .hero h1{max-width:12ch}
  .hero .lede{max-width:58ch}
  .scene{width:min(100%,680px);margin-inline:auto;min-height:480px}
  .stack{width:min(100%,600px)}
  .sec-head{max-width:720px}
  .world{padding:clamp(28px,4vw,38px)}
  .exp-panel{min-height:360px}
  .graph{width:min(100%,650px);margin-inline:auto}
}

/* iPad portrait / small tablet: use the width rather than leaving large single cards. */
@media (min-width:760px) and (max-width:899px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .step{padding:20px}
  .step__n{margin-bottom:24px}
  .step h3{font-size:1.12rem}
  .step p{font-size:.88rem;line-height:1.55}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* Keep iPad-size headers clean; full desktop nav begins when it has breathing room. */
@media (min-width:1000px) and (max-width:1099px){
  .navlinks{display:none}
  .burger{display:grid}
  .topbar__act{margin-left:auto}
}
@media (min-width:1100px){
  .navlinks{display:flex}
  .burger{display:none}
  .topbar__act{margin-left:0}
}

/* Phone composition */
@media (max-width:599px){
  :root{--gut:18px;--nav-h:60px}
  html{scroll-padding-top:82px}
  body{font-size:16px;line-height:1.58}
  .topbar__in{height:var(--nav-h);margin-top:8px;padding:0 7px 0 12px;gap:8px;border-radius:14px}
  .brand{gap:8px;font-size:1.04rem}
  .brand__mark{width:24px;height:24px;border-radius:7px}
  .brand small{display:none}
  .topbar__act{gap:6px}
  .topbar__act>a.btn{display:none}
  .icon-btn{width:40px;height:40px;border-radius:10px}
  .drawer__panel{width:min(88vw,350px);padding-left:20px}

  .hero{padding:32px 0 58px}
  .hero__grid{gap:30px}
  .hero__copy>*+*{margin-top:18px}
  .d1{font-size:clamp(2.55rem,13.4vw,3.7rem);line-height:.95;letter-spacing:-.047em}
  .d2{font-size:clamp(2rem,10.2vw,2.8rem);line-height:.99}
  .d3{font-size:clamp(1.3rem,6.5vw,1.65rem)}
  .kicker{font-size:.63rem;letter-spacing:.115em}
  .hero h1{max-width:10.5ch}
  .hero__id{font-size:1.12rem;gap:10px;align-items:center;line-height:1.2}
  .hero__id::before{width:26px}
  .lede{font-size:1rem;line-height:1.58}
  .hero__proof{gap:7px;margin-top:22px}
  .hero__proof .chip{font-size:.61rem;letter-spacing:.045em;padding:6px 10px}

  .scene{min-height:0;padding-top:8px;perspective:1000px}
  .stack{width:100%;max-width:540px}
  .layer--space{padding:16px;border-radius:20px;transform:translateZ(32px)}
  .layer__head{margin-bottom:14px;gap:10px;align-items:center}
  .layer__t{font-size:.52rem;letter-spacing:.11em;margin-bottom:5px}
  .layer__n{font-size:1.04rem;line-height:1.08}
  .pulse{font-size:.5rem;letter-spacing:.075em;padding:5px 8px;gap:5px}
  .pulse i{width:5px;height:5px}
  .duo{grid-template-columns:1fr;gap:8px}
  .duo__col{padding:11px;border-radius:12px}
  .duo__col:nth-child(2){display:block}
  .duo__col h3{font-size:.51rem;margin-bottom:8px}
  .mini{gap:5px}
  .mini span{font-size:.65rem;padding:4px 8px}
  .spine{margin-top:8px;padding:8px;font-size:.47rem;letter-spacing:.065em;line-height:1.55}
  .layer--os,.layer--dev{
    display:grid;grid-template-columns:1fr;gap:2px;height:auto;min-height:50px;
    padding:9px 14px;align-content:center;justify-content:stretch;text-align:left;
  }
  .layer--os{width:94%;margin-top:11px;transform:translateZ(16px)}
  .layer--dev{width:88%;margin-top:8px}
  .layer--os small,.layer--dev small{font-size:.49rem;letter-spacing:.105em}
  .layer--os b,.layer--dev b{font-size:.69rem;line-height:1.3}
  .scene__cap{font-size:.5rem;letter-spacing:.08em;line-height:1.5;max-width:35ch;margin:13px auto 0}
  .node{width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb,var(--peri) 14%,transparent),0 0 15px var(--peri)}
  .node:nth-of-type(1){left:1%;top:10%}.node:nth-of-type(2){right:1%;top:3%}.node:nth-of-type(3){right:2%;bottom:20%}.node:nth-of-type(4){left:3%;bottom:9%}

  .ticker{padding:12px 0}
  .ticker__t span{padding:0 18px;font-size:.61rem;letter-spacing:.1em}
  .sec{padding:68px 0}
  .sec-head{margin-bottom:30px}
  .sec-head .kicker{margin-bottom:14px}
  .sec-head h2{margin-bottom:14px;max-width:15ch}
  .sec-head--center h2{margin-inline:auto}
  .step{padding:22px}
  .step__n{margin-bottom:22px}
  .quote{margin-top:30px;padding-top:25px;font-size:clamp(1.45rem,7.5vw,2rem);max-width:24ch}

  .worlds{gap:12px}
  .world{padding:22px}
  .world .mini{margin-top:18px}
  .bridge{min-height:108px}
  .bridge__c{width:92px;height:92px;font-size:.49rem;line-height:1.55}

  .explorer{gap:12px}
  .exp-tabs{
    margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 7px;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)
  }
  .exp-tab{scroll-snap-align:start;padding:11px 13px;font-size:.86rem}
  .exp-panel{padding:22px;border-radius:20px;min-height:0}
  .exp-body__top{margin-bottom:18px}
  .exp-body h3{font-size:1.55rem;max-width:16ch;margin-bottom:13px}
  .exp-body>p{font-size:.95rem}
  .exp-list{margin-top:21px}
  .exp-list li{padding:10px 0;font-size:.86rem}

  .flow{border-radius:20px}
  .flow__ask{padding:18px;gap:11px}
  .flow__av{width:34px;height:34px;border-radius:10px}
  .flow__ask p{font-size:.94rem;line-height:1.48}
  .flow__rail{scroll-snap-type:x mandatory}
  .fstep{flex:0 0 138px;padding:15px 14px 17px;scroll-snap-align:center}
  .flow__out{padding:22px;min-height:128px}
  .flow__foot{padding:17px 22px;display:grid;gap:5px}
  .flow__foot b{font-size:.96rem}

  .mem{gap:28px}
  .mem-list{margin-top:22px}
  .mem-item{padding:15px 0}
  .graph{padding:6px;border-radius:20px;aspect-ratio:1.08/1}
  .graph text{font-size:9.5px;letter-spacing:.9px}

  .router{gap:12px}
  .path{padding:15px;border-radius:14px}
  .path b{font-size:.98rem}
  .path small{font-size:.75rem;line-height:1.4;display:block;margin-top:2px}
  .router__view{padding:22px;border-radius:20px;min-height:300px}
  .policy,.exec{padding:22px;border-radius:20px}
  .pol-list{margin-top:20px}
  .rule{align-items:flex-start;padding:13px 0;line-height:1.4}
  .rule span{max-width:72%}
  .rule b{text-align:right;margin-top:2px}

  .fabric{gap:11px}
  .fab{padding:23px}
  .fab .status{margin-bottom:34px}
  .qa summary{padding:21px 40px 21px 0;line-height:1.18}
  .finale{padding:88px 0}
  .finale h2{max-width:10.5ch}
  .finale p{margin:18px auto 27px}
  .site-footer{padding:50px 0 calc(28px + var(--safe-b))}
  .foot-grid{gap:28px}
  .foot-base{margin-top:36px;display:grid;gap:8px}

  /* Mobile GPU budget: keep glass, reduce blur cost. */
  .glass{backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35)}
  .aurora i{filter:blur(72px)}
}

/* Landscape phones: avoid a comically tall stack while retaining both worlds. */
@media (max-width:899px) and (orientation:landscape) and (max-height:560px){
  .hero{padding-top:28px}
  .hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center}
  .d1{font-size:clamp(2.2rem,7vw,3.2rem)}
  .hero__copy>*+*{margin-top:13px}
  .hero__proof{display:none}
  .scene{padding:0;min-height:330px}
  .layer--space{padding:13px}
  .mini span{font-size:.59rem;padding:3px 7px}
  .spine{font-size:.43rem}
}

/* Touch devices should feel pressed, not pretend to hover. */
@media (hover:none){
  .step:hover,.fab:hover{--surface-lift:0px}
  .btn:hover{--lift:0px}
  .lit:hover::after{opacity:0}
  .lit.is-press::after{opacity:.75}
}


/* ---------- V7 motion responsive overrides (after V5 rules) ---------- */
@media(max-width:760px){
  .flow__motion{padding:26px 18px 22px;overflow:hidden}
  .flow__track{left:31px;right:auto;top:39px;bottom:39px;width:2px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--peri) 30%,transparent),color-mix(in srgb,var(--aqua) 24%,transparent),color-mix(in srgb,var(--coral) 24%,transparent))}
  .flow__rail{display:grid;grid-template-columns:1fr;gap:3px;overflow:visible;scroll-snap-type:none;padding:0;margin:0}
  .fstep{min-width:0;flex:none;padding:12px 10px 12px 58px;text-align:left;min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;scroll-snap-align:none}
  .fstep::before{top:50%;left:13px;margin:-7px 0 0 0}
  .fstep::after{top:50%;left:8px;margin:-12px 0 0 0}
  .fstep[aria-selected="true"]{transform:translateX(4px);background:var(--glass-2)}
  .fstep[aria-selected="true"]::before{top:50%;left:11px;margin:-9px 0 0 0}
  .fstep small{margin:0;white-space:normal}.fstep b{font-size:.95rem;white-space:nowrap}
  .flow-packet{top:0;left:31px!important;margin:-8px 0 0 -8px;transition:top .86s cubic-bezier(.18,.82,.21,1),background .5s var(--e),box-shadow .5s var(--e)}
  .flow-packet::before,.flow-packet::after{top:auto;right:auto;left:50%;bottom:9px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--flow-tint) 62%,transparent))}
  .flow-packet::before{height:30px;opacity:.65}.flow-packet::after{height:54px;opacity:.24;width:2px}
  .flow__signal{margin-top:14px;font-size:.52rem;white-space:normal;text-align:center}
}
@media(max-width:599px){
  .router__view{min-height:0}
  .router__diagram{padding:4px}
  .router__diagram svg{min-height:0}
}


/* =====================================================================
   V8 - POLISH PASS
   1. Light theme rebuilt in the emerald family (was orphaned blue/white,
      and the body gradient was hard-coded dark so light mode was unusable)
   2. Pixel-exact flow rail: track, dots and packet share one centre line
   3. Motion moved off layout-triggering properties (left/width → transform)
   4. Type, spacing and edge refinements
   ===================================================================== */

/* ---------- 1 · THEME-AWARE CANVAS ---------- */
:root,[data-theme="dark"]{
  --canvas-top:#06110E;
  --canvas-bot:#04100D;
  --canvas-wash:rgba(12,91,67,.16);
  --au-1:color-mix(in srgb,var(--peri) 76%,#0D7A59);
  --au-2:color-mix(in srgb,var(--aqua) 78%,#075A43);
  --au-3:var(--violet);
  --au-4:var(--coral);
  --au-blur:78px;
  --au-i:.5;
}

/* Emerald paper - warm, tinted, never plain white */
[data-theme="light"]{
  --bg:#E9F0EB;
  --bg-2:#F6FAF6;
  --bg-3:#DCE8E0A0;
  --canvas-top:#E4EDE6;
  --canvas-bot:#DEE9E1;
  --canvas-wash:rgba(14,107,82,.10);

  --fg:#081913;
  --fg-2:#3A4F46;
  --fg-3:#5E7469;

  --edge:rgba(8,25,19,.14);
  --edge-2:rgba(8,25,19,.075);
  --glass:rgba(255,255,255,.56);
  --glass-2:rgba(255,255,255,.34);
  --glass-hi:rgba(255,255,255,.88);
  --shadow:0 24px 56px -32px rgba(8,48,36,.34);

  /* Accents deepened so they carry contrast on paper */
  --peri:#4A4ACF;
  --aqua:#0B8E76;
  --coral:#C9552C;
  --violet:#7E45C4;
  --peri-d:#3434A8;
  --ok:#0B8E76;

  --au-1:#C6D0FF;
  --au-2:#A9E6D8;
  --au-3:#E0CCFF;
  --au-4:#FFD4C1;
  --au-blur:86px;
  --au-i:.42;
  --aurora-o:.55;
  --grid-o:.055;
  --scheme:light;
}

body{
  background:
    radial-gradient(1200px 780px at 50% -10%,var(--canvas-wash),transparent 62%),
    linear-gradient(180deg,var(--canvas-top) 0%,var(--bg) 38%,var(--canvas-bot) 100%);
  background-attachment:fixed;
}
.aurora i{filter:blur(var(--au-blur));opacity:var(--au-i)}
.aurora i:nth-child(1){background:radial-gradient(circle,var(--au-1),transparent 66%)}
.aurora i:nth-child(2){background:radial-gradient(circle,var(--au-2),transparent 66%)}
.aurora i:nth-child(3){background:radial-gradient(circle,var(--au-3),transparent 66%)}
.aurora i:nth-child(4){background:radial-gradient(circle,var(--au-4),transparent 66%)}
.grid-bg{-webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 76%)}

/* Light-mode surface corrections */
[data-theme="light"] .glass{backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}
[data-theme="light"] .glass::before{opacity:.72}
[data-theme="light"] .topbar__in{background:color-mix(in srgb,var(--bg-2) 82%,transparent)}
[data-theme="light"] .topbar.is-stuck .topbar__in{box-shadow:0 16px 34px -24px rgba(8,48,36,.45)}
[data-theme="light"] .status--now{color:#FFFFFF;background:#0B7A66}
[data-theme="light"] .status--road{color:var(--fg-2);background:rgba(255,255,255,.6)}
[data-theme="light"] .flow__av{color:#fff}
[data-theme="light"] .fstep::before{background:var(--bg-2)}
[data-theme="light"] .site-footer{background:rgba(255,255,255,.42)}
[data-theme="light"] .brand__mark::after{background:rgba(255,255,255,.95)}
[data-theme="light"] .lit::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tint,var(--peri)) 13%,transparent),transparent 62%)}
[data-theme="light"] .route-base{stroke:rgba(8,25,19,.18)}

/* ---------- 2 · PIXEL-EXACT FLOW RAIL ----------
   One centre line. Track, every dot, every ring and the packet
   resolve to the same axis instead of three near-misses. */
:root{
  --flow-dot-c:23px;   /* dot centre, measured from the top of a step */
  --flow-rail-x:32px;  /* rail axis on the stacked layout */
  --flow-edge:8.3333%; /* exact centre of a 1/6 column */
}
.flow__rail{position:relative}
.flow__track{
  left:var(--flow-edge);right:var(--flow-edge);
  top:calc(34px + var(--flow-dot-c) - 1px);
  height:2px;bottom:auto;width:auto;
}
.fstep::before{top:calc(var(--flow-dot-c) - 7px)}
.fstep::after{top:calc(var(--flow-dot-c) - 12px)}
.fstep[aria-selected="true"]::before{top:calc(var(--flow-dot-c) - 9px)}

/* packet: composited, centred on its own coordinates */
.flow-packet{
  left:0;top:0;margin:0;
  transform:translate3d(var(--px,0px),var(--py,0px),0) translate(-50%,-50%);
  transition:transform .82s cubic-bezier(.22,.72,.2,1),background .5s var(--e),box-shadow .5s var(--e);
  will-change:transform;
}

@media(max-width:760px){
  .flow__track{
    left:calc(var(--flow-rail-x) - 1px);right:auto;
    top:38px;bottom:38px;width:2px;height:auto;
  }
  .fstep::before{top:50%;left:var(--flow-rail-x);margin:-7px 0 0 -7px}
  .fstep::after{top:50%;left:var(--flow-rail-x);margin:-12px 0 0 -12px}
  .fstep[aria-selected="true"]::before{top:50%;left:var(--flow-rail-x);margin:-9px 0 0 -9px}
  .fstep{padding-left:calc(var(--flow-rail-x) + 26px)}
  .flow-packet{left:0!important;top:0;margin:0}
}

/* ---------- 3 · COMPOSITOR-SAFE MOTION ---------- */
.progress i{width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;transition:transform .12s linear}
.ticker__t{will-change:transform;backface-visibility:hidden}
.node,.pulse i{backface-visibility:hidden}
/* smoother, less mechanical easing on the two looping rings */
@keyframes ring{0%{transform:scale(.94);opacity:.55}70%{opacity:.12}100%{transform:scale(1.24);opacity:0}}
@keyframes flowRing{0%{transform:scale(.82);opacity:.6}70%{opacity:.14}100%{transform:scale(2.05);opacity:0}}
@keyframes trackBreath{0%,100%{opacity:.22}50%{opacity:.72}}

/* ---------- 4 · TYPE, SPACING, EDGES ---------- */
::selection{background:color-mix(in srgb,var(--peri) 34%,transparent);color:var(--fg)}
:focus-visible{outline:2px solid var(--peri);outline-offset:3px;border-radius:8px}
.d1,.d2{text-wrap:balance}
.kicker::before{flex:0 0 auto}
.sec-head .kicker{margin-bottom:20px}

/* consistent radius scale */
.glass{border-radius:22px}
.exp-panel,.router__view,.policy,.exec,.graph{border-radius:24px}
.step,.world,.fab{border-radius:22px}
.chip,.mini span,.status,.pulse{border-radius:999px}

/* even card interiors */
.step,.fab{padding:28px}
.step__n{margin-bottom:32px}
.fab .status{margin-bottom:44px}

/* rules and lists share one hairline */
.exp-list li,.pol-list li,.rule,.mem-item{border-top-color:var(--edge-2)}
.rule b{letter-spacing:.11em}

/* scrollbar, so the page doesn't hand off to the OS default mid-theme */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 22%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--fg) 18%,transparent);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--fg) 30%,transparent);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}


/* =====================================================================
   V9 - PASTEL MINT LIGHT THEME + MOTION CHOREOGRAPHY
   ---------------------------------------------------------------------
   To retune the light canvas, change ONLY --paper-* below.
   Everything else in light mode is derived from them.
   ===================================================================== */

[data-theme="light"]{
  /* ---- the four dials ---- */
  --paper:#F1FBF4;        /* main canvas - light pastel mint */
  --paper-lift:#FBFFFC;   /* raised surfaces */
  --paper-deep:#E4F6EA;   /* top/bottom falloff */
  --paper-glow:rgba(104,222,170,.20);

  --bg:var(--paper);
  --bg-2:var(--paper-lift);
  --bg-3:rgba(228,246,234,.62);
  --canvas-top:var(--paper-deep);
  --canvas-bot:#EDFAF1;
  --canvas-wash:var(--paper-glow);

  /* ink: cool green-black, high contrast on mint */
  --fg:#0A1F17;
  --fg-2:#3B564B;
  --fg-3:#61796C;

  --edge:rgba(10,31,23,.13);
  --edge-2:rgba(10,31,23,.065);
  --glass:rgba(255,255,255,.60);
  --glass-2:rgba(255,255,255,.36);
  --glass-hi:rgba(255,255,255,.94);
  --shadow:0 24px 56px -32px rgba(11,74,52,.26);

  /* accents: deep enough to read as text on pastel */
  --peri:#4A4ACF;
  --aqua:#0A8E72;
  --coral:#C9552C;
  --violet:#7E45C4;
  --peri-d:#3434A8;
  --ok:#0A8E72;

  /* aurora: pastel, airy, low intensity */
  --au-1:#C9D3FF;
  --au-2:#A8F0D6;
  --au-3:#E4D2FF;
  --au-4:#FFD9C6;
  --au-blur:92px;
  --au-i:.40;
  --aurora-o:.62;
  --grid-o:.05;
}
[data-theme="light"] .grid-bg{
  background-image:linear-gradient(rgba(10,31,23,.55) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,31,23,.55) 1px,transparent 1px);
}
[data-theme="light"] .status--now{color:#FFFFFF;background:#0A7D64}
[data-theme="light"] .site-footer{background:rgba(255,255,255,.46)}
[data-theme="light"] .flow__motion{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}

/* ---------- THEME CROSS-FADE (colour props only, never transform) ---------- */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .5s var(--e),background-image .5s var(--e),
             color .5s var(--e),border-color .5s var(--e),
             box-shadow .5s var(--e),fill .5s var(--e),stroke .5s var(--e),
             opacity .5s var(--e) !important;
}

/* =====================================================================
   MOTION - choreography, not a single global fade
   ===================================================================== */

/* ---- 1. base reveal: lighter, springier, staggered per row ---- */
.js .rv{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.988);
  transition:opacity .78s var(--e-out),transform .9s var(--e-out);
  will-change:transform,opacity;
}
.js .rv.in{opacity:1;transform:none;will-change:auto}
/* softening blur only where it is cheap - never on a glass panel */
.js .sec-head.rv,.js .quote.rv{filter:blur(5px);transition:opacity .78s var(--e-out),transform .9s var(--e-out),filter .78s var(--e-out)}
.js .sec-head.rv.in,.js .quote.rv.in{filter:none}

/* ---- 2. hero entrance: sequenced, not simultaneous ---- */
.js .hero__copy.rv{opacity:1;transform:none;transition:none;filter:none}
.js .hero__copy>*{opacity:0}
.js .hero__copy.in>*{animation:heroIn .95s var(--e-out) both}
.js .hero__copy.in>*:nth-child(1){animation-delay:.04s}
.js .hero__copy.in>*:nth-child(2){animation-delay:.13s}
.js .hero__copy.in>*:nth-child(3){animation-delay:.26s}
.js .hero__copy.in>*:nth-child(4){animation-delay:.35s}
.js .hero__copy.in>*:nth-child(5){animation-delay:.44s}
.js .hero__copy.in>*:nth-child(6){animation-delay:.53s}
@keyframes heroIn{
  0%{opacity:0;transform:translate3d(0,22px,0);filter:blur(8px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
/* headline gets a light sweep as it lands */
.js .hero__copy.in h1 .grad{background-size:220% 100%;animation:gradSweep 1.6s var(--e-out) .3s both}
@keyframes gradSweep{0%{background-position:110% 0}100%{background-position:0 0}}

/* the stack rises into place after the copy */
.js .scene.rv{opacity:0;transform:translate3d(0,34px,0) scale(.965)}
.js .scene.rv.in{opacity:1;transform:none;transition:opacity 1s var(--e-out) .22s,transform 1.15s var(--e-out) .22s}
/* its own layers separate as it settles */
.js .scene.rv.in .layer--space{animation:layerIn .95s var(--e-out) .34s both}
.js .scene.rv.in .layer--os{animation:layerIn .95s var(--e-out) .44s both}
.js .scene.rv.in .layer--dev{animation:layerIn .95s var(--e-out) .52s both}
@keyframes layerIn{0%{opacity:0;transform:translate3d(0,16px,0)}100%{opacity:1}}
/* orbit nodes arrive last */
.js .scene.rv .node{opacity:0}
.js .scene.rv.in .node{animation:nodeIn .7s var(--e-out) both,orb 9s var(--e) 1s infinite}
.js .scene.rv.in .node:nth-of-type(1){animation-delay:.72s,1.0s}
.js .scene.rv.in .node:nth-of-type(2){animation-delay:.80s,1.1s}
.js .scene.rv.in .node:nth-of-type(3){animation-delay:.88s,1.2s}
.js .scene.rv.in .node:nth-of-type(4){animation-delay:.96s,1.3s}
@keyframes nodeIn{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}

/* ---- 3. capability explorer: directional, tinted ---- */
.exp-body{animation:expIn .58s var(--e-out) both}
@keyframes expIn{
  0%{opacity:0;transform:translate3d(var(--dir,20px),6px,0)}
  100%{opacity:1;transform:none}
}
.exp-panel__glow{transition:background .7s var(--e),opacity .7s var(--e)}
.exp-panel.is-swap .exp-panel__glow{opacity:.95}
.exp-tab i{transition:box-shadow .4s var(--e),transform .45s var(--e-out)}
.exp-tab[aria-selected="true"] i{transform:scale(1.25)}
.exp-tab{transition:background .3s var(--e),border-color .3s var(--e),transform .35s var(--e-out),color .3s var(--e)}
.exp-tab:active{transform:scale(.985)}
/* list items cascade in behind the copy */
.exp-list li{animation:liIn .5s var(--e-out) both}
.exp-list li:nth-child(1){animation-delay:.14s}
.exp-list li:nth-child(2){animation-delay:.2s}
.exp-list li:nth-child(3){animation-delay:.26s}
.exp-list li:nth-child(4){animation-delay:.32s}
@keyframes liIn{0%{opacity:0;transform:translate3d(0,8px,0)}100%{opacity:1;transform:none}}

/* ---- 4. flow packet: travel physics ---- */
.flow-packet{transition:transform .84s cubic-bezier(.34,.78,.24,1),background .5s var(--e),box-shadow .5s var(--e)}
.flow-packet.is-moving{
  transform:translate3d(var(--px,0px),var(--py,0px),0) translate(-50%,-50%) scaleX(1.5) scaleY(.78);
}
@media(max-width:760px){
  .flow-packet.is-moving{transform:translate3d(var(--px,0px),var(--py,0px),0) translate(-50%,-50%) scaleX(.78) scaleY(1.5)}
}
.fstep::before{transition:width .5s var(--e-out),height .5s var(--e-out),top .5s var(--e-out),
                          margin .5s var(--e-out),background .45s var(--e),border-color .45s var(--e),box-shadow .5s var(--e)}
.fstep b{transition:color .4s var(--e),transform .5s var(--e-out)}
.fstep[aria-selected="true"] b{transform:translateY(-1px)}
.flow__signal{transition:color .45s var(--e),border-color .45s var(--e)}
.flow__signal.is-swap{animation:sigIn .55s var(--e-out) both}
@keyframes sigIn{0%{opacity:0;transform:translate3d(0,6px,0)}100%{opacity:1;transform:none}}

/* ---- 5. ticker: no hard seam, faded edges ---- */
.ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

/* ---- 6. parallax targets (driven by one shared rAF loop) ---- */
[data-par]{will-change:transform}
.aurora{
  transform:translate3d(var(--ambient-x,0px),calc(var(--ambient-y,0px) + var(--par-y,0px)),0);
  transition:opacity .6s var(--e);
}
.graph svg{will-change:transform}

/* ---- 7. memory list + rules cascade ---- */
.js .mem-list .mem-item{opacity:0;transform:translate3d(0,14px,0)}
.js .rv.in .mem-list .mem-item,.js .mem-list.in .mem-item{opacity:1;transform:none;transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.js .rv.in .mem-list .mem-item:nth-child(1){transition-delay:.12s}
.js .rv.in .mem-list .mem-item:nth-child(2){transition-delay:.22s}
.js .rv.in .mem-list .mem-item:nth-child(3){transition-delay:.32s}

/* ---- 8. interactive feedback ---- */
.path{transition:background .3s var(--e),border-color .35s var(--e),transform .4s var(--e-out),box-shadow .45s var(--e)}
.path:active{transform:scale(.99)}
.qa summary::after{transition:transform .42s var(--e-out),border-color .3s var(--e)}
.icon-btn{transition:background .24s var(--e),transform .3s var(--e-out),border-color .3s var(--e)}
.icon-btn:active{transform:scale(.93)}
.navlinks a{transition:color .22s var(--e),background .22s var(--e)}
.mini span,.chip{transition:transform .3s var(--e-out),background .3s var(--e),border-color .3s var(--e)}
.world:hover .mini span{transform:translateY(-1px)}


/* =====================================================================
   V12 - TYPE RESTORE + ORIENTATION POLISH
   Restores the original Bricolage / Manrope / JetBrains character,
   fixes a 600px breakpoint edge case, and adds quiet scroll orientation.
   ===================================================================== */

/* Typography fidelity: keep the variable font character and prevent
   synthetic weights/styles from changing the intended look. */
html{
  font-synthesis:none;
  font-kerning:normal;
  font-optical-sizing:auto;
}
body{
  font-family:var(--ff);
  font-optical-sizing:auto;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,.brand,.hero__id,.layer__n,.quote,.fstep b,.mem-item b,.path b,.qa summary,.finale p{
  font-family:var(--ff-d);
  font-optical-sizing:auto;
}
.kicker,.status,.layer__t,.pulse,.duo__col h3,.spine,.scene__cap,.ticker__t span,
.step__n,.exp-name,.fstep small,.flow__signal,.mem-item span:first-child,.graph text,
.route-label,.route-check,.router__status,.rule b,.site-footer h4{
  font-family:var(--ff-m);
}

/* Restore the original display proportions explicitly. */
h1,h2,h3,h4{font-weight:700}
.d1{font-weight:750}
.d2,.d3{font-weight:700}
.hero__id{font-weight:600}
.lede{font-weight:450}

/* Exact 600px devices previously inherited the old phone rule that hid
   the second hero column. Keep both worlds visible from tablet upward. */
@media (min-width:600px){.duo__col:nth-child(2){display:block}}

/* Quiet orientation: the nav tells the visitor where they are without
   adding another competing animation to the page. */
.navlinks a{position:relative;isolation:isolate}
.navlinks a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;border-radius:999px;
  background:linear-gradient(90deg,var(--peri),var(--aqua));
  transform:scaleX(0);transform-origin:50% 50%;opacity:0;
  transition:transform .38s var(--e-out),opacity .28s var(--e);
}
.navlinks a.is-active{color:var(--fg);background:color-mix(in srgb,var(--glass) 72%,transparent)}
.navlinks a.is-active::after{transform:scaleX(1);opacity:.9}
.drawer__panel a.is-active{background:var(--glass);color:var(--fg)}

/* Small typographic rhythm refinements. */
.hero__copy .lede,.sec-head .lede{letter-spacing:-.006em}
.step p,.world p,.fab p,.flow__out p,.router__view p,.qa__a{letter-spacing:-.003em}

/* Pause purely decorative infinite CSS motion while the tab is hidden. */
html.page-hidden .aurora i,
html.page-hidden .ticker__t,
html.page-hidden .node,
html.page-hidden .pulse i,
html.page-hidden .bridge__c::before,
html.page-hidden .graph .lnk,
html.page-hidden .graph .nd,
html.page-hidden .graph .core,
html.page-hidden .flow__track::after,
html.page-hidden .fstep[aria-selected="true"]::after,
html.page-hidden .route-active,
html.page-hidden .route-policy-ring,
html.page-hidden .path[aria-selected="true"] i{
  animation-play-state:paused!important;
}


/* =====================================================================
   V13 - LIVING OPERATING SPACE
   A persistent fluid computational form narrates the category shift.
   ===================================================================== */
.living-space{position:fixed;right:-3vw;top:12vh;width:min(54vw,760px);height:76vh;z-index:1;pointer-events:none;opacity:.96;transition:opacity .8s var(--e),transform 1s var(--e-out);mix-blend-mode:screen}
.living-space canvas{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.08)}
.living-space__halo{position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 8%,transparent),transparent 62%);filter:blur(30px);animation:lifeHalo 5.8s ease-in-out infinite}
@keyframes lifeHalo{50%{transform:scale(1.08);opacity:.72}}
.living-space__caption{position:absolute;right:7%;bottom:3%;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--edge);background:color-mix(in srgb,var(--bg) 64%,transparent);backdrop-filter:blur(12px);border-radius:999px;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);transition:opacity .4s var(--e)}
.living-space__caption span{color:var(--aqua)}.living-space__caption b{font-weight:500;color:var(--fg-2)}
.story{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(96px,10vw,150px) 0;overflow:clip}
.story__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);gap:clamp(40px,7vw,110px);align-items:center}
.story__grid--reverse{grid-template-columns:minmax(360px,1.08fr) minmax(0,.92fr)}
.story__copy{max-width:650px;position:relative;z-index:3}
.story__chapter{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.story__chapter::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--aqua),transparent)}
.story__lead{font-size:clamp(1.06rem,1.55vw,1.26rem);line-height:1.68;color:var(--fg-2);max-width:57ch;margin-top:24px}
.story__statement{font-family:var(--ff-d);font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.22;letter-spacing:-.035em;color:var(--fg);max-width:29ch;margin-top:34px}
.story__statement strong{font-weight:700;color:var(--fg)}
.story__actions{margin-top:34px}
.story__void{min-height:54vh}
.story--hero{min-height:calc(100svh - var(--nav-h));padding-top:clamp(70px,7vw,104px)}
.story--hero h1{max-width:10.5ch}
.story--hero::before{content:"";position:absolute;left:0;top:17%;width:1px;height:52%;background:linear-gradient(transparent,var(--aqua),transparent);opacity:.22}
.story__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.story__scroll i{width:18px;height:28px;border:1px solid var(--edge);border-radius:999px;position:relative}.story__scroll i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:3px;background:var(--aqua);transform:translateX(-50%);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%,100%{transform:translate(-50%,0);opacity:.3}50%{transform:translate(-50%,8px);opacity:1}}
.fragment-words{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px;max-width:560px}.fragment-words span{padding:8px 13px;border-radius:999px;border:1px solid var(--edge);background:var(--glass-2);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);animation:fragFloat 5s ease-in-out infinite}.fragment-words span:nth-child(2n){animation-delay:-1.4s}.fragment-words span:nth-child(3n){animation-delay:-2.7s}@keyframes fragFloat{50%{transform:translateY(-5px)}}
.story--architecture{min-height:auto;display:block;padding:clamp(110px,11vw,170px) 0}
.arch-intro{max-width:740px;margin-bottom:58px}.arch-intro .story__lead{max-width:50ch}
.os-arch{position:relative;width:min(100%,920px);margin:0 auto;padding:24px 86px 26px;display:grid;justify-items:center;z-index:4}
.arch-slab{position:relative;width:100%;min-height:116px;border-radius:26px;border:1px solid var(--edge);background:linear-gradient(145deg,color-mix(in srgb,var(--glass-hi) 38%,transparent),var(--glass-2));backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 24px 65px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);display:flex;align-items:center;gap:24px;padding:22px 30px;transform:perspective(1000px) rotateX(4deg);transform-origin:center bottom;overflow:hidden}
.arch-slab::after{content:"";position:absolute;inset:auto 8% -1px;height:2px;background:linear-gradient(90deg,transparent,var(--aqua),var(--peri),transparent);opacity:.48;filter:blur(.3px)}
.arch-cloud{width:88%;opacity:.88}.arch-os{width:92%;opacity:.86}.arch-fleet{width:98%;opacity:.83}
.arch-theos{min-height:150px;border-color:color-mix(in srgb,var(--aqua) 38%,var(--edge));background:radial-gradient(60% 130% at 18% 20%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 66%),radial-gradient(60% 120% at 88% 80%,color-mix(in srgb,var(--peri) 13%,transparent),transparent 66%),var(--glass);box-shadow:0 35px 90px -42px rgba(0,0,0,.86),0 0 50px -28px var(--aqua)}
.arch-icon{width:62px;height:62px;border-radius:20px;border:1px solid var(--edge);display:grid;place-items:center;flex:0 0 auto;background:var(--glass-2);color:var(--aqua);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.arch-icon svg{width:38px;height:38px}.arch-icon--theos{width:78px;height:78px;border-radius:26px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--aqua) 72%,#087357),var(--peri));box-shadow:0 14px 36px -18px var(--peri)}
.arch-slab small{display:block;font-family:var(--ff-d);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.035em;color:var(--fg);margin-bottom:5px}.arch-slab b{font-weight:500;color:var(--fg-2);font-size:.92rem}.arch-theos__copy strong{display:block;font-family:var(--ff-d);font-size:clamp(1.55rem,3vw,2.4rem);line-height:1;letter-spacing:-.045em;margin:3px 0 7px;background:linear-gradient(100deg,var(--aqua),var(--peri),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}.arch-theos__copy small{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua);margin:0}.arch-badges{margin-left:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}.arch-badges span{font-family:var(--ff-m);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border:1px solid var(--edge);border-radius:999px;color:var(--fg-3);text-align:center;background:var(--glass-2)}
.arch-link{height:70px;display:grid;grid-template-columns:40px auto;align-items:center;justify-content:center;gap:13px;color:var(--aqua)}.arch-link span{font-size:1.6rem;line-height:1;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--aqua) 45%,transparent))}.arch-link em{font-family:var(--ff-m);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--fg-3)}.arch-link--fleet{height:54px;grid-template-columns:auto}.arch-link--fleet span{font-size:1.35rem}
.arch-direct{position:absolute;right:4px;top:39%;bottom:9%;width:72px;border-right:2px solid color-mix(in srgb,var(--coral) 76%,var(--violet));border-top:2px solid color-mix(in srgb,var(--coral) 76%,var(--violet));border-bottom:2px solid color-mix(in srgb,var(--coral) 76%,var(--violet));border-radius:0 28px 28px 0;color:var(--coral);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--coral) 25%,transparent))}.arch-direct i{position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 13%,transparent)}.arch-direct b{position:absolute;right:-7px;bottom:-14px;font-size:1.4rem}.arch-direct span{position:absolute;right:-48px;top:50%;width:120px;transform:translateY(-50%) rotate(90deg);font-family:var(--ff-m);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--coral);text-align:center}
.arch-reveal{max-width:760px;margin:72px auto 0;text-align:center}.arch-reveal p{color:var(--fg-3);font-size:1rem}.arch-reveal h3{font-family:var(--ff-d);font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.045em;margin:15px auto 24px;max-width:20ch}.arch-reveal strong{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.space-duality{display:grid;gap:10px;margin-top:30px}.space-duality>div{padding:16px 18px;border-top:1px solid var(--edge-2);display:grid;gap:4px}.space-duality small{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}.space-duality span{font-size:.9rem;color:var(--fg-2)}
.story-tail{position:relative;z-index:2}.story-tail>.wrap{position:relative}.story-tail .sec-head{position:relative;z-index:2}
.final-manifesto{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}.final-manifesto span{font-family:var(--ff-m);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--edge);border-radius:999px;color:var(--fg-3);background:var(--glass-2)}

@media(max-width:1099px){
  .living-space{right:-14vw;top:16vh;width:72vw;height:66vh;opacity:.7}
  .story__grid,.story__grid--reverse{grid-template-columns:1fr;min-height:auto}.story__void{min-height:42vh;order:2}.story__grid--reverse .story__copy{order:1}.story__grid--reverse .story__void{order:2}
  .story__copy{max-width:760px}.story{min-height:auto;padding-block:clamp(100px,14vw,150px)}
  .os-arch{padding-inline:56px}.arch-direct{right:4px}
}
@media(max-width:700px){
  .living-space{position:fixed;right:-34vw;top:22vh;width:120vw;height:58vh;opacity:.46}.living-space__caption{display:none}
  .story{padding-block:88px}.story--hero{padding-top:70px;min-height:100svh}.story__void{min-height:46vh}.story__lead{font-size:1rem}.story__statement{font-size:1.28rem}.story__scroll{bottom:18px}
  .fragment-words{gap:7px}.fragment-words span{font-size:.57rem;padding:7px 10px}
  .os-arch{padding:14px 12px 20px}.arch-slab{min-height:100px;border-radius:20px;padding:17px 16px;gap:14px;transform:none}.arch-cloud{width:94%}.arch-os{width:96%}.arch-fleet{width:100%}.arch-theos{min-height:132px;align-items:flex-start;flex-wrap:wrap}.arch-icon{width:48px;height:48px;border-radius:15px}.arch-icon svg{width:30px;height:30px}.arch-icon--theos{width:58px;height:58px;border-radius:18px}.arch-theos__copy{flex:1;min-width:180px}.arch-badges{width:100%;margin:2px 0 0 72px;display:flex;overflow-x:auto}.arch-badges span{white-space:nowrap}.arch-link{height:58px;grid-template-columns:28px auto}.arch-link em{font-size:.49rem;letter-spacing:.07em}.arch-direct{right:-1px;top:39%;bottom:8%;width:26px;border-radius:0 16px 16px 0}.arch-direct span{display:none}.arch-direct b{right:-5px}.arch-reveal{margin-top:54px}.arch-reveal h3{font-size:2rem}
}



/* =====================================================================
   V14 - THE SPACE BECOMES THE NARRATOR
   The living form is no longer ambient decoration. It moves to the idea,
   carries the chapter language, reveals semantic nodes and becomes the
   visual grammar of the story.
   ===================================================================== */

/* Full-viewport stage. The form can now lead instead of living at the side. */

/* The narrator's voice is attached to the form itself. */

/* Semantic words orbit the living form. They make each morph legible. */

/* A quiet narrative spine: orientation, not navigation chrome. */

/* Chapter change becomes a cinematic title beat. */

/* Strong chapter typography. No pill-label feel. */

/* The architecture is a story beat, not a static diagram. */

/* Light mode: keep the narrator visible but soft. */



/* =====================================================================
   V15 - AMOEBA / NEBULA GUIDE
   One continuous living membrane is the protagonist. The nebula is the
   intelligence forming inside it, not a separate decorative background.
   ===================================================================== */
.living-space{z-index:1;opacity:1;pointer-events:none;overflow:hidden;isolation:isolate}
.living-space::before{
  content:"";position:absolute;inset:-18%;pointer-events:none;
  background:
    radial-gradient(34vw 30vw at calc(var(--life-x,70)*1%) calc(var(--life-y,54)*1%),color-mix(in srgb,var(--aqua) 10%,transparent),transparent 67%),
    radial-gradient(46vw 38vw at calc((var(--life-x,70) - 4)*1%) calc((var(--life-y,54) + 2)*1%),color-mix(in srgb,var(--peri) 7%,transparent),transparent 72%),
    radial-gradient(32vw 30vw at calc((var(--life-x,70) + 5)*1%) calc((var(--life-y,54) - 5)*1%),color-mix(in srgb,var(--coral) 5%,transparent),transparent 74%);
  filter:blur(42px);opacity:.74;transition:opacity .7s var(--e);z-index:-1;
}
.living-space canvas{filter:none;opacity:1}
.living-space__halo{display:none!important}

/* The voice now lives inside the organism, rather than beside it. */
.living-space__voice{
  left:calc(var(--voice-x,70)*1%);top:calc(var(--voice-y,54)*1%);bottom:auto;
  width:min(390px,34vw);padding:0;border:0;text-align:center;
  transform:translate(-50%,-50%);opacity:var(--voice-o,.92);z-index:3;
  transition:left .9s var(--e-out),top .9s var(--e-out),opacity .4s var(--e),transform .7s var(--e-out);
  text-shadow:0 2px 22px color-mix(in srgb,var(--bg) 92%,transparent),0 0 32px color-mix(in srgb,var(--bg) 72%,transparent);
}
.living-space__voice::before{display:none}
.living-space__voice small{justify-content:center;margin-bottom:10px;color:color-mix(in srgb,var(--fg-3) 82%,transparent)}
.living-space__voice small b{font-weight:500;letter-spacing:.12em;color:var(--fg-3)}
.living-space__voice p{font-size:clamp(1rem,1.35vw,1.26rem);line-height:1.28;color:color-mix(in srgb,var(--fg) 90%,var(--fg-2));max-width:31ch;margin-inline:auto}

/* Semantic words are embedded in the membrane, not pills orbiting a particle system. */
.life-token{
  padding:0;border:0;border-radius:0;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;font-size:.52rem;letter-spacing:.14em;color:color-mix(in srgb,var(--fg-2) 72%,transparent);
  text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 96%,transparent);opacity:0;
}
.life-token::before{content:"";display:inline-block;width:10px;height:1px;margin-right:7px;vertical-align:middle;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--aqua) 65%,transparent))}
.life-token.is-on{opacity:.66}.life-token.is-key{color:var(--aqua);opacity:.95;box-shadow:none!important}

.living-space__touch{
  position:absolute;left:calc(var(--touch-x,70)*1%);top:calc(var(--touch-y,75)*1%);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:.49rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);opacity:var(--touch-o,.56);transition:left .9s var(--e-out),top .9s var(--e-out),opacity .45s var(--e),transform .45s var(--e-out);z-index:3;
}
.living-space__touch i{width:24px;height:24px;border:1px solid color-mix(in srgb,var(--aqua) 34%,var(--edge));border-radius:50%;position:relative}
.living-space__touch i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px color-mix(in srgb,var(--aqua) 70%,transparent);animation:touchPulse 2.1s ease-in-out infinite}
@keyframes touchPulse{0%,100%{transform:scale(.72);opacity:.42}50%{transform:scale(1.25);opacity:1}}
.living-space.is-touched .living-space__touch{opacity:0;transform:translate(-50%,-50%) scale(.92)}


.life-stage{display:none}
@media(max-width:700px){
  .life-stage{display:block;height:clamp(300px,43vh,390px);margin:12px 0 18px;position:relative}
  .story--hero .life-stage{height:clamp(320px,46vh,410px);margin-top:8px}
  .story--fracture .life-stage{height:clamp(300px,42vh,370px)}
  .story--space .life-stage{height:clamp(300px,42vh,370px)}
}

/* The chapter title and the organism should read as one cinematic frame. */
.story__chapter{position:relative;z-index:5}
.story__chapter>b{font-size:clamp(2.6rem,4.1vw,4.2rem)}
.story__chapter em{font-size:.68rem;color:color-mix(in srgb,var(--aqua) 88%,var(--fg))}
.chapter-flash{z-index:2}
.chapter-flash__name{max-width:10ch;color:color-mix(in srgb,var(--fg) 10%,transparent)}

/* Give the protagonist room to exist. */
.story__void{min-height:58vh}
.story--architecture .os-arch{position:relative;z-index:4}
.story--architecture .arch-intro,.story--architecture .arch-reveal{position:relative;z-index:5}

[data-theme="light"] .living-space::before{opacity:.45}
[data-theme="light"] .living-space__voice{text-shadow:0 2px 22px rgba(241,251,244,.96),0 0 30px rgba(241,251,244,.82)}
[data-theme="light"] .life-token{text-shadow:0 2px 16px rgba(241,251,244,.94)}

@media(max-width:1099px){
  .living-space__voice{width:min(330px,44vw)}
}
@media(max-width:700px){
  .living-space{opacity:.94}
  .living-space::before{filter:blur(28px);opacity:.66}
  .living-space__voice{left:calc(var(--voice-x,50)*1%)!important;top:calc(var(--voice-y,67)*1%)!important;bottom:auto!important;width:min(76vw,330px);padding:0;opacity:var(--voice-o,.9)}
  .living-space__voice p{font-size:.94rem;line-height:1.26;max-width:28ch}
  .living-space__voice small{font-size:.47rem;margin-bottom:7px}
  .living-space__tokens{opacity:.9}
  .life-token{font-size:.43rem;letter-spacing:.11em}
  .living-space__touch{font-size:.43rem;top:calc(var(--touch-y,83)*1%)!important}
  .living-space__touch i{width:21px;height:21px}
  .story__void{min-height:56vh}
  .story--architecture{padding-top:96px}
  .story--architecture .os-arch{margin-top:30px}
  .story__chapter>b{font-size:2.55rem}
  .story__chapter em{font-size:.58rem}
}
@media(max-width:420px){
  .living-space__voice{width:82vw}
  .life-token{font-size:.4rem}
}



/* =====================================================================
   V16 - LIVING SPACE POLISH
   The organism is now luminous volume, not an outlined blob. It lives
   behind UI, never blocks interaction, and uses a lower-cost renderer.
   ===================================================================== */
.living-space{z-index:0!important;pointer-events:none!important;opacity:var(--life-master-o,.92);contain:strict;will-change:opacity}
main{position:relative;z-index:1}
.topbar{z-index:100}.drawer{z-index:110}
.living-space canvas{will-change:contents;transform:translateZ(0)}
.living-space::before{opacity:.42;filter:blur(34px)}
.living-space__voice{z-index:1;opacity:var(--voice-o,0);pointer-events:none;max-width:min(360px,38vw)}
.living-space__tokens{z-index:1;pointer-events:none}
.living-space__touch{z-index:1;pointer-events:none}
.story>.wrap,.story-tail>.wrap,.story-bridge>.wrap{z-index:3}
.glass{position:relative;z-index:2}

/* Dedicated narrative breathing beats. */
.story-bridge{position:relative;min-height:58svh;display:grid;place-items:center;padding:90px 0;overflow:clip;isolation:isolate}
.story-bridge__inner{max-width:980px;text-align:center;display:grid;justify-items:center;gap:20px}
.story-bridge__eyebrow{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
.story-bridge p{font-family:var(--ff-d);font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.035em;color:var(--fg-3)}
.story-bridge p em{font-style:normal;color:var(--fg-2)}
.story-bridge h2{font-size:clamp(2.5rem,6vw,5.8rem);max-width:15ch;letter-spacing:-.055em;line-height:.94}
.story-bridge--quiet{min-height:46svh}
.story-bridge--quiet h2{max-width:13ch}

/* MYLO / intent chapter. */
.story--presence h2{font-size:clamp(2.8rem,5.4vw,5rem);max-width:11ch}
.intent-line{margin-top:34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--ff-m);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.intent-line span,.intent-line strong{padding:9px 13px;border-radius:999px;border:1px solid var(--edge);background:var(--glass-2);font-weight:500}
.intent-line strong{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 30%,var(--edge));box-shadow:0 0 28px -18px var(--aqua)}
.intent-line i{font-style:normal;color:var(--fg-3)}

/* Becoming: the complete category promise, not another feature grid. */
.story--becoming{min-height:110svh}
.story--becoming h2{font-size:clamp(3rem,6vw,5.8rem);max-width:9ch}
.becoming-grid{display:grid;gap:10px;margin-top:34px;max-width:650px}
.becoming-grid>div{padding:18px 0;border-top:1px solid var(--edge-2);display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start}
.becoming-grid small{font-family:var(--ff-m);font-size:.55rem;letter-spacing:.13em;color:var(--aqua)}
.becoming-grid b{font-family:var(--ff-d);font-size:1.08rem;line-height:1.35;letter-spacing:-.025em;font-weight:600;color:var(--fg-2)}

/* Keep the living form visible through glass but never at the expense of text. */
.exp-panel,.flow,.graph,.router__view,.policy,.exec,.fab,.arch-slab{background-color:color-mix(in srgb,var(--glass) 92%,var(--bg) 8%)}
.story-tail.life-active .glass{box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--glass-hi) 50%,transparent)}

/* The old 'touch' ring is replaced by a quieter heartbeat invitation. */
.living-space__touch{gap:8px;color:color-mix(in srgb,var(--fg-3) 74%,transparent)}
.living-space__touch i{border:0!important;background:radial-gradient(circle,var(--aqua) 0 16%,color-mix(in srgb,var(--aqua) 24%,transparent) 18% 38%,transparent 40%);box-shadow:0 0 22px color-mix(in srgb,var(--aqua) 28%,transparent)}
.living-space__touch i::after{display:none!important}

@media(max-width:700px){
  .living-space{--life-master-o:.78}
  .living-space::before{opacity:.28;filter:blur(26px)}
  .living-space__voice{width:min(72vw,300px)}
  .story-bridge{min-height:48svh;padding:68px 0}
  .story-bridge--quiet{min-height:38svh}
  .story-bridge h2{font-size:clamp(2.35rem,11vw,3.6rem)}
  .intent-line{gap:7px;font-size:.54rem}.intent-line span,.intent-line strong{padding:7px 10px}.intent-line i{font-size:.75rem}
  .becoming-grid>div{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .becoming-grid b{font-size:1rem}
  .story--becoming{min-height:auto}
  .life-token{font-size:.39rem;opacity:.48!important}
}



/* =====================================================================
   V18 - V14 GUIDANCE ON V17 STORY
   The living form is no longer ambient decoration. It moves to the idea,
   carries the chapter language, reveals semantic nodes and becomes the
   visual grammar of the story.
   ===================================================================== */

/* Full-viewport stage. The form can now lead instead of living at the side. */
.living-space{
  inset:0;right:auto;top:auto;width:100vw;height:100svh;z-index:1;
  opacity:1;mix-blend-mode:normal;overflow:hidden;
  transition:opacity .65s var(--e);
}
.living-space canvas{filter:saturate(1.04) contrast(1.02)}
.living-space__halo{
  inset:auto;width:36vw;height:36vw;min-width:300px;min-height:300px;
  left:calc(var(--life-x,72) * 1%);top:calc(var(--life-y,50) * 1%);
  transform:translate(-50%,-50%) scale(var(--life-scale,.8));
  transform-origin:center;opacity:.55;
  background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 12%,transparent),color-mix(in srgb,var(--peri) 5%,transparent) 42%,transparent 69%);
  transition:left 1.05s var(--e-out),top 1.05s var(--e-out),transform 1.1s var(--e-out),opacity .7s var(--e);
}

/* The narrator's voice is attached to the form itself. */
.living-space__caption{display:none}
.living-space__voice{
  position:absolute;left:calc(var(--voice-x,72) * 1%);top:calc(var(--voice-y,77) * 1%);
  width:min(330px,34vw);padding:0 0 0 18px;border-left:1px solid color-mix(in srgb,var(--aqua) 54%,transparent);
  transform:translate3d(-4%,0,0);opacity:.92;transition:left 1.05s var(--e-out),top 1.05s var(--e-out),opacity .45s var(--e),transform .6s var(--e-out);
  text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 82%,transparent);
}
.living-space__voice::before{content:"";position:absolute;left:-3px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 7px color-mix(in srgb,var(--aqua) 10%,transparent),0 0 18px color-mix(in srgb,var(--aqua) 70%,transparent)}
.living-space__voice small{display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.living-space__voice small span{color:var(--aqua)}
.living-space__voice p{font-family:var(--ff-d);font-size:clamp(.95rem,1.25vw,1.18rem);line-height:1.34;letter-spacing:-.025em;color:color-mix(in srgb,var(--fg) 88%,var(--fg-2));text-wrap:balance}

/* Semantic words orbit the living form. They make each morph legible. */
.living-space__tokens{position:absolute;inset:0}
.life-token{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  padding:7px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--edge) 88%,transparent);
  background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--ff-m);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
  opacity:0;box-shadow:0 10px 28px -18px rgba(0,0,0,.75);
  transition:opacity .45s var(--e),border-color .45s var(--e),color .45s var(--e),transform .7s var(--e-out);
  white-space:nowrap;
}
.life-token.is-on{opacity:.82;transform:translate(-50%,-50%) scale(1)}
.life-token.is-key{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 32%,var(--edge));box-shadow:0 0 28px -18px var(--aqua)}

/* A quiet narrative spine: orientation, not navigation chrome. */
.story-rail{position:fixed;left:clamp(12px,1.35vw,26px);top:50%;z-index:7;display:grid;justify-items:center;gap:9px;transform:translateY(-50%);pointer-events:none;opacity:.7}
.story-rail__num{font-family:var(--ff-d);font-size:1rem;font-weight:750;letter-spacing:-.04em;color:var(--fg)}
.story-rail__line{position:relative;width:1px;height:112px;background:var(--edge);overflow:hidden}
.story-rail__line i{position:absolute;left:0;bottom:0;width:1px;height:var(--rail-progress,0%);background:linear-gradient(180deg,var(--aqua),var(--peri));box-shadow:0 0 9px var(--aqua);transition:height .22s linear}
.story-rail__name{font-family:var(--ff-m);font-size:.49rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);writing-mode:vertical-rl;transform:rotate(180deg);max-height:150px;overflow:hidden}

/* Chapter change becomes a cinematic title beat. */
.chapter-flash{position:fixed;inset:0;z-index:2;pointer-events:none;display:grid;align-items:end;padding:0 max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 8vh;opacity:0;overflow:hidden}
.chapter-flash.is-on{animation:chapterMoment 1.65s var(--e-out) both}
.chapter-flash__num{position:absolute;right:4vw;bottom:-.1em;font-family:var(--ff-d);font-size:clamp(10rem,25vw,24rem);font-weight:800;line-height:.7;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--aqua) 22%,transparent);opacity:.32}
.chapter-flash__name{font-family:var(--ff-d);font-size:clamp(2.6rem,7vw,7rem);font-weight:750;letter-spacing:-.055em;line-height:.86;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 12%,transparent);max-width:8ch}
@keyframes chapterMoment{0%{opacity:0;transform:translateY(22px);filter:blur(8px)}18%{opacity:1;transform:none;filter:none}72%{opacity:.8}100%{opacity:0;transform:translateY(-12px);filter:blur(3px)}}

/* Strong chapter typography. No pill-label feel. */
.story__chapter{display:grid;grid-template-columns:auto 1px auto;align-items:center;gap:14px;width:max-content;margin-bottom:28px;color:inherit}
.story__chapter::before{display:none}
.story__chapter>b{font-family:var(--ff-d);font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.78;letter-spacing:-.065em;font-weight:800;background:linear-gradient(135deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.story__chapter>i{display:block;width:1px;height:40px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--aqua) 65%,transparent),transparent)}
.story__chapter>span{display:grid;gap:3px}
.story__chapter small{font-family:var(--ff-m);font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.story__chapter em{font-family:var(--ff-m);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--aqua);font-style:normal;font-weight:500}

.story,.story-tail{isolation:isolate}
.story>.wrap,.story-tail>.wrap{position:relative;z-index:3}
.story::after,.story-tail::after{
  content:attr(data-word);position:absolute;z-index:-1;right:1vw;top:50%;transform:translateY(-50%) translateX(4%);
  font-family:var(--ff-d);font-size:clamp(6rem,15vw,15rem);font-weight:800;letter-spacing:-.075em;line-height:.72;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 7%,transparent);opacity:0;transition:opacity .7s var(--e),transform 1.15s var(--e-out);
  white-space:nowrap;pointer-events:none;
}
.story.life-active::after,.story-tail.life-active::after{opacity:1;transform:translateY(-50%) translateX(0)}
.story__copy h1,.story__copy h2,.story-tail .sec-head h2{letter-spacing:-.05em}
.story__lead{max-width:52ch}
.story__statement{max-width:26ch}
.story--hero .story__copy{padding-top:1vh}
.story--hero h1{font-size:clamp(3.4rem,7.8vw,7rem);max-width:9.2ch}
.story--fracture h2,.story--space h2{font-size:clamp(2.8rem,5.4vw,5rem);max-width:10ch}
.arch-intro h2{font-size:clamp(3rem,5.8vw,5.4rem);max-width:11ch}
.story-tail .sec-head{max-width:840px}
.story-tail .sec-head h2{font-size:clamp(2.8rem,5vw,4.7rem);max-width:12ch}

/* The architecture is a story beat, not a static diagram. */
.os-arch{filter:drop-shadow(0 28px 60px rgba(0,0,0,.24))}
.arch-slab{transition:transform .7s var(--e-out),opacity .7s var(--e),border-color .5s var(--e),box-shadow .5s var(--e)}
.arch-theos{animation:archBreathe 4.6s ease-in-out infinite}
@keyframes archBreathe{50%{box-shadow:0 42px 100px -44px rgba(0,0,0,.88),0 0 68px -24px color-mix(in srgb,var(--aqua) 55%,transparent)}}
.arch-link{position:relative;overflow:visible}
.arch-link::after{content:"";position:absolute;left:50%;top:8px;width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);transform:translateX(-50%);animation:archPacket 2.4s ease-in-out infinite}
.arch-link--os::after{animation-delay:-.8s}.arch-link--fleet::after{animation-delay:-1.5s}
@keyframes archPacket{0%{transform:translate(-50%,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(-50%,54px);opacity:0}}
.arch-direct::after{content:"";position:absolute;right:-4px;top:8%;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 14px var(--coral);animation:directPacket 3.1s ease-in-out infinite}
@keyframes directPacket{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:91%;opacity:0}}

/* Light mode: keep the narrator visible but soft. */
[data-theme="light"] .living-space__voice{text-shadow:0 2px 20px rgba(241,251,244,.92)}
[data-theme="light"] .life-token{background:rgba(246,255,249,.7)}
[data-theme="light"] .chapter-flash__name{color:rgba(10,31,23,.07)}
[data-theme="light"] .chapter-flash__num{-webkit-text-stroke-color:rgba(10,142,114,.17)}

@media(max-width:1099px){
  .living-space{right:auto;top:auto;width:100vw;height:100svh;opacity:.9}
  .story-rail{display:none}
  .living-space__voice{width:min(300px,42vw)}
  .story::after,.story-tail::after{font-size:clamp(6rem,20vw,12rem);right:-4vw}
}
@media(max-width:700px){
  .living-space{right:auto;top:auto;width:100vw;height:100svh;opacity:.78}
  .living-space__halo{min-width:220px;min-height:220px;width:74vw;height:74vw}
  .living-space__voice{left:18px!important;top:auto!important;bottom:76px;width:min(74vw,290px);padding-left:14px;opacity:.78}
  .living-space__voice p{font-size:.92rem;line-height:1.28}
  .living-space__tokens{opacity:.72}
  .life-token{font-size:.46rem;padding:5px 7px;backdrop-filter:blur(8px)}
  .chapter-flash{padding:0 18px 11vh}.chapter-flash__name{font-size:clamp(2.2rem,14vw,4.4rem)}.chapter-flash__num{font-size:42vw;right:-3vw}
  .story__chapter{gap:10px;margin-bottom:22px}.story__chapter>b{font-size:2.2rem}.story__chapter>i{height:32px}.story__chapter em{font-size:.55rem}.story__chapter small{font-size:.42rem}
  .story--hero h1{font-size:clamp(3rem,15vw,4.8rem)}
  .story--fracture h2,.story--space h2,.arch-intro h2,.story-tail .sec-head h2{font-size:clamp(2.5rem,12vw,3.7rem)}
  .story::after,.story-tail::after{font-size:28vw;right:-12vw;top:40%;opacity:0!important}
  .arch-theos{animation:none}
}



/* =====================================================================
   V19 - GUIDANCE CHOREOGRAPHY REFINEMENT
   The narrator belongs to the reveal. It never sits over reading copy.
   ===================================================================== */
.story__chapter{opacity:var(--chapter-o,1);transform:translate3d(0,calc((1 - var(--chapter-o,1))*-8px),0);transition:opacity .22s linear,transform .22s linear}
.living-space{opacity:var(--guide-o,.86)!important;transition:opacity .18s linear!important}
.living-space__voice{opacity:calc(var(--guide-o,.86) * var(--voice-o,.72))!important}
.life-token{opacity:0}
.life-token.is-on{opacity:calc(var(--guide-o,.86) * .62)}
.life-token.is-key{opacity:calc(var(--guide-o,.86) * .82)}

@media(max-width:700px){
  /* The stage is a composed visual beat, not a half-screen spacer. */
  .life-stage{height:clamp(215px,29vh,275px)!important;margin:10px 0 20px!important}
  .story--hero .life-stage{height:clamp(235px,31vh,295px)!important;margin-top:8px!important}
  .story--fracture .life-stage,.story--space .life-stage,.story--presence .life-stage,.story--becoming .life-stage{height:clamp(210px,28vh,265px)!important}

  /* No cinematic full-screen chapter overlay on phones; the real chapter title is enough. */
  .chapter-flash{display:none!important}

  /* The guide speaks in whispers on mobile. No duplicate chapter label. */
  .living-space__voice{width:min(62vw,235px)!important;padding-left:11px!important;border-left-color:color-mix(in srgb,var(--aqua) 34%,transparent)!important;text-shadow:0 2px 14px color-mix(in srgb,var(--bg) 90%,transparent)!important}
  .living-space__voice small{display:none!important}
  .living-space__voice p{font-family:var(--ff-m)!important;font-size:.49rem!important;line-height:1.45!important;letter-spacing:.11em!important;text-transform:uppercase!important;color:color-mix(in srgb,var(--fg-2) 74%,transparent)!important;max-width:24ch!important}
  .living-space__voice::before{width:4px;height:4px;left:-2px;box-shadow:0 0 12px color-mix(in srgb,var(--aqua) 54%,transparent)!important}

  .life-token{font-size:.42rem!important;padding:4px 6px!important;background:color-mix(in srgb,var(--bg) 52%,transparent)!important;border-color:color-mix(in srgb,var(--edge) 60%,transparent)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
  .life-token.is-on{opacity:calc(var(--guide-o,.72) * .52)!important}
  .life-token.is-key{opacity:calc(var(--guide-o,.72) * .74)!important}

  /* Chapter title owns the top of the scene and then quietly leaves. */
  .story__chapter{margin-bottom:18px!important;position:relative;z-index:5}
  .story__chapter>b{font-size:2rem!important}
  .story__chapter>i{height:28px!important}
  .story__chapter em{font-size:.52rem!important}
  .story__chapter small{font-size:.39rem!important}

  .story__copy h1,.story__copy h2,.arch-intro h2,.story-tail .sec-head h2{position:relative;z-index:4}
  .story__lead,.story__statement,.fragment-words,.story__actions{position:relative;z-index:4}
}

@media(min-width:701px){
  /* Desktop can retain the cinematic flash, but shorter and quieter. */
  .chapter-flash.is-on{animation-duration:1.08s!important}
  .chapter-flash__name{color:color-mix(in srgb,var(--fg) 8%,transparent)!important}
  .chapter-flash__num{opacity:.2!important}
}



/* =====================================================================
   V20 - MOBILE STORY RHYTHM + CINEMATIC CHAPTER RESTORE
   Remove the duplicate spacer, restore the grand chapter handoff,
   and let the guide occupy a deliberate beat rather than an empty screen.
   ===================================================================== */
@media(max-width:700px){
  /* V19 accidentally kept the old 56vh story void as well as life-stage.
     Mobile now uses ONLY the embedded life-stage as the guide's visual beat. */
  .story__void{display:none!important;min-height:0!important;height:0!important;margin:0!important;padding:0!important}

  /* Compact but meaningful breathing room for the guide. */
  .life-stage{
    display:block!important;
    height:clamp(132px,18vh,168px)!important;
    margin:8px 0 16px!important;
  }
  .story--hero .life-stage{height:clamp(158px,21vh,192px)!important;margin:10px 0 18px!important}
  .story--fracture .life-stage,
  .story--space .life-stage,
  .story--presence .life-stage,
  .story--becoming .life-stage{height:clamp(138px,19vh,176px)!important}

  /* Tighten chapter-to-chapter cadence. */
  .story{padding-block:clamp(62px,9vh,88px)!important}
  .story--hero{padding-top:56px!important;padding-bottom:66px!important;min-height:auto!important}
  .story--architecture{padding-top:76px!important;padding-bottom:76px!important}
  .story-tail.sec{padding-block:clamp(66px,9vh,94px)!important}
  .story__lead{margin-top:18px!important}
  .story__statement{margin-top:24px!important}
  .fragment-words{margin-top:24px!important}

  /* Restore the cinematic ghost chapter entry on mobile.
     It sits behind the real content, arrives large, then disappears. */
  .chapter-flash{
    display:grid!important;
    align-items:center!important;
    padding:0 18px!important;
    z-index:2!important;
    opacity:0;
  }
  .chapter-flash.is-on{animation:chapterMomentMobile 1.42s var(--e-out) both!important}
  .chapter-flash__name{
    position:absolute;
    left:5vw;
    top:52%;
    transform:translateY(-50%);
    max-width:7ch!important;
    font-size:clamp(3.6rem,19vw,6.6rem)!important;
    line-height:.78!important;
    letter-spacing:-.065em!important;
    color:color-mix(in srgb,var(--fg) 7%,transparent)!important;
    text-shadow:0 0 32px color-mix(in srgb,var(--aqua) 7%,transparent);
  }
  .chapter-flash__num{
    right:-5vw!important;
    bottom:8vh!important;
    font-size:54vw!important;
    opacity:.17!important;
    -webkit-text-stroke:1px color-mix(in srgb,var(--aqua) 18%,transparent)!important;
  }
  @keyframes chapterMomentMobile{
    0%{opacity:0;transform:translate3d(0,24px,0) scale(.97);filter:blur(10px)}
    18%{opacity:1;transform:none;filter:blur(0)}
    58%{opacity:.9;transform:none;filter:blur(0)}
    100%{opacity:0;transform:translate3d(0,-14px,0) scale(1.015);filter:blur(5px)}
  }

  /* Keep the chapter's giant semantic word as an almost subliminal backdrop
     after the flash, instead of removing it entirely. */
  .story::after,.story-tail::after{
    opacity:.045!important;
    display:block!important;
    top:56%!important;
    right:-14vw!important;
    font-size:30vw!important;
    filter:blur(.7px);
    color:var(--fg)!important;
    -webkit-text-stroke:0!important;
  }

  /* Real chapter marker stays crisp, then the existing scroll logic fades it. */
  .story__chapter{margin-bottom:16px!important}

  /* Follow cue belongs to the opening only and should never create layout space. */
  .story__scroll{bottom:20px!important;opacity:var(--follow-o,1);transition:opacity .18s linear!important}
}

@media(min-width:701px) and (max-width:1099px){
  /* Tablet: remove excess visual reservation but retain two-column intent where possible. */
  .story__void{min-height:34vh!important}
  .chapter-flash.is-on{animation-duration:1.35s!important}
}



/* =====================================================================
   V21 - RESPONSIVE CHOREOGRAPHY + GRACEFUL CHAPTER HANDOFF
   Phone, iPad portrait, iPad landscape/small laptop and desktop are
   composed independently so narrator, copy and product visuals do not
   compete for the same space.
   ===================================================================== */

/* The chapter handoff should emerge, breathe, then dissolve into the scene. */
.chapter-flash.is-on{animation:chapterDissolve 2.65s cubic-bezier(.18,.72,.18,1) both!important}
@keyframes chapterDissolve{
  0%{opacity:0;transform:translate3d(0,28px,0) scale(.965);filter:blur(12px)}
  12%{opacity:.72;transform:translate3d(0,8px,0) scale(.985);filter:blur(4px)}
  24%{opacity:1;transform:none;filter:none}
  56%{opacity:.92;transform:translate3d(0,-2px,0) scale(1.002);filter:none}
  72%{opacity:.64;transform:translate3d(0,-8px,0) scale(1.008);filter:blur(1px)}
  88%{opacity:.24;transform:translate3d(0,-18px,0) scale(1.018);filter:blur(4px)}
  100%{opacity:0;transform:translate3d(0,-30px,0) scale(1.026);filter:blur(9px)}
}
.chapter-flash__name,.chapter-flash__num{will-change:transform,opacity,filter}

/* Real chapter label also hands off gradually instead of vanishing quickly. */
.story__chapter{transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)!important}
.living-space{transition:opacity .34s cubic-bezier(.2,.7,.2,1)!important}
.story__scroll{transition:opacity .42s cubic-bezier(.2,.7,.2,1)!important}

/* ---------- PHONE ---------- */
@media(max-width:700px){
  .chapter-flash.is-on{animation:chapterDissolveMobile 2.35s cubic-bezier(.18,.72,.18,1) both!important}
  @keyframes chapterDissolveMobile{
    0%{opacity:0;transform:translate3d(0,22px,0) scale(.97);filter:blur(10px)}
    14%{opacity:.72;transform:translate3d(0,7px,0) scale(.988);filter:blur(3px)}
    27%{opacity:.96;transform:none;filter:none}
    55%{opacity:.88;transform:translate3d(0,-2px,0) scale(1.003);filter:none}
    72%{opacity:.58;transform:translate3d(0,-8px,0) scale(1.01);filter:blur(1px)}
    88%{opacity:.2;transform:translate3d(0,-17px,0) scale(1.02);filter:blur(4px)}
    100%{opacity:0;transform:translate3d(0,-26px,0) scale(1.03);filter:blur(8px)}
  }
  .chapter-flash__name{top:50%!important;left:4vw!important;font-size:clamp(3.35rem,18vw,6.2rem)!important}
  .chapter-flash__num{bottom:10vh!important;font-size:50vw!important}
  .story::after,.story-tail::after{opacity:.032!important;top:54%!important}
  .story__copy{max-width:none!important}
  .story__lead{max-width:34ch!important}
  .story__statement{max-width:27ch!important}
  .story-bridge{padding-block:72px!important}
}

/* ---------- iPAD PORTRAIT / LARGE TABLET ---------- */
@media(min-width:701px) and (max-width:899px){
  :root{--gut:clamp(30px,5vw,46px)}
  .story{padding-block:clamp(82px,10vh,116px)!important;min-height:auto!important}
  .story--hero{padding-top:70px!important;padding-bottom:92px!important}
  .story__grid,.story__grid--reverse{grid-template-columns:1fr!important;gap:34px!important}
  .story__copy{max-width:700px!important}
  .story__void{min-height:24vh!important;max-height:250px!important}
  .story--hero .story__void{min-height:28vh!important;max-height:300px!important}
  .story__lead{max-width:58ch!important}
  .chapter-flash{padding:0 var(--gut) 10vh!important}
  .chapter-flash__name{font-size:clamp(4.4rem,11vw,6.8rem)!important;max-width:8ch!important}
  .chapter-flash__num{font-size:34vw!important;right:-2vw!important;bottom:4vh!important}
  .living-space__voice{width:min(330px,46vw)!important}
  .os-arch{width:min(100%,760px)!important;padding-inline:34px!important}
  .arch-direct{right:0!important}
  .arch-reveal{margin-top:54px!important}
  .exp-panel{min-height:340px!important}
  .flow__motion{padding-inline:18px!important}
  .graph{width:min(100%,620px)!important;margin-inline:auto!important}
  .router__view{min-height:360px!important}
  .policy,.exec{margin-top:14px!important}
  .story-bridge{padding-block:86px!important}
  .story::after,.story-tail::after{right:-8vw!important;font-size:18vw!important;opacity:.035!important}
}

/* ---------- iPAD LANDSCAPE / SMALL LAPTOP ---------- */
@media(min-width:900px) and (max-width:1199px){
  :root{--gut:clamp(34px,4vw,54px);--max:1120px}
  .story{padding-block:clamp(92px,9vw,128px)!important;min-height:auto!important}
  .story--hero{min-height:calc(92svh - var(--nav-h))!important;padding-top:76px!important}
  .story__grid{grid-template-columns:minmax(0,.96fr) minmax(300px,.84fr)!important;gap:clamp(34px,5vw,68px)!important;align-items:center!important}
  .story__grid--reverse{grid-template-columns:minmax(300px,.84fr) minmax(0,.96fr)!important}
  .story__grid--reverse .story__void{order:initial!important}.story__grid--reverse .story__copy{order:initial!important}
  .story__copy{max-width:600px!important}
  .story__void{min-height:360px!important;max-height:48vh!important}
  .story--hero .story__void{min-height:410px!important}
  .story__lead{font-size:1.06rem!important;max-width:50ch!important}
  .story__statement{max-width:28ch!important}
  .chapter-flash{padding:0 var(--gut) 9vh!important}
  .chapter-flash__name{font-size:clamp(4.8rem,8vw,7rem)!important}
  .chapter-flash__num{font-size:25vw!important;right:0!important}
  .living-space__voice{width:min(300px,30vw)!important}
  .os-arch{width:min(100%,880px)!important;padding-inline:54px!important}
  .arch-cloud{width:90%!important}.arch-os{width:94%!important}.arch-fleet{width:98%!important}
  .arch-direct{right:2px!important}
  .explorer{grid-template-columns:250px 1fr!important;gap:14px!important}
  .exp-panel{min-height:370px!important}
  .mem{grid-template-columns:.92fr 1.08fr!important;gap:42px!important}
  .router{grid-template-columns:.82fr 1.18fr!important;gap:14px!important}
  .router__view{min-height:400px!important}
  .exec{grid-template-columns:1fr 1fr!important;gap:34px!important}
  .fabric{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .fab{padding:25px!important}.fab .status{margin-bottom:34px!important}
  .story::after,.story-tail::after{font-size:14vw!important;right:-3vw!important;opacity:.035!important}
}

/* ---------- LAPTOP / DESKTOP ---------- */
@media(min-width:1200px){
  .story__grid{gap:clamp(64px,6vw,104px)!important}
  .story__copy{max-width:640px!important}
  .story__void{min-height:500px!important}
  .story--hero .story__void{min-height:540px!important}
  .chapter-flash__name{max-width:9ch!important}
  .os-arch{width:min(100%,940px)!important}
  .explorer{grid-template-columns:290px 1fr!important}
  .mem{gap:64px!important}
  .router{gap:18px!important}
}

/* Short laptop screens: preserve width composition without vertical collisions. */
@media(min-width:900px) and (max-height:760px){
  .story{padding-block:72px!important}
  .story--hero{min-height:auto!important;padding-top:58px!important;padding-bottom:72px!important}
  .story__void{min-height:300px!important;max-height:42vh!important}
  .chapter-flash{padding-bottom:6vh!important}
  .chapter-flash__name{font-size:clamp(4rem,7vw,6rem)!important}
  .os-arch{transform:scale(.94);transform-origin:top center;margin-bottom:-36px!important}
  .exp-panel,.router__view{min-height:330px!important}
}

/* =====================================================================
   V22 - FLUID VIEWPORT SYSTEM
   Responsive by available geometry, not by device-inch labels.
   Width, height and aspect ratio continuously reshape the composition.
   ===================================================================== */

/* Fluid shell: narrow screens remain compact; large displays use the room. */
@media(min-width:1200px){
  :root{
    --max:clamp(1180px,88vw,1680px);
    --gut:clamp(30px,3.1vw,62px);
  }
  .story,.sec{scroll-margin-top:calc(var(--nav-h) + 26px)}
  .story__grid{grid-template-columns:minmax(430px,.86fr) minmax(500px,1.14fr)!important;gap:clamp(54px,5vw,112px)!important}
  .story__grid--reverse{grid-template-columns:minmax(500px,1.14fr) minmax(430px,.86fr)!important}
  .story__copy{width:min(100%,650px);max-width:650px!important}
  .story__void{min-height:clamp(420px,55vh,660px)!important}
  .story--hero .story__void{min-height:clamp(470px,61vh,720px)!important}
  .story--hero{min-height:min(980px,calc(100svh - var(--nav-h) + 36px));align-items:center}
  .story__lead{font-size:clamp(1.02rem,.75vw + .42rem,1.22rem)}
  .os-arch{width:min(100%,1020px)!important}
  .graph{max-width:720px}
  .router__view{min-height:clamp(390px,31vw,470px)!important}
  .chapter-flash{padding-inline:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))!important}
}

/* Wide desktop: use a wider visual column while protecting reading width. */
@media(min-width:1450px){
  :root{--max:clamp(1320px,90vw,1740px)}
  .story__grid{grid-template-columns:minmax(500px,.76fr) minmax(620px,1.24fr)!important;gap:clamp(70px,5.4vw,132px)!important}
  .story__grid--reverse{grid-template-columns:minmax(620px,1.24fr) minmax(500px,.76fr)!important}
  .story__copy{max-width:640px!important}
  .story__void{min-height:clamp(470px,58vh,700px)!important}
  .story--hero .story__void{min-height:clamp(520px,63vh,760px)!important}
  .story::after,.story-tail::after{right:clamp(-5vw,-2vw,-18px)!important;font-size:clamp(8rem,12vw,14rem)!important}
  .living-space__voice{max-width:340px!important}
  .os-arch{width:min(100%,1080px)!important}
}

/* Ultrawide / very wide aspect: expand the stage, not the prose. */
@media(min-width:1600px) and (min-aspect-ratio:19/10){
  :root{--max:min(1760px,92vw);--gut:clamp(34px,3vw,68px)}
  .story__grid{grid-template-columns:minmax(510px,.68fr) minmax(760px,1.32fr)!important;gap:clamp(84px,6vw,150px)!important}
  .story__grid--reverse{grid-template-columns:minmax(760px,1.32fr) minmax(510px,.68fr)!important}
  .story__copy{justify-self:start;max-width:620px!important}
  .story__void{min-height:clamp(430px,60vh,690px)!important}
  .story--hero .story__void{min-height:clamp(470px,64vh,730px)!important}
  .story--hero{min-height:auto!important;padding-block:clamp(72px,8vh,108px)!important}
  .chapter-flash__name{font-size:clamp(5.4rem,6.5vw,8rem)!important}
  .chapter-flash__num{font-size:min(22vw,24rem)!important;right:2vw!important}
  .story-rail{left:clamp(14px,1.25vw,26px)!important}
  .living-space__voice{width:min(320px,19vw)!important}
}

/* Extra-wide but short displays: horizontal breathing room, compact vertical rhythm. */
@media(min-width:1400px) and (max-height:820px){
  .story{padding-block:clamp(58px,7vh,76px)!important}
  .story--hero{padding-top:clamp(48px,6vh,66px)!important;padding-bottom:clamp(58px,7vh,80px)!important}
  .story__void,.story--hero .story__void{min-height:clamp(330px,47vh,430px)!important;max-height:none!important}
  .d1{font-size:clamp(3.7rem,5.2vw,5.15rem)!important}
  .story__lead{font-size:clamp(.98rem,.72vw,1.08rem)!important;line-height:1.55}
  .story__statement{font-size:clamp(1.24rem,1.5vw,1.55rem)!important}
  .chapter-flash{padding-bottom:5vh!important}
  .os-arch{transform:scale(.96);transform-origin:top center;margin-bottom:-24px!important}
}

/* 4:3 / near-square tablets: vertical rhythm matters more than horizontal spread. */
@media(min-width:700px) and (max-width:1100px) and (max-aspect-ratio:4/3){
  .story{padding-block:clamp(76px,8vh,104px)!important}
  .story__grid,.story__grid--reverse{grid-template-columns:1fr!important;gap:clamp(24px,4vh,38px)!important}
  .story__copy{max-width:min(760px,92vw)!important}
  .story__void{min-height:clamp(220px,28vh,320px)!important;max-height:none!important}
  .story--hero .story__void{min-height:clamp(250px,31vh,350px)!important}
  .os-arch{width:min(100%,820px)!important}
  .graph{width:min(100%,680px)!important;margin-inline:auto}
}

/* Very narrow phones including foldable cover screens. */
@media(max-width:380px){
  :root{--gut:15px}
  .d1{font-size:clamp(2.65rem,14.8vw,3.35rem)!important}
  .d2{font-size:clamp(2.2rem,12vw,2.9rem)!important}
  .story__lead{font-size:.96rem!important;max-width:32ch!important}
  .story__statement{font-size:1.2rem!important}
  .story__chapter>b{font-size:1.85rem!important}
  .chapter-flash__name{font-size:clamp(3rem,17vw,4.4rem)!important}
}

/* Extreme landscape phones / foldables: two concise zones, no tall dead stage. */
@media(max-height:560px) and (orientation:landscape) and (max-width:1000px){
  .story{padding-block:42px!important}
  .story--hero{padding-block:36px 46px!important;min-height:auto!important}
  .story__grid,.story__grid--reverse{grid-template-columns:minmax(0,.92fr) minmax(250px,1.08fr)!important;gap:26px!important}
  .story__void{min-height:260px!important;max-height:72vh!important}
  .life-stage{display:none!important}
  .story__lead{font-size:.91rem!important;line-height:1.48!important}
  .story__statement{font-size:1.12rem!important}
  .chapter-flash__name{font-size:clamp(3rem,8vw,4.8rem)!important}
}

/* Atmosphere should scale with the shorter viewport dimension, not explode on ultrawide. */
@media(min-aspect-ratio:16/9){
  .aurora i:nth-child(1){width:min(52vw,78vmin);height:min(52vw,78vmin)}
  .aurora i:nth-child(2){width:min(46vw,70vmin);height:min(46vw,70vmin)}
  .aurora i:nth-child(3){width:min(44vw,66vmin);height:min(44vw,66vmin)}
  .aurora i:nth-child(4){width:min(34vw,56vmin);height:min(34vw,56vmin)}
}

/* Components adapt continuously inside their allocated column. */
.os-arch,.explorer,.flow,.mem,.router,.fabric,.graph{max-width:100%}
.arch-slab,.exp-panel,.router__view,.flow,.graph{min-width:0}
.story__grid>*{min-width:0}



/* =====================================================================
   V23 - CROSS-BROWSER / SAFARI HARDENING
   Deterministic typography, WebKit fallbacks, viewport safety and
   interaction fallbacks. Visual design remains unchanged.
   ===================================================================== */

/* Do not let browsers synthesize fake bold/italic faces differently. */
html{
  font-synthesis:none;
  -webkit-font-synthesis:none;
}
body,
button,input,textarea,select{
  font-family:var(--ff);
  font-optical-sizing:auto;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,.brand,.d1,.d2,.d3,.story__chapter>b,.chapter-flash__name,.chapter-flash__num{
  font-family:var(--ff-d);
  font-optical-sizing:auto;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-feature-settings:"kern" 1,"liga" 1;
}
.kicker,.status,.story__chapter small,.story__chapter em,.life-token,.story-rail__name{
  font-family:var(--ff-m);
}

/* Stable Apple fallbacks if the remote font is delayed or unavailable. */
:root{
  --ff-d:"Bricolage Grotesque","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ff:"Manrope","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ff-m:"JetBrains Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
}

/* Prevent Safari text autosizing from changing hierarchy in landscape. */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Dynamic viewport fallback chain for old/new iOS Safari and Android. */
.story{min-height:100vh;min-height:100svh}
.story--hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.living-space{height:100vh;height:100svh}
.story-bridge{min-height:58vh;min-height:58svh}
.story-bridge--quiet{min-height:46vh;min-height:46svh}
.story--becoming{min-height:110vh;min-height:110svh}

/* overflow:clip is not universal on older WebKit. */
.story,.story-bridge,.drawer{overflow:hidden}
@supports (overflow:clip){
  .story,.story-bridge{overflow:clip}
}

/* WebKit mask fallback. */
.grid-bg{
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 76%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 76%);
}

/* Every backdrop-filter use gets the WebKit-prefixed equivalent. */
.drawer__scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.layer--os,.layer--dev{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ticker{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bridge__c{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* Safe degradation for browsers without backdrop-filter. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.topbar__in,.arch-slab,.life-token,.btn--ghost,.drawer__scrim,.ticker,.bridge__c{
    background-color:rgba(7,24,19,.94)!important;
  }
  [data-theme="light"] .glass,
  [data-theme="light"] .topbar__in,
  [data-theme="light"] .arch-slab,
  [data-theme="light"] .life-token,
  [data-theme="light"] .btn--ghost,
  [data-theme="light"] .ticker,
  [data-theme="light"] .bridge__c{
    background-color:rgba(246,250,247,.95)!important;
  }
}

/* Core fallback when color-mix is unavailable. */
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .topbar__in,.glass,.arch-slab,.life-token,.btn--ghost,.ticker,.bridge__c{border-color:rgba(255,255,255,.10)}
  .living-space__voice p,.story__lead,.lede{color:#B8BFDB}
  .story__chapter em,.life-token.is-key{color:#3FE0C8}
  .chapter-flash__name{color:rgba(255,255,255,.10)}
  .flow__motion,.router__view,.exp-panel{background-color:rgba(255,255,255,.035)}
  [data-theme="light"] .living-space__voice p,
  [data-theme="light"] .story__lead,
  [data-theme="light"] .lede{color:#3B564B}
}

/* Touch devices: never depend on hover to expose state. */
@media (hover:none),(pointer:coarse){
  .lit:hover::after{opacity:0}
  /* V27: touch must not flatten the transform outright, or it would cancel the
     magnetic physics that now runs on touch. Neutralise the lift instead and
     keep the variable-driven transform intact. */
  .path:hover{transform:none}
  .step:hover,.fab:hover{--surface-lift:0px;transform:translate3d(0,var(--surface-lift),0) scale(var(--surface-scale))}
  .btn:hover{--lift:0px;transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--lift)),0) scale(var(--press))}
  .ticker:hover .ticker__t{animation-play-state:running}
}

/* Safari compositor stability for moving layers. */
/* V27: elements that carry a real positioning transform must NOT be given
   translateZ(0) here. This rule sits after their layout rules and was
   overwriting them, pinning the flow packet to the container origin and
   cancelling aurora drift. Promotion is expressed with will-change instead. */
.living-space canvas,.ticker__t,.chapter-flash{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.flow-packet,.route-packet,.aurora{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform;
}

/* iOS safe-area protection in both orientations. */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.topbar{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* Brand fonts swap in when ready. Critical headings remain visible in the
   system fallback immediately so font loading never blocks first paint or LCP. */
.d1,.d2,.d3,.story__chapter,.chapter-flash{visibility:visible}


/* =====================================================================
   V24 - IPADOS / TOUCH MOTION RESTORATION
   Reduced Motion is treated as lower-amplitude semantic motion, never as
   a static fallback. Touch devices receive real interaction physics.
   ===================================================================== */
html.motion-soft{scroll-behavior:auto}
html.motion-soft .aurora i{animation-duration:42s!important}
html.motion-soft .ticker__t{animation-duration:64s!important}
html.motion-soft .pulse i,html.motion-soft .node,html.motion-soft .graph .nd,html.motion-soft .graph .core{animation-duration:6s!important}
html.motion-soft .chapter-flash.is-on{animation-duration:2.25s!important}
html.motion-soft .flow-packet,html.motion-soft .route-active,html.motion-soft .route-policy-ring{animation-duration:2.2s!important}
html.motion-soft .js .rv{transition-duration:.6s!important}

/* Safari compositor hints. These do not change layout. */
/* V27: same correction as above. .stack, .flow-packet, .route-packet and
   .aurora all set their own transform and must be excluded. */
.living-space,.living-space canvas,.chapter-flash{
  -webkit-transform:translateZ(0);transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.stack,.aurora,.flow-packet,.route-packet,.route-packet-trail{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
@supports (-webkit-touch-callout:none){
  /* V27: the canvas repaints every frame, so promoting it AND running a filter
     over it costs an extra full-screen pass on iOS for no visual gain. */
  .living-space canvas{will-change:auto;filter:none}
  .stack{will-change:transform}
  .chapter-flash{will-change:opacity,transform}
  .flow-packet{will-change:transform}
}



/* =====================================================================
   V25 - SAFARI STORY ENGINE VISUAL CONTRACT
   The chapter handoff and guide are semantic state, not optional decoration.
   ===================================================================== */
.story,.story-tail{--chapter-p:0;--word-o:.03;--word-y:0px}
.story::after,.story-tail::after{
  opacity:var(--word-o,.03)!important;
  transform:translateY(calc(-50% + var(--word-y,0px))) translateX(4%)!important;
  transition:opacity .32s linear,transform .32s linear!important;
}
/* The chapter flash must remain visible on touch Safari. Do not rely on filter
   for the entire effect because older WebKit can flatten filtered fixed layers. */
.chapter-flash{display:grid!important;visibility:visible!important;-webkit-transform:translateZ(0);transform:translateZ(0)}
.chapter-flash.is-on{animation:chapterV25 2.9s cubic-bezier(.16,.72,.18,1) both!important}
@keyframes chapterV25{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.965)}
  14%{opacity:.65;transform:translate3d(0,10px,0) scale(.985)}
  26%{opacity:1;transform:none}
  58%{opacity:.88;transform:translate3d(0,-3px,0) scale(1.003)}
  78%{opacity:.46;transform:translate3d(0,-12px,0) scale(1.012)}
  100%{opacity:0;transform:translate3d(0,-28px,0) scale(1.024)}
}
@supports (filter:blur(1px)){
  .chapter-flash.is-on{animation-name:chapterV25Blur!important}
  @keyframes chapterV25Blur{
    0%{opacity:0;transform:translate3d(0,30px,0) scale(.965);filter:blur(10px)}
    14%{opacity:.65;transform:translate3d(0,10px,0) scale(.985);filter:blur(3px)}
    26%{opacity:1;transform:none;filter:none}
    58%{opacity:.88;transform:translate3d(0,-3px,0) scale(1.003);filter:none}
    78%{opacity:.46;transform:translate3d(0,-12px,0) scale(1.012);filter:blur(2px)}
    100%{opacity:0;transform:translate3d(0,-28px,0) scale(1.024);filter:blur(7px)}
  }
}
/* iPad Safari: keep narrator above atmosphere and semantic backwords, but below
   all readable copy and controls. */
@supports (-webkit-touch-callout:none){
  .living-space{z-index:1!important;display:block!important;visibility:visible!important}
  .living-space canvas{display:block!important;visibility:visible!important;opacity:1!important}
  .chapter-flash{z-index:2!important}
  .story>.wrap,.story-tail>.wrap,.story-bridge>.wrap{z-index:3!important}
  .living-space__tokens,.living-space__voice{display:block!important;visibility:visible!important}
}
/* Tablet chapter flash sizing. It should feel cinematic without covering the
   entire reading column. */
@media(min-width:701px) and (max-width:1199px){
  .chapter-flash__name{font-size:clamp(4rem,9.5vw,7rem)!important;max-width:8ch!important}
  .chapter-flash__num{font-size:clamp(12rem,30vw,20rem)!important;opacity:.16!important}
}
/* The chapter marker itself eases with progress rather than dropping out. */
.story__chapter{
  opacity:clamp(.18,calc(1.12 - var(--chapter-p,0)*1.3),1)!important;
  transform:translate3d(0,calc(var(--chapter-p,0)*-10px),0)!important;
}


/* =====================================================================
   V26 - SAFARI CLEAN STACKING CONTRACT
   ===================================================================== */
.living-space{z-index:2!important;pointer-events:none!important}
.living-space canvas{display:block!important;visibility:visible!important;opacity:1!important}
.story>.wrap,.story-tail>.wrap,.story-bridge>.wrap{position:relative;z-index:4!important}
.chapter-flash{z-index:3!important}
@supports (-webkit-touch-callout:none){
  .living-space{display:block!important;visibility:visible!important;opacity:var(--guide-o,.78)!important}
  .living-space__tokens,.living-space__voice{display:block!important;visibility:visible!important}
  .chapter-flash{display:grid!important;visibility:visible!important}
}


/* =====================================================================
   V27 - iOS COMPOSITOR BUDGET
   The narrator canvas is a fixed, full-viewport surface that repaints every
   frame. Every backdrop-filter above it therefore re-samples a moving
   backdrop each frame, which is what starves motion on iPhone and iPad.
   Nothing here removes glass. The blur radius is reduced and the saturate
   pass is dropped on iOS only; desktop keeps the full treatment.
   ===================================================================== */
@supports (-webkit-touch-callout:none){
  .topbar__in{
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    background:color-mix(in srgb,var(--bg) 84%,transparent);
  }
  .glass,.arch-slab,.bridge__c{
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  }
  .btn--ghost,.layer--os,.layer--dev,.ticker,.site-footer,.life-token{
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  }
  .drawer__scrim{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  /* The caption sits directly on the canvas; blurring it is pure overdraw. */
  .living-space__caption{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
  }
  /* Decorative blur radii are the most expensive per pixel and the least
     legible at phone size. Halved, not removed. */
  .living-space__halo{filter:blur(16px)}
}


/* =====================================================================
   V27b - CONTINUOUS MOTION PASS
   The three rotating panels swap their contents on a short interval. Isolating
   their style and layout keeps each swap from invalidating the rest of the
   document, which is what produced the small hitch on every rotation.
   ===================================================================== */
.exp-body,.flow__out,.router__view{contain:style}
.exp-body,.flow__out{transform:translateZ(0)}

/* The packet travel and the panel swap should share one easing family so the
   page reads as a single system rather than several timed widgets. */
.flow-packet{transition-timing-function:cubic-bezier(.22,.72,.2,1)}

/* Scroll containers on touch should not rubber-band the whole document while a
   horizontal tab strip is being dragged. */
.exp-tabs,.arch-badges,.flow__rail{overscroll-behavior-x:contain}


/* =====================================================================
   V27c - FLOW DOT: TRANSFORM-ONLY STATE CHANGE
   The step dot previously grew by animating width, height, top and margin.
   That runs layout on six pseudo-elements for 500ms on every rotation, which
   is now every 2.4s. The dot keeps one fixed box and changes state purely
   through transform, so the whole transition stays on the compositor.

   Geometry is preserved exactly: the box is the unselected 14px dot, centred
   on the rail axis by translate(-50%,-50%), and the selected state is the
   same 18px visual via scale(18/14). The ring keeps its 24px box and scales
   from the same centre.
   ===================================================================== */
.fstep::before,
.fstep::after{
  margin:0!important;
  transform-origin:50% 50%;
  transition:transform .5s var(--e-out),
             background .45s var(--e),
             border-color .45s var(--e),
             box-shadow .5s var(--e),
             opacity .45s var(--e);
}
.fstep::before{
  --dot-s:1;
  width:14px;height:14px;
  top:var(--flow-dot-c);left:50%;
  transform:translate(-50%,-50%) scale(var(--dot-s));
}
.fstep::after{
  --ring-s:.6;
  width:24px;height:24px;
  top:var(--flow-dot-c);left:50%;
  transform:translate(-50%,-50%) scale(var(--ring-s));
}
.fstep[aria-selected="true"]::before{
  --dot-s:1.2857;
  width:14px;height:14px;
  top:var(--flow-dot-c);left:50%;
  transform:translate(-50%,-50%) scale(var(--dot-s));
}
.fstep[aria-selected="true"]::after{
  --ring-s:1.4;
  transform:translate(-50%,-50%) scale(var(--ring-s));
  animation:flowRingT 1.8s ease-out infinite;
}
/* The ring animation must carry the centring translate, or the keyframe
   transform would drop it and the ring would jump to the corner. */
@keyframes flowRingT{
  0%{transform:translate(-50%,-50%) scale(.82);opacity:.6}
  70%{opacity:.14}
  100%{transform:translate(-50%,-50%) scale(2.05);opacity:0}
}

/* Stacked layout: the axis moves to the left rail, the dot stays centred on
   it by the identical transform. */
@media(max-width:760px){
  .fstep::before,
  .fstep[aria-selected="true"]::before,
  .fstep::after,
  .fstep[aria-selected="true"]::after{
    top:50%;left:var(--flow-rail-x);
  }
}

/* Reduced-motion and hidden-page states keep working: only the ring loop is
   paused, the dot state itself is still expressed as a transform. */
html.page-hidden .fstep[aria-selected="true"]::after{animation-play-state:paused!important}


/* =====================================================================
   V33 - CONTINUITY + INTELLIGENCE TRAIN + MARKETPLACE + SOVEREIGNTY
   New story chapters inherit V30's narrator, chapter flash and fluid layout.
   ===================================================================== */

.continuity-note,.intelligence-note{margin-top:16px!important}
.continuity-statement,.intelligence-statement{margin-top:32px;max-width:34ch}

/* =====================================================================
   V33 - CONTINUITY: FOUR DEVICES, ONE SPACE
   Four equal device families auto-select in sequence. The device changes;
   the Operating Space and preserved intelligence remain visually constant.
   ===================================================================== */
.continuity-stage{
  position:relative;min-height:510px;padding:clamp(24px,3.5vw,44px);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
}
.continuity-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 58% at 50% 69%,rgba(63,224,200,.12),transparent 72%),radial-gradient(36% 48% at 50% 72%,rgba(124,124,255,.10),transparent 76%);
}
.continuity-devices{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.continuity-device{
  position:relative;min-width:0;min-height:132px;padding:17px 10px 15px;border-radius:18px;border:1px solid var(--edge-2);
  background:rgba(255,255,255,.022);text-align:center;opacity:.46;overflow:hidden;
  display:grid;grid-template-rows:58px auto auto;align-items:center;align-content:center;
  transition:opacity .72s var(--e),transform .72s var(--e-out),border-color .72s var(--e),background .72s var(--e),box-shadow .72s var(--e);
}
.continuity-device::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(80% 70% at 50% 20%,rgba(63,224,200,.11),transparent 70%);
  transition:opacity .6s var(--e);
}
.continuity-device::after{
  content:"";position:absolute;left:16%;right:16%;bottom:0;height:2px;border-radius:99px;opacity:0;transform:scaleX(.15);
  background:linear-gradient(90deg,transparent,var(--aqua),var(--peri),transparent);box-shadow:0 0 16px rgba(63,224,200,.8);
}
.continuity-device.is-active{
  opacity:1;transform:translateY(-4px) scale(1.012);border-color:rgba(63,224,200,.42);
  background:linear-gradient(180deg,rgba(63,224,200,.072),rgba(124,124,255,.022));
  box-shadow:0 20px 48px -32px rgba(63,224,200,.9);
}
.continuity-device.is-active::before{opacity:1}
.continuity-device.is-active::after{animation:continuitySelectSweep 2.9s ease-in-out infinite}
@keyframes continuitySelectSweep{0%{opacity:.18;transform:scaleX(.18)}42%{opacity:1;transform:scaleX(1)}72%{opacity:.8;transform:scaleX(.74)}100%{opacity:.18;transform:scaleX(.18)}}
.continuity-device__icon{position:relative;z-index:2;display:grid;place-items:center;width:62px;height:52px;margin:0 auto;color:var(--aqua);transition:transform .72s var(--e-out),color .6s var(--e),filter .6s var(--e)}
.continuity-device__icon svg{width:100%;height:100%;overflow:visible}
.continuity-device__icon .device-fill{fill:rgba(63,224,200,.045)}
.continuity-device__icon .device-stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.continuity-device.is-active .continuity-device__icon{transform:translateY(-2px) scale(1.08);color:color-mix(in srgb,var(--aqua) 78%,white);filter:drop-shadow(0 0 11px rgba(63,224,200,.28))}
.continuity-device b{position:relative;z-index:2;display:block;font-family:var(--ff-d);font-size:.93rem;letter-spacing:-.025em;align-self:end}
.continuity-device small{position:relative;z-index:2;display:block;margin-top:2px;font-family:var(--ff-m);font-size:.44rem;line-height:1.35;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);min-height:1.35em}

.continuity-core{
  position:absolute;left:50%;top:69%;transform:translate(-50%,-50%);width:184px;height:184px;border-radius:50%;
  display:grid;place-items:center;align-content:center;text-align:center;z-index:3;border:1px solid rgba(63,224,200,.30);
  background:radial-gradient(circle at 35% 28%,rgba(63,224,200,.13),transparent 40%),rgba(5,23,18,.82);
  box-shadow:0 0 0 14px rgba(63,224,200,.025),0 0 74px -24px rgba(63,224,200,.66);
  animation:continuityCore 4.4s ease-in-out infinite;
}
.continuity-stage.is-handoff .continuity-core{animation:continuityCoreHandoff 1.05s var(--e-out),continuityCore 4.4s 1.05s ease-in-out infinite}
.continuity-core__brand{font-family:var(--ff-d);font-weight:800;font-size:1.7rem;letter-spacing:-.055em;background:linear-gradient(110deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.continuity-core>small{margin-top:2px;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.13em;color:var(--fg-3)}
@keyframes continuityCore{50%{transform:translate(-50%,-50%) scale(1.025);box-shadow:0 0 0 23px rgba(63,224,200,.018),0 0 92px -20px rgba(124,124,255,.62)}}
@keyframes continuityCoreHandoff{0%{transform:translate(-50%,-50%) scale(.97)}46%{transform:translate(-50%,-50%) scale(1.055);box-shadow:0 0 0 27px rgba(63,224,200,.025),0 0 98px -16px rgba(63,224,200,.78)}100%{transform:translate(-50%,-50%) scale(1)}}
.continuity-preserved{position:absolute;inset:-44px;pointer-events:none}
.continuity-preserved__item{position:absolute;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--fg-2);border:1px solid var(--edge);background:rgba(6,17,14,.88);box-shadow:0 8px 26px -18px rgba(0,0,0,.9)}
.continuity-preserved__item svg{width:20px;height:20px;fill:currentColor}
.continuity-preserved__item:nth-child(1){left:50%;top:-2px;transform:translate(-50%,-50%);color:var(--aqua)}
.continuity-preserved__item:nth-child(2){right:-2px;top:50%;transform:translate(50%,-50%);color:var(--peri)}
.continuity-preserved__item:nth-child(3){left:50%;bottom:-2px;transform:translate(-50%,50%);color:var(--coral)}
.continuity-preserved__item:nth-child(4){left:-2px;top:50%;transform:translate(-50%,-50%);color:var(--violet)}
.continuity-stage.is-handoff .continuity-preserved__item{animation:continuityPreserve 1.15s var(--e-out) both}
.continuity-stage.is-handoff .continuity-preserved__item:nth-child(2){animation-delay:.08s}.continuity-stage.is-handoff .continuity-preserved__item:nth-child(3){animation-delay:.16s}.continuity-stage.is-handoff .continuity-preserved__item:nth-child(4){animation-delay:.24s}
@keyframes continuityPreserve{0%{opacity:.34;filter:brightness(.8)}42%{opacity:1;filter:brightness(1.8) drop-shadow(0 0 9px currentColor)}100%{opacity:1;filter:none}}
.continuity-status{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;width:min(86%,580px);text-align:center;font-family:var(--ff-m);font-size:.50rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);z-index:3}
.continuity-status i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);animation:blip 2s ease-in-out infinite;flex:0 0 auto}
.continuity-legend{position:absolute;left:50%;top:calc(69% + 118px);transform:translateX(-50%);display:flex;gap:11px;z-index:3;color:var(--fg-3)}
.continuity-legend span{display:flex;align-items:center;gap:5px;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.continuity-legend svg{width:12px;height:12px;fill:currentColor}

/* =====================================================================
   V33 - INTELLIGENCE TRAIN + ICON NETWORK
   Text cards roll independently at the top. The lower network contains only
   TheOS plus four icon nodes. The incoming card activates its bidirectional
   connection as it enters the primary position.
   ===================================================================== */
.intelligence-shell{display:block}
.intelligence-field{
  --train-shift:clamp(340px,52vw,590px);position:relative;min-height:650px;overflow:hidden;isolation:isolate;padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.016));
}
.intelligence-field::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(36% 46% at 50% 66%,rgba(63,224,200,.10),transparent 72%),radial-gradient(50% 60% at 50% 66%,rgba(124,124,255,.07),transparent 76%)}
.intelligence-train{position:relative;z-index:5;height:214px;margin:0;overflow:hidden;border-bottom:1px solid var(--edge-2);background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.intelligence-train::before,.intelligence-train::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:7;pointer-events:none}
.intelligence-train::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.intelligence-train::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent)}
.intelligence-card{
  position:absolute;left:50%;top:24px;width:min(68%,520px);min-height:164px;margin-left:0;transform:translateX(-50%) scale(.92);
  padding:21px 24px;border-radius:20px;border:1px solid var(--edge-2);background:rgba(255,255,255,.027);opacity:0;z-index:1;
  text-align:left;transition:margin-left 1.15s cubic-bezier(.18,.76,.2,1),transform 1.15s cubic-bezier(.18,.76,.2,1),opacity .82s var(--e),border-color .82s var(--e),background .82s var(--e),box-shadow .82s var(--e);
}
.intelligence-card b{display:block;font-family:var(--ff-d);font-size:1.24rem;line-height:1.05;letter-spacing:-.035em}
.intelligence-card small{display:block;margin-top:7px;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}
.intelligence-card p{margin-top:13px!important;font-size:.86rem;line-height:1.5;color:var(--fg-2);max-width:47ch}
.intelligence-card.train-active{margin-left:0;transform:translateX(-50%) scale(1);opacity:1;z-index:4;border-color:rgba(63,224,200,.34);background:linear-gradient(145deg,rgba(63,224,200,.065),rgba(124,124,255,.024));box-shadow:0 22px 54px -36px rgba(63,224,200,.9)}
.intelligence-card.train-prev{margin-left:calc(var(--train-shift) * -1);transform:translateX(-50%) scale(.91);opacity:.24;z-index:2}
.intelligence-card.train-next{margin-left:var(--train-shift);transform:translateX(-50%) scale(.91);opacity:.24;z-index:2}
.intelligence-card.train-far{margin-left:calc(var(--train-shift) * 2);transform:translateX(-50%) scale(.86);opacity:0;z-index:1}

.intelligence-network{position:absolute;left:0;right:0;top:214px;bottom:0;z-index:2;min-height:430px}
.intelligence-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.intelligence-link{opacity:.16;transition:opacity .78s var(--e)}
.intelligence-link__base{fill:none;stroke:rgba(124,124,255,.30);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-dasharray:2 4}
.intelligence-link__glow{fill:none;stroke:var(--aqua);stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:0;filter:drop-shadow(0 0 4px rgba(63,224,200,.8));transition:opacity .6s var(--e)}
.intelligence-link__pulse{fill:none;stroke:var(--aqua);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:2 22;vector-effect:non-scaling-stroke;opacity:0;filter:drop-shadow(0 0 4px rgba(63,224,200,.94))}
.intelligence-link__pulse--out{animation:intelPulseOut 2.15s linear infinite}
.intelligence-link__pulse--in{animation:intelPulseIn 2.15s linear infinite}
@keyframes intelPulseOut{to{stroke-dashoffset:-48}}
@keyframes intelPulseIn{to{stroke-dashoffset:48}}
.intelligence-field[data-intel-mode="hive"] .intelligence-link--hive,.intelligence-field[data-intel-mode="swarm"] .intelligence-link--swarm,.intelligence-field[data-intel-mode="hybrid"] .intelligence-link--hybrid,.intelligence-field[data-intel-mode="organization"] .intelligence-link--organization{opacity:1}
.intelligence-field[data-intel-mode="hive"] .intelligence-link--hive .intelligence-link__glow,.intelligence-field[data-intel-mode="swarm"] .intelligence-link--swarm .intelligence-link__glow,.intelligence-field[data-intel-mode="hybrid"] .intelligence-link--hybrid .intelligence-link__glow,.intelligence-field[data-intel-mode="organization"] .intelligence-link--organization .intelligence-link__glow,.intelligence-field[data-intel-mode="hive"] .intelligence-link--hive .intelligence-link__pulse,.intelligence-field[data-intel-mode="swarm"] .intelligence-link--swarm .intelligence-link__pulse,.intelligence-field[data-intel-mode="hybrid"] .intelligence-link--hybrid .intelligence-link__pulse,.intelligence-field[data-intel-mode="organization"] .intelligence-link--organization .intelligence-link__pulse{opacity:1}

.intelligence-center{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);z-index:4;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;border:1px solid rgba(63,224,200,.32);background:radial-gradient(circle at 34% 28%,rgba(63,224,200,.14),transparent 40%),rgba(5,23,18,.92);box-shadow:0 0 0 18px rgba(63,224,200,.022),0 0 84px -22px rgba(124,124,255,.68)}
.intelligence-center::before,.intelligence-center::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(63,224,200,.10);animation:intelCenterRing 3.8s ease-out infinite}.intelligence-center::after{inset:-34px;border-color:rgba(124,124,255,.08);animation-delay:-1.9s}
@keyframes intelCenterRing{0%{opacity:.7;transform:scale(.88)}100%{opacity:0;transform:scale(1.18)}}
.intelligence-center strong{font-family:var(--ff-d);font-size:1.6rem;font-weight:800;letter-spacing:-.05em;background:linear-gradient(100deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.intelligence-center small{margin-top:3px;font-family:var(--ff-m);font-size:.43rem;letter-spacing:.13em;color:var(--fg-3)}
.intelligence-center em{margin-top:10px;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.1em;color:var(--aqua);font-style:normal;transition:opacity .35s var(--e)}

.intelligence-node{position:absolute;z-index:4;width:68px;height:68px;border-radius:22px;display:grid;place-items:center;color:var(--fg-3);border:1px solid var(--edge-2);background:rgba(6,17,14,.82);opacity:.48;transition:opacity .7s var(--e),transform .85s var(--e-out),color .7s var(--e),border-color .7s var(--e),box-shadow .7s var(--e),background .7s var(--e)}
.intelligence-node svg{width:28px;height:28px;fill:currentColor}
.intelligence-node--hive{left:12%;top:13%}.intelligence-node--swarm{right:12%;top:13%}.intelligence-node--hybrid{left:12%;bottom:12%}.intelligence-node--organization{right:12%;bottom:12%}
.intelligence-field[data-intel-mode="hive"] .intelligence-node--hive,.intelligence-field[data-intel-mode="swarm"] .intelligence-node--swarm,.intelligence-field[data-intel-mode="hybrid"] .intelligence-node--hybrid,.intelligence-field[data-intel-mode="organization"] .intelligence-node--organization{opacity:1;transform:scale(1.08);color:var(--aqua);border-color:rgba(63,224,200,.48);background:rgba(63,224,200,.07);box-shadow:0 0 0 8px rgba(63,224,200,.025),0 0 30px -7px rgba(63,224,200,.72);animation:intelNodePulse 2.15s ease-in-out infinite}
@keyframes intelNodePulse{50%{transform:scale(1.14);box-shadow:0 0 0 13px rgba(63,224,200,.012),0 0 38px -6px rgba(124,124,255,.74)}}

@media(max-width:939px){
  .intelligence-field{--train-shift:clamp(300px,68vw,500px);min-height:650px}
  .intelligence-card{width:min(72%,500px)}
  .intelligence-node--hive,.intelligence-node--hybrid{left:9%}.intelligence-node--swarm,.intelligence-node--organization{right:9%}
}
@media(max-width:700px){
  .continuity-stage{min-height:595px;padding:16px 12px 18px}
  .continuity-devices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .continuity-device{min-height:116px;padding:12px 7px 10px;border-radius:15px;grid-template-rows:48px auto auto}
  .continuity-device__icon{width:50px;height:43px}.continuity-device b{font-size:.80rem}.continuity-device small{font-size:.37rem;letter-spacing:.055em}
  .continuity-core{top:72%;width:132px;height:132px}.continuity-core__brand{font-size:1.38rem}.continuity-core>small{font-size:.34rem}
  .continuity-preserved{inset:-34px}.continuity-preserved__item{width:34px;height:34px;border-radius:11px}.continuity-preserved__item svg{width:16px;height:16px}
  .continuity-legend{top:calc(72% + 89px);gap:6px;max-width:92%;flex-wrap:wrap;justify-content:center}.continuity-legend span{font-size:.34rem}.continuity-legend svg{width:10px;height:10px}
  .continuity-status{bottom:13px;font-size:.39rem;width:92%}

  .intelligence-field{--train-shift:88vw;min-height:635px;border-radius:22px}
  .intelligence-train{height:218px}
  .intelligence-card{top:20px;width:84%;min-height:174px;padding:18px 19px;border-radius:17px}
  .intelligence-card b{font-size:1.04rem}.intelligence-card small{font-size:.46rem}.intelligence-card p{font-size:.74rem;line-height:1.44;margin-top:11px!important}
  .intelligence-network{top:218px;min-height:417px}
  .intelligence-center{width:112px;height:112px;top:52%}.intelligence-center strong{font-size:1.28rem}.intelligence-center small{font-size:.31rem}.intelligence-center em{font-size:.29rem;margin-top:6px}
  .intelligence-node{width:52px;height:52px;border-radius:16px}.intelligence-node svg{width:22px;height:22px}
  .intelligence-node--hive{left:10%;top:13%}.intelligence-node--swarm{right:10%;top:13%}.intelligence-node--hybrid{left:10%;bottom:12%}.intelligence-node--organization{right:10%;bottom:12%}
}
@media(max-width:420px){
  .continuity-stage{min-height:610px}
  .intelligence-card{width:86%}
  .intelligence-node--hive,.intelligence-node--hybrid{left:7%}.intelligence-node--swarm,.intelligence-node--organization{right:7%}
}
@media(min-width:1400px){.continuity-stage{min-height:535px}.intelligence-field{min-height:670px}}
@supports (-webkit-touch-callout:none){
  .continuity-stage,.intelligence-field{-webkit-transform:translateZ(0);transform:translateZ(0)}
  .intelligence-card,.intelligence-node,.intelligence-center,.continuity-core{-webkit-backface-visibility:hidden;backface-visibility:hidden}
}

/* Sovereign boundary: visible proof that the space can close completely. */
.sovereign-boundary{position:relative;margin-top:16px;padding:clamp(28px,4vw,50px);min-height:260px;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.sovereign-boundary::before{content:"";position:absolute;inset:18px;border:1px dashed rgba(63,224,200,.24);border-radius:20px;animation:sovereignEdge 4s ease-in-out infinite}
.sovereign-boundary__pulse{position:absolute;width:min(48vw,380px);height:min(48vw,380px);border-radius:50%;border:1px solid rgba(124,124,255,.14);box-shadow:0 0 80px -30px rgba(63,224,200,.7);animation:sovereignPulse 4.2s ease-out infinite}
@keyframes sovereignPulse{0%{transform:scale(.64);opacity:.65}100%{transform:scale(1.18);opacity:0}}
@keyframes sovereignEdge{50%{border-color:rgba(63,224,200,.48);box-shadow:inset 0 0 40px rgba(63,224,200,.025)}}
.sovereign-boundary__core{position:relative;z-index:2;display:grid;gap:9px;max-width:560px}.sovereign-boundary__core small{font-family:var(--ff-m);font-size:.56rem;letter-spacing:.14em;color:var(--aqua)}.sovereign-boundary__core strong{font-family:var(--ff-d);font-size:clamp(1.55rem,3vw,2.55rem);line-height:1.02;letter-spacing:-.04em}
.sovereign-boundary__chips{position:relative;z-index:2;margin-top:25px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.sovereign-boundary__chips span{padding:7px 10px;border-radius:999px;border:1px solid var(--edge-2);background:rgba(6,17,14,.56);font-family:var(--ff-m);font-size:.48rem;letter-spacing:.09em;color:var(--fg-3)}
.sovereign-boundary__edge{position:absolute;right:30px;bottom:24px;display:flex;gap:7px;align-items:center;font-family:var(--ff-m);font-size:.46rem;letter-spacing:.12em;color:var(--aqua)}.sovereign-boundary__edge i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);animation:blip 1.8s ease-in-out infinite}

/* Marketplace: capability moves from creation to distribution. */
.marketplace-stage{position:relative;min-height:330px;padding:clamp(28px,4vw,48px);overflow:hidden;margin-bottom:16px}
.marketplace-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 120% at 12% 50%,rgba(63,224,200,.08),transparent 72%),radial-gradient(52% 120% at 88% 50%,rgba(192,139,255,.09),transparent 72%);pointer-events:none}
.marketplace-types{position:relative;z-index:3;display:flex;gap:7px}.marketplace-types span,.market-label{font-family:var(--ff-m);font-size:.52rem;letter-spacing:.1em;padding:6px 9px;border:1px solid var(--edge-2);border-radius:999px;color:var(--aqua);background:var(--glass-2)}
.marketplace-track{position:absolute;left:8%;right:8%;top:55%;height:2px;background:linear-gradient(90deg,rgba(63,224,200,.14),rgba(124,124,255,.4),rgba(255,158,122,.28));z-index:1}.marketplace-track i{position:absolute;inset:-3px 0;background:linear-gradient(90deg,transparent,rgba(63,224,200,.5),transparent);filter:blur(3px);animation:marketBreath 3s ease-in-out infinite}@keyframes marketBreath{50%{opacity:.28}}
.marketplace-steps{position:absolute;left:5%;right:5%;top:46%;display:grid;grid-template-columns:repeat(5,1fr);z-index:2}.marketplace-steps>div{text-align:center;display:grid;justify-items:center;gap:5px}.marketplace-steps small{font-family:var(--ff-m);font-size:.47rem;color:var(--aqua)}.marketplace-steps b{font-family:var(--ff-d);font-size:.96rem}.marketplace-steps span{font-size:.7rem;color:var(--fg-3)}
.marketplace-steps>div::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--bg-2);border:2px solid var(--peri);box-shadow:0 0 0 5px rgba(124,124,255,.09);margin-bottom:6px}
.marketplace-packet{position:absolute;top:calc(55% - 13px);left:5%;z-index:4;padding:4px 7px;border-radius:999px;background:var(--aqua);color:#04120F;font-family:var(--ff-m);font-size:.42rem;font-weight:600;box-shadow:0 0 18px rgba(63,224,200,.6);animation:marketTravel 8s cubic-bezier(.25,.1,.25,1) infinite}.marketplace-packet--automation{background:var(--peri);color:#fff;animation-delay:-2.65s}.marketplace-packet--agent{background:var(--coral);color:#1d0c08;animation-delay:-5.3s}
@keyframes marketTravel{0%{left:5%;opacity:0}7%{opacity:1}23%{left:27%}44%{left:49%}65%{left:70%}86%{left:90%;opacity:1}100%{left:94%;opacity:0}}
.marketplace-cards .fab{min-height:260px}.marketplace-cards .market-label{align-self:flex-start;margin-bottom:38px;color:var(--tint)}

@media(max-width:700px){
  .sovereign-boundary{min-height:320px;padding:34px 22px 62px}.sovereign-boundary__edge{right:50%;transform:translateX(50%);bottom:20px;white-space:nowrap}.sovereign-boundary__chips{gap:5px}.sovereign-boundary__chips span{font-size:.42rem}
  .marketplace-stage{min-height:470px;padding:22px 14px}.marketplace-track{left:29px;right:auto;top:82px;bottom:38px;width:2px;height:auto;background:linear-gradient(180deg,rgba(63,224,200,.18),rgba(124,124,255,.42),rgba(255,158,122,.28))}.marketplace-steps{position:relative;left:auto;right:auto;top:auto;margin-top:26px;display:grid;grid-template-columns:1fr;gap:8px}.marketplace-steps>div{grid-template-columns:35px 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;padding:8px 8px 8px 54px;position:relative}.marketplace-steps>div::before{position:absolute;left:10px;top:18px}.marketplace-steps small{grid-row:1/3;display:none}.marketplace-steps span{font-size:.68rem}.marketplace-packet{top:72px!important;left:22px!important;animation:marketTravelMobile 8s ease-in-out infinite}.marketplace-packet--automation{animation-delay:-2.65s}.marketplace-packet--agent{animation-delay:-5.3s}@keyframes marketTravelMobile{0%{top:72px;opacity:0}8%{opacity:1}24%{top:145px}44%{top:220px}65%{top:296px}86%{top:370px;opacity:1}100%{top:405px;opacity:0}}
}
@supports (-webkit-touch-callout:none){.sovereign-boundary,.marketplace-stage{-webkit-transform:translateZ(0);transform:translateZ(0)}.marketplace-packet{will-change:transform,left,top}}




/* =====================================================================
   V34 - MEMORY AS A LIVING STACK
   Distinct visual language: knowledge is layered, retained and recalled.
   ===================================================================== */
.memory-stage{
  position:relative;min-height:520px;padding:26px;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(72% 62% at 50% 72%,color-mix(in srgb,var(--peri) 13%,transparent),transparent 66%),
    radial-gradient(54% 48% at 14% 16%,color-mix(in srgb,var(--aqua) 8%,transparent),transparent 70%),
    var(--glass);
  isolation:isolate;
}
.memory-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 38%),repeating-linear-gradient(0deg,transparent 0 42px,color-mix(in srgb,var(--edge) 34%,transparent) 43px);
  mask-image:linear-gradient(#000,transparent 88%);-webkit-mask-image:linear-gradient(#000,transparent 88%);
}
.memory-stage__head{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--edge-2)}
.memory-stage__head>span,.memory-stage__head>small{font-family:var(--ff-m);text-transform:uppercase;letter-spacing:.13em}
.memory-stage__head>span{font-size:.58rem;color:var(--aqua)}
.memory-stage__head>small{font-size:.48rem;color:var(--fg-3);text-align:right;transition:color .45s var(--e),opacity .45s var(--e)}
.memory-stack{position:relative;z-index:3;height:320px;margin:34px auto 10px;width:min(100%,520px);perspective:1100px;transform-style:preserve-3d}
.memory-layer{
  --slot:0;--layer-tint:var(--peri);
  position:absolute;left:4%;right:4%;top:82px;min-height:132px;
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:20px 22px;border-radius:22px;border:1px solid var(--edge);
  background:linear-gradient(145deg,color-mix(in srgb,var(--bg-2) 90%,var(--layer-tint) 10%),color-mix(in srgb,var(--bg) 92%,transparent));
  box-shadow:0 24px 54px -34px rgba(0,0,0,.82),inset 0 1px rgba(255,255,255,.055);
  transform-origin:50% 100%;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .65s var(--e),border-color .55s var(--e),box-shadow .55s var(--e),filter .55s var(--e);
  will-change:transform;
}
.memory-layer--formal{--layer-tint:var(--aqua)}
.memory-layer--tribal{--layer-tint:var(--violet)}
.memory-layer--customer{--layer-tint:var(--coral)}
.memory-layer[data-slot="0"]{transform:translate3d(0,-58px,70px) rotateX(-1deg) scale(1);opacity:1;z-index:4;border-color:color-mix(in srgb,var(--layer-tint) 48%,var(--edge));box-shadow:0 34px 76px -32px color-mix(in srgb,var(--layer-tint) 34%,rgba(0,0,0,.75)),0 0 0 1px color-mix(in srgb,var(--layer-tint) 12%,transparent)}
.memory-layer[data-slot="1"]{transform:translate3d(0,4px,30px) scale(.965);opacity:.68;z-index:3;filter:saturate(.82)}
.memory-layer[data-slot="2"]{transform:translate3d(0,62px,0) scale(.925);opacity:.38;z-index:2;filter:saturate(.66)}
.memory-layer.is-entering{animation:memoryLand .95s cubic-bezier(.16,1,.3,1) both}
@keyframes memoryLand{0%{transform:translate3d(0,-116px,110px) rotateX(-7deg) scale(1.035);opacity:0}58%{opacity:1}76%{transform:translate3d(0,-48px,74px) rotateX(1deg) scale(.995)}100%{transform:translate3d(0,-58px,70px) rotateX(-1deg) scale(1);opacity:1}}
.memory-layer.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 20%,color-mix(in srgb,var(--layer-tint) 18%,transparent) 48%,transparent 72%);transform:translateX(-120%);animation:memorySheen 2.9s ease-in-out infinite}
@keyframes memorySheen{0%,22%{transform:translateX(-120%);opacity:0}42%{opacity:1}70%,100%{transform:translateX(120%);opacity:0}}
.memory-layer__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--layer-tint);border:1px solid color-mix(in srgb,var(--layer-tint) 30%,var(--edge));background:color-mix(in srgb,var(--layer-tint) 8%,var(--glass-2));box-shadow:inset 0 1px rgba(255,255,255,.05)}
.memory-layer__icon svg{width:27px;height:27px}
.memory-layer small{display:block;font-family:var(--ff-m);font-size:.5rem;letter-spacing:.14em;color:var(--layer-tint);margin-bottom:5px}
.memory-layer strong{display:block;font-family:var(--ff-d);font-size:clamp(.94rem,1.4vw,1.08rem);letter-spacing:-.025em;line-height:1.18;color:var(--fg);font-weight:650}
.memory-layer>b{font-family:var(--ff-d);font-size:2rem;letter-spacing:-.06em;color:color-mix(in srgb,var(--layer-tint) 70%,var(--fg));opacity:.65}
.memory-core{position:relative;z-index:5;margin:0 auto;width:min(100%,520px);display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 17px;border-radius:17px;border:1px solid color-mix(in srgb,var(--peri) 26%,var(--edge));background:color-mix(in srgb,var(--bg-2) 82%,transparent);box-shadow:0 18px 46px -28px rgba(0,0,0,.9),0 0 42px -28px var(--peri);overflow:hidden}
.memory-core__mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:var(--ff-d);font-weight:800;background:linear-gradient(145deg,var(--aqua),var(--peri));color:#fff;box-shadow:0 8px 24px -12px var(--peri)}
.memory-core small{display:block;font-family:var(--ff-m);font-size:.45rem;letter-spacing:.12em;color:var(--fg-3);margin-bottom:3px}
.memory-core strong{font-family:var(--ff-d);font-size:.9rem;letter-spacing:-.02em;color:var(--fg-2)}
.memory-core__state{font-family:var(--ff-m);font-size:.46rem;letter-spacing:.12em;color:var(--aqua);border:1px solid color-mix(in srgb,var(--aqua) 24%,var(--edge));padding:5px 8px;border-radius:999px}
.memory-core__pulse{position:absolute;left:18%;right:18%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),var(--peri),transparent);opacity:.3}
.memory-stage.is-commit .memory-core{animation:memoryCommit .72s var(--e-out)}
.memory-stage.is-commit .memory-core__pulse{animation:memoryCorePulse .72s ease-out}
@keyframes memoryCommit{0%{transform:scale(.985);box-shadow:0 18px 46px -28px rgba(0,0,0,.9)}45%{transform:scale(1.012);box-shadow:0 18px 54px -22px color-mix(in srgb,var(--peri) 42%,rgba(0,0,0,.8))}100%{transform:none}}
@keyframes memoryCorePulse{0%{opacity:.2;transform:scaleX(.12)}45%{opacity:1;transform:scaleX(1)}100%{opacity:.3;transform:scaleX(.6)}}
.memory-stage__caption{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;font-family:var(--ff-m);font-size:.46rem;letter-spacing:.12em;color:var(--fg-3);text-align:center}
.memory-stage__caption i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua)}
.mem-item{position:relative;border-top:1px solid var(--edge-2);transition:background .45s var(--e),border-color .45s var(--e),transform .5s var(--e-out),padding .45s var(--e);cursor:pointer;border-radius:14px;padding-inline:0}
.mem-item:last-child{border-bottom:1px solid var(--edge-2)}
.mem-item::after{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;border-radius:2px;background:linear-gradient(var(--aqua),var(--peri));transform:scaleY(0);opacity:0;transition:transform .45s var(--e-out),opacity .4s var(--e)}
.mem-item.is-active{padding-inline:14px;transform:translateX(4px);background:linear-gradient(90deg,color-mix(in srgb,var(--aqua) 7%,transparent),color-mix(in srgb,var(--peri) 5%,transparent),transparent);border-color:color-mix(in srgb,var(--aqua) 18%,var(--edge-2))}
.mem-item.is-active::after{transform:scaleY(1);opacity:1}
.mem-item span:first-child{transition:color .4s var(--e),background .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e),transform .45s var(--e-out)}
.mem-item b{transition:color .4s var(--e),opacity .4s var(--e)}
.mem-item em{transition:color .4s var(--e),opacity .4s var(--e)}
.mem-item.is-active span:first-child{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge));background:color-mix(in srgb,var(--aqua) 8%,var(--glass));box-shadow:0 0 22px -11px var(--aqua);transform:scale(1.04)}
.mem-item.is-active b{background:linear-gradient(100deg,var(--aqua),var(--peri) 58%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.mem-item.is-active em{color:color-mix(in srgb,var(--fg) 82%,var(--aqua));}
.mem-item:not(.is-active){opacity:.68}
.mem-item:hover,.mem-item:focus-visible{opacity:1}

@media(max-width:979px){
  .memory-stage{width:min(100%,680px);margin-inline:auto;min-height:500px}
}
@media(max-width:700px){
  .memory-stage{min-height:462px;padding:18px 14px;border-radius:22px}
  .memory-stage__head{align-items:flex-start;flex-direction:column;gap:5px;padding-bottom:14px}.memory-stage__head>small{text-align:left}
  .memory-stack{height:286px;margin-top:22px}
  .memory-layer{left:1%;right:1%;top:76px;min-height:118px;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;padding:16px 14px;border-radius:18px}
  .memory-layer[data-slot="0"]{transform:translate3d(0,-48px,62px) scale(1)}
  .memory-layer[data-slot="1"]{transform:translate3d(0,5px,28px) scale(.96)}
  .memory-layer[data-slot="2"]{transform:translate3d(0,55px,0) scale(.92)}
  @keyframes memoryLand{0%{transform:translate3d(0,-92px,100px) rotateX(-6deg) scale(1.025);opacity:0}76%{transform:translate3d(0,-39px,65px) scale(.995);opacity:1}100%{transform:translate3d(0,-48px,62px) scale(1);opacity:1}}
  .memory-layer__icon{width:43px;height:43px;border-radius:13px}.memory-layer__icon svg{width:23px;height:23px}
  .memory-layer small{font-size:.42rem}.memory-layer strong{font-size:.83rem}.memory-layer>b{font-size:1.6rem}
  .memory-core{grid-template-columns:42px minmax(0,1fr);padding:13px}.memory-core__state{display:none}.memory-core__mark{width:38px;height:38px}
  .memory-core strong{font-size:.8rem}.memory-core small{font-size:.39rem}
  .memory-stage__caption{font-size:.39rem;line-height:1.5;margin-top:15px}
  .mem-item.is-active{padding-inline:10px;transform:none}
}



/* =====================================================================
   V35 - SOVEREIGN SECTION CLARITY
   Isolate the policy card from the rotating router and turn the former
   empty boundary frame into a visible policy-gate story.
   ===================================================================== */
#sovereign .router{position:relative;z-index:2;margin-bottom:clamp(24px,3vw,38px)}
#sovereign .router__view{isolation:isolate;contain:style paint;overflow:hidden}
#sovereign .policy{
  position:relative;z-index:5;margin-top:0!important;margin-bottom:clamp(24px,3vw,38px);
  isolation:isolate;overflow:hidden;
  background:linear-gradient(145deg,rgba(12,32,26,.96),rgba(7,22,18,.94))!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 24px 70px -36px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.055)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#sovereign .policy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,rgba(63,224,200,.065),transparent 68%);
}

.sovereign-boundary{
  position:relative;margin-top:0!important;padding:clamp(22px,3vw,38px)!important;min-height:0!important;
  display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:clamp(24px,3.2vw,46px);
  align-items:center!important;text-align:left!important;overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,rgba(10,29,23,.92),rgba(6,19,15,.88))!important;
}
.sovereign-boundary::before,.sovereign-boundary__pulse,.sovereign-boundary__chips,.sovereign-boundary__edge{display:none!important}
.sb-visual{position:relative;min-width:0}
.sb-boundary{
  position:relative;width:100%;aspect-ratio:1.24/1;min-height:330px;border-radius:26px;
  border:1px dashed rgba(63,224,200,.34);overflow:hidden;
  background:
    radial-gradient(circle at 48% 52%,rgba(124,124,255,.12),transparent 24%),
    radial-gradient(circle at 20% 22%,rgba(63,224,200,.06),transparent 28%),
    rgba(3,18,14,.7);
  box-shadow:inset 0 0 55px rgba(63,224,200,.025);
}
.sb-boundary::after{
  content:"";position:absolute;inset:10px;border-radius:20px;border:1px solid rgba(255,255,255,.035);pointer-events:none;
}
.sb-boundary__label,.sb-outside,.sb-enforced,.sb-zone span,.sb-gate span,.sb-blocked{
  font-family:var(--ff-m);text-transform:uppercase;letter-spacing:.12em;font-weight:500;
}
.sb-boundary__label{position:absolute;left:18px;top:15px;font-size:.46rem;color:rgba(63,224,200,.72)}
.sb-outside{position:absolute;right:8px;top:17px;font-size:.42rem;color:var(--fg-3);opacity:.72}
.sb-core{
  position:absolute;left:42%;top:50%;transform:translate(-50%,-50%);width:126px;height:126px;border-radius:50%;
  display:grid;place-content:center;text-align:center;z-index:4;
  background:radial-gradient(circle at 35% 28%,rgba(63,224,200,.12),transparent 42%),rgba(4,22,17,.96);
  border:1px solid rgba(124,124,255,.55);box-shadow:0 0 0 8px rgba(124,124,255,.045),0 0 45px -18px rgba(124,124,255,.9);
}
.sb-core strong{font-family:var(--ff-d);font-size:1.45rem;letter-spacing:-.05em;background:linear-gradient(100deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-core small{margin-top:5px;font-family:var(--ff-m);font-size:.39rem;letter-spacing:.12em;color:var(--fg-3)}
.sb-zone{
  position:absolute;display:flex;align-items:center;gap:7px;z-index:3;padding:7px 9px;border-radius:11px;
  border:1px solid rgba(255,255,255,.07);background:rgba(8,28,22,.86);color:var(--fg-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  animation:sbZoneBreathe 4.6s ease-in-out infinite;
}
.sb-zone svg{width:16px;height:16px;color:var(--aqua);flex:0 0 auto}.sb-zone span{font-size:.39rem;white-space:nowrap}
.sb-zone--local{left:8%;top:22%}.sb-zone--private{left:8%;bottom:21%;animation-delay:-1.15s}.sb-zone--sandbox{left:53%;top:20%;animation-delay:-2.3s}.sb-zone--airgap{left:53%;bottom:20%;animation-delay:-3.45s}
@keyframes sbZoneBreathe{0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.07)}50%{transform:translateY(-3px);border-color:rgba(63,224,200,.20)}}
.sb-gate{
  position:absolute;right:13%;top:50%;transform:translateY(-50%);z-index:6;width:70px;height:70px;border-radius:20px;
  display:grid;place-content:center;justify-items:center;gap:4px;color:var(--aqua);
  background:rgba(4,24,18,.96);border:1px solid rgba(63,224,200,.42);box-shadow:0 0 30px -16px rgba(63,224,200,.9);
  animation:sbGate 5.6s ease-in-out infinite;
}
.sb-gate svg{width:25px;height:25px}.sb-gate span{font-size:.36rem}
@keyframes sbGate{0%,28%,100%{box-shadow:0 0 30px -16px rgba(63,224,200,.9);border-color:rgba(63,224,200,.42)}36%,50%{box-shadow:0 0 0 6px rgba(63,224,200,.06),0 0 34px -8px rgba(63,224,200,.9);border-color:rgba(63,224,200,.8)}72%,82%{border-color:rgba(255,158,122,.72);box-shadow:0 0 0 6px rgba(255,158,122,.055),0 0 28px -8px rgba(255,158,122,.8)}}
.sb-path--inside{position:absolute;left:42%;right:24%;top:50%;height:1px;z-index:2;background:linear-gradient(90deg,rgba(124,124,255,.5),rgba(63,224,200,.5));transform:translateY(-50%)}
.sb-packet{position:absolute;z-index:8;width:8px;height:8px;border-radius:50%;pointer-events:none}
.sb-packet--request{right:-10px;top:43%;background:var(--aqua);box-shadow:0 0 15px var(--aqua);animation:sbRequest 5.6s ease-in-out infinite}
.sb-packet--allowed{right:23%;top:50%;background:var(--aqua);box-shadow:0 0 15px var(--aqua);animation:sbAllowed 5.6s ease-in-out infinite}
.sb-packet--blocked{right:-10px;top:64%;background:var(--coral);box-shadow:0 0 15px var(--coral);animation:sbBlocked 5.6s ease-in-out infinite}
@keyframes sbRequest{0%,8%{opacity:0;transform:translateX(0)}14%{opacity:1}34%{opacity:1;transform:translateX(-86px)}39%,100%{opacity:0;transform:translateX(-86px)}}
@keyframes sbAllowed{0%,36%{opacity:0;transform:translateX(0)}42%{opacity:1}62%{opacity:1;transform:translateX(-150px)}68%,100%{opacity:0;transform:translateX(-150px)}}
@keyframes sbBlocked{0%,60%{opacity:0;transform:translateX(0)}65%{opacity:1}78%{opacity:1;transform:translateX(-86px)}83%{opacity:.85;transform:translateX(-76px)}89%,100%{opacity:0;transform:translateX(-76px)}}
.sb-blocked{position:absolute;right:19%;top:69%;z-index:9;font-size:.38rem;color:var(--coral);opacity:0;animation:sbBlockedLabel 5.6s ease-in-out infinite}
@keyframes sbBlockedLabel{0%,74%{opacity:0;transform:translateY(3px)}79%,85%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-3px)}}
.sb-enforced{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:7px;font-size:.39rem;color:var(--aqua)}
.sb-enforced i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);animation:blip 1.8s ease-in-out infinite}

.sovereign-boundary__copy{position:relative;z-index:4;display:grid;align-content:center;gap:14px;max-width:500px}
.sovereign-boundary__copy>small{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua)}
.sovereign-boundary__copy>strong{font-family:var(--ff-d);font-size:clamp(2rem,3.5vw,3.7rem);line-height:.98;letter-spacing:-.05em;max-width:11ch}
.sovereign-boundary__copy>p{color:var(--fg-2);font-size:.95rem;line-height:1.65;max-width:46ch}
.sovereign-proof{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.sovereign-proof span{padding:7px 9px;border-radius:999px;border:1px solid var(--edge-2);background:rgba(6,17,14,.58);font-family:var(--ff-m);font-size:.43rem;letter-spacing:.09em;color:var(--fg-3)}

@media(max-width:900px){
  .sovereign-boundary{grid-template-columns:1fr!important;gap:22px!important}
  .sovereign-boundary__copy{max-width:none}.sovereign-boundary__copy>strong{max-width:14ch}
  .sb-boundary{max-width:640px;margin-inline:auto}
}
@media(max-width:700px){
  #sovereign .router{margin-bottom:24px}
  #sovereign .policy{padding:24px!important;margin-bottom:24px!important}
  .sovereign-boundary{padding:18px!important;border-radius:22px!important}
  .sb-boundary{min-height:330px;aspect-ratio:auto;border-radius:20px}
  .sb-core{left:40%;width:112px;height:112px}.sb-core strong{font-size:1.28rem}
  .sb-zone{padding:6px 7px;gap:5px}.sb-zone svg{width:14px;height:14px}.sb-zone span{font-size:.34rem}
  .sb-zone--local{left:5%;top:21%}.sb-zone--private{left:5%;bottom:22%}.sb-zone--sandbox{left:46%;top:18%}.sb-zone--airgap{left:46%;bottom:19%}
  .sb-gate{right:5%;width:60px;height:60px;border-radius:17px}.sb-gate svg{width:22px;height:22px}
  .sb-path--inside{left:40%;right:14%}
  .sb-packet--allowed{right:14%}
  .sb-blocked{right:11%}
  .sovereign-boundary__copy{padding:4px 4px 8px;gap:11px}
  .sovereign-boundary__copy>small{font-size:.5rem}.sovereign-boundary__copy>strong{font-size:2.05rem;max-width:12ch}.sovereign-boundary__copy>p{font-size:.92rem}
}


/* =====================================================================
   V36 - MARKETPLACE MACHINE
   One capability moves through Build -> Publish -> Sell. Supporting cards
   mirror the same active stage, so explanation and animation are one story.
   ===================================================================== */
.market-machine{
  position:relative;overflow:hidden;margin-bottom:18px;padding:clamp(22px,3vw,34px);
  min-height:420px;isolation:isolate;--market-x:16.66%;--market-tint:var(--aqua);
}
.market-machine::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(42% 75% at var(--market-x) 52%,color-mix(in srgb,var(--market-tint) 14%,transparent),transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 62%,transparent),transparent);transition:background .8s var(--e)}
.market-machine>*{position:relative;z-index:2}
.market-machine__top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:34px}
.market-machine__eyebrow{display:block;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua);margin-bottom:6px}
.market-machine__top strong{font-family:var(--ff-d);font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.035em}
.market-asset-switch{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.market-asset{display:flex;align-items:center;gap:7px;border:1px solid var(--edge-2);border-radius:999px;padding:7px 10px;color:var(--fg-3);background:var(--glass-2);transition:background .35s var(--e),border-color .35s var(--e),color .35s var(--e),transform .35s var(--e)}
.market-asset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.market-asset span{font-family:var(--ff-m);font-size:.47rem;letter-spacing:.1em}
.market-asset.is-active{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 42%,transparent);background:color-mix(in srgb,var(--aqua) 8%,transparent);transform:translateY(-1px);box-shadow:0 0 22px -12px var(--aqua)}
.market-machine__body{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:260px;align-items:stretch;padding:18px 0 30px}
.market-connector{position:absolute;left:12%;right:12%;top:50%;height:2px;z-index:0;background:linear-gradient(90deg,color-mix(in srgb,var(--aqua) 28%,transparent),color-mix(in srgb,var(--peri) 38%,transparent),color-mix(in srgb,var(--coral) 28%,transparent));overflow:visible}
.market-connector::after{content:"";position:absolute;inset:-3px 0;background:linear-gradient(90deg,transparent,var(--market-tint),transparent);filter:blur(4px);opacity:.55;animation:marketLineBreath 2.8s ease-in-out infinite}
.market-connector i{position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--market-tint);box-shadow:0 0 16px var(--market-tint);opacity:0}
.market-connector i:first-child{animation:marketPulseForward 2.3s ease-in-out infinite}
.market-connector i:last-child{animation:marketPulseBack 2.3s ease-in-out infinite .7s}
@keyframes marketLineBreath{50%{opacity:.2}}
@keyframes marketPulseForward{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:100%;opacity:0}}
@keyframes marketPulseBack{0%{right:0;opacity:0}12%{opacity:.7}82%{opacity:.7}100%{right:100%;opacity:0}}
.market-chamber{position:relative;z-index:2;min-height:220px;border:1px solid var(--edge-2);border-radius:20px;padding:22px 20px;background:color-mix(in srgb,var(--bg-2) 68%,transparent);display:flex;flex-direction:column;transition:transform .55s var(--e-out),border-color .45s var(--e),background .45s var(--e),box-shadow .45s var(--e),opacity .45s var(--e);opacity:.5}
.market-chamber.is-active{opacity:1;transform:translateY(-8px);border-color:color-mix(in srgb,var(--market-tint) 48%,transparent);background:color-mix(in srgb,var(--market-tint) 7%,var(--bg-2));box-shadow:0 22px 60px -38px var(--market-tint),inset 0 1px 0 rgba(255,255,255,.06)}
.market-chamber__icon{width:40px;height:40px;border-radius:13px;border:1px solid var(--edge);display:grid;place-items:center;margin-bottom:30px;color:var(--fg-3);background:var(--glass-2);transition:color .45s var(--e),box-shadow .45s var(--e),transform .45s var(--e)}
.market-chamber__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.market-chamber.is-active .market-chamber__icon{color:var(--market-tint);transform:scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--market-tint) 8%,transparent),0 0 22px -6px var(--market-tint)}
.market-chamber small{font-family:var(--ff-m);font-size:.48rem;letter-spacing:.13em;color:var(--fg-3);margin-bottom:7px}
.market-chamber h3{font-size:1.28rem;margin-bottom:9px}
.market-chamber p{color:var(--fg-3);font-size:.86rem;line-height:1.5;max-width:28ch}
.market-chamber.is-active p{color:var(--fg-2)}
.market-mini,.market-checks{margin-top:auto;padding-top:22px;display:flex;gap:5px;flex-wrap:wrap}
.market-mini span,.market-checks span{font-family:var(--ff-m);font-size:.4rem;letter-spacing:.09em;padding:4px 6px;border:1px solid var(--edge-2);border-radius:999px;color:var(--fg-3);background:var(--glass-2)}
.market-chamber.is-active .market-mini span,.market-chamber.is-active .market-checks span{color:color-mix(in srgb,var(--market-tint) 82%,var(--fg));border-color:color-mix(in srgb,var(--market-tint) 24%,transparent)}
.market-capsule{position:absolute;z-index:5;left:var(--market-x);top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--market-tint);color:#06110e;box-shadow:0 0 0 5px color-mix(in srgb,var(--market-tint) 10%,transparent),0 0 26px color-mix(in srgb,var(--market-tint) 65%,transparent);transition:left .8s cubic-bezier(.18,.82,.21,1),background .5s var(--e),box-shadow .5s var(--e);pointer-events:none}
.market-capsule__icon{display:grid;place-items:center}.market-capsule svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.market-capsule b{font-family:var(--ff-m);font-size:.43rem;letter-spacing:.08em}
.market-machine__status{display:flex;align-items:center;gap:9px;border-top:1px solid var(--edge-2);padding-top:17px;font-family:var(--ff-m);font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.market-machine__status i{width:6px;height:6px;border-radius:50%;background:var(--market-tint);box-shadow:0 0 12px var(--market-tint);transition:background .4s var(--e)}
.marketplace-cards .fab{min-height:230px;opacity:.56;transform:translateY(0) scale(.985);transition:opacity .5s var(--e),transform .55s var(--e-out),border-color .45s var(--e),box-shadow .45s var(--e),background .45s var(--e)}
.marketplace-cards .fab.is-active{opacity:1;transform:translateY(-5px) scale(1);border-color:color-mix(in srgb,var(--tint) 38%,transparent);background:color-mix(in srgb,var(--tint) 5%,var(--glass));box-shadow:0 24px 55px -38px var(--tint)}
.marketplace-cards .market-label{align-self:flex-start;margin-bottom:34px;color:var(--tint)}
.marketplace-cards .fab.is-active .market-label{box-shadow:0 0 18px -8px var(--tint)}
@media(max-width:760px){
  .market-machine{min-height:0;padding:20px 14px 18px;--market-x:50%;--market-y:16.66%}
  .market-machine__top{display:grid;gap:14px;margin-bottom:18px}.market-asset-switch{justify-content:flex-start}.market-asset{padding:6px 8px}.market-asset span{font-size:.42rem}
  .market-machine__body{grid-template-columns:1fr;gap:10px;padding:0 0 22px;min-height:560px}
  .market-connector{left:33px;right:auto;top:8%;bottom:8%;width:2px;height:auto}
  .market-connector i:first-child{animation-name:marketPulseForwardMobile}.market-connector i:last-child{animation-name:marketPulseBackMobile}
  @keyframes marketPulseForwardMobile{0%{top:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{top:100%;opacity:0}}
  @keyframes marketPulseBackMobile{0%{bottom:0;opacity:0}12%{opacity:.7}82%{opacity:.7}100%{bottom:100%;opacity:0}}
  .market-chamber{min-height:172px;padding:18px 18px 16px 68px}.market-chamber.is-active{transform:translateX(5px)}
  .market-chamber__icon{position:absolute;left:13px;top:19px;width:38px;height:38px;margin:0}.market-chamber p{font-size:.82rem}.market-mini,.market-checks{padding-top:14px}
  .market-capsule{left:33px!important;top:var(--market-y,16.66%);transform:translate(-50%,-50%);padding:6px;width:30px;height:30px;justify-content:center;transition:top .8s cubic-bezier(.18,.82,.21,1),background .5s var(--e),box-shadow .5s var(--e)}
  .market-capsule b{display:none}.market-machine__status{font-size:.46rem;line-height:1.45}
  .marketplace-cards .fab{min-height:0;opacity:.45}.marketplace-cards .fab.is-active{transform:translateX(4px)}
}
@supports (-webkit-touch-callout:none){.market-machine,.market-capsule,.market-chamber{-webkit-transform:translateZ(0)}}

/* =====================================================================
   V37 - MOVEMENT AS ROTATING WORK STORIES
   Different work enters the same Operating Space. The selector is quiet,
   the workflow remains the protagonist, and no internal product names are
   needed to explain the outcome.
   ===================================================================== */
.work-stories{margin-bottom:18px;padding:20px 22px 16px;border:1px solid color-mix(in srgb,var(--aqua) 18%,var(--edge));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--aqua) 7%,var(--glass-2)),color-mix(in srgb,var(--peri) 5%,var(--glass-2)));overflow:hidden;opacity:1!important;transform:none!important;visibility:visible!important}
.work-stories__label{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-family:var(--ff-m);font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
.work-stories__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px color-mix(in srgb,var(--aqua) 70%,transparent)}
.work-story__head{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:24px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--edge-2)}
.work-story__head.is-swap{animation:workStorySwap .62s var(--e-out)}
@keyframes workStorySwap{0%{opacity:.35;transform:translateY(8px)}100%{opacity:1;transform:none}}
.work-story__eyebrow,.flow__askcopy small{display:block;font-family:var(--ff-m);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua);margin-bottom:7px}
.work-story__head h3{font-size:clamp(1.25rem,2.3vw,1.8rem);letter-spacing:-.035em;margin-bottom:5px}
.work-story__head p{color:var(--fg-2);font-size:.9rem;max-width:62ch}
.work-story__meter{height:2px;background:var(--edge);border-radius:99px;overflow:hidden;margin-bottom:7px}
.work-story__meter i{display:block;height:100%;width:14.285%;background:linear-gradient(90deg,var(--aqua),var(--peri),var(--coral));box-shadow:0 0 12px color-mix(in srgb,var(--aqua) 55%,transparent);transition:width .7s var(--e-out)}
.work-story__selectors{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding-top:12px}
.work-story__selector{min-width:0;min-height:58px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:10px 11px;border-radius:13px;color:var(--fg-3);border:1px solid var(--edge-2);background:color-mix(in srgb,var(--bg) 42%,transparent);text-align:left;transition:background .35s var(--e),border-color .35s var(--e),color .35s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.work-story__selector b{font-family:var(--ff-m);font-size:.48rem;font-weight:500;color:inherit}
.work-story__selector span{font-size:.7rem;font-weight:650;line-height:1.18;white-space:normal}
.work-story__selector.is-active{color:var(--fg);background:linear-gradient(135deg,color-mix(in srgb,var(--aqua) 12%,var(--glass)),color-mix(in srgb,var(--peri) 9%,var(--glass)));border-color:color-mix(in srgb,var(--aqua) 38%,var(--edge));transform:translateY(-2px);box-shadow:0 12px 30px -22px var(--aqua)}
.work-story__selector.is-active b{color:var(--aqua)}
.flow__askcopy{min-width:0}.flow__askcopy p{max-width:66ch}.flow__askcopy small{margin-bottom:5px;color:var(--fg-3)}
#workFlow{box-shadow:0 24px 72px -46px rgba(0,0,0,.8)}
@media(max-width:900px){
 .work-story__head{grid-template-columns:1fr}.work-story__meter{width:100%;margin:0}.work-story__selectors{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:600px){
 .work-stories{padding:15px 14px 12px;border-radius:18px;margin-bottom:10px}
 .work-story__head{gap:12px;padding-bottom:13px}.work-story__head h3{font-size:1.28rem}.work-story__head p{font-size:.82rem;line-height:1.5}
 .work-story__selectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding-top:9px}
 .work-story__selector{padding:9px 9px;min-height:54px}.work-story__selector span{font-size:.67rem}
 .flow__ask{align-items:flex-start}.flow__askcopy small{font-size:.46rem}.flow__askcopy p{font-size:.93rem}
}

/* V38: the real-work story chooser is structural content, never reveal-gated. */
.js .work-stories,.work-stories{opacity:1!important;transform:none!important;visibility:visible!important}


/* =====================================================================
   V39 - THE CONVERSATION
   Communication becomes part of the same Operating Space. Distinct visual
   language: a live conversation surface flowing into action and memory.
   ===================================================================== */
.conversation-section{overflow:hidden}
.conversation-stage{
  --comm-tint:var(--aqua);position:relative;padding:clamp(20px,3vw,34px);border-radius:28px;overflow:hidden;
  isolation:isolate;background:linear-gradient(145deg,color-mix(in srgb,var(--bg-2) 90%,transparent),color-mix(in srgb,var(--glass) 68%,transparent));
}
.conversation-stage::before{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:-1;background:radial-gradient(32% 34% at 22% 32%,color-mix(in srgb,var(--comm-tint) 11%,transparent),transparent 70%),radial-gradient(28% 30% at 78% 66%,color-mix(in srgb,var(--peri) 9%,transparent),transparent 72%);animation:conversationAtmos 9s ease-in-out infinite alternate}
@keyframes conversationAtmos{to{transform:translate3d(3%,-2%,0) scale(1.04)}}
.conversation-stage__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--edge-2)}
.conversation-stage__eyebrow{display:block;font-family:var(--ff-m);font-size:.56rem;letter-spacing:.15em;color:var(--fg-3);margin-bottom:6px}
.conversation-stage__top strong{font-family:var(--ff-d);font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.035em}
.conversation-channels{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.conversation-channel{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid var(--edge-2);background:var(--glass-2);color:var(--fg-3);font-size:.72rem;font-weight:650;transition:background .35s var(--e),border-color .35s var(--e),color .35s var(--e),transform .35s var(--e-out)}
.conversation-channel svg{width:15px;height:15px}.conversation-channel.is-active{color:var(--fg);border-color:color-mix(in srgb,var(--comm-tint) 45%,var(--edge));background:color-mix(in srgb,var(--comm-tint) 10%,var(--glass));transform:translateY(-2px);box-shadow:0 10px 28px -20px var(--comm-tint)}
.conversation-theater{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:22px;padding-top:22px;align-items:stretch}
.conversation-live{position:relative;min-height:330px;border:1px solid var(--edge-2);border-radius:22px;background:color-mix(in srgb,var(--bg) 72%,transparent);overflow:hidden;padding:22px;display:flex;flex-direction:column}
.conversation-live::after{content:"";position:absolute;inset:auto 8% -35% 8%;height:60%;background:radial-gradient(ellipse,color-mix(in srgb,var(--comm-tint) 13%,transparent),transparent 70%);pointer-events:none}
.conversation-live__head{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;position:relative;z-index:2}
.conversation-live__icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--comm-tint) 40%,var(--edge));background:color-mix(in srgb,var(--comm-tint) 11%,var(--glass));color:var(--comm-tint)}
.conversation-live__icon svg{width:21px;height:21px}
.conversation-live__head small{display:block;font-family:var(--ff-m);font-size:.5rem;letter-spacing:.13em;color:var(--comm-tint);margin-bottom:3px}
.conversation-live__head strong{font-family:var(--ff-d);font-size:1rem;line-height:1.18;letter-spacing:-.025em}
.conversation-live__state{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-m);font-size:.46rem;letter-spacing:.1em;color:var(--fg-3);white-space:nowrap}.conversation-live__state i{width:5px;height:5px;border-radius:50%;background:var(--comm-tint);box-shadow:0 0 12px var(--comm-tint);animation:commLivePulse 1.8s ease-in-out infinite}@keyframes commLivePulse{50%{opacity:.35;transform:scale(.72)}}
.conversation-scene{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px 2px 6px;animation:conversationSceneIn .55s var(--e-out)}
@keyframes conversationSceneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.comm-wave{height:58px;display:flex;align-items:center;justify-content:center;gap:5px;margin:4px 0 10px}.comm-wave i{display:block;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--comm-tint),var(--peri));height:18px;animation:commWave 1.15s ease-in-out infinite}.comm-wave i:nth-child(2n){animation-delay:-.2s}.comm-wave i:nth-child(3n){animation-delay:-.45s}.comm-wave i:nth-child(4n){animation-delay:-.7s}@keyframes commWave{50%{height:50px;opacity:.55}}
.comm-note,.comm-bubble,.comm-mail{border:1px solid var(--edge-2);background:var(--glass-2);border-radius:15px;padding:12px 14px;color:var(--fg-2);font-size:.88rem;line-height:1.45;max-width:92%;animation:commItemIn .55s var(--e-out) both}.comm-note strong,.comm-mail strong{color:var(--fg);font-family:var(--ff-d);letter-spacing:-.02em}.comm-note small,.comm-mail small{display:block;font-family:var(--ff-m);font-size:.47rem;letter-spacing:.11em;color:var(--comm-tint);margin-bottom:4px}.comm-bubble--you{align-self:flex-end;background:color-mix(in srgb,var(--comm-tint) 9%,var(--glass-2));border-color:color-mix(in srgb,var(--comm-tint) 24%,var(--edge));color:var(--fg)}@keyframes commItemIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.conversation-context{position:relative;border-radius:22px;border:1px solid var(--edge-2);background:var(--glass-2);padding:22px;display:flex;flex-direction:column;justify-content:center;min-height:330px}
.conversation-context__label{font-family:var(--ff-m);font-size:.52rem;letter-spacing:.14em;color:var(--fg-3);margin-bottom:25px}
.conversation-context__track{position:absolute;left:37px;top:78px;bottom:54px;width:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--comm-tint) 62%,transparent),color-mix(in srgb,var(--peri) 34%,transparent),color-mix(in srgb,var(--coral) 24%,transparent));opacity:.55}.conversation-context__track i{position:absolute;left:0;top:0;width:2px;height:var(--comm-progress,0%);background:var(--comm-tint);box-shadow:0 0 12px var(--comm-tint);transition:height .55s var(--e-out)}.conversation-context__packet{position:absolute;left:-5px;top:var(--comm-progress,0%);width:12px;height:12px;border-radius:50%;background:var(--comm-tint);box-shadow:0 0 0 6px color-mix(in srgb,var(--comm-tint) 12%,transparent),0 0 18px var(--comm-tint);transform:translateY(-50%);transition:top .55s var(--e-out)}
.conversation-context__steps{display:grid;gap:14px;padding-left:35px}.conversation-context__steps span{position:relative;padding:10px 12px;border-radius:12px;color:var(--fg-3);font-family:var(--ff-d);font-weight:650;letter-spacing:-.025em;transition:color .35s var(--e),background .35s var(--e),transform .35s var(--e-out)}.conversation-context__steps span::before{content:"";position:absolute;left:-30px;top:50%;width:9px;height:9px;border-radius:50%;border:2px solid var(--fg-3);background:var(--bg-2);transform:translateY(-50%);transition:.35s var(--e)}.conversation-context__steps span.is-done{color:var(--fg-2)}.conversation-context__steps span.is-done::before{border-color:color-mix(in srgb,var(--comm-tint) 65%,var(--peri));background:color-mix(in srgb,var(--comm-tint) 30%,var(--bg-2))}.conversation-context__steps span.is-active{color:var(--fg);background:color-mix(in srgb,var(--comm-tint) 8%,transparent);transform:translateX(3px)}.conversation-context__steps span.is-active::before{border-color:var(--comm-tint);background:var(--comm-tint);box-shadow:0 0 0 6px color-mix(in srgb,var(--comm-tint) 13%,transparent),0 0 18px var(--comm-tint)}
.conversation-result{margin-top:18px;padding:17px 18px;border-radius:17px;border:1px solid var(--edge-2);background:linear-gradient(100deg,color-mix(in srgb,var(--comm-tint) 9%,transparent),var(--glass-2));display:grid;gap:4px;transition:background .45s var(--e)}.conversation-result small{font-family:var(--ff-m);font-size:.48rem;letter-spacing:.13em;color:var(--comm-tint)}.conversation-result strong{font-family:var(--ff-d);font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:-.025em}
.conversation-statement{margin-top:30px}
@media(max-width:860px){.conversation-stage__top{align-items:flex-start;flex-direction:column}.conversation-channels{justify-content:flex-start}.conversation-theater{grid-template-columns:1fr}.conversation-context{min-height:285px}}
@media(max-width:600px){.conversation-stage{padding:18px;border-radius:22px}.conversation-channel{width:43px;height:43px;border-radius:13px;justify-content:center;padding:0}.conversation-channel span{display:none}.conversation-channel svg{width:18px;height:18px}.conversation-live{min-height:300px;padding:17px}.conversation-live__head{grid-template-columns:auto 1fr}.conversation-live__state{grid-column:1/-1;width:max-content;margin-left:55px}.conversation-context{min-height:270px;padding:18px}.conversation-context__label{margin-left:4px}.conversation-context__track{left:31px;top:72px}.conversation-context__steps{padding-left:31px;gap:9px}.conversation-context__steps span{padding:8px 10px}.comm-note,.comm-bubble,.comm-mail{font-size:.82rem}.conversation-result{padding:14px}}



/* =====================================================================
   V40 - STORY SHARPENING
   Connect outward, enter with context, and make the shared work
   environment explicit without adding another chapter.
   ===================================================================== */
.reach-bridge{
  margin-top:22px;padding:14px;border:1px solid var(--edge);border-radius:18px;
  background:color-mix(in srgb,var(--glass) 76%,transparent);display:grid;
  grid-template-columns:minmax(110px,.8fr) minmax(150px,1.35fr) minmax(110px,.8fr);
  gap:12px;align-items:center;overflow:hidden
}
.reach-side{display:grid;gap:2px;padding:10px 12px;border-radius:13px;background:var(--glass-2);border:1px solid var(--edge-2)}
.reach-side b{font-family:var(--ff-d);font-size:.92rem;letter-spacing:-.02em}
.reach-side small{font-family:var(--ff-m);font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.reach-side--space{border-color:color-mix(in srgb,var(--aqua) 32%,var(--edge));text-align:right}
.reach-track{position:relative;min-height:58px;border-inline:1px solid var(--edge-2);display:grid;align-content:center;justify-items:center;gap:5px;overflow:hidden}
.reach-track::before,.reach-track::after{content:"";position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),var(--peri),transparent);opacity:.42}
.reach-track::before{top:18px}.reach-track::after{bottom:18px;transform:scaleX(-1)}
.reach-track b,.reach-track em{font-family:var(--ff-m);font-size:.43rem;letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--fg-3);z-index:1}
.reach-track b{color:var(--aqua)}.reach-track em{color:color-mix(in srgb,var(--peri) 78%,var(--fg-3))}
.reach-packet{position:absolute;width:7px;height:7px;border-radius:50%;z-index:2;box-shadow:0 0 14px currentColor}
.reach-packet--in{top:15px;color:var(--aqua);background:var(--aqua);animation:reachIn 3.2s ease-in-out infinite}
.reach-packet--out{bottom:15px;color:var(--peri);background:var(--peri);animation:reachOut 3.2s ease-in-out infinite .45s}
@keyframes reachIn{0%{left:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:88%;opacity:0}}
@keyframes reachOut{0%{right:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{right:88%;opacity:0}}

.context-readiness{margin:24px 0 4px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.context-readiness span{position:relative;overflow:hidden;display:grid;gap:5px;padding:12px 10px;border-radius:13px;border:1px solid var(--edge-2);background:var(--glass-2)}
.context-readiness span::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),transparent);transform:translateX(-110%);animation:contextSweep 8s ease-in-out infinite}
.context-readiness span:nth-child(2)::after{animation-delay:2s}.context-readiness span:nth-child(3)::after{animation-delay:4s}.context-readiness span:nth-child(4)::after{animation-delay:6s}
.context-readiness i{font-family:var(--ff-m);font-size:.45rem;letter-spacing:.12em;color:var(--aqua);font-style:normal}
.context-readiness b{font-family:var(--ff-d);font-size:.82rem;letter-spacing:-.02em;font-weight:650}
@keyframes contextSweep{0%,12%{transform:translateX(-110%);opacity:0}20%,38%{transform:translateX(0);opacity:1}48%,100%{transform:translateX(110%);opacity:0}}

.capability-shared-note{margin-top:14px!important}.capability-shared-note strong{color:var(--fg);font-weight:700}
.shared-work{margin-bottom:22px;padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);gap:20px;align-items:center;overflow:hidden}
.shared-work__intro{display:grid;gap:9px;align-content:center}
.shared-work__intro small{font-family:var(--ff-m);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua)}
.shared-work__intro strong{font-family:var(--ff-d);font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.05;letter-spacing:-.035em;max-width:13ch}
.shared-work__intro p{font-size:.88rem;color:var(--fg-3);max-width:30ch}
.shared-work__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.shared-pane{position:relative;min-height:112px;padding:14px;border-radius:15px;border:1px solid var(--edge-2);background:var(--glass-2);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-content:center;overflow:hidden;animation:sharedPane 12s ease-in-out infinite}
.shared-pane:nth-child(2){animation-delay:3s}.shared-pane:nth-child(3){animation-delay:6s}.shared-pane:nth-child(4){animation-delay:9s}
.shared-pane::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 100% at 10% 10%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 60%);opacity:0;animation:sharedPaneGlow 12s ease-in-out infinite}
.shared-pane:nth-child(2)::after{animation-delay:3s}.shared-pane:nth-child(3)::after{animation-delay:6s}.shared-pane:nth-child(4)::after{animation-delay:9s}
.shared-pane__icon{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--aqua) 28%,var(--edge));color:var(--aqua);background:color-mix(in srgb,var(--aqua) 7%,transparent);z-index:1}
.shared-pane__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shared-pane b{font-family:var(--ff-d);font-size:.94rem;letter-spacing:-.02em;z-index:1}.shared-pane small{font-family:var(--ff-m);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);z-index:1}
@keyframes sharedPane{0%,18%{transform:translateY(-2px);border-color:color-mix(in srgb,var(--aqua) 42%,var(--edge));box-shadow:0 12px 30px -20px var(--aqua)}26%,100%{transform:none;border-color:var(--edge-2);box-shadow:none}}
@keyframes sharedPaneGlow{0%,18%{opacity:1}26%,100%{opacity:0}}
.shared-work__flow{grid-column:1/-1;position:relative;height:30px;border-top:1px solid var(--edge-2);display:grid;place-items:end center;padding-top:8px;overflow:hidden}
.shared-work__flow span{font-family:var(--ff-m);font-size:.45rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.shared-work__flow i{position:absolute;top:-4px;left:0;width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 14px var(--aqua);animation:sharedContext 5s ease-in-out infinite}
@keyframes sharedContext{0%{left:2%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:96%;opacity:0}}

@media(max-width:760px){
  .reach-bridge{grid-template-columns:1fr;gap:7px}.reach-side--space{text-align:left}.reach-track{min-height:52px;border-inline:0;border-block:1px solid var(--edge-2)}
  .context-readiness{grid-template-columns:1fr 1fr}.context-readiness span{padding:10px}
  .shared-work{grid-template-columns:1fr;gap:16px}.shared-work__intro strong{max-width:16ch}.shared-work__grid{grid-template-columns:1fr 1fr}.shared-pane{min-height:98px;padding:12px}.shared-work__flow{grid-column:1}
}
@media(max-width:430px){.shared-work__grid{grid-template-columns:1fr}.shared-pane{min-height:82px}}



/* =====================================================================
   V42 - PERSUASION NARRATIVE
   Visuals carry the explanation where prose should not have to.
   ===================================================================== */

/* WAY IN: intent arrives first, context assembles around it. */
.intent-visual{position:relative;width:min(100%,520px);height:440px;margin:auto;isolation:isolate;display:grid;place-items:center}
.intent-visual::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 10%,transparent),transparent 64%);filter:blur(12px);opacity:.85}
.intent-request{position:absolute;left:3%;top:7%;z-index:5;width:min(72%,330px);padding:15px 17px;border-radius:17px;border:1px solid color-mix(in srgb,var(--peri) 30%,var(--edge));background:color-mix(in srgb,var(--bg-2) 88%,transparent);box-shadow:0 20px 50px -34px var(--peri);animation:intentRequest 6.8s var(--e-out) infinite}
.intent-request small,.intent-core small{display:block;font-family:var(--ff-m);font-size:.46rem;letter-spacing:.13em;color:var(--fg-3);margin-bottom:5px}.intent-request b{font-family:var(--ff-d);font-size:1rem;letter-spacing:-.025em}
.intent-core{position:relative;z-index:4;width:154px;height:154px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid color-mix(in srgb,var(--aqua) 45%,var(--edge));background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 42%),color-mix(in srgb,var(--bg-2) 92%,transparent);box-shadow:0 0 0 14px color-mix(in srgb,var(--aqua) 3%,transparent),0 0 70px -26px var(--aqua);animation:intentCore 6.8s ease-in-out infinite}
.intent-core strong{font-family:var(--ff-d);font-size:1.7rem;letter-spacing:-.05em;background:linear-gradient(100deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}.intent-core small{margin:5px 0 0;color:var(--aqua);font-size:.39rem}
.intent-context{position:absolute;inset:0;z-index:3}.intent-context span{position:absolute;display:grid;place-items:center;padding:8px 11px;border-radius:999px;border:1px solid var(--edge-2);background:color-mix(in srgb,var(--bg-2) 88%,transparent);font-family:var(--ff-m);font-size:.46rem;letter-spacing:.08em;color:var(--fg-3);opacity:.28;animation:intentContext 6.8s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.intent-context span:nth-child(1){left:8%;top:42%}.intent-context span:nth-child(2){right:6%;top:28%}.intent-context span:nth-child(3){right:8%;bottom:22%}.intent-context span:nth-child(4){left:7%;bottom:22%}
.intent-context span::after{content:"";position:absolute;width:58px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.28;transform-origin:center}.intent-context span:nth-child(1)::after{left:100%;top:50%;transform:rotate(8deg)}.intent-context span:nth-child(2)::after{right:100%;top:50%;transform:rotate(-17deg)}.intent-context span:nth-child(3)::after{right:100%;top:50%;transform:rotate(18deg)}.intent-context span:nth-child(4)::after{left:100%;top:50%;transform:rotate(-16deg)}
.intent-result{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;padding:9px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--aqua) 28%,var(--edge));background:color-mix(in srgb,var(--bg) 80%,transparent);font-family:var(--ff-m);font-size:.48rem;letter-spacing:.11em;color:var(--fg-3);opacity:.42;animation:intentResult 6.8s ease-in-out infinite}.intent-result i{font-style:normal;color:var(--aqua);padding:0 5px}
@keyframes intentRequest{0%,8%{opacity:0;transform:translate3d(-18px,8px,0)}18%,76%{opacity:1;transform:none}92%,100%{opacity:.3;transform:translate3d(10px,-4px,0)}}
@keyframes intentContext{0%,18%{opacity:.2;transform:scale(.94)}30%,68%{opacity:1;color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge));box-shadow:0 0 22px -13px var(--aqua);transform:scale(1)}84%,100%{opacity:.32;transform:scale(.96)}}
@keyframes intentCore{0%,20%{transform:scale(.97)}46%,70%{transform:scale(1.04);box-shadow:0 0 0 22px color-mix(in srgb,var(--aqua) 3%,transparent),0 0 82px -20px var(--peri)}100%{transform:scale(.98)}}
@keyframes intentResult{0%,52%{opacity:.22;transform:translateX(-50%) translateY(8px)}68%,88%{opacity:1;color:var(--fg);transform:translateX(-50%)}100%{opacity:.3;transform:translateX(-50%) translateY(-3px)}}
.intent-visual--mobile{display:none}

/* EVOLUTION: value compounds around one stable foundation. */
.growth-visual{position:relative;width:min(100%,520px);height:470px;margin:auto;isolation:isolate;display:grid;place-items:center}
.growth-visual::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--peri) 10%,transparent),transparent 64%);filter:blur(16px)}
.growth-core{position:relative;z-index:5;width:176px;height:176px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid color-mix(in srgb,var(--aqua) 40%,var(--edge));background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--aqua) 15%,transparent),transparent 44%),color-mix(in srgb,var(--bg-2) 94%,transparent);box-shadow:0 0 0 16px color-mix(in srgb,var(--peri) 3%,transparent),0 0 82px -25px var(--peri);animation:growthCore 8s ease-in-out infinite}
.growth-core strong{font-family:var(--ff-d);font-size:1.85rem;letter-spacing:-.055em;background:linear-gradient(100deg,var(--aqua),var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}.growth-core small{margin-top:5px;font-family:var(--ff-m);font-size:.39rem;letter-spacing:.11em;color:var(--fg-3)}.growth-core em{margin-top:11px;font-family:var(--ff-m);font-style:normal;font-size:.43rem;letter-spacing:.12em;color:var(--aqua);opacity:.38;animation:growthUseful 8s ease-in-out infinite}
.growth-ring{position:absolute;border:1px solid color-mix(in srgb,var(--aqua) 13%,transparent);border-radius:50%;z-index:1;animation:growthRing 8s ease-out infinite}.growth-ring--1{width:300px;height:300px}.growth-ring--2{width:405px;height:405px;animation-delay:-4s;border-color:color-mix(in srgb,var(--peri) 11%,transparent)}
.growth-node{position:absolute;z-index:4;min-width:118px;padding:12px 14px;border-radius:15px;border:1px solid var(--edge-2);background:color-mix(in srgb,var(--bg-2) 90%,transparent);box-shadow:0 14px 38px -28px rgba(0,0,0,.9);opacity:.28;animation:growthJoin 8s ease-in-out infinite;animation-delay:calc(var(--i)*1.55s)}.growth-node b{display:block;font-family:var(--ff-d);font-size:.9rem;letter-spacing:-.02em}.growth-node small{display:block;margin-top:2px;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.09em;color:var(--fg-3)}
.growth-node--systems{left:2%;top:15%}.growth-node--knowledge{right:1%;top:18%}.growth-node--intelligence{right:2%;bottom:16%}.growth-node--capability{left:2%;bottom:17%}
.growth-node::after{content:"";position:absolute;top:50%;width:88px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.18}.growth-node--systems::after,.growth-node--capability::after{left:100%}.growth-node--knowledge::after,.growth-node--intelligence::after{right:100%;transform:scaleX(-1)}
@keyframes growthJoin{0%,10%{opacity:.2;transform:scale(.93)}22%,48%{opacity:1;color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 35%,var(--edge));transform:scale(1.03);box-shadow:0 0 25px -12px var(--aqua)}60%,100%{opacity:.52;color:var(--fg-2);transform:none}}
@keyframes growthCore{0%,18%{transform:scale(.97)}46%,72%{transform:scale(1.045);box-shadow:0 0 0 26px color-mix(in srgb,var(--peri) 3%,transparent),0 0 95px -18px var(--aqua)}100%{transform:scale(.98)}}
@keyframes growthUseful{0%,28%{opacity:.28}52%,84%{opacity:1;text-shadow:0 0 16px var(--aqua)}100%{opacity:.3}}
@keyframes growthRing{0%{opacity:.08;transform:scale(.78)}44%{opacity:.38}100%{opacity:0;transform:scale(1.14)}}
.growth-visual--mobile{display:none}

/* Finale: make the conclusion feel like recognition, not another explanation. */
.finale p{max-width:720px;margin-inline:auto;font-size:clamp(1.04rem,1.5vw,1.24rem);line-height:1.7}
.finale p::first-line{color:var(--fg)}

@media(max-width:1099px){
  .intent-visual--desktop,.growth-visual--desktop{width:min(100%,620px);height:390px}
}
@media(max-width:700px){
  .intent-visual--desktop,.growth-visual--desktop{display:none!important}
  .intent-visual--mobile,.growth-visual--mobile{display:grid!important;width:100%;height:100%;min-height:148px;transform:scale(.78);transform-origin:center}
  .intent-request{left:2%;top:0;width:72%;padding:10px 11px}.intent-request b{font-size:.78rem}.intent-request small{font-size:.35rem}
  .intent-core{width:96px;height:96px}.intent-core strong{font-size:1.15rem}.intent-core small{font-size:.29rem}
  .intent-context span{padding:5px 7px;font-size:.32rem}.intent-context span:nth-child(1){left:0;top:42%}.intent-context span:nth-child(2){right:0;top:28%}.intent-context span:nth-child(3){right:1%;bottom:18%}.intent-context span:nth-child(4){left:0;bottom:18%}.intent-context span::after{width:32px}
  .intent-result{bottom:-1%;font-size:.31rem;padding:6px 8px}
  .growth-core{width:104px;height:104px}.growth-core strong{font-size:1.18rem}.growth-core small{font-size:.27rem}.growth-core em{font-size:.28rem;margin-top:6px}
  .growth-ring--1{width:180px;height:180px}.growth-ring--2{width:245px;height:245px}
  .growth-node{min-width:0;padding:7px 8px;border-radius:10px}.growth-node b{font-size:.55rem}.growth-node small{display:none}.growth-node::after{width:34px}.growth-node--systems{left:-1%;top:13%}.growth-node--knowledge{right:-1%;top:15%}.growth-node--intelligence{right:-1%;bottom:12%}.growth-node--capability{left:-1%;bottom:13%}
}



/* =====================================================================
   V43 - PRODUCTION HARDENING
   Screen, touch, zoom, focus and browser resilience. No narrative or
   visual redesign. Intentional internal motion remains contained.
   ===================================================================== */

/* Global width safety. Animated children may travel beyond their own card,
   but they must never create page-level horizontal scrolling. */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
main,.wrap,.story__grid,.story__grid>*,.story__grid--reverse>*,.sec-head,
.explorer,.exp-panel,.flow,.router,.conversation-theater,.conversation-live,
.conversation-context,.market-machine,.market-machine__body,.shared-work,
.shared-work__grid,.sovereign-boundary,.sb-visual{min-width:0;max-width:100%}
img,video{max-width:100%;height:auto}
svg{max-width:100%}

/* Long enterprise names, translated copy and browser text enlargement should
   wrap inside the surface rather than force the surface wider. */
.story__lead,.lede,.story__statement,.exp-body,.exp-list li,.shared-pane,
.context-readiness span,.conversation-result,.conversation-context__steps span,
.market-chamber,.marketplace-cards .fab,.policy,.pol-list li,.sovereign-boundary__copy,
.qa__a,.foot-grid{overflow-wrap:break-word;word-break:normal}
.shared-pane small,.context-readiness b{min-width:0;overflow-wrap:anywhere}

/* Buttons may wrap when the user enlarges text. Primary nav remains compact. */
.btn{max-width:100%;text-align:center}
@media(max-width:700px){.btn{white-space:normal}}

/* Visible keyboard focus across both native and custom interactive surfaces. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--aqua);outline-offset:3px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--aqua) 14%,transparent)
}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  :where(a,button,summary,[tabindex]):focus-visible{box-shadow:0 0 0 5px rgba(63,224,200,.14)}
}

/* Coarse pointers need forgiving targets even when the visual treatment is tiny. */
@media (pointer:coarse){
  .icon-btn,.topbar .btn,.conversation-channel,.market-asset,.exp-tab,
  .work-story__selector,.intelligence-node,.path,.fstep{min-height:46px!important}
  .icon-btn{min-width:46px;width:46px;height:46px}
  .conversation-channel{min-width:46px}
  .market-asset{padding-block:10px}
  .exp-tab{padding-block:12px}
  .mem-item{min-height:48px}
  summary{min-height:48px;display:flex;align-items:center}
}

/* Phone narrative visuals are real content now, not decorative miniatures.
   Give them enough stage to remain readable instead of transform-scaling them. */
@media(max-width:700px){
  .story--presence .life-stage,.story--becoming .life-stage{
    height:clamp(176px,22vh,212px)!important;
  }
  .intent-visual--mobile,.growth-visual--mobile{
    width:min(100%,340px)!important;height:100%!important;min-height:0!important;
    transform:none!important;margin-inline:auto!important
  }
  .intent-request{max-width:74%}
  .intent-result{max-width:94%;white-space:normal;text-align:center;line-height:1.35}
  .context-readiness{grid-template-columns:1fr 1fr!important}
  .shared-pane small{line-height:1.35}
  .conversation-live,.conversation-context{height:auto;min-height:0}
  .conversation-scene{flex:0 0 auto;min-height:0;padding-bottom:12px}
  .conversation-context{justify-content:flex-start}
}

/* Very narrow phones: protect the narrative buttons and compact visual labels. */
@media(max-width:360px){
  .story__actions .btn{padding-inline:15px;font-size:.88rem}
  .intent-context span{padding-inline:6px;letter-spacing:.05em}
  .growth-node{padding-inline:6px}
  .work-story__selector{grid-template-columns:auto minmax(0,1fr)}
}

/* Text enlargement / zoom resilience on medium widths. */
@media(max-width:900px){
  .shared-work__grid{min-width:0}
  .shared-pane{min-width:0}
  .conversation-stage__top{min-width:0}
  .conversation-channels{max-width:100%}
}

/* Horizontal carousels intentionally place future items off-screen. Keep that
   motion local and make touch scrolling predictable. */
.exp-tabs,.arch-badges,.work-story__selectors{
  overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch
}
.exp-tabs{scrollbar-width:none}
.intelligence-train,.conversation-stage,.market-machine{contain:layout paint}

/* Browser viewport and safe-area resilience. */
@supports (height:100dvh){
  .living-space{height:100dvh}
}
@media(max-width:700px){
  .drawer__panel{padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
  .site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* Forced-colour / Windows High Contrast fallback. The page loses atmosphere
   gracefully but keeps hierarchy, borders and controls understandable. */
@media(forced-colors:active){
  *{box-shadow:none!important;text-shadow:none!important}
  .grad,.brand,.continuity-core__brand,.intelligence-center strong,.sb-core strong,
  .intent-core strong,.growth-core strong{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none}
  .glass,.arch-slab,.exp-panel,.flow,.memory-stage,.router__view,.policy,
  .sovereign-boundary,.market-machine,.conversation-stage{border:1px solid CanvasText;background:Canvas}
  .aurora,.grid-bg,.living-space__halo{display:none!important}
}

/* Reduced motion remains semantic, but no rapid decorative pulsing. */

/* =====================================================================
   V44 - RELEASE HARDENING
   One motion contract replaces all legacy reduced-motion overrides.
   Full motion remains the default. Automatic motion can be paused without
   removing interaction, touch physics or short state transitions.
   ===================================================================== */

.motion-btn .motion-play{display:none}

.motion-btn[aria-pressed="true"] .motion-pause{display:none}

.motion-btn[aria-pressed="true"] .motion-play{display:block}

.motion-btn[aria-pressed="true"]{border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge));background:color-mix(in srgb,var(--aqua) 7%,var(--glass-2));color:var(--aqua)}

@supports not (color:color-mix(in srgb,#000 50%,#fff)){.motion-btn[aria-pressed="true"]{border-color:rgba(63,224,200,.34);background:rgba(63,224,200,.07)}}

/* Manual pause stops autonomous keyframes only. Hover, focus, click, drag and
   transition-driven interaction remain live. */

html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after,
html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after{animation-play-state:paused!important}

html.motion-paused .route-packet,html.motion-paused .route-packet-trail,
html.motion-paused .marketplace-packet{visibility:hidden!important}

/* One accessible reduced-motion policy. An explicit Full Motion choice adds
   .motion-full and opts out of these reductions for the current session. */

@media (prefers-reduced-motion: reduce){
  html:not(.motion-full){scroll-behavior:auto!important}
  html:not(.motion-full) *,html:not(.motion-full) *::before,html:not(.motion-full) *::after{
    transition-duration:.18s!important;transition-delay:0s!important
  }
  html:not(.motion-full) .arch-direct::after,
html:not(.motion-full) .arch-link::after,
html:not(.motion-full) .arch-theos,
html:not(.motion-full) .aurora i:nth-child(1),
html:not(.motion-full) .aurora i:nth-child(2),
html:not(.motion-full) .aurora i:nth-child(3),
html:not(.motion-full) .aurora i:nth-child(4),
html:not(.motion-full) .bridge__c::before,
html:not(.motion-full) .comm-wave i,
html:not(.motion-full) .context-readiness span::after,
html:not(.motion-full) .continuity-core,
html:not(.motion-full) .continuity-device.is-active::after,
html:not(.motion-full) .continuity-stage.is-handoff .continuity-core,
html:not(.motion-full) .continuity-status i,
html:not(.motion-full) .conversation-live__state i,
html:not(.motion-full) .conversation-stage::before,
html:not(.motion-full) .flow__track::after,
html:not(.motion-full) .fragment-words span,
html:not(.motion-full) .fstep[aria-selected="true"]::after,
html:not(.motion-full) .graph .core,
html:not(.motion-full) .graph .lnk,
html:not(.motion-full) .graph .nd,
html:not(.motion-full) .growth-core,
html:not(.motion-full) .growth-core em,
html:not(.motion-full) .growth-node,
html:not(.motion-full) .growth-ring,
html:not(.motion-full) .intelligence-center::after,
html:not(.motion-full) .intelligence-center::before,
html:not(.motion-full) .intelligence-field[data-intel-mode="hive"] .intelligence-node--hive,
html:not(.motion-full) .intelligence-field[data-intel-mode="hybrid"] .intelligence-node--hybrid,
html:not(.motion-full) .intelligence-field[data-intel-mode="organization"] .intelligence-node--organization,
html:not(.motion-full) .intelligence-field[data-intel-mode="swarm"] .intelligence-node--swarm,
html:not(.motion-full) .intelligence-link__pulse--in,
html:not(.motion-full) .intelligence-link__pulse--out,
html:not(.motion-full) .intent-context span,
html:not(.motion-full) .intent-core,
html:not(.motion-full) .intent-request,
html:not(.motion-full) .intent-result,
html:not(.motion-full) .js .scene.rv.in .node,
html:not(.motion-full) .living-space__halo,
html:not(.motion-full) .living-space__touch i::after,
html:not(.motion-full) .market-connector i:first-child,
html:not(.motion-full) .market-connector i:last-child,
html:not(.motion-full) .market-connector::after,
html:not(.motion-full) .marketplace-packet,
html:not(.motion-full) .marketplace-track i,
html:not(.motion-full) .memory-layer.is-active::after,
html:not(.motion-full) .node,
html:not(.motion-full) .path[aria-selected="true"] i,
html:not(.motion-full) .pulse i,
html:not(.motion-full) .reach-packet--in,
html:not(.motion-full) .reach-packet--out,
html:not(.motion-full) .route-active,
html:not(.motion-full) .route-policy-ring,
html:not(.motion-full) .sb-blocked,
html:not(.motion-full) .sb-enforced i,
html:not(.motion-full) .sb-gate,
html:not(.motion-full) .sb-packet--allowed,
html:not(.motion-full) .sb-packet--blocked,
html:not(.motion-full) .sb-packet--request,
html:not(.motion-full) .sb-zone,
html:not(.motion-full) .shared-pane,
html:not(.motion-full) .shared-pane::after,
html:not(.motion-full) .shared-work__flow i,
html:not(.motion-full) .sovereign-boundary::before,
html:not(.motion-full) .sovereign-boundary__edge i,
html:not(.motion-full) .sovereign-boundary__pulse,
html:not(.motion-full) .story__scroll i::after,
html:not(.motion-full) .ticker__t{animation-play-state:paused!important}
  html:not(.motion-full) .chapter-flash.is-on{animation-duration:.32s!important;filter:none!important}
  html:not(.motion-full) .js .rv{transform:none!important}
  html:not(.motion-full) .route-packet,html:not(.motion-full) .route-packet-trail,
  html:not(.motion-full) .marketplace-packet{visibility:hidden!important}
}


/* =====================================================================
   V45 - FOUR-LAYER ARCHITECTURE STORY
   Familiar stack, one new Space Layer. Connections are structural lines,
   never glyph arrows. Context tags roll as a masked train without scrollbars.
   ===================================================================== */
#architecture .os-arch.layer-stack{
  width:min(100%,900px)!important;max-width:900px!important;margin:0 auto!important;
  padding:20px 0 24px!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) 72px!important;
  grid-template-rows:auto 68px auto 68px auto 58px auto!important;
  column-gap:18px!important;justify-items:stretch!important;align-items:stretch!important;
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.22));overflow:visible!important
}
.layer-card{grid-column:1;position:relative;min-width:0;min-height:126px;padding:22px 28px;border-radius:26px;border:1px solid var(--edge);background:linear-gradient(145deg,color-mix(in srgb,var(--glass-hi) 30%,transparent),var(--glass-2));box-shadow:0 24px 65px -38px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.055);display:grid;grid-template-columns:68px minmax(0,1fr);gap:22px;align-items:center;overflow:hidden;isolation:isolate}
.layer-card::after{content:"";position:absolute;left:9%;right:9%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),var(--peri),transparent);opacity:.38}
.layer-card--cloud{grid-row:1}.layer-card--space{grid-row:3;min-height:174px;border:1.5px solid color-mix(in srgb,var(--aqua) 64%,var(--peri));background:linear-gradient(135deg,color-mix(in srgb,var(--aqua) 10%,var(--glass)),color-mix(in srgb,var(--peri) 9%,var(--glass-2))),radial-gradient(60% 130% at 12% 10%,color-mix(in srgb,var(--aqua) 18%,transparent),transparent 66%),radial-gradient(60% 120% at 90% 86%,color-mix(in srgb,var(--peri) 17%,transparent),transparent 68%);box-shadow:0 36px 92px -42px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--aqua) 10%,transparent),0 0 70px -26px color-mix(in srgb,var(--aqua) 58%,transparent);animation:layerSpaceBreathe 4.8s ease-in-out infinite}
.layer-card--os{grid-row:5}.layer-card--hardware{grid-row:7}
@keyframes layerSpaceBreathe{50%{border-color:color-mix(in srgb,var(--aqua) 78%,var(--peri));box-shadow:0 38px 96px -42px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--aqua) 16%,transparent),0 0 82px -22px color-mix(in srgb,var(--aqua) 68%,transparent)}}
.layer-card--space::before{content:"";position:absolute;inset:-35% -18%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 34%,color-mix(in srgb,var(--aqua) 8%,transparent) 46%,color-mix(in srgb,var(--peri) 10%,transparent) 54%,transparent 66%);transform:translateX(-38%);animation:layerSpaceSweep 7.2s ease-in-out infinite}
@keyframes layerSpaceSweep{0%,18%{transform:translateX(-42%);opacity:.18}45%{opacity:.72}72%,100%{transform:translateX(42%);opacity:.18}}

.layer-card__icon{width:62px;height:62px;border-radius:19px;border:1px solid var(--edge);display:grid;place-items:center;color:var(--aqua);background:var(--glass-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.layer-card__icon svg{width:36px;height:36px;overflow:visible}.layer-card__icon--theos{width:72px;height:72px;border-radius:23px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--aqua) 72%,#087357),var(--peri));box-shadow:0 15px 34px -18px var(--peri)}
.layer-card__icon--hardware{width:76px;grid-template-columns:1fr 1fr;gap:2px;padding:8px}.layer-card__icon--hardware svg{width:29px;height:31px}
.layer-card__copy{min-width:0}.layer-card__copy small{display:block;font-family:var(--ff-m);font-size:.56rem;letter-spacing:.16em;color:color-mix(in srgb,var(--aqua) 78%,var(--fg-3));margin-bottom:7px}.layer-card__copy strong{display:block;font-family:var(--ff-d);font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.02;letter-spacing:-.04em;color:var(--fg);margin-bottom:7px}.layer-card__copy b{display:block;font-size:.94rem;line-height:1.45;font-weight:500;color:var(--fg-2)}
.layer-card__copy--space strong{width:max-content;max-width:100%;background:linear-gradient(100deg,var(--aqua) 0%,#79d8ff 38%,var(--peri) 72%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 28px color-mix(in srgb,var(--aqua) 18%,transparent)}.layer-card__copy--space b{font-family:var(--ff-d);font-size:clamp(1.02rem,1.7vw,1.22rem);font-weight:650;color:var(--fg)}.layer-card__copy--space p{margin-top:5px;color:var(--fg-2);font-size:.88rem}
.layer-tag-train{grid-column:1/-1;margin:14px 0 0 90px;overflow:hidden;min-width:0;max-width:calc(100% - 90px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.layer-tag-track{display:flex;width:max-content;gap:8px;will-change:transform;animation:layerTagTrain 13s linear infinite}.layer-tag-track span{flex:0 0 auto;padding:7px 11px;border:1px solid var(--edge);border-radius:999px;background:var(--glass-2);font-family:var(--ff-m);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
@keyframes layerTagTrain{to{transform:translateX(calc(-50% - 4px))}}
.layer-connector{grid-column:1;position:relative;display:grid;place-items:center;min-height:0;overflow:visible}.layer-connector--cloud{grid-row:2}.layer-connector--os{grid-row:4}.layer-connector--hardware{grid-row:6}
.layer-connector__line{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,color-mix(in srgb,var(--aqua) 12%,transparent),color-mix(in srgb,var(--aqua) 62%,transparent),color-mix(in srgb,var(--peri) 34%,transparent));box-shadow:0 0 12px color-mix(in srgb,var(--aqua) 18%,transparent)}
.layer-connector em{position:relative;z-index:2;margin-left:210px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--bg) 88%,transparent);font-family:var(--ff-m);font-size:.49rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--fg-3);white-space:nowrap}
.layer-packet{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--aqua);box-shadow:0 0 13px var(--aqua);z-index:3}.layer-packet--down{top:0;animation:layerPacketDown 2.35s ease-in-out infinite}.layer-packet--up{bottom:0;background:var(--peri);box-shadow:0 0 13px var(--peri);animation:layerPacketUp 2.65s ease-in-out infinite .45s}
@keyframes layerPacketDown{0%{top:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}@keyframes layerPacketUp{0%{bottom:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{bottom:calc(100% - 6px);opacity:0}}
.layer-bypass{grid-column:2;grid-row:3/8;position:relative;min-width:0;margin-block:28px 34px;color:var(--coral)}
.layer-bypass::before{content:"";position:absolute;left:-18px;right:10px;top:0;bottom:0;border-top:1.5px solid color-mix(in srgb,var(--coral) 72%,var(--violet));border-right:1.5px solid color-mix(in srgb,var(--coral) 72%,var(--violet));border-bottom:1.5px solid color-mix(in srgb,var(--coral) 72%,var(--violet));border-radius:0 22px 22px 0;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--coral) 22%,transparent))}
.layer-bypass span{position:absolute;right:7px;top:5%;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 13px var(--coral);animation:layerBypassPacket 3.2s ease-in-out infinite}.layer-bypass i{position:absolute;right:1px;bottom:-2px;width:14px;height:14px;border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(45deg);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--coral) 72%,transparent));background:transparent}.layer-bypass b{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--ff-m);font-size:.43rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--coral) 82%,var(--fg-3));font-weight:500}
@keyframes layerBypassPacket{0%{top:5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:94%;opacity:0}}
#architecture .arch-reveal{margin-top:66px}
@media(max-width:700px){
  #architecture .os-arch.layer-stack{width:100%!important;padding:12px 0 20px!important;grid-template-columns:minmax(0,1fr) 30px!important;grid-template-rows:auto 58px auto 58px auto 50px auto!important;column-gap:8px!important}
  .layer-card{min-height:112px;padding:18px 16px;border-radius:21px;grid-template-columns:54px minmax(0,1fr);gap:14px}.layer-card--space{min-height:160px}.layer-card__icon{width:52px;height:52px;border-radius:16px}.layer-card__icon svg{width:30px;height:30px}.layer-card__icon--theos{width:58px;height:58px;border-radius:18px}.layer-card__icon--hardware{width:58px;padding:5px;gap:0}.layer-card__icon--hardware svg{width:24px;height:27px}
  .layer-card__copy small{font-size:.44rem;letter-spacing:.11em}.layer-card__copy strong{font-size:1.45rem}.layer-card__copy b{font-size:.84rem}.layer-card__copy--space b{font-size:.98rem}.layer-card__copy--space p{font-size:.8rem}
  .layer-tag-train{margin-left:68px;max-width:calc(100% - 68px);margin-top:11px}.layer-tag-track{gap:6px;animation-duration:11s}.layer-tag-track span{font-size:.43rem;padding:6px 9px}
  .layer-connector em{margin-left:124px;font-size:.39rem;letter-spacing:.07em;padding:4px 6px}.layer-bypass{margin-block:26px 28px}.layer-bypass::before{left:-8px;right:4px;border-radius:0 14px 14px 0}.layer-bypass b{display:none}.layer-bypass span{right:1px}.layer-bypass i{right:-5px;bottom:-2px}
  #architecture .arch-reveal{margin-top:52px}
}
@media(max-width:390px){.layer-connector em{margin-left:92px;font-size:.35rem}.layer-card{padding-inline:14px}.layer-card__copy strong{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){html:not(.motion-full) .layer-card--space,html:not(.motion-full) .layer-card--space::before,html:not(.motion-full) .layer-tag-track,html:not(.motion-full) .layer-packet,html:not(.motion-full) .layer-bypass span{animation:none!important}.layer-tag-track{transform:none}}

/* =====================================================================
   V47 - GUIDE CHOREOGRAPHY
   The fixed chapter rail owns the viewport-left gutter. The living guide now
   uses immutable per-chapter formations and host-relative anchors.
   ===================================================================== */
@media(min-width:1100px){
  .story-rail{left:clamp(12px,1.35vw,26px)!important;opacity:.62}
  .story-rail__line{height:104px}
}


/* =====================================================================
   V48 - EDGE SCROLL RAIL
   Replace the bright native browser scrollbar with a transparent edge
   rail, a thin glowing progress line, and a draggable hover captor.
   ===================================================================== */
html,body{scrollbar-width:none!important;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

.scroll-edge{
  position:fixed;z-index:2147480000;
  right:max(3px,var(--safe-r,0px));top:calc(var(--safe-t,0px) + 8px);bottom:calc(var(--safe-b,0px) + 8px);
  width:18px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;
  opacity:.72;transition:opacity .25s var(--e),width .25s var(--e);
}
.scroll-edge:hover,.scroll-edge:focus-within{opacity:1;width:24px}
.scroll-edge__line,.scroll-edge__progress{
  position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:999px;pointer-events:none
}
.scroll-edge__line{
  bottom:0;width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(63,224,200,.18) 8%,rgba(124,124,255,.16) 48%,rgba(255,158,122,.17) 92%,transparent 100%);
}
.scroll-edge__progress{
  height:var(--edge-scroll-progress,0%);width:1.5px;
  background:linear-gradient(180deg,var(--aqua) 0%,var(--peri) 55%,var(--coral) 100%);
  box-shadow:0 0 7px color-mix(in srgb,var(--aqua) 55%,transparent),0 0 16px color-mix(in srgb,var(--peri) 28%,transparent);
  transition:height .08s linear;
}
.scroll-captor{
  position:absolute;left:50%;top:var(--edge-scroll-thumb,14px);width:6px;height:30px;
  transform:translate(-50%,-50%);border-radius:999px;
  border:1px solid color-mix(in srgb,var(--aqua) 48%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--aqua) 84%,#fff),color-mix(in srgb,var(--peri) 82%,var(--aqua)),color-mix(in srgb,var(--coral) 78%,var(--peri)));
  box-shadow:0 0 7px color-mix(in srgb,var(--aqua) 62%,transparent),0 0 17px color-mix(in srgb,var(--peri) 28%,transparent);
  cursor:ns-resize;outline:none;transition:width .22s var(--e),height .22s var(--e),box-shadow .22s var(--e),border-color .22s var(--e),opacity .22s var(--e);
}
.scroll-captor__grip{
  position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;transform:translate(-50%,-50%);
  background:rgba(6,17,14,.72);
  box-shadow:0 -5px 0 rgba(6,17,14,.48),0 5px 0 rgba(6,17,14,.48);
  opacity:0;transition:opacity .18s var(--e)
}
.scroll-edge:hover .scroll-captor,
.scroll-captor:hover,
.scroll-captor:focus-visible,
.scroll-captor.is-dragging{
  width:13px;height:42px;
  border-color:color-mix(in srgb,var(--aqua) 74%,var(--peri));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua) 7%,transparent),0 0 12px color-mix(in srgb,var(--aqua) 75%,transparent),0 0 28px color-mix(in srgb,var(--peri) 42%,transparent);
}
.scroll-edge:hover .scroll-captor__grip,
.scroll-captor:focus-visible .scroll-captor__grip,
.scroll-captor.is-dragging .scroll-captor__grip{opacity:1}
.scroll-captor:focus-visible{outline:1px solid color-mix(in srgb,var(--aqua) 88%,#fff);outline-offset:3px}

html.edge-scroll-dragging,html.edge-scroll-dragging body{cursor:ns-resize!important;user-select:none!important;-webkit-user-select:none!important}

/* On touch screens scrolling stays native by gesture; retain only the quiet
   progress filament so the edge never competes with page content. */
@media(pointer:coarse){
  .scroll-edge{right:max(1px,var(--safe-r,0px));width:6px;opacity:.42;pointer-events:none}
  .scroll-edge__line{width:.7px}
  .scroll-edge__progress{width:1px;box-shadow:0 0 5px color-mix(in srgb,var(--aqua) 42%,transparent)}
  .scroll-captor{display:none}
}
@media(max-width:700px){
  .scroll-edge{top:calc(var(--safe-t,0px) + 4px);bottom:calc(var(--safe-b,0px) + 4px)}
}
@media(prefers-reduced-motion:reduce){
  .scroll-edge,.scroll-captor,.scroll-captor__grip,.scroll-edge__progress{transition-duration:.01ms!important}
}


/* =====================================================================
   V49 - LIGHT MODE POLISH + WARM CANVAS
   Warm cream/butterscotch atmosphere, light-native component surfaces,
   and softer narrator glow. Dark mode remains untouched.
   ===================================================================== */
[data-theme="light"]{
  --paper:#FBF8F0;
  --paper-lift:#FFFDF8;
  --paper-deep:#F4E8D2;
  --paper-glow:rgba(218,164,76,.18);
  --bg:var(--paper);
  --bg-2:var(--paper-lift);
  --bg-3:rgba(246,235,216,.66);
  --canvas-top:var(--paper-deep);
  --canvas-bot:#FAF2E5;
  --canvas-wash:var(--paper-glow);
  --glass:rgba(255,253,248,.66);
  --glass-2:rgba(255,250,241,.44);
  --glass-hi:rgba(255,255,252,.95);
  --shadow:0 24px 58px -34px rgba(126,84,30,.22);
  --au-1:#D7DFFF;
  --au-2:#F2D7A3;
  --au-3:#E7DAFF;
  --au-4:#FFD8C3;
  --au-i:.30;
  --aurora-o:.50;
  --grid-o:.042;
}
[data-theme="light"] .grid-bg{
  background-image:linear-gradient(rgba(105,78,43,.18) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(105,78,43,.18) 1px,transparent 1px)!important;
}
[data-theme="light"] .aurora i{opacity:.30!important;filter:blur(104px)!important}

/* Continuity: never render a dark control island on the warm canvas. */
[data-theme="light"] .continuity-stage{
  background:linear-gradient(180deg,rgba(255,253,248,.78),rgba(249,242,229,.46));
  border-color:rgba(117,84,42,.10);
}
[data-theme="light"] .continuity-stage::before{
  background:radial-gradient(42% 58% at 50% 69%,rgba(10,142,114,.075),transparent 72%),
             radial-gradient(36% 48% at 50% 72%,rgba(74,74,207,.065),transparent 76%);
}
[data-theme="light"] .continuity-device{background:rgba(255,253,248,.44)}
[data-theme="light"] .continuity-device.is-active{
  background:linear-gradient(180deg,rgba(10,142,114,.075),rgba(74,74,207,.028));
  box-shadow:0 18px 46px -34px rgba(10,142,114,.42);
}
[data-theme="light"] .continuity-core{
  background:radial-gradient(circle at 35% 28%,rgba(10,142,114,.10),transparent 42%),rgba(255,252,246,.94);
  border-color:rgba(10,142,114,.26);
  box-shadow:0 0 0 14px rgba(10,142,114,.025),0 18px 56px -32px rgba(74,74,207,.30);
}
[data-theme="light"] .continuity-preserved__item{
  background:rgba(255,252,246,.94);border-color:rgba(88,70,47,.11);
  box-shadow:0 8px 24px -18px rgba(92,64,31,.28)
}

/* Intelligence: same visual hierarchy, light-native surfaces. */
[data-theme="light"] .intelligence-field{
  background:linear-gradient(180deg,rgba(255,253,248,.70),rgba(250,244,233,.38));
}
[data-theme="light"] .intelligence-train{background:linear-gradient(180deg,rgba(255,252,246,.48),transparent)}
[data-theme="light"] .intelligence-train::before{background:linear-gradient(90deg,var(--bg-2),transparent)}
[data-theme="light"] .intelligence-train::after{background:linear-gradient(-90deg,var(--bg-2),transparent)}
[data-theme="light"] .intelligence-card{background:rgba(255,253,248,.54)}
[data-theme="light"] .intelligence-card.train-active{
  background:linear-gradient(145deg,rgba(10,142,114,.075),rgba(74,74,207,.032));
  box-shadow:0 18px 50px -38px rgba(10,142,114,.42)
}
[data-theme="light"] .intelligence-center{
  background:radial-gradient(circle at 34% 28%,rgba(10,142,114,.105),transparent 42%),rgba(255,252,246,.95);
  border-color:rgba(10,142,114,.26);
  box-shadow:0 0 0 18px rgba(10,142,114,.022),0 20px 58px -34px rgba(74,74,207,.32)
}
[data-theme="light"] .intelligence-node{
  background:rgba(255,252,246,.93);border-color:rgba(88,70,47,.10);
  box-shadow:0 8px 24px -20px rgba(92,64,31,.28)
}
[data-theme="light"] .intelligence-field[data-intel-mode="hive"] .intelligence-node--hive,
[data-theme="light"] .intelligence-field[data-intel-mode="swarm"] .intelligence-node--swarm,
[data-theme="light"] .intelligence-field[data-intel-mode="hybrid"] .intelligence-node--hybrid,
[data-theme="light"] .intelligence-field[data-intel-mode="organization"] .intelligence-node--organization{
  background:rgba(10,142,114,.085);border-color:rgba(10,142,114,.34);
  box-shadow:0 0 0 8px rgba(10,142,114,.025),0 14px 34px -20px rgba(10,142,114,.38)
}

/* Sovereignty: light mode should feel controlled, not like a dark panel pasted
   on top of a light site. Keep the boundary metaphor through lines and tint. */
[data-theme="light"] #sovereign .policy{
  background:linear-gradient(145deg,rgba(255,252,246,.94),rgba(248,239,221,.90))!important;
  border-color:rgba(115,84,45,.13)!important;
  box-shadow:0 22px 64px -40px rgba(120,78,28,.24),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
[data-theme="light"] #sovereign .policy::after{
  background:radial-gradient(70% 90% at 100% 0%,rgba(218,164,76,.11),transparent 68%)
}
[data-theme="light"] .sovereign-boundary{
  background:linear-gradient(145deg,rgba(255,252,246,.93),rgba(247,238,220,.88))!important;
  border-color:rgba(115,84,45,.12)!important;
}
[data-theme="light"] .sb-boundary{
  border-color:rgba(10,142,114,.26);
  background:radial-gradient(circle at 48% 52%,rgba(74,74,207,.065),transparent 25%),
             radial-gradient(circle at 20% 22%,rgba(218,164,76,.075),transparent 30%),
             rgba(255,252,246,.70);
  box-shadow:inset 0 0 55px rgba(126,84,30,.035)
}
[data-theme="light"] .sb-boundary::after{border-color:rgba(88,70,47,.07)}
[data-theme="light"] .sb-core{
  background:radial-gradient(circle at 35% 28%,rgba(10,142,114,.09),transparent 42%),rgba(255,252,246,.96);
  border-color:rgba(74,74,207,.32);
  box-shadow:0 0 0 8px rgba(74,74,207,.035),0 16px 44px -26px rgba(74,74,207,.34)
}
[data-theme="light"] .sb-zone{
  border-color:rgba(88,70,47,.10);background:rgba(255,252,246,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px -18px rgba(92,64,31,.24)
}
[data-theme="light"] .sb-gate{
  background:rgba(255,252,246,.96);border-color:rgba(10,142,114,.32);
  box-shadow:0 12px 34px -22px rgba(10,142,114,.34)
}
[data-theme="light"] .sovereign-proof span,
[data-theme="light"] .sovereign-boundary__chips span{background:rgba(255,252,246,.82)}

/* Narrator/guide: retain choreography but remove additive neon blow-out on paper. */
[data-theme="light"] .living-space canvas{opacity:.68!important;filter:saturate(.82) contrast(.94)!important}
[data-theme="light"] .living-space::before{opacity:.26!important;filter:blur(40px)!important}
[data-theme="light"] .life-token{background:rgba(255,252,246,.72)!important;border-color:rgba(88,70,47,.08)!important}


/* Chapter 9: make automatic progression visually obvious while a story is
   active. The flow steps still carry the actual narrative progression. */
.work-story__selector{position:relative;overflow:hidden}
.work-story__selector::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--aqua),var(--peri),var(--coral));
  transform:scaleX(0);transform-origin:left center;opacity:0
}
.work-story__selector.is-active::after{
  opacity:.78;animation:workStoryCardProgress 15.6s linear forwards
}
@keyframes workStoryCardProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.motion-paused .work-story__selector.is-active::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-full) .work-story__selector.is-active::after{animation-play-state:paused!important}}


/* =====================================================================
   V50 - EXPERIENCE, PROOF, PATHS, OPTIONAL SOUND
   New modules use isolated class names. Existing chapter choreography is
   untouched. The page stays silent by default and sound is user-initiated.
   ===================================================================== */

/* Optional micro-audio control */
.sound-btn .sound-on{display:none}.sound-btn[aria-pressed="true"] .sound-off{display:none}.sound-btn[aria-pressed="true"] .sound-on{display:block}
.sound-btn[aria-pressed="true"]{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 35%,var(--edge));background:color-mix(in srgb,var(--aqua) 7%,var(--glass-2));box-shadow:0 0 22px -14px var(--aqua)}
.drawer-action{appearance:none;border:1px solid var(--edge);background:var(--glass-2);color:var(--fg);border-radius:14px;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--ff);font-size:.96rem;text-align:left;margin-top:8px}
.drawer-action b{font-family:var(--ff-m);font-size:.52rem;letter-spacing:.11em;text-transform:uppercase;color:var(--aqua)}
@media(max-width:700px){.topbar .sound-btn{display:none!important}}

/* Interactive demonstration */
.experience-section{position:relative;overflow:hidden}
.experience-section::before{content:"";position:absolute;inset:5% -10%;pointer-events:none;background:radial-gradient(34% 45% at 20% 55%,color-mix(in srgb,var(--aqua) 8%,transparent),transparent 72%),radial-gradient(34% 48% at 78% 42%,color-mix(in srgb,var(--peri) 8%,transparent),transparent 74%);opacity:.8}
.experience-shell{position:relative;padding:clamp(18px,2.8vw,30px);border-radius:28px;overflow:hidden;isolation:isolate}
.experience-shell::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(135deg,color-mix(in srgb,var(--aqua) 5%,transparent),transparent 44%,color-mix(in srgb,var(--peri) 5%,transparent))}
.experience-scenarios{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--edge-2)}
.experience-scenario{min-height:42px;padding:9px 13px;border-radius:999px;border:1px solid var(--edge-2);background:var(--glass-2);color:var(--fg-3);font-size:.76rem;font-weight:650;transition:.3s var(--e)}
.experience-scenario.is-active{color:var(--fg);border-color:color-mix(in srgb,var(--aqua) 42%,var(--edge));background:linear-gradient(135deg,color-mix(in srgb,var(--aqua) 10%,var(--glass)),color-mix(in srgb,var(--peri) 7%,var(--glass)));box-shadow:0 14px 34px -26px var(--aqua);transform:translateY(-1px)}
.experience-stage{--exp-progress:0%;display:grid;grid-template-columns:minmax(220px,.82fr) minmax(390px,1.35fr) minmax(230px,.9fr);gap:14px;align-items:stretch;padding-top:18px}
.experience-request,.experience-result{border:1px solid var(--edge-2);border-radius:20px;padding:20px;background:color-mix(in srgb,var(--bg-2) 62%,transparent);min-height:260px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.experience-request::after,.experience-result::after{content:"";position:absolute;inset:auto -20% -46% -20%;height:62%;pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--aqua) 10%,transparent),transparent 70%)}
.experience-request small,.experience-result>small,.path-story__intro>small{font-family:var(--ff-m);font-size:.51rem;letter-spacing:.14em;color:var(--aqua);margin-bottom:9px}
.experience-request p{font-family:var(--ff-d);font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1.12;letter-spacing:-.035em;color:var(--fg);position:relative;z-index:1}
.experience-request__hint{margin-top:28px;font-size:.76rem;line-height:1.5;color:var(--fg-3);position:relative;z-index:1}
.experience-engine{position:relative;border:1px solid var(--edge-2);border-radius:20px;padding:22px 18px;background:var(--glass-2);overflow:hidden;min-height:260px}
.experience-engine__line{position:absolute;left:37px;top:37px;bottom:37px;width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--aqua) 48%,transparent),color-mix(in srgb,var(--peri) 48%,transparent),color-mix(in srgb,var(--coral) 36%,transparent))}
.experience-engine__packet{position:absolute;z-index:4;left:31px;top:37px;width:13px;height:13px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 6px color-mix(in srgb,var(--aqua) 9%,transparent),0 0 18px var(--aqua);opacity:.35;transition:top .6s var(--e-out),background .35s var(--e),box-shadow .35s var(--e),opacity .35s var(--e)}
.experience-steps{display:grid;gap:6px;padding-left:38px}
.experience-step{min-height:54px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;border-radius:13px;padding:8px 10px;color:var(--fg-3);transition:.35s var(--e)}
.experience-step>i{font-family:var(--ff-m);font-size:.45rem;font-style:normal;letter-spacing:.1em;color:inherit}
.experience-step span{display:grid;gap:1px}.experience-step b{font-family:var(--ff-d);font-size:.88rem;letter-spacing:-.02em}.experience-step small{font-size:.66rem;color:inherit}
.experience-step.is-done{color:var(--fg-2)}.experience-step.is-active{color:var(--fg);background:color-mix(in srgb,var(--aqua) 8%,transparent);transform:translateX(3px)}
.experience-step.is-active>i{color:var(--aqua)}
.experience-signal{position:absolute;right:15px;bottom:12px;font-family:var(--ff-m);font-size:.43rem;letter-spacing:.08em;color:var(--fg-3)}
.experience-result{opacity:.58;transform:scale(.985);transition:opacity .5s var(--e),transform .55s var(--e-out),border-color .45s var(--e),box-shadow .45s var(--e)}
.experience-stage[data-state="complete"] .experience-result{opacity:1;transform:none;border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge));box-shadow:0 26px 65px -45px var(--aqua)}
.experience-result h3{font-size:clamp(1.25rem,1.8vw,1.55rem);margin-bottom:10px}.experience-result p{font-size:.84rem;color:var(--fg-2);line-height:1.55;position:relative;z-index:1}
.experience-result__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:20px;position:relative;z-index:1}.experience-result__chips span{font-family:var(--ff-m);font-size:.4rem;letter-spacing:.07em;border:1px solid var(--edge-2);border-radius:999px;padding:5px 7px;color:var(--fg-3);background:var(--glass-2)}
.experience-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--edge-2);margin-top:18px;padding-top:16px}.experience-footer>span{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-m);font-size:.46rem;letter-spacing:.08em;color:var(--fg-3)}.experience-footer>span i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--aqua)}
.experience-run.is-running{pointer-events:none;opacity:.82}
@media(max-width:980px){.experience-stage{grid-template-columns:1fr 1.15fr}.experience-result{grid-column:1/-1;min-height:180px}.experience-request{min-height:250px}}
@media(max-width:700px){.experience-shell{padding:16px 13px;border-radius:22px}.experience-scenarios{display:grid;grid-template-columns:1fr 1fr}.experience-scenario{border-radius:12px;padding:8px}.experience-stage{grid-template-columns:1fr;gap:9px}.experience-request,.experience-engine,.experience-result{min-height:0}.experience-request{padding:18px}.experience-request__hint{margin-top:16px}.experience-engine{padding:16px 12px}.experience-engine__line{left:29px;top:30px;bottom:30px}.experience-engine__packet{left:23px;top:30px}.experience-steps{padding-left:32px}.experience-step{grid-template-columns:28px 1fr}.experience-result{grid-column:auto;padding:18px}.experience-footer{align-items:stretch;flex-direction:column}.experience-run{width:100%}.experience-footer>span{justify-content:center;text-align:center}}

/* Proof without turning the story into a feature catalogue */
.reality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reality-card{min-height:210px;padding:22px 20px;border-radius:20px;border:1px solid var(--edge-2);background:linear-gradient(145deg,color-mix(in srgb,var(--glass) 72%,transparent),var(--glass-2));position:relative;overflow:hidden}
.reality-card::after{content:"";position:absolute;inset:auto -15% -50% -15%;height:65%;background:radial-gradient(ellipse,color-mix(in srgb,var(--aqua) 7%,transparent),transparent 70%);pointer-events:none}
.reality-card i{font-family:var(--ff-m);font-size:.48rem;font-style:normal;letter-spacing:.12em;color:var(--aqua)}.reality-card h3{font-size:1.12rem;margin:34px 0 9px;max-width:18ch}.reality-card p{color:var(--fg-3);font-size:.82rem;line-height:1.55;max-width:34ch}
@media(max-width:900px){.reality-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.reality-grid{grid-template-columns:1fr}.reality-card{min-height:0}.reality-card h3{margin-top:24px}}

/* Visitor-controlled relevance, never silent tracking */
.paths-shell{padding:clamp(18px,2.6vw,28px);border-radius:26px}
.path-audience{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--edge-2)}
.path-audience__btn{min-height:42px;padding:9px 13px;border-radius:999px;border:1px solid var(--edge-2);background:var(--glass-2);color:var(--fg-3);font-size:.75rem;font-weight:650;transition:.3s var(--e)}
.path-audience__btn.is-active{color:var(--fg);border-color:color-mix(in srgb,var(--peri) 38%,var(--edge));background:linear-gradient(135deg,color-mix(in srgb,var(--peri) 10%,var(--glass)),color-mix(in srgb,var(--aqua) 7%,var(--glass)));transform:translateY(-1px)}
.path-story{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:24px;padding-top:24px;align-items:center}.path-story.is-swap .path-story__intro{animation:pathIntroSwap .52s var(--e-out)}.path-story.is-swap .path-story__cards article{animation:pathCardIn .58s var(--e-out) both}.path-story.is-swap .path-story__cards article:nth-child(2){animation-delay:.07s}.path-story.is-swap .path-story__cards article:nth-child(3){animation-delay:.14s}@keyframes pathIntroSwap{from{opacity:.25;transform:translateX(-12px)}to{opacity:1;transform:none}}@keyframes pathCardIn{from{opacity:.15;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.path-story__intro h3{font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.05;letter-spacing:-.04em;max-width:18ch}.path-story__intro p{margin-top:12px;color:var(--fg-3);font-size:.86rem;line-height:1.55;max-width:42ch}

.path-journey{position:relative;padding-top:16px}
.path-journey__track{position:absolute;left:8.5%;right:8.5%;top:10px;height:12px;pointer-events:none;z-index:3}
.path-journey__line{position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--peri) 28%,transparent),color-mix(in srgb,var(--aqua) 62%,transparent),color-mix(in srgb,var(--coral) 32%,transparent));opacity:.55}
.path-journey__packet{position:absolute;top:1px;left:0;width:9px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 5px color-mix(in srgb,var(--aqua) 12%,transparent),0 0 22px color-mix(in srgb,var(--aqua) 75%,transparent);transform:translateX(-50%);transition:left .72s var(--e-out),background .4s var(--e),box-shadow .4s var(--e)}
.path-journey[data-step="0"] .path-journey__packet{left:0;background:var(--peri);box-shadow:0 0 0 5px color-mix(in srgb,var(--peri) 12%,transparent),0 0 22px color-mix(in srgb,var(--peri) 72%,transparent)}
.path-journey[data-step="1"] .path-journey__packet{left:50%;background:var(--aqua)}
.path-journey[data-step="2"] .path-journey__packet{left:100%;background:var(--coral);box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 12%,transparent),0 0 22px color-mix(in srgb,var(--coral) 72%,transparent)}

.path-story__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;z-index:2}.path-story__cards article{min-height:145px;border:1px solid var(--edge-2);background:var(--glass-2);border-radius:17px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .5s var(--e-out),border-color .5s var(--e),background .5s var(--e),box-shadow .5s var(--e),opacity .5s var(--e)}.path-story__cards article::before{content:"";position:absolute;inset:0;background:radial-gradient(210px circle at 50% 110%,color-mix(in srgb,var(--path-step-color,var(--aqua)) 17%,transparent),transparent 70%);opacity:0;transition:opacity .45s var(--e)}.path-story__cards article:nth-child(1){--path-step-color:var(--peri)}.path-story__cards article:nth-child(2){--path-step-color:var(--aqua)}.path-story__cards article:nth-child(3){--path-step-color:var(--coral)}.path-story__cards article.is-active{transform:translateY(-5px);border-color:color-mix(in srgb,var(--path-step-color) 45%,var(--edge));background:color-mix(in srgb,var(--path-step-color) 6%,var(--glass));box-shadow:0 18px 42px -28px color-mix(in srgb,var(--path-step-color) 70%,transparent)}.path-story__cards article.is-active::before{opacity:1}.path-story__cards article:not(.is-active){opacity:.76}.path-story__cards small{position:relative;z-index:1;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.11em;color:var(--fg-3)}.path-story__cards b{position:relative;z-index:1;font-family:var(--ff-d);font-size:.98rem;line-height:1.15;letter-spacing:-.025em}
@media(max-width:850px){.path-story{grid-template-columns:1fr}.path-story__intro h3{max-width:24ch}}
@media(max-width:600px){.paths-shell{padding:15px 13px}.path-audience{display:grid;grid-template-columns:1fr 1fr}.path-audience__btn{border-radius:12px}.path-journey{padding-top:0}.path-journey__track{left:15px;right:auto;top:8%;bottom:8%;height:auto;width:12px}.path-journey__line{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--peri) 28%,transparent),color-mix(in srgb,var(--aqua) 62%,transparent),color-mix(in srgb,var(--coral) 32%,transparent))}.path-journey__packet{left:1px!important;top:0;transition:top .72s var(--e-out),background .4s var(--e),box-shadow .4s var(--e);transform:translateY(-50%)}.path-journey[data-step="0"] .path-journey__packet{top:0}.path-journey[data-step="1"] .path-journey__packet{top:50%}.path-journey[data-step="2"] .path-journey__packet{top:100%}.path-story__cards{grid-template-columns:1fr;padding-left:28px}.path-story__cards article{min-height:92px}.path-story__cards article.is-active{transform:translateX(5px)}}

/* Finale now converts the category recognition into one next action. */
.finale-proof{display:block;max-width:660px;margin:-14px auto 28px;color:var(--fg-3);font-size:.86rem;line-height:1.55}

/* Light mode keeps all new surfaces paper-like rather than black islands. */
[data-theme="light"] .experience-request,[data-theme="light"] .experience-result,[data-theme="light"] .experience-engine,[data-theme="light"] .reality-card{background:rgba(255,252,246,.68)}
[data-theme="light"] .experience-shell,[data-theme="light"] .paths-shell{background:rgba(255,252,246,.58)}

/* Reduced motion preserves all meaning and interaction. */
@media(prefers-reduced-motion:reduce){html:not(.motion-full) .path-story.is-swap .path-story__intro,html:not(.motion-full) .path-story.is-swap .path-story__cards article{animation:none!important}html:not(.motion-full) .path-journey__packet{transition:none!important}.experience-engine__packet{transition-duration:.18s!important}}


/* =====================================================================
   V51 - AUDIO HARDENING
   Sound remains opt-in. The control only reports "ready" after a browser
   audio path has successfully started.
   ===================================================================== */
.sound-btn[data-sound-state="starting"]{color:var(--peri);border-color:color-mix(in srgb,var(--peri) 42%,var(--edge));box-shadow:0 0 22px -12px color-mix(in srgb,var(--peri) 72%,transparent)}
.sound-btn[data-sound-state="starting"] svg{animation:soundStartingPulse .72s ease-in-out infinite}
.sound-btn[data-sound-state="blocked"]{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 42%,var(--edge));background:color-mix(in srgb,var(--coral) 6%,var(--glass-2))}
@keyframes soundStartingPulse{50%{opacity:.45;transform:scale(.9)}}

.sound-toast{
  position:fixed;z-index:2147481000;
  top:calc(var(--safe-t,0px) + 68px);right:max(18px,calc(var(--safe-r,0px) + 18px));
  max-width:min(310px,calc(100vw - 32px));
  padding:9px 12px;border:1px solid var(--edge);border-radius:999px;
  background:color-mix(in srgb,var(--bg-2) 86%,transparent);
  color:var(--fg-2);font-family:var(--ff-m);font-size:.57rem;line-height:1.25;
  letter-spacing:.055em;text-transform:uppercase;
  box-shadow:0 14px 42px -24px rgba(0,0,0,.6),0 0 24px -18px var(--aqua);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transform:translateY(-7px) scale(.98);pointer-events:none;
  transition:opacity .22s var(--e),transform .22s var(--e),border-color .22s var(--e),color .22s var(--e);
}
.sound-toast.is-showing{opacity:1;transform:none}
.sound-toast[data-state="ready"]{color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge))}
.sound-toast[data-state="blocked"]{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 38%,var(--edge))}
.sound-toast[data-state="starting"]{color:var(--peri);border-color:color-mix(in srgb,var(--peri) 34%,var(--edge))}
[data-theme="light"] .sound-toast{background:color-mix(in srgb,#fff8eb 92%,transparent);box-shadow:0 14px 34px -26px rgba(92,69,39,.28),0 0 20px -17px color-mix(in srgb,var(--peri) 52%,transparent)}

@media(max-width:700px){
  .sound-toast{top:auto;right:12px;bottom:calc(var(--safe-b,0px) + 16px);left:12px;max-width:none;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .sound-btn[data-sound-state="starting"] svg{animation:none!important}
  .sound-toast{transition-duration:.01ms!important}
}


/* =====================================================================
   V54 - SENSORY CONTROLS
   Sound and Haptics are independent, visible controls.
   ===================================================================== */
.haptic-btn .haptic-on{display:none}
.haptic-btn[aria-pressed="true"] .haptic-off{display:none}
.haptic-btn[aria-pressed="true"] .haptic-on{display:block}
.haptic-btn[aria-pressed="true"]{
  color:var(--coral);
  border-color:color-mix(in srgb,var(--coral) 35%,var(--edge));
  background:color-mix(in srgb,var(--coral) 7%,var(--glass-2));
  box-shadow:0 0 22px -14px var(--coral)
}
.haptic-btn[data-haptic-state="unavailable"]{
  opacity:.52;color:var(--fg-3);
  border-color:color-mix(in srgb,var(--fg-3) 16%,var(--edge));
  background:color-mix(in srgb,var(--glass-2) 82%,transparent)
}
.haptic-btn[data-haptic-state="unavailable"]:hover{opacity:.72}
.haptic-btn[data-haptic-state="starting"] svg{animation:hapticPulse .62s ease-in-out infinite}
@keyframes hapticPulse{50%{transform:scale(.88);opacity:.55}}

@media(max-width:700px){
  /* V50 used to hide sound completely on mobile. Keep both sensory controls
     visible as compact topbar actions instead. */
  .topbar .sound-btn,.topbar .haptic-btn{display:grid!important}
  .topbar .sound-btn,.topbar .haptic-btn,.topbar .motion-btn,.topbar .theme-btn{
    width:38px;height:38px;min-width:38px
  }
  .topbar .sound-btn svg,.topbar .haptic-btn svg,.topbar .motion-btn svg,.topbar .theme-btn svg{
    width:18px;height:18px
  }
  .topbar__act{gap:5px}
}
@media(max-width:390px){
  .topbar .sound-btn,.topbar .haptic-btn,.topbar .motion-btn,.topbar .theme-btn{
    width:35px;height:35px;min-width:35px
  }
  .topbar__act{gap:3px}
}
@media(prefers-reduced-motion:reduce){
  .haptic-btn[data-haptic-state="starting"] svg{animation:none!important}
}


/* =====================================================================
   V56 - NARRATIVE SURGERY
   Concrete early workflow anchor + one human story threaded through
   the existing 15 chapters. No chapter or major visual was removed.
   ===================================================================== */
.work-anchor{position:relative;padding:clamp(8px,2vw,22px) 0 clamp(30px,5vw,60px)}
.work-anchor__shell{padding:clamp(18px,3vw,30px);display:grid;gap:18px}
.work-anchor__request{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--edge)}
.work-anchor__request small,.work-anchor__side small,.clarity-strip small,.story-thread small{
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);font-weight:600
}
.work-anchor__request strong{font-family:var(--ff-d);font-size:clamp(1.08rem,2vw,1.42rem);letter-spacing:-.025em;line-height:1.15;text-align:right}
.work-anchor__compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px}
.work-anchor__side{min-width:0;padding:16px;border:1px solid var(--edge-2);border-radius:15px;background:var(--glass-2)}
.work-anchor__side p{margin:9px 0 8px;color:var(--fg);font-size:.92rem;line-height:1.55}
.work-anchor__side p i{font-style:normal;color:var(--fg-3);padding:0 2px}
.work-anchor__side b{display:block;color:var(--fg-2);font-size:.82rem;line-height:1.5;font-weight:600}
.work-anchor__side--theos{border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));background:color-mix(in srgb,var(--aqua) 5%,var(--glass-2))}
.work-anchor__side--theos b{color:var(--fg)}
.work-anchor__arrow{display:grid;place-items:center;color:var(--aqua);font-family:var(--ff-m);font-size:1.1rem;opacity:.7}

.clarity-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.clarity-strip>div{padding:13px 14px;border:1px solid var(--edge-2);border-radius:13px;background:var(--glass-2)}
.clarity-strip b{display:block;margin-top:5px;font-size:.78rem;line-height:1.45;color:var(--fg-2);font-weight:600}

.story-thread{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:11px;
  margin:15px 0 16px;padding:11px 13px;border-left:2px solid color-mix(in srgb,var(--aqua) 55%,var(--peri));
  background:linear-gradient(90deg,color-mix(in srgb,var(--aqua) 5%,transparent),transparent 74%);
  border-radius:0 10px 10px 0;color:var(--fg-2);font-size:.91rem;line-height:1.55
}
.story-thread small{padding-top:2px;white-space:nowrap;color:color-mix(in srgb,var(--aqua) 70%,var(--fg-3))}
.story-thread span{max-width:62ch}

[data-theme="light"] .work-anchor__side--theos{
  background:color-mix(in srgb,#fff4dc 72%,white);
  border-color:color-mix(in srgb,var(--coral) 20%,var(--edge))
}
[data-theme="light"] .story-thread{
  background:linear-gradient(90deg,color-mix(in srgb,#f3d9ad 18%,transparent),transparent 76%)
}

@media(max-width:760px){
  .work-anchor__request{display:grid;gap:8px;align-items:start}
  .work-anchor__request strong{text-align:left}
  .work-anchor__compare{grid-template-columns:1fr;gap:10px}
  .work-anchor__arrow{transform:rotate(90deg);height:18px}
  .clarity-strip{grid-template-columns:1fr}
  .story-thread{grid-template-columns:1fr;gap:4px}
  .story-thread small{white-space:normal}
}


/* =====================================================================
   V58 - VISUAL PROOF MOTION
   Chapter 02 now explains BEFORE vs WITH THEOS through motion.
   Reality proof cards demonstrate their claims instead of sitting still.
   ===================================================================== */

/* ---------- CH02: BEFORE / WITH THEOS ---------- */
.work-anchor--visual{padding:clamp(12px,2vw,24px) 0 clamp(42px,6vw,76px)}
.work-anchor--visual .work-anchor__shell{gap:22px;padding:clamp(18px,2.8vw,30px)}
.work-anchor--visual .work-anchor__request{align-items:center}
.work-anchor--visual .work-anchor__request>div{display:grid;gap:5px}
.work-anchor--visual .work-anchor__request>div>span{font-size:.8rem;color:var(--fg-3)}
.work-anchor--visual .work-anchor__request strong{max-width:34ch}
.work-compare-stage{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:10px;align-items:stretch}
.work-before,.work-after{
  border:1px solid var(--edge-2);border-radius:22px;padding:16px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--glass) 72%,transparent),var(--glass-2));
  min-width:0;overflow:hidden;position:relative
}
.work-before::before,.work-after::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.48
}
.work-before::before{background:radial-gradient(420px 240px at 15% 10%,color-mix(in srgb,var(--coral) 7%,transparent),transparent 66%)}
.work-after::before{background:radial-gradient(440px 260px at 50% 50%,color-mix(in srgb,var(--aqua) 9%,transparent),transparent 70%)}
.work-before header,.work-after header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.work-before header>div,.work-after header>div{display:grid;gap:4px}
.work-before header small,.work-after header small,.work-anchor__promise small{
  font-family:var(--ff-m);font-size:.53rem;letter-spacing:.12em;color:var(--fg-3)
}
.work-before header strong,.work-after header strong{font-family:var(--ff-d);font-size:.98rem;letter-spacing:-.02em}
.work-state{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-m);font-size:.42rem;letter-spacing:.08em;color:var(--fg-3);white-space:nowrap}
.work-state i{width:6px;height:6px;border-radius:50%;background:currentColor}
.work-state--manual{color:var(--coral)}
.work-state--connected{color:var(--aqua)}
.work-state--connected i{box-shadow:0 0 12px var(--aqua)}

.before-canvas{height:265px;position:relative;margin:10px 0 5px}
.before-lines{position:absolute;inset:15px 0 0;width:100%;height:230px;overflow:visible}
.before-lines path{fill:none;stroke:color-mix(in srgb,var(--fg-3) 18%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.before-lines .before-travel{stroke:color-mix(in srgb,var(--coral) 50%,transparent);stroke-width:1.4;stroke-dasharray:7 11;animation:beforeDash 2s linear infinite}
@keyframes beforeDash{to{stroke-dashoffset:-36}}
.before-tool{
  position:absolute;width:82px;height:60px;border-radius:14px;border:1px solid var(--edge-2);
  background:color-mix(in srgb,var(--glass) 86%,transparent);display:grid;align-content:center;gap:1px;padding:8px 9px;
  transition:transform .55s cubic-bezier(.22,1.3,.32,1),border-color .45s var(--e),box-shadow .45s var(--e),opacity .45s var(--e)
}
.before-tool i{position:absolute;right:6px;top:5px;font-family:var(--ff-m);font-style:normal;font-size:.37rem;color:var(--fg-3)}
.before-tool b{font-size:.75rem}.before-tool small{font-size:.53rem;color:var(--fg-3)}
.before-tool.is-active{transform:translateY(-7px) scale(1.035);border-color:color-mix(in srgb,var(--coral) 42%,var(--edge));box-shadow:0 14px 36px -24px var(--coral)}
.before-tool--1{left:1%;top:91px}.before-tool--2{left:18%;top:30px}.before-tool--3{left:36%;top:92px}
.before-tool--4{left:54%;top:30px}.before-tool--5{left:72%;top:92px}.before-tool--6{right:1%;top:30px}
.before-packet{
  position:absolute;width:15px;height:15px;border-radius:50%;left:7%;top:126px;z-index:5;
  background:var(--coral);box-shadow:0 0 0 7px color-mix(in srgb,var(--coral) 10%,transparent),0 0 22px var(--coral);
  transition:left .78s cubic-bezier(.22,.72,.18,1),top .78s cubic-bezier(.22,.72,.18,1)
}
.before-packet span{position:absolute;width:4px;height:4px;border-radius:50%;background:white;left:5.5px;top:5.5px}
.before-context{
  position:absolute;left:8px;bottom:2px;display:flex;align-items:center;gap:8px;
  font-size:.56rem;color:var(--fg-3);transition:opacity .3s var(--e),transform .3s var(--e)
}
.before-context b{font-family:var(--ff-m);font-size:.45rem;letter-spacing:.08em;color:var(--coral)}
.before-context.is-change{opacity:.25;transform:translateY(4px)}
.work-before footer,.work-after footer{
  position:relative;z-index:2;border-top:1px solid var(--edge-2);padding-top:11px;display:flex;gap:7px;flex-wrap:wrap
}
.work-before footer span,.work-after footer span{
  padding:5px 7px;border:1px solid var(--edge-2);border-radius:999px;font-size:.52rem;color:var(--fg-3);background:var(--glass-2)
}
.work-before footer b{color:var(--coral)}.work-after footer b{color:var(--aqua)}

.work-transform{display:grid;place-items:center;align-self:center;position:relative;height:100%}
.work-transform::before{content:"";position:absolute;top:18%;bottom:18%;left:50%;width:1px;background:linear-gradient(transparent,var(--edge),transparent)}
.work-transform span{
  position:relative;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-m);font-size:.39rem;letter-spacing:.08em;color:var(--aqua);
  border:1px solid color-mix(in srgb,var(--aqua) 30%,var(--edge));background:var(--bg);
  box-shadow:0 0 28px -12px var(--aqua)
}
.work-transform i{position:absolute;width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--aqua));right:-4px;top:50%;animation:transformPulse 2.3s var(--e) infinite}
@keyframes transformPulse{0%,100%{opacity:.15;transform:scaleX(.3)}50%{opacity:.9;transform:scaleX(1)}}

.after-canvas{height:390px;position:relative;margin:4px 0}
.after-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.after-lines path{fill:none;stroke:color-mix(in srgb,var(--aqua) 23%,transparent);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-dasharray:4 8;animation:afterDash 3.4s linear infinite}
.after-lines .after-link--2,.after-lines .after-link--4{animation-direction:reverse}
@keyframes afterDash{to{stroke-dashoffset:-48}}
.after-system{
  position:absolute;width:90px;min-height:54px;border:1px solid var(--edge-2);border-radius:14px;padding:8px 9px;
  background:color-mix(in srgb,var(--glass) 82%,transparent);display:grid;gap:1px;z-index:2;
  transition:transform .75s cubic-bezier(.16,1.32,.26,1),border-color .55s var(--e),box-shadow .55s var(--e)
}
.after-system span{font-weight:700;font-size:.72rem}.after-system small{font-size:.5rem;color:var(--fg-3)}
.after-system.is-fed{transform:scale(1.06);border-color:color-mix(in srgb,var(--aqua) 42%,var(--edge));box-shadow:0 12px 28px -24px var(--aqua)}
.after-system--crm{left:3%;top:52px}.after-system--mail{left:3%;bottom:46px}.after-system--files{right:3%;top:52px}.after-system--tasks{right:3%;bottom:46px}
.system-pulse{position:absolute;right:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--aqua);opacity:0;box-shadow:0 0 12px var(--aqua)}
.after-system:nth-of-type(odd) .system-pulse{right:auto;left:-4px}
.after-system.is-fed .system-pulse{animation:systemFeed .82s var(--e-out)}
@keyframes systemFeed{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(.5)}}

.after-ai{
  position:absolute;left:50%;top:12px;transform:translateX(-50%) translateY(-12px) scale(.96);
  min-width:170px;border-radius:999px;border:1px solid color-mix(in srgb,var(--violet) 28%,var(--edge));
  background:color-mix(in srgb,var(--violet) 6%,var(--glass));padding:8px 12px 8px 35px;display:grid;gap:0;opacity:.35;z-index:3;
  transition:opacity .65s var(--e),transform .8s cubic-bezier(.18,1.35,.22,1),box-shadow .6s var(--e)
}
.after-ai.is-active{opacity:1;transform:translateX(-50%) translateY(0) scale(1);box-shadow:0 14px 42px -28px var(--violet)}
.after-ai__spark{position:absolute;left:12px;top:9px;color:var(--violet);font-size:1rem}
.after-ai b{font-size:.67rem}.after-ai small{font-size:.45rem;color:var(--fg-3)}
.after-core{
  position:absolute;left:50%;top:50%;width:190px;height:150px;transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--aqua) 32%,var(--edge));border-radius:50%;
  display:grid;place-items:center;align-content:center;gap:2px;text-align:center;z-index:4;
  background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 7%,var(--bg)),color-mix(in srgb,var(--bg) 88%,transparent));
  box-shadow:inset 0 0 46px color-mix(in srgb,var(--aqua) 5%,transparent),0 0 55px -36px var(--aqua)
}
.after-core__halo{position:absolute;inset:-13px;border:1px solid color-mix(in srgb,var(--peri) 16%,transparent);border-radius:50%;animation:afterHalo 4.8s ease-in-out infinite}
@keyframes afterHalo{50%{transform:scale(1.08);opacity:.38}}
.after-core>small{font-family:var(--ff-m);font-size:.38rem;letter-spacing:.11em;color:var(--aqua)}
.after-core>strong{font-family:var(--ff-d);font-size:1.55rem;letter-spacing:-.05em}
.after-core>p{font-size:.56rem;color:var(--fg-3);max-width:18ch;transition:opacity .22s var(--e),transform .22s var(--e)}
.after-core>p.is-change{opacity:.18;transform:translateY(3px)}
.after-core__chips{display:flex;gap:4px;margin-top:5px}.after-core__chips span{font-family:var(--ff-m);font-size:.34rem;padding:3px 4px;border:1px solid var(--edge-2);border-radius:999px;color:var(--fg-3)}
.after-result{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%) translateY(12px);min-width:240px;
  border:1px solid color-mix(in srgb,var(--aqua) 24%,var(--edge));border-radius:14px;padding:9px 11px 9px 27px;
  background:color-mix(in srgb,var(--aqua) 5%,var(--glass));display:flex;align-items:center;justify-content:space-between;gap:10px;
  opacity:.22;transition:opacity .65s var(--e),transform .78s cubic-bezier(.18,1.25,.24,1),box-shadow .55s var(--e)
}
.after-result.is-ready{opacity:1;transform:translateX(-50%) translateY(0);box-shadow:0 14px 34px -28px var(--aqua)}
.after-result>i{position:absolute;left:10px;width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua)}
.after-result>div{display:grid}.after-result small{font-family:var(--ff-m);font-size:.35rem;letter-spacing:.08em;color:var(--fg-3)}.after-result strong{font-size:.67rem}
.after-result>span{font-size:.46rem;color:var(--fg-3)}

.work-anchor__promise{
  border-top:1px solid var(--edge);padding-top:16px;display:grid;grid-template-columns:auto auto 1fr;gap:10px 18px;align-items:center
}
.work-anchor__promise strong{font-family:var(--ff-d);font-size:1rem;letter-spacing:-.02em}
.work-anchor__promise span{font-size:.78rem;color:var(--fg-2);line-height:1.5}

/* ---------- PROOF MODULES ---------- */
.reality-grid--motion{gap:12px}
.reality-grid--motion .reality-card{
  min-height:340px;padding:17px 17px 18px;display:flex;flex-direction:column;
  border-radius:22px;transition:transform .6s cubic-bezier(.16,1.24,.24,1),border-color .5s var(--e),box-shadow .6s var(--e),background .5s var(--e)
}
.reality-grid--motion .reality-card.is-proof-active{
  transform:translateY(-5px);border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));
  box-shadow:0 20px 54px -40px color-mix(in srgb,var(--aqua) 58%,transparent)
}
.reality-grid--motion .reality-card::after{display:none}
.reality-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.reality-card__top i{font-family:var(--ff-m);font-size:.44rem;font-style:normal;letter-spacing:.12em;color:var(--aqua)}
.reality-card__top span{font-family:var(--ff-m);font-size:.38rem;letter-spacing:.09em;color:var(--fg-3)}
.reality-grid--motion .reality-card h3{margin:14px 0 7px;font-size:1rem}
.reality-grid--motion .reality-card p{font-size:.75rem;line-height:1.5}
.proof-visual{height:185px;margin-top:13px;border:1px solid var(--edge-2);border-radius:16px;background:color-mix(in srgb,var(--glass-2) 82%,transparent);position:relative;overflow:hidden}
.proof-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,color-mix(in srgb,var(--glass-hi) 7%,transparent),transparent 34%)}

/* 01 layers */
.proof-layers{display:grid;place-items:center;perspective:700px}
.proof-layer{position:absolute;width:75%;height:30px;border-radius:8px;border:1px solid var(--edge-2);display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--ff-m);font-size:.42rem;color:var(--fg-3);background:var(--glass-2);transition:transform .8s cubic-bezier(.16,1.25,.24,1),border-color .5s var(--e),box-shadow .5s var(--e)}
.proof-layer--cloud{top:25px;transform:translateY(0) rotateX(54deg)}
.proof-layer--space{top:66px;color:var(--aqua);border-color:color-mix(in srgb,var(--aqua) 32%,var(--edge));background:color-mix(in srgb,var(--aqua) 6%,var(--glass))}
.proof-layer--space b{font-weight:500;color:var(--fg-2)}
.proof-layer--os{top:109px}.proof-layer--device{top:143px;width:60%}
.reality-card.is-proof-active .proof-layer--cloud{transform:translateY(-5px) rotateX(54deg)}
.reality-card.is-proof-active .proof-layer--space{transform:translateY(-3px) scale(1.035);box-shadow:0 14px 34px -25px var(--aqua)}
.reality-card.is-proof-active .proof-layer--os{transform:translateY(2px)}.reality-card.is-proof-active .proof-layer--device{transform:translateY(4px)}
.proof-layer-packet{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--aqua);left:50%;top:48px;opacity:0;box-shadow:0 0 11px var(--aqua)}
.reality-card.is-proof-active .proof-layer-packet{animation:proofLayerPacket 2.2s var(--e) infinite}
@keyframes proofLayerPacket{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(-50%,106px)}}

/* 02 route */
.proof-route__request{position:absolute;left:10px;top:75px;font-family:var(--ff-m);font-size:.4rem;color:var(--fg-3);padding:6px 7px;border:1px solid var(--edge-2);border-radius:9px}
.proof-route__gate{position:absolute;left:43%;top:55px;width:52px;height:62px;border:1px solid color-mix(in srgb,var(--aqua) 25%,var(--edge));border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--aqua) 4%,var(--glass));z-index:2}
.proof-route__gate span{font-family:var(--ff-m);font-size:.34rem;color:var(--aqua)}.proof-route__gate i{width:13px;height:13px;border:1px solid var(--aqua);border-radius:50%;position:relative}.proof-route__gate i::after{content:"";position:absolute;width:5px;height:2px;border-left:1px solid var(--aqua);border-bottom:1px solid var(--aqua);transform:rotate(-45deg);left:3px;top:3px}
.proof-route__paths{position:absolute;right:8px;top:21px;bottom:21px;width:72px;display:grid;align-content:space-between}
.proof-route__paths span{border:1px solid var(--edge-2);border-radius:9px;padding:5px;font-family:var(--ff-m);font-size:.35rem;text-align:center;color:var(--fg-3);transition:border-color .4s var(--e),color .4s var(--e),transform .5s cubic-bezier(.2,1.3,.3,1)}
.proof-route__paths span.is-route{border-color:color-mix(in srgb,var(--aqua) 45%,var(--edge));color:var(--aqua);transform:scale(1.05)}
.proof-route__packet{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--aqua);left:65px;top:87px;box-shadow:0 0 10px var(--aqua);transition:left .75s var(--e-out),top .75s var(--e-out);z-index:4}

/* 03 systems */
.proof-systems svg{position:absolute;inset:0;width:100%;height:100%}.proof-systems svg path{stroke:color-mix(in srgb,var(--aqua) 18%,transparent);stroke-width:1;fill:none;stroke-dasharray:3 6}
.proof-system{position:absolute;border:1px solid var(--edge-2);border-radius:9px;padding:5px 7px;font-family:var(--ff-m);font-size:.36rem;color:var(--fg-3);background:var(--bg);transition:transform .7s cubic-bezier(.16,1.3,.25,1),border-color .5s var(--e)}
.proof-system--1{left:18px;top:22px}.proof-system--2{right:18px;top:22px}.proof-system--3{left:18px;bottom:22px}.proof-system--4{right:18px;bottom:22px}
.proof-system__core{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;font-family:var(--ff-d);font-size:.8rem;background:color-mix(in srgb,var(--aqua) 5%,var(--bg));border:1px solid color-mix(in srgb,var(--aqua) 30%,var(--edge));box-shadow:0 0 28px -20px var(--aqua)}
.reality-card.is-proof-active .proof-system--1{transform:translate(5px,4px)}.reality-card.is-proof-active .proof-system--2{transform:translate(-5px,4px)}.reality-card.is-proof-active .proof-system--3{transform:translate(5px,-4px)}.reality-card.is-proof-active .proof-system--4{transform:translate(-5px,-4px)}
.proof-system__pulse{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--aqua);left:50%;top:50%;opacity:0;box-shadow:0 0 8px var(--aqua)}
.reality-card.is-proof-active .proof-system__pulse--1{animation:sysP1 2.6s .1s var(--e) infinite}.reality-card.is-proof-active .proof-system__pulse--2{animation:sysP2 2.6s .45s var(--e) infinite}.reality-card.is-proof-active .proof-system__pulse--3{animation:sysP3 2.6s .8s var(--e) infinite}.reality-card.is-proof-active .proof-system__pulse--4{animation:sysP4 2.6s 1.15s var(--e) infinite}
@keyframes sysP1{0%,100%{opacity:0;transform:translate(-118px,-48px)}20%{opacity:1}65%{opacity:1;transform:translate(0,0)}80%{opacity:0}}@keyframes sysP2{0%,100%{opacity:0;transform:translate(112px,-48px)}20%{opacity:1}65%{opacity:1;transform:translate(0,0)}80%{opacity:0}}@keyframes sysP3{0%,100%{opacity:0;transform:translate(-118px,48px)}20%{opacity:1}65%{opacity:1;transform:translate(0,0)}80%{opacity:0}}@keyframes sysP4{0%,100%{opacity:0;transform:translate(112px,48px)}20%{opacity:1}65%{opacity:1;transform:translate(0,0)}80%{opacity:0}}

/* 04 approval */
.proof-approval__rail{position:absolute;left:18px;right:18px;top:89px;height:1px;background:linear-gradient(90deg,var(--edge),color-mix(in srgb,var(--aqua) 25%,var(--edge)),var(--edge))}
.proof-approval__request,.proof-approval__done{position:absolute;top:77px;font-family:var(--ff-m);font-size:.35rem;color:var(--fg-3);border:1px solid var(--edge-2);border-radius:8px;padding:5px 6px}.proof-approval__request{left:10px}.proof-approval__done{right:10px}
.proof-approval__gate{position:absolute;left:50%;top:45px;width:95px;height:86px;transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--peri) 25%,var(--edge));border-radius:14px;background:color-mix(in srgb,var(--peri) 4%,var(--glass));display:grid;place-items:center;align-content:center;gap:2px;transition:transform .5s cubic-bezier(.2,1.3,.3,1),border-color .4s var(--e)}
.proof-approval__gate small{font-family:var(--ff-m);font-size:.32rem;color:var(--fg-3)}.proof-approval__gate b{font-size:.58rem}.proof-approval__gate i{margin-top:5px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:var(--aqua);border:1px solid color-mix(in srgb,var(--aqua) 35%,var(--edge));font-style:normal;opacity:.25;transition:opacity .35s var(--e),transform .5s cubic-bezier(.2,1.4,.3,1)}
.proof-approval__gate.is-approved{transform:translateX(-50%) scale(1.04);border-color:color-mix(in srgb,var(--aqua) 38%,var(--edge))}.proof-approval__gate.is-approved i{opacity:1;transform:scale(1.15)}
.proof-approval__packet{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--peri);left:58px;top:86px;box-shadow:0 0 9px var(--peri);transition:left .8s var(--e-out),background .35s var(--e),box-shadow .35s var(--e)}

/* 05 boundary */
.proof-boundary__inside{position:absolute;left:12px;top:19px;bottom:19px;width:58%;border:1px solid color-mix(in srgb,var(--aqua) 25%,var(--edge));border-radius:18px;background:color-mix(in srgb,var(--aqua) 4%,var(--glass));display:grid;align-content:center;padding:13px;gap:3px}
.proof-boundary__inside small{font-family:var(--ff-m);font-size:.32rem;color:var(--aqua)}.proof-boundary__inside strong{font-size:.68rem}.proof-boundary__inside span{font-size:.45rem;color:var(--fg-3)}
.proof-boundary__gate{position:absolute;left:61%;top:70px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--coral) 30%,var(--edge));background:var(--bg);z-index:3}.proof-boundary__gate span{font-family:var(--ff-m);font-size:.27rem;color:var(--coral)}
.proof-boundary__outside{position:absolute;right:9px;top:77px;font-family:var(--ff-m);font-size:.32rem;color:var(--fg-3)}
.proof-boundary__packet{position:absolute;width:7px;height:7px;border-radius:50%;top:88px;box-shadow:0 0 9px currentColor}
.proof-boundary__packet--inside{left:35px;color:var(--aqua);background:var(--aqua)}.proof-boundary__packet--blocked{left:51%;color:var(--coral);background:var(--coral);opacity:0}
.reality-card.is-proof-active .proof-boundary__packet--inside{animation:boundaryInside 2.2s var(--e) infinite}.reality-card.is-proof-active .proof-boundary__packet--blocked{animation:boundaryBlocked 2.2s 1.05s var(--e) infinite}
@keyframes boundaryInside{0%{transform:translateX(0);opacity:0}15%{opacity:1}70%{transform:translateX(102px);opacity:1}100%{transform:translateX(102px);opacity:0}}@keyframes boundaryBlocked{0%{opacity:0;transform:translateX(0)}20%{opacity:1}58%{opacity:1;transform:translateX(25px)}70%{transform:translateX(19px) scale(.7);opacity:.8}100%{opacity:0;transform:translateX(19px) scale(.4)}}
.proof-boundary__blocked{position:absolute;right:38px;top:112px;font-family:var(--ff-m);font-size:.3rem;color:var(--coral);letter-spacing:.08em;opacity:0}.reality-card.is-proof-active .proof-boundary__blocked{animation:blockedText 2.2s 1.05s var(--e) infinite}@keyframes blockedText{45%,70%{opacity:1}0%,35%,100%{opacity:0}}

/* 06 converge */
.proof-converge__node{position:absolute;border:1px solid var(--edge-2);border-radius:9px;padding:5px 7px;font-family:var(--ff-m);font-size:.35rem;color:var(--fg-3);background:var(--bg);transition:transform .85s cubic-bezier(.18,1.35,.22,1),border-color .5s var(--e),color .5s var(--e)}
.proof-converge__node--doc{left:18px;top:22px}.proof-converge__node--talk{right:18px;top:22px}.proof-converge__node--agent{left:18px;bottom:22px}.proof-converge__node--flow{right:18px;bottom:22px}
.proof-converge__core{position:absolute;left:50%;top:50%;width:100px;height:78px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid color-mix(in srgb,var(--aqua) 28%,var(--edge));display:grid;place-items:center;align-content:center;background:color-mix(in srgb,var(--aqua) 5%,var(--bg));z-index:2}
.proof-converge__core span{font-family:var(--ff-d);font-size:.9rem}.proof-converge__core small{font-family:var(--ff-m);font-size:.3rem;color:var(--aqua)}
.proof-converge__ring{position:absolute;left:50%;top:50%;width:118px;height:94px;border:1px solid color-mix(in srgb,var(--peri) 16%,transparent);border-radius:50%;transform:translate(-50%,-50%)}
.reality-card.is-proof-active .proof-converge__node--doc{transform:translate(38px,32px);border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));color:var(--fg)}.reality-card.is-proof-active .proof-converge__node--talk{transform:translate(-38px,32px);border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));color:var(--fg)}.reality-card.is-proof-active .proof-converge__node--agent{transform:translate(38px,-32px);border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));color:var(--fg)}.reality-card.is-proof-active .proof-converge__node--flow{transform:translate(-38px,-32px);border-color:color-mix(in srgb,var(--aqua) 25%,var(--edge));color:var(--fg)}
.reality-card.is-proof-active .proof-converge__ring{animation:convergeRing 2.4s var(--e) infinite}@keyframes convergeRing{0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.88)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}}

@media(max-width:1000px){
  .work-compare-stage{grid-template-columns:1fr}
  .work-transform{height:46px}.work-transform::before{top:50%;bottom:auto;left:15%;right:15%;height:1px;width:auto;background:linear-gradient(90deg,transparent,var(--edge),transparent)}.work-transform i{right:50%;top:50%;width:1px;height:28px;background:linear-gradient(transparent,var(--aqua));animation:none}
  .work-transform span{width:42px;height:42px}
}
@media(max-width:720px){
  .work-anchor--visual .work-anchor__request{display:grid;gap:8px}.work-anchor--visual .work-anchor__request strong{text-align:left}
  .before-canvas{height:390px}
  .before-lines{display:none}
  .before-tool{width:43%;height:58px}
  .before-tool--1{left:2%;top:20px}.before-tool--2{right:2%;left:auto;top:20px}.before-tool--3{left:2%;top:108px}.before-tool--4{right:2%;left:auto;top:108px}.before-tool--5{left:2%;top:196px}.before-tool--6{right:2%;left:auto;top:196px}
  .before-packet{left:8%;top:46px}
  .before-context{bottom:70px}
  .after-canvas{height:430px}
  .after-system{width:82px}.after-system--crm{left:0}.after-system--mail{left:0}.after-system--files{right:0}.after-system--tasks{right:0}
  .after-core{width:156px;height:134px}.after-ai{min-width:155px}
  .after-result{min-width:82%;bottom:6px}
  .work-anchor__promise{grid-template-columns:1fr;gap:4px}
}
@media(max-width:560px){
  .reality-grid--motion{grid-template-columns:1fr}
  .reality-grid--motion .reality-card{min-height:320px}
  .proof-visual{height:170px}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-full) .before-lines .before-travel,
  html:not(.motion-full) .after-lines path,
  html:not(.motion-full) .after-core__halo,
  html:not(.motion-full) .proof-layer-packet,
  html:not(.motion-full) .proof-system__pulse,
  html:not(.motion-full) .proof-boundary__packet,
  html:not(.motion-full) .proof-boundary__blocked,
  html:not(.motion-full) .proof-converge__ring{animation:none!important}
}


/* =====================================================================
   V59 - POLISHED MOTION + RESPONSIVE ALIGNMENT
   Refines V58 without changing the narrative or section order.
   ===================================================================== */

/* ---------- Chapter 02: precision layout ---------- */
.work-anchor--visual .work-anchor__shell{
  gap:20px;
  padding:clamp(18px,2.35vw,28px);
  border-radius:28px;
}
.work-anchor--visual .work-anchor__request{
  min-height:68px;
  gap:24px;
  padding-bottom:18px;
}
.work-anchor--visual .work-anchor__request>div{min-width:0}
.work-anchor--visual .work-anchor__request>div>span{
  max-width:48ch;
  line-height:1.45;
}
.work-anchor--visual .work-anchor__request strong{
  max-width:31ch;
  font-size:clamp(1.03rem,1.55vw,1.3rem);
  line-height:1.15;
}

.work-compare-stage{
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.work-before,.work-after{
  display:grid;
  grid-template-rows:auto minmax(360px,1fr) auto auto;
  min-height:510px;
  padding:17px 17px 15px;
  border-radius:22px;
  isolation:isolate;
}
.work-before{grid-template-rows:auto minmax(360px,1fr) auto}
.work-before header,.work-after header{
  min-height:54px;
  align-items:flex-start;
}
.work-before header>div,.work-after header>div{max-width:68%}
.work-before header strong,.work-after header strong{
  line-height:1.2;
  text-wrap:balance;
}
.work-state{margin-top:2px}

.before-canvas,.after-canvas{
  width:100%;
  min-width:0;
  align-self:center;
}
.before-canvas{
  height:350px;
  margin:4px 0 0;
}
.before-lines{
  inset:24px 0 0;
  height:270px;
}
.before-tool{
  width:clamp(76px,12.5%,92px);
  height:62px;
  padding:9px 10px;
  border-radius:15px;
  transform-origin:50% 60%;
}
.before-tool--1{left:2%;top:132px}
.before-tool--2{left:18.5%;top:54px}
.before-tool--3{left:35%;top:132px}
.before-tool--4{left:51.5%;top:54px}
.before-tool--5{left:68%;top:132px}
.before-tool--6{right:2%;top:54px}
.before-tool.is-past{opacity:.62}
.before-tool.is-active{
  opacity:1;
  transform:translateY(-7px) scale(1.055);
}
.before-tool.is-next{opacity:.88}

.before-packet{
  left:0!important;
  top:0!important;
  width:14px;
  height:14px;
  transform:translate3d(var(--packet-x,0px),var(--packet-y,0px),0);
  transition:transform .76s cubic-bezier(.18,.82,.18,1);
  will-change:transform;
}
.before-context{
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  min-width:176px;
  justify-content:center;
  padding:7px 10px;
  border:1px solid var(--edge-2);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.before-context.is-change{transform:translateX(-50%) translateY(3px)}

.work-before footer,.work-after footer{
  min-height:42px;
  align-content:flex-start;
  align-items:flex-start;
  gap:6px;
}
.work-before footer span,.work-after footer span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  line-height:1.2;
}

.work-transform{
  min-width:64px;
}
.work-transform::before{
  top:12%;bottom:12%;
}
.work-transform span{
  width:54px;height:54px;
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--aqua) 4%,transparent),
    0 0 34px -10px var(--aqua);
}
.work-transform i{
  right:-7px;
  width:38px;
}

.after-canvas{
  height:390px;
  margin:0;
}
.after-request-token{
  position:absolute;
  left:50%;top:6px;
  transform:translateX(-50%) translateY(-7px) scale(.96);
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--peri) 24%,var(--edge));
  border-radius:999px;
  background:color-mix(in srgb,var(--peri) 5%,var(--glass));
  font-family:var(--ff-m);
  font-size:.36rem;
  letter-spacing:.08em;
  color:var(--fg-2);
  opacity:.28;
  z-index:6;
  transition:opacity .45s var(--e),transform .7s cubic-bezier(.18,1.25,.24,1),border-color .45s var(--e);
}
.after-request-token i{
  width:5px;height:5px;border-radius:50%;background:var(--peri);box-shadow:0 0 9px var(--peri)
}
.after-canvas[data-phase="0"] .after-request-token,
.after-canvas[data-phase="1"] .after-request-token{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

.after-system{
  width:94px;
  min-height:56px;
  padding:9px 10px;
}
.after-system--crm{left:3%;top:72px}
.after-system--mail{left:3%;bottom:62px}
.after-system--files{right:3%;top:72px}
.after-system--tasks{right:3%;bottom:62px}
.after-system.is-fed{
  transform:scale(1.055);
}
.after-system.is-complete{
  border-color:color-mix(in srgb,var(--aqua) 20%,var(--edge));
  opacity:.84;
}

.after-feed-packet{
  position:absolute;
  left:0;top:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--aqua);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--aqua) 8%,transparent),0 0 13px var(--aqua);
  opacity:0;
  z-index:5;
  pointer-events:none;
  will-change:transform,opacity;
}
.after-feed-packet.is-running{opacity:1}

.after-ai{
  top:35px;
  min-width:172px;
}
.after-core{
  width:184px;
  height:146px;
  top:51%;
}
.after-core__chips span{
  transition:color .35s var(--e),border-color .35s var(--e),background .35s var(--e),transform .45s cubic-bezier(.2,1.25,.3,1)
}
.after-core__chips span.is-on{
  color:var(--fg);
  border-color:color-mix(in srgb,var(--aqua) 34%,var(--edge));
  background:color-mix(in srgb,var(--aqua) 6%,var(--glass));
  transform:translateY(-1px)
}
.after-result{
  bottom:10px;
  width:min(76%,270px);
  min-width:0;
  padding:9px 10px 9px 27px;
}
.after-result>span{
  max-width:90px;
  text-align:right;
  line-height:1.25;
}

.after-phase-rail{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  padding:9px 3px 1px;
}
.after-phase-rail span{
  position:relative;
  min-width:0;
  padding-top:7px;
  text-align:center;
  font-family:var(--ff-m);
  font-size:.34rem;
  letter-spacing:.06em;
  color:var(--fg-3);
  transition:color .35s var(--e),opacity .35s var(--e);
}
.after-phase-rail span::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:4px;height:4px;border-radius:50%;
  transform:translateX(-50%);
  background:var(--edge);
  transition:background .35s var(--e),box-shadow .35s var(--e),transform .4s cubic-bezier(.2,1.35,.3,1);
}
.after-phase-rail span.is-active{color:var(--fg)}
.after-phase-rail span.is-active::before{
  background:var(--aqua);
  box-shadow:0 0 10px var(--aqua);
  transform:translateX(-50%) scale(1.35);
}
.after-phase-rail span.is-done{color:color-mix(in srgb,var(--fg-3) 78%,var(--aqua))}
.after-phase-rail span.is-done::before{background:color-mix(in srgb,var(--aqua) 65%,var(--edge))}

.work-anchor__promise{
  grid-template-columns:auto auto minmax(0,1fr);
  gap:8px 18px;
  min-height:48px;
}
.work-anchor__promise span{max-width:72ch}

/* ---------- Reality / proof cards ---------- */
.reality-grid--motion{
  gap:14px;
  align-items:stretch;
}
.reality-grid--motion .reality-card{
  display:grid;
  grid-template-rows:auto 190px auto 1fr;
  min-height:366px;
  padding:18px;
  border-radius:22px;
  transform:translateZ(0);
  will-change:transform;
}
.reality-grid--motion .reality-card:focus-visible{
  outline:2px solid color-mix(in srgb,var(--aqua) 72%,var(--peri));
  outline-offset:3px;
}
.reality-grid--motion .reality-card.is-proof-active{
  transform:translateY(-4px) scale(1.008);
}
.reality-card__top{
  min-height:22px;
}
.reality-card__top span{
  max-width:70%;
  text-align:right;
  line-height:1.25;
}
.proof-visual{
  height:176px;
  margin-top:12px;
  align-self:start;
}
.reality-grid--motion .reality-card h3{
  margin:14px 0 6px;
  min-height:2.05em;
  display:flex;
  align-items:flex-end;
  font-size:1.02rem;
  line-height:1.08;
}
.reality-grid--motion .reality-card p{
  margin:0;
  align-self:start;
  font-size:.76rem;
  line-height:1.52;
}

/* subtle non-active depth, not disabled-looking */
.reality-grid--motion .reality-card:not(.is-proof-active){opacity:.92}
.reality-grid--motion .reality-card.is-proof-active .proof-visual{
  border-color:color-mix(in srgb,var(--aqua) 20%,var(--edge));
}

/* tighten individual proof visuals */
.proof-layer{width:78%}
.proof-layer--device{width:62%}
.proof-route__request{left:12px}
.proof-route__paths{right:10px}
.proof-system__core{width:68px;height:68px}
.proof-approval__gate{width:98px}
.proof-boundary__inside{width:57%}
.proof-converge__core{width:104px;height:80px}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .work-compare-stage{grid-template-columns:1fr}
  .work-before,.work-after{min-height:0}
  .work-transform{
    height:56px;
    min-width:0;
  }
  .work-transform::before{
    top:50%;bottom:auto;left:10%;right:10%;
    width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--edge),transparent)
  }
  .work-transform i{
    right:50%;top:50%;
    width:1px;height:34px;
    background:linear-gradient(transparent,var(--aqua));
    animation:none
  }
  .work-transform span{width:48px;height:48px}
  .before-canvas{height:320px}
  .after-canvas{height:390px}
}

/* ---------- Mobile: cards become clean vertical stories ---------- */
@media(max-width:700px){
  .work-anchor--visual{
    padding-top:6px;
    padding-bottom:46px;
  }
  .work-anchor--visual .wrap{padding-left:12px;padding-right:12px}
  .work-anchor--visual .work-anchor__shell{
    padding:15px 12px 14px;
    border-radius:22px;
    gap:15px;
  }
  .work-anchor--visual .work-anchor__request{
    min-height:0;
    padding:0 3px 14px;
    gap:7px;
  }
  .work-anchor--visual .work-anchor__request>div>span{font-size:.72rem}
  .work-anchor--visual .work-anchor__request strong{
    font-size:1.02rem;
    max-width:none;
  }

  .work-compare-stage{gap:6px}
  .work-before,.work-after{
    padding:14px 12px 12px;
    border-radius:18px;
  }
  .work-before header,.work-after header{
    min-height:62px;
    gap:8px;
  }
  .work-before header>div,.work-after header>div{max-width:65%}
  .work-before header strong,.work-after header strong{font-size:.9rem}
  .work-state{font-size:.36rem}

  .before-canvas{
    height:384px;
    margin-top:0;
  }
  .before-lines{display:none}
  .before-tool{
    width:calc(50% - 17px);
    height:60px;
    border-radius:13px;
  }
  .before-tool--1{left:2px;top:22px}
  .before-tool--2{left:auto;right:2px;top:22px}
  .before-tool--3{left:2px;top:112px}
  .before-tool--4{left:auto;right:2px;top:112px}
  .before-tool--5{left:2px;top:202px}
  .before-tool--6{left:auto;right:2px;top:202px}
  .before-context{
    bottom:47px;
    min-width:0;
    max-width:92%;
    width:max-content;
    padding:6px 9px;
  }
  .work-before footer,.work-after footer{
    min-height:0;
    padding-top:9px;
  }
  .work-before footer span,.work-after footer span{
    font-size:.49rem;
    min-height:24px;
  }

  .after-canvas{height:430px}
  .after-request-token{top:4px}
  .after-system{
    width:86px;
    min-height:54px;
    padding:8px;
  }
  .after-system--crm{left:0;top:68px}
  .after-system--files{right:0;top:68px}
  .after-system--mail{left:0;bottom:72px}
  .after-system--tasks{right:0;bottom:72px}
  .after-ai{
    top:34px;
    min-width:154px;
    padding-right:9px;
  }
  .after-core{
    width:154px;
    height:132px;
    top:50%;
  }
  .after-core>strong{font-size:1.34rem}
  .after-result{
    width:calc(100% - 12px);
    bottom:6px;
  }
  .after-result>span{
    max-width:82px;
    font-size:.42rem;
  }
  .after-phase-rail{
    gap:1px;
    padding:8px 0 0;
  }
  .after-phase-rail span{
    font-size:.29rem;
    letter-spacing:.035em;
  }
  .work-anchor__promise{
    grid-template-columns:1fr;
    gap:3px;
    padding:13px 3px 2px;
  }
  .work-anchor__promise strong{font-size:.96rem}
  .work-anchor__promise span{font-size:.72rem}

  .reality-section .wrap{padding-left:14px;padding-right:14px}
  .reality-grid--motion{
    grid-template-columns:1fr;
    gap:12px;
  }
  .reality-grid--motion .reality-card{
    grid-template-rows:auto 172px auto auto;
    min-height:0;
    padding:15px;
    border-radius:19px;
  }
  .reality-grid--motion .reality-card.is-proof-active{
    transform:translateY(-2px) scale(1.003);
  }
  .proof-visual{
    height:158px;
    margin-top:10px;
  }
  .reality-grid--motion .reality-card h3{
    min-height:0;
    margin:12px 0 6px;
    font-size:1rem;
  }
  .reality-grid--motion .reality-card p{
    font-size:.75rem;
  }
  .reality-card__top span{font-size:.34rem}
}

/* very narrow phones */
@media(max-width:380px){
  .work-before header>div,.work-after header>div{max-width:61%}
  .work-state{font-size:.33rem;letter-spacing:.045em}
  .after-system{width:78px}
  .after-core{width:146px}
  .after-ai{min-width:146px}
  .proof-route__paths{width:64px}
}

/* reduced / paused motion still presents a complete static state */
html.motion-paused .before-tool,
html.motion-reduced .before-tool{transition:none!important}
html.motion-paused .before-packet,
html.motion-reduced .before-packet,
html.motion-paused .after-feed-packet,
html.motion-reduced .after-feed-packet{transition:none!important;animation:none!important}
html.motion-paused .after-core__halo,
html.motion-reduced .after-core__halo{animation:none!important}


/* =====================================================================
   V60 - READABLE VISUAL SCALE + ANIMATION OPTIMIZATION
   Makes the two new motion sections readable at normal viewing distance
   while reducing off-screen animation and paint cost.
   ===================================================================== */

/* -------------------- PERFORMANCE GATING -------------------- */
.work-before,.work-after,.proof-visual{
  contain:layout paint;
}
.before-context{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:color-mix(in srgb,var(--bg) 92%,var(--glass));
}
.before-packet,.after-feed-packet,.reality-grid--motion .reality-card{
  will-change:auto;
}
.work-anchor__shell.is-motion-live .before-packet,
.work-anchor__shell.is-motion-live .after-feed-packet,
.reality-grid--motion.is-motion-live .reality-card.is-proof-active{
  will-change:transform;
}

/* pause all autonomous CSS motion unless the section is actually visible */
.work-anchor__shell:not(.is-motion-live) .before-travel,
.work-anchor__shell:not(.is-motion-live) .after-lines path,
.work-anchor__shell:not(.is-motion-live) .after-core__halo,
.work-anchor__shell:not(.is-motion-live) .work-transform i,
.reality-grid--motion:not(.is-motion-live) .reality-card *{
  animation-play-state:paused!important;
}
.work-anchor__shell.is-motion-live .before-travel,
.work-anchor__shell.is-motion-live .after-lines path,
.work-anchor__shell.is-motion-live .after-core__halo,
.work-anchor__shell.is-motion-live .work-transform i,
.reality-grid--motion.is-motion-live .reality-card *{
  animation-play-state:running;
}

/* -------------------- CHAPTER 02 SCALE -------------------- */
.work-anchor--visual .work-anchor__shell{
  padding:clamp(22px,2.65vw,34px);
}
.work-anchor--visual .work-anchor__request{
  min-height:78px;
}
.work-anchor--visual .work-anchor__request small{
  font-size:.68rem;
}
.work-anchor--visual .work-anchor__request>div>span{
  font-size:.9rem;
  max-width:54ch;
}
.work-anchor--visual .work-anchor__request strong{
  font-size:clamp(1.18rem,1.9vw,1.52rem);
  max-width:32ch;
}

.work-before,.work-after{
  min-height:570px;
  padding:20px 20px 17px;
}
.work-before{
  grid-template-rows:auto minmax(405px,1fr) auto;
}
.work-after{
  grid-template-rows:auto minmax(405px,1fr) auto auto;
}

.work-before header,.work-after header{
  min-height:66px;
}
.work-before header small,.work-after header small{
  font-size:.62rem;
}
.work-before header strong,.work-after header strong{
  font-size:1.16rem;
  line-height:1.18;
}
.work-state{
  font-size:.5rem;
  letter-spacing:.075em;
}
.work-state i{
  width:7px;height:7px;
}

.before-canvas{
  height:405px;
}
.before-lines{
  inset:34px 0 0;
  height:305px;
}
.before-tool{
  width:clamp(94px,14.3%,118px);
  height:74px;
  padding:11px 12px;
  border-radius:17px;
}
.before-tool i{
  right:8px;top:7px;
  font-size:.48rem;
}
.before-tool b{
  font-size:.94rem;
  line-height:1.1;
}
.before-tool small{
  margin-top:2px;
  font-size:.66rem;
  line-height:1.15;
}
.before-tool--1{left:1%;top:158px}
.before-tool--2{left:17.5%;top:66px}
.before-tool--3{left:34%;top:158px}
.before-tool--4{left:50.5%;top:66px}
.before-tool--5{left:67%;top:158px}
.before-tool--6{right:1%;top:66px}
.before-tool.is-active{
  transform:translateY(-8px) scale(1.065);
}

.before-packet{
  width:17px;height:17px;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--coral) 10%,transparent),0 0 24px var(--coral);
}
.before-packet span{
  width:5px;height:5px;left:6px;top:6px;
}
.before-context{
  bottom:6px;
  min-width:210px;
  min-height:34px;
  padding:8px 13px;
  gap:10px;
  font-size:.7rem;
}
.before-context b{
  font-size:.56rem;
}

.work-before footer,.work-after footer{
  min-height:48px;
  gap:7px;
}
.work-before footer span,.work-after footer span{
  min-height:30px;
  padding:6px 9px;
  font-size:.61rem;
}

.work-transform span{
  width:64px;height:64px;
  font-size:.48rem;
  letter-spacing:.09em;
}
.work-transform i{
  width:44px;
}

.after-canvas{
  height:430px;
}
.after-request-token{
  top:3px;
  padding:8px 12px;
  font-size:.45rem;
}
.after-request-token i{
  width:6px;height:6px;
}

.after-system{
  width:116px;
  min-height:68px;
  padding:11px 12px;
  border-radius:16px;
}
.after-system span{
  font-size:.88rem;
}
.after-system small{
  margin-top:2px;
  font-size:.63rem;
}
.after-system--crm{left:2%;top:84px}
.after-system--files{right:2%;top:84px}
.after-system--mail{left:2%;bottom:74px}
.after-system--tasks{right:2%;bottom:74px}

.after-ai{
  top:38px;
  min-width:220px;
  min-height:48px;
  padding:10px 14px 10px 42px;
}
.after-ai__spark{
  left:14px;top:10px;
  font-size:1.22rem;
}
.after-ai b{
  font-size:.83rem;
}
.after-ai small{
  font-size:.57rem;
}

.after-core{
  width:218px;
  height:170px;
}
.after-core>small{
  font-size:.48rem;
}
.after-core>strong{
  font-size:1.86rem;
}
.after-core>p{
  margin-top:2px;
  font-size:.69rem;
  max-width:20ch;
}
.after-core__chips{
  gap:6px;
  margin-top:8px;
}
.after-core__chips span{
  padding:5px 7px;
  font-size:.45rem;
}

.after-result{
  width:min(82%,330px);
  min-height:54px;
  bottom:8px;
  padding:11px 13px 11px 32px;
}
.after-result>i{
  left:12px;
  width:8px;height:8px;
}
.after-result small{
  font-size:.43rem;
}
.after-result strong{
  font-size:.82rem;
}
.after-result>span{
  max-width:108px;
  font-size:.56rem;
  line-height:1.3;
}

.after-phase-rail{
  padding-top:11px;
}
.after-phase-rail span{
  padding-top:9px;
  font-size:.41rem;
}
.after-phase-rail span::before{
  width:5px;height:5px;
}

.work-anchor__promise{
  min-height:60px;
  padding-top:18px;
}
.work-anchor__promise small{
  font-size:.6rem;
}
.work-anchor__promise strong{
  font-size:1.15rem;
}
.work-anchor__promise span{
  font-size:.88rem;
}

/* -------------------- REALITY PROOF SCALE -------------------- */
.reality-grid--motion{
  gap:16px;
}
.reality-grid--motion .reality-card{
  grid-template-rows:auto 240px auto 1fr;
  min-height:455px;
  padding:22px;
  border-radius:24px;
}
.reality-card__top{
  min-height:28px;
}
.reality-card__top i{
  font-size:.56rem;
}
.reality-card__top span{
  font-size:.5rem;
  letter-spacing:.085em;
}
.proof-visual{
  height:226px;
  margin-top:16px;
  border-radius:18px;
}
.reality-grid--motion .reality-card h3{
  margin:17px 0 8px;
  min-height:2.1em;
  font-size:1.2rem;
  line-height:1.08;
}
.reality-grid--motion .reality-card p{
  font-size:.9rem;
  line-height:1.56;
}

/* Proof 01: layer stack */
.proof-layer{
  width:80%;
  height:40px;
  border-radius:10px;
  gap:9px;
  font-size:.57rem;
}
.proof-layer--cloud{top:28px}
.proof-layer--space{top:82px}
.proof-layer--os{top:138px}
.proof-layer--device{top:187px;width:64%}
.proof-layer-packet{
  width:9px;height:9px;
  top:58px;
}
@keyframes proofLayerPacket{
  0%{opacity:0;transform:translate(-50%,0)}
  15%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:translate(-50%,142px)}
}

/* Proof 02: policy route */
.proof-route__request{
  left:14px;
  top:98px;
  padding:8px 10px;
  font-size:.53rem;
  border-radius:10px;
}
.proof-route__gate{
  left:43%;
  top:68px;
  width:68px;
  height:84px;
  border-radius:16px;
}
.proof-route__gate span{
  font-size:.46rem;
}
.proof-route__gate i{
  width:18px;height:18px;
}
.proof-route__gate i::after{
  width:7px;height:3px;left:4px;top:5px;
}
.proof-route__paths{
  right:12px;
  top:25px;
  bottom:25px;
  width:94px;
}
.proof-route__paths span{
  padding:7px 6px;
  font-size:.48rem;
  border-radius:10px;
}
.proof-route__packet{
  width:9px;height:9px;
}

/* Proof 03: existing systems */
.proof-system{
  padding:7px 10px;
  font-size:.5rem;
  border-radius:10px;
}
.proof-system--1{left:22px;top:28px}
.proof-system--2{right:22px;top:28px}
.proof-system--3{left:22px;bottom:28px}
.proof-system--4{right:22px;bottom:28px}
.proof-system__core{
  width:84px;height:84px;
  font-size:1rem;
}
.proof-system__pulse{
  width:8px;height:8px;
}

/* Proof 04: human approval */
.proof-approval__rail{
  left:22px;right:22px;top:112px;
}
.proof-approval__request,.proof-approval__done{
  top:98px;
  padding:7px 9px;
  font-size:.48rem;
  border-radius:10px;
}
.proof-approval__request{left:13px}
.proof-approval__done{right:13px}
.proof-approval__gate{
  top:58px;
  width:122px;
  height:108px;
  border-radius:17px;
}
.proof-approval__gate small{
  font-size:.43rem;
}
.proof-approval__gate b{
  font-size:.74rem;
}
.proof-approval__gate i{
  width:28px;height:28px;
  font-size:.8rem;
}
.proof-approval__packet{
  width:9px;height:9px;
}

/* Proof 05: boundary */
.proof-boundary__inside{
  left:15px;top:24px;bottom:24px;
  width:59%;
  padding:17px;
}
.proof-boundary__inside small{
  font-size:.43rem;
}
.proof-boundary__inside strong{
  font-size:.86rem;
}
.proof-boundary__inside span{
  font-size:.58rem;
}
.proof-boundary__gate{
  left:62%;
  top:88px;
  width:54px;height:54px;
}
.proof-boundary__gate span{
  font-size:.33rem;
}
.proof-boundary__outside{
  right:12px;top:100px;
  font-size:.43rem;
}
.proof-boundary__packet{
  width:9px;height:9px;
  top:112px;
}
.proof-boundary__blocked{
  right:44px;top:142px;
  font-size:.4rem;
}

/* Proof 06: convergence */
.proof-converge__node{
  padding:7px 10px;
  font-size:.49rem;
  border-radius:10px;
}
.proof-converge__node--doc{left:22px;top:28px}
.proof-converge__node--talk{right:22px;top:28px}
.proof-converge__node--agent{left:22px;bottom:28px}
.proof-converge__node--flow{right:22px;bottom:28px}
.proof-converge__core{
  width:126px;
  height:96px;
}
.proof-converge__core span{
  font-size:1.08rem;
}
.proof-converge__core small{
  font-size:.41rem;
}
.proof-converge__ring{
  width:146px;height:112px;
}

/* -------------------- TABLET -------------------- */
@media(max-width:1100px){
  .work-before,.work-after{
    min-height:0;
  }
  .before-canvas{
    height:380px;
  }
  .after-canvas{
    height:430px;
  }
  .work-transform span{
    width:58px;height:58px;
  }

  .reality-grid--motion{
    grid-template-columns:1fr 1fr;
  }
  .reality-grid--motion .reality-card{
    grid-template-rows:auto 225px auto 1fr;
    min-height:430px;
  }
  .proof-visual{
    height:212px;
  }
}

/* -------------------- MOBILE -------------------- */
@media(max-width:700px){
  .work-anchor--visual .work-anchor__shell{
    padding:17px 13px 15px;
  }
  .work-anchor--visual .work-anchor__request small{
    font-size:.57rem;
  }
  .work-anchor--visual .work-anchor__request>div>span{
    font-size:.79rem;
  }
  .work-anchor--visual .work-anchor__request strong{
    font-size:1.08rem;
    line-height:1.2;
  }

  .work-before,.work-after{
    padding:15px 13px 13px;
  }
  .work-before header,.work-after header{
    min-height:68px;
  }
  .work-before header small,.work-after header small{
    font-size:.54rem;
  }
  .work-before header strong,.work-after header strong{
    font-size:.98rem;
  }
  .work-state{
    font-size:.39rem;
  }

  .before-canvas{
    height:410px;
  }
  .before-tool{
    width:calc(50% - 12px);
    height:70px;
    padding:10px 11px;
  }
  .before-tool b{
    font-size:.91rem;
  }
  .before-tool small{
    font-size:.62rem;
  }
  .before-tool i{
    font-size:.43rem;
  }
  .before-tool--1{left:2px;top:22px}
  .before-tool--2{left:auto;right:2px;top:22px}
  .before-tool--3{left:2px;top:119px}
  .before-tool--4{left:auto;right:2px;top:119px}
  .before-tool--5{left:2px;top:216px}
  .before-tool--6{left:auto;right:2px;top:216px}
  .before-context{
    bottom:48px;
    min-height:32px;
    max-width:96%;
    font-size:.64rem;
  }
  .before-context b{
    font-size:.49rem;
  }
  .work-before footer span,.work-after footer span{
    font-size:.55rem;
  }

  .after-canvas{
    height:470px;
  }
  .after-request-token{
    top:3px;
    font-size:.39rem;
  }
  .after-system{
    width:86px;
    min-height:60px;
    padding:9px;
  }
  .after-system span{
    font-size:.79rem;
  }
  .after-system small{
    font-size:.55rem;
  }
  .after-system--crm{left:0;top:78px}
  .after-system--files{right:0;top:78px}
  .after-system--mail{left:0;bottom:86px}
  .after-system--tasks{right:0;bottom:86px}
  .after-ai{
    top:41px;
    min-width:158px;
    min-height:42px;
    padding:8px 9px 8px 34px;
  }
  .after-ai__spark{
    left:10px;top:8px;
    font-size:1rem;
  }
  .after-ai b{
    font-size:.68rem;
  }
  .after-ai small{
    font-size:.47rem;
  }
  .after-core{
    width:150px;
    height:132px;
  }
  .after-core>small{
    font-size:.38rem;
  }
  .after-core>strong{
    font-size:1.42rem;
  }
  .after-core>p{
    font-size:.57rem;
  }
  .after-core__chips span{
    padding:4px 5px;
    font-size:.36rem;
  }
  .after-result{
    width:calc(100% - 10px);
    min-height:55px;
    bottom:7px;
  }
  .after-result strong{
    font-size:.73rem;
  }
  .after-result>span{
    max-width:92px;
    font-size:.48rem;
  }
  .after-phase-rail span{
    font-size:.34rem;
  }
  .work-anchor__promise small{
    font-size:.52rem;
  }
  .work-anchor__promise strong{
    font-size:1rem;
  }
  .work-anchor__promise span{
    font-size:.79rem;
  }

  .reality-grid--motion{
    grid-template-columns:1fr;
    gap:15px;
  }
  .reality-grid--motion .reality-card{
    grid-template-rows:auto 222px auto auto;
    min-height:0;
    padding:18px;
    border-radius:21px;
  }
  .reality-card__top i{
    font-size:.52rem;
  }
  .reality-card__top span{
    font-size:.43rem;
  }
  .proof-visual{
    height:208px;
    margin-top:13px;
  }
  .reality-grid--motion .reality-card h3{
    margin:14px 0 7px;
    font-size:1.12rem;
  }
  .reality-grid--motion .reality-card p{
    font-size:.84rem;
    line-height:1.54;
  }

  /* mobile proof internals remain deliberately large */
  .proof-layer{
    height:36px;
    font-size:.52rem;
  }
  .proof-layer--cloud{top:24px}
  .proof-layer--space{top:72px}
  .proof-layer--os{top:120px}
  .proof-layer--device{top:165px}

  .proof-route__request{
    top:90px;
    font-size:.47rem;
  }
  .proof-route__gate{
    top:62px;
    width:64px;height:78px;
  }
  .proof-route__paths{
    top:22px;bottom:22px;
    width:86px;
  }
  .proof-route__paths span{
    font-size:.43rem;
  }

  .proof-system{
    font-size:.46rem;
  }
  .proof-system__core{
    width:78px;height:78px;
    font-size:.95rem;
  }

  .proof-approval__rail{top:102px}
  .proof-approval__request,.proof-approval__done{
    top:88px;
    font-size:.43rem;
  }
  .proof-approval__gate{
    top:52px;
    width:112px;height:98px;
  }

  .proof-boundary__inside{
    top:19px;bottom:19px;
    width:58%;
    padding:14px;
  }
  .proof-boundary__inside strong{
    font-size:.78rem;
  }
  .proof-boundary__outside{
    top:90px;
    font-size:.39rem;
  }
  .proof-boundary__gate{
    top:78px;
    width:50px;height:50px;
  }

  .proof-converge__node{
    font-size:.44rem;
  }
  .proof-converge__core{
    width:116px;height:90px;
  }
  .proof-converge__core span{
    font-size:1rem;
  }
}

/* smallest phones: preserve legibility before preserving density */
@media(max-width:380px){
  .work-before header>div,.work-after header>div{max-width:58%}
  .work-state{font-size:.35rem}
  .before-tool{width:calc(50% - 9px)}
  .after-system{width:78px}
  .after-system span{font-size:.73rem}
  .after-system small{font-size:.5rem}
  .after-core{width:142px}
  .after-ai{min-width:148px}
  .proof-route__paths{width:74px}
}


/* =====================================================================
   V61 - CONTINUOUS FLOW POLISH
   Fixes core containment, Continuity overlap and step-like motion.
   ===================================================================== */

/* ---------- Chapter 02: TheOS core actually contains its controls ---------- */
.after-canvas{
  height:468px;
}
.after-core{
  width:258px;
  height:258px;
  top:50%;
  padding:42px 30px 36px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  overflow:visible;
}
.after-core__halo{
  inset:-15px;
}
.after-core>small{
  font-size:.48rem;
  line-height:1.15;
}
.after-core>strong{
  margin-top:3px;
  font-size:1.95rem;
  line-height:1;
}
.after-core>p{
  min-height:2.7em;
  margin-top:8px;
  font-size:.7rem;
  line-height:1.35;
  max-width:19ch;
  display:flex;
  align-items:center;
  justify-content:center;
}
.after-core__chips{
  width:100%;
  max-width:190px;
  margin-top:10px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.after-core__chips span{
  flex:0 0 auto;
  padding:5px 8px;
  font-size:.47rem;
  line-height:1;
}
.after-ai{
  top:35px;
}
.after-system--crm,.after-system--files{top:92px}
.after-system--mail,.after-system--tasks{bottom:88px}
.after-result{
  bottom:8px;
}
.after-canvas.is-cycle-resetting .before-packet,
.work-anchor__shell.is-cycle-resetting .before-packet{
  opacity:0!important;
}
.work-anchor__shell.is-cycle-resetting .after-result,
.work-anchor__shell.is-cycle-resetting .after-ai{
  opacity:.12!important;
  transform:translateX(-50%) translateY(8px) scale(.98);
}
.work-anchor__shell.is-cycle-resetting .after-system{
  opacity:.56;
  transform:none!important;
}
.work-anchor__shell.is-cycle-resetting .after-core__chips span{
  opacity:.45;
}

/* ---------- Continuity: preserved context lives INSIDE TheOS ---------- */
.continuity-stage{
  min-height:590px;
}
.continuity-core{
  top:65%;
  width:238px;
  height:238px;
  padding:56px;
  box-sizing:border-box;
  overflow:visible;
}
.continuity-core__brand{
  font-size:1.78rem;
}
.continuity-core>small{
  font-size:.4rem;
  line-height:1.35;
  max-width:12ch;
}
.continuity-preserved{
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.continuity-preserved__item{
  width:40px;
  height:40px;
  border-radius:13px;
  background:rgba(6,17,14,.94);
  box-shadow:0 8px 25px -17px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.01);
}
.continuity-preserved__item svg{
  width:18px;height:18px;
}
.continuity-preserved__item:nth-child(1){
  left:50%;top:14px;transform:translateX(-50%);
}
.continuity-preserved__item:nth-child(2){
  right:14px;top:50%;transform:translateY(-50%);
}
.continuity-preserved__item:nth-child(3){
  left:50%;bottom:14px;transform:translateX(-50%);
}
.continuity-preserved__item:nth-child(4){
  left:14px;top:50%;transform:translateY(-50%);
}
.continuity-stage.is-handoff .continuity-preserved__item{
  animation:continuityInsidePulse 1.18s var(--e-out) both;
}
.continuity-stage.is-handoff .continuity-preserved__item:nth-child(2){animation-delay:.06s}
.continuity-stage.is-handoff .continuity-preserved__item:nth-child(3){animation-delay:.12s}
.continuity-stage.is-handoff .continuity-preserved__item:nth-child(4){animation-delay:.18s}
@keyframes continuityInsidePulse{
  0%{opacity:.62;filter:brightness(.85);scale:.94}
  42%{opacity:1;filter:brightness(1.55) drop-shadow(0 0 7px currentColor);scale:1.08}
  100%{opacity:1;filter:none;scale:1}
}
.continuity-legend{
  top:calc(65% + 137px);
  gap:13px;
}
.continuity-status{
  bottom:18px;
}
.continuity-transfer{
  position:absolute;
  left:0;top:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--aqua);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--aqua) 8%,transparent),0 0 18px var(--aqua);
  opacity:0;
  z-index:5;
  pointer-events:none;
  will-change:transform,opacity;
}
.continuity-transfer::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid color-mix(in srgb,var(--aqua) 32%,transparent);
  border-radius:50%;
}

/* ---------- Reality proof cards: internals flow continuously ---------- */
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-layer-packet{
  animation:proofLayerPacket 2.7s cubic-bezier(.35,0,.2,1) infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-layer--space{
  animation:proofSpaceBreathe 3.8s ease-in-out infinite;
}
@keyframes proofSpaceBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.025);box-shadow:0 13px 30px -24px var(--aqua)}
}

.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-system__pulse--1{animation:sysP1 3.2s .1s var(--e) infinite}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-system__pulse--2{animation:sysP2 3.2s .7s var(--e) infinite}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-system__pulse--3{animation:sysP3 3.2s 1.3s var(--e) infinite}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-system__pulse--4{animation:sysP4 3.2s 1.9s var(--e) infinite}

.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-boundary__packet--inside{
  animation:boundaryInside 2.8s var(--e) infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-boundary__packet--blocked{
  animation:boundaryBlocked 2.8s 1.25s var(--e) infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-boundary__blocked{
  animation:blockedText 2.8s 1.25s var(--e) infinite;
}

.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-converge__ring{
  animation:convergeRing 3.1s ease-in-out infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-converge__node--doc{
  animation:proofConvergeDoc 3.1s ease-in-out infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-converge__node--talk{
  animation:proofConvergeTalk 3.1s ease-in-out infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-converge__node--agent{
  animation:proofConvergeAgent 3.1s ease-in-out infinite;
}
.reality-grid--motion.is-motion-live .reality-card.is-proof-live .proof-converge__node--flow{
  animation:proofConvergeFlow 3.1s ease-in-out infinite;
}
@keyframes proofConvergeDoc{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(36px,30px)}
}
@keyframes proofConvergeTalk{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-36px,30px)}
}
@keyframes proofConvergeAgent{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(36px,-30px)}
}
@keyframes proofConvergeFlow{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-36px,-30px)}
}

/* active is now only emphasis, not the on/off switch for internal animation */
.reality-grid--motion .reality-card.is-proof-active{
  transform:translateY(-4px) scale(1.006);
}
.reality-grid--motion .reality-card:not(.is-proof-active){
  opacity:.96;
}

/* ---------- Mobile containment ---------- */
@media(max-width:700px){
  .after-canvas{
    height:500px;
  }
  .after-core{
    width:188px;
    height:188px;
    padding:28px 17px 24px;
  }
  .after-core>small{font-size:.38rem}
  .after-core>strong{font-size:1.5rem}
  .after-core>p{
    min-height:2.6em;
    margin-top:5px;
    font-size:.56rem;
    max-width:18ch;
  }
  .after-core__chips{
    max-width:156px;
    gap:4px;
    margin-top:7px;
  }
  .after-core__chips span{
    padding:4px 5px;
    font-size:.34rem;
  }
  .after-system--crm,.after-system--files{top:83px}
  .after-system--mail,.after-system--tasks{bottom:92px}

  .continuity-stage{
    min-height:665px;
  }
  .continuity-core{
    top:70%;
    width:190px;
    height:190px;
    padding:44px;
  }
  .continuity-core__brand{font-size:1.46rem}
  .continuity-core>small{font-size:.33rem}
  .continuity-preserved__item{
    width:32px;height:32px;border-radius:10px;
  }
  .continuity-preserved__item svg{width:15px;height:15px}
  .continuity-preserved__item:nth-child(1){top:11px}
  .continuity-preserved__item:nth-child(2){right:11px}
  .continuity-preserved__item:nth-child(3){bottom:11px}
  .continuity-preserved__item:nth-child(4){left:11px}
  .continuity-legend{
    top:calc(70% + 109px);
    gap:7px;
  }
  .continuity-status{
    bottom:14px;
  }

  /* only the viewport-active proof runs full internal loops on phone */
  .reality-grid--motion.is-motion-live .reality-card:not(.is-proof-live) *{
    animation-play-state:paused!important;
  }
}

@media(min-width:1400px){
  .continuity-stage{min-height:590px}
}


/* V62 audit corrections */
.continuity-transfer{
  transform-origin:center;
}
.proof-route__packet,.proof-approval__packet{
  left:0!important;
  top:0!important;
  will-change:transform,opacity;
}
.work-anchor__shell.is-cycle-resetting .before-context{
  opacity:.38;
}


/* V63 tactile press response */
.reality-card,
.path-story__cards article,
.before-tool,
.after-system,
.continuity-device,
.experience-request,
.experience-engine,
.experience-result{
  -webkit-tap-highlight-color:transparent;
}
.reality-card:active,
.path-story__cards article:active,
.before-tool:active,
.after-system:active,
.continuity-device:active{
  scale:.994;
}
@media(hover:hover) and (pointer:fine){
  .reality-card,.path-story__cards article,.before-tool,.after-system,.continuity-device{cursor:pointer}
}
@media(prefers-reduced-motion:reduce){
  .reality-card:active,
  .path-story__cards article:active,
  .before-tool:active,
  .after-system:active,
  .continuity-device:active{scale:1!important}
}


.home-inline-0{margin-top:12px}
.home-inline-1{--i:0}
.home-inline-2{--i:1}
.home-inline-3{--i:2}
.home-inline-4{--i:3}
.home-inline-5{--i:0}
.home-inline-6{--i:1}
.home-inline-7{--i:2}
.home-inline-8{--i:3}
.home-inline-9{margin:18px 0}
.home-inline-10{margin-top:26px}
.home-inline-11{--tint:var(--aqua)}
.home-inline-12{--tint:var(--coral)}
.home-inline-13{--tint:var(--violet)}
.home-inline-14{--i:0}
.home-inline-15{--i:1}
.home-inline-16{--i:2}
.home-inline-17{--i:3}
.home-inline-18{--i:0}
.home-inline-19{--i:1}
.home-inline-20{--i:2}
.home-inline-21{--i:3}
.home-inline-22{margin-bottom:22px}
.home-inline-23{margin-bottom:12px}
.home-inline-24{max-width:34ch;margin-top:12px}