@font-face{font-family:"FluidHand";src:url("https://ik.imagekit.io/fluid/980191006/fc-fluidhand_P4ldC7L9M.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"FLFontBold";src:url("https://ik.imagekit.io/fluid/980191006/flfontbold_-adO32i1x.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#07080a; --bg2:#0d0f13; --ink:#eeede8; --dim:#9a9fa8; --line:rgba(255,255,255,.09);
    --accent:#077bff; --accent-2:#5aa8ff; --accent-soft:rgba(7,123,255,.14);
    --panel:#0e1117; --faint:#4b505a; --blue-2:#5aa8ff;
    /* The house data/label face (brand index §6). This is the ONLY place --mono
       is defined; it was a terminal monospace stack declared here and again in a
       second :root below, with the restyle block overriding both from the end of
       the file. Three declarations that disagreed rendered correctly but read as
       a bug to anyone grepping, and would have flipped back the moment a rule
       landed after the override. */
    --mono:"WeHaas","Neue Haas Display","Helvetica Neue",Helvetica,Arial,sans-serif;
    --paper:#f5f4ef; --paper2:#ecebe4; --ink-d:#141519; --dim-d:#5d6067; --line-d:rgba(20,21,25,.12);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Helvetica,Arial,sans-serif;
    --serif:Georgia,"Times New Roman",serif;
  }
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
  html{overflow-x:clip}
  ::selection{background:var(--accent);color:#fff}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:transparent}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .narrow{max-width:680px;margin:0 auto}

  /* ---------- type ---------- */
  .eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
  h1{font-size:clamp(2.6rem,6.5vw,4.9rem);font-weight:650;letter-spacing:-.03em;line-height:1.04}
  h2{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:650;letter-spacing:-.025em;line-height:1.08}
  .h3sub{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:450;letter-spacing:-.015em;line-height:1.15;color:var(--muted,var(--dim))}
  .lead{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55}
  .litany p{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.45;margin:.55em 0;color:var(--muted,var(--dim))}
  .litany p strong{color:inherit}
  .litany .turn{color:var(--text,var(--ink));font-weight:550}
  .bigline{font-family:var(--sans);font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.18}
  .pullquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.3;letter-spacing:-.01em}

  /* ---------- bands ---------- */
  section.band{padding:clamp(88px,11vw,150px) 0;position:relative}
  .band--dark{background:var(--bg);color:var(--ink);--text:var(--ink);--muted:var(--dim);--ln:var(--line)}
  .band--dark2{background:var(--bg2);color:var(--ink);--text:var(--ink);--muted:var(--dim);--ln:var(--line)}
  .band--light{background:var(--paper);color:var(--ink-d);--text:var(--ink-d);--muted:var(--dim-d);--ln:var(--line-d)}
  .band--light2{background:var(--paper2);color:var(--ink-d);--text:var(--ink-d);--muted:var(--dim-d);--ln:var(--line-d)}
  .band .eyebrow{color:var(--accent)}
  .kicker{display:block;margin-bottom:22px}
  .sec-head{margin-bottom:clamp(36px,5vw,64px)}
  hr.rule{border:0;border-top:1px solid var(--ln);margin:clamp(40px,6vw,72px) 0}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:.98rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
  .btn:hover{transform:translateY(-1px)}
  .btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 30px -8px rgba(7,123,255,.55)}
  .btn--primary:hover{box-shadow:0 12px 36px -8px rgba(7,123,255,.7)}
  .btn--ghost{border-color:var(--ln);color:var(--text)}
  .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn--sm{padding:9px 16px;font-size:.85rem}

/* ---- GLOBAL PASS · the bespoke mega-dropdown nav was deleted here ----
   The `nav{position:fixed}` ELEMENT selector that led this block is why it
   had to go rather than just be left dead: the canonical chassis puts a real
   <nav class="nav-actions"> inside the header, and an element-wide
   `position:fixed` would have ripped the link row out of the bar. The
   `.tdd-*` panel, its thumbnails, its stagger animation and the last
   hardcoded "SF Mono" on this page went with it. */
  /* ---------- hero ---------- */
  .hero{min-height:86svh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:116px 0 38px;background:
    radial-gradient(1100px 640px at 50% -18%,rgba(7,123,255,.17),transparent 62%),
    radial-gradient(700px 420px at 50% 118%,rgba(7,123,255,.07),transparent 60%),
    var(--bg)}
  #heroParticles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .hero-inner{position:relative;z-index:2;max-width:1020px;margin:0 auto;padding:0 24px;will-change:transform}
  .hero .eyebrow{margin-bottom:30px;display:block}
  .hero h1{font-size:clamp(2.35rem,5.4vw,4.7rem);letter-spacing:-.035em;line-height:1.05}
  .hero h1 .rot{color:var(--accent);display:inline-block;will-change:transform,opacity}
  .hero h1 .rot.anim{animation:rotin .55s cubic-bezier(.2,.75,.25,1)}
  @keyframes rotin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero .tell{margin-top:26px;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:450;color:var(--dim);letter-spacing:-.01em}
  .hero-ctas{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
  .trust{margin-top:22px;font-size:.9rem;color:var(--dim)}
  .trust span{color:var(--ink)}
  .scrollcue{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:1px;height:76px;background:rgba(255,255,255,.1);overflow:hidden;z-index:2}
  .scrollcue::after{content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;background:linear-gradient(180deg,transparent,var(--accent));animation:cue 2.4s cubic-bezier(.55,0,.3,1) infinite}
  @keyframes cue{to{top:115%}}
  @media(prefers-reduced-motion:reduce){.scrollcue::after{animation:none}}

  /* card hover physics */
  .card,.cmdcard,.excard{transition:transform .25s ease,box-shadow .25s ease}
  .card:hover,.cmdcard:hover,.excard:hover{transform:translateY(-4px)}
  .band--light .card:hover,.band--light2 .card:hover,.cmdcard:hover{box-shadow:0 26px 48px -22px rgba(20,21,25,.28)}
  .band--dark .card:hover,.band--dark2 .card:hover,.excard:hover{box-shadow:0 26px 48px -22px rgba(0,0,0,.8)}

  /* ---------- cinematic ---------- */
  #openingFx{position:fixed;inset:0;z-index:7;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;filter:saturate(.88) contrast(1.02);will-change:opacity}
  #cinema{position:relative;height:580vh;background:#05070b;isolation:isolate}
  .cinema-sticky{--entry:0;position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 48%,rgba(36,74,129,.11),transparent 38%),radial-gradient(ellipse at 72% 22%,rgba(64,91,138,.055),transparent 30%),#05070b;perspective:1400px;will-change:opacity}
  .cinema-sticky.is-preenter{position:fixed;inset:0;width:100%}
  .cinema-sticky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,11,.28),transparent 23%,transparent 72%,rgba(5,7,11,.5))}
  .cinema-sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 180px 54px rgba(0,0,0,.72)}
  #particles{position:absolute;inset:-4%;z-index:0;width:108%;height:108%;filter:saturate(.9) contrast(1.02);transform:scale(calc(1 + var(--entry)*.055));transform-origin:50% 50%;will-change:transform}
  .cinema-gate{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(1 - var(--entry));transform-style:preserve-3d}
  .cinema-gate::before,.cinema-gate::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none}
  .cinema-gate::before{width:min(38vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(228,240,255,.18) 0,rgba(98,146,213,.065) 18%,rgba(34,74,132,.025) 42%,transparent 70%);filter:blur(4px);transform:translate(-50%,-50%) translateZ(calc(var(--entry)*180px)) scale(calc(.48 + var(--entry)*1.05));opacity:calc((1 - var(--entry))*.7)}
  .cinema-gate::after{width:min(72vw,980px);height:min(29vw,350px);border:1px solid rgba(163,195,235,.13);border-radius:50%;background:transparent;box-shadow:0 0 70px rgba(75,126,194,.045),inset 0 0 70px rgba(75,126,194,.025);transform:translate(-50%,-50%) translateZ(calc(var(--entry)*220px)) rotate(-7deg) scale(calc(.58 + var(--entry)*.72));opacity:calc((1 - var(--entry))*.72)}
  .cinema-systems{position:absolute;inset:-4%;z-index:1;pointer-events:none;perspective:1600px;transform:scale(calc(1 + var(--entry)*.055));transform-origin:50% 50%;transform-style:preserve-3d;overflow:hidden;will-change:transform}
  .cinema-systems::before{content:"";position:absolute;left:50%;top:50%;width:min(84vw,1160px);height:min(54vw,680px);translate:-50% -50%;border:1px solid rgba(157,197,241,.055);border-radius:50%;box-shadow:0 0 92px rgba(58,126,207,.04),inset 0 0 92px rgba(58,126,207,.025);opacity:var(--system-field-o,0);transform:rotateX(67deg) rotateZ(-7deg);transition:opacity .2s linear}
  .cinema-systems .journey-node{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;transform-style:preserve-3d}
  .cinema-systems .journey-node-body{filter:drop-shadow(0 18px 32px rgba(0,0,0,.62));transform:rotateX(var(--node-tilt-x,0deg)) rotateY(var(--node-tilt-y,0deg));transition:filter .25s linear}
  .cinema-systems .system-planet-icon{width:clamp(42px,4.4vw,58px);height:clamp(42px,4.4vw,58px);box-shadow:0 18px 42px -18px rgba(0,0,0,.96),0 0 30px color-mix(in srgb,var(--pc,#77b5ff) 26%,transparent),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 20px rgba(0,0,0,.16)}
  .cinema-systems .system-planet-icon svg{width:44%;height:44%}
  .cinema-systems .system-planet-name{opacity:var(--label-o,1);font-size:clamp(.6rem,.86vw,.76rem);transition:opacity .2s linear}
  .cinema-systems .journey-node.is-cell .system-planet-name{display:none}
  .cinema-systems .journey-node.is-complete .system-planet-icon{box-shadow:0 14px 34px -16px rgba(0,0,0,.98),0 0 24px color-mix(in srgb,var(--pc,#77b5ff) 38%,transparent),0 0 0 1px color-mix(in srgb,var(--pc,#77b5ff) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
  .act{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;padding:0 24px;will-change:opacity,transform}
  .act-inner{max-width:780px;padding:40px 44px;text-shadow:0 10px 44px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.7);transform-style:preserve-3d;will-change:transform,filter}
  .act h3{font-size:clamp(2.15rem,5vw,3.85rem);font-weight:680;letter-spacing:-.035em;line-height:1.04;color:#f7f7f4}
  .act p{max-width:620px;margin:22px auto 0;font-size:clamp(1.02rem,1.55vw,1.2rem);color:#aeb5c2;line-height:1.62}
  .act[data-act="0"] .act-inner{width:min(1180px,100%);max-width:none}
  .act[data-act="0"] h3{font-size:clamp(2.55rem,6vw,5.4rem);line-height:.96;width:100%;max-width:1100px;margin:0 auto}
  .act[data-act="0"] .work-word{display:inline-block;color:#fff;text-shadow:0 0 28px rgba(90,169,255,.55),0 0 84px rgba(7,123,255,.3)}
  .act[data-act="3"]{align-items:center;padding-top:0}
  .act[data-act="3"] .act-inner{max-width:680px;padding:40px 44px}
  .act[data-act="4"]{align-items:center;padding-top:0;padding-bottom:38vh}
  .act[data-act="4"] .act-inner{padding:40px 44px}
  .cinema-hint{position:absolute;z-index:3;bottom:28px;left:50%;transform:translateX(-50%);color:#8e97a6;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
  @media(max-width:640px){
    #cinema{height:540vh}
    .cinema-sticky::after{box-shadow:inset 0 0 92px 24px rgba(0,0,0,.76)}
    .act-inner{padding:32px 8px}
    .act h3{font-size:clamp(2.2rem,11vw,3.2rem)}
    .act p{font-size:1rem}
    .act[data-act="0"] h3{font-size:clamp(2.4rem,12.5vw,3.45rem)}
    .act[data-act="3"]{padding-top:0}
    .act[data-act="4"]{padding-top:0;padding-bottom:36vh}
    .cinema-systems .system-planet-icon{width:38px;height:38px}
    .cinema-systems .system-planet-name{display:none}
  }

  /* ---------- connected platform universe ---------- */
  .platform-universe{position:relative;padding:clamp(110px,14vw,190px) 0 clamp(120px,15vw,210px);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 48%,rgba(54,99,160,.12),transparent 32%),linear-gradient(180deg,#05070b,#07080a 82%)}
  .platform-universe::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.62;background:radial-gradient(circle at 8% 18%,rgba(231,241,255,.72) 0 1px,transparent 2px),radial-gradient(circle at 19% 74%,rgba(137,177,226,.58) 0 1px,transparent 2px),radial-gradient(circle at 31% 11%,rgba(255,246,231,.62) 0 1px,transparent 2px),radial-gradient(circle at 43% 83%,rgba(210,229,252,.55) 0 1px,transparent 2px),radial-gradient(circle at 59% 16%,rgba(219,235,253,.65) 0 1px,transparent 2px),radial-gradient(circle at 72% 72%,rgba(255,237,215,.55) 0 1px,transparent 2px),radial-gradient(circle at 87% 27%,rgba(181,213,249,.66) 0 1px,transparent 2px),radial-gradient(circle at 93% 81%,rgba(235,242,251,.58) 0 1px,transparent 2px)}
  .system-intro{text-align:center;max-width:850px;margin:0 auto}
  .system-intro .display{max-width:15ch;margin:0 auto}
  .system-intro .quiet{max-width:690px;margin:clamp(24px,3vw,36px) auto 0}
  .system-map{position:relative;width:min(1160px,100%);height:clamp(620px,65vw,760px);margin:clamp(58px,8vw,96px) auto 0;isolation:isolate}
  .system-map::before{content:"";position:absolute;left:50%;top:50%;width:min(46vw,540px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(151,191,238,.13),rgba(70,116,177,.04) 34%,transparent 68%);filter:blur(2px);animation:systemBreath 7s ease-in-out infinite}
  .system-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .system-lines ellipse{fill:none;stroke:rgba(170,202,239,.12);stroke-width:1}
  .system-lines ellipse:nth-of-type(2){stroke:rgba(170,202,239,.08);stroke-dasharray:4 10}
  .system-lines ellipse:nth-of-type(3){stroke:rgba(255,255,255,.055)}
  .system-rays line{stroke:rgba(151,190,235,.12);stroke-width:1;stroke-dasharray:2 8;animation:systemSignal 14s linear infinite}
  .system-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(150px,16vw,188px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;color:#fff;background:radial-gradient(circle at 42% 32%,rgba(44,138,255,.34),rgba(7,34,74,.95) 52%,rgba(5,10,18,.98) 72%);border:1px solid rgba(176,211,250,.26);box-shadow:0 0 0 20px rgba(83,139,207,.025),0 0 90px rgba(39,127,235,.26),inset 0 1px 0 rgba(255,255,255,.22);z-index:3}
  .system-core::after{content:"";position:absolute;inset:-22%;border:1px solid rgba(162,200,244,.1);border-radius:50%;box-shadow:0 0 52px rgba(72,139,220,.08)}
  .system-core-mark{width:58px;height:58px;border-radius:8px;display:grid;place-items:center;margin-bottom:12px;background:#077bff;box-shadow:0 12px 36px rgba(7,123,255,.34);font-size:1.7rem;font-weight:750}
  .system-core strong{font-size:1.2rem;letter-spacing:-.02em}
  .system-core span{margin-top:4px;color:#aeb9c8;font-size:.72rem;letter-spacing:.06em}
  .system-planet{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;justify-items:center;gap:10px;transform:translate(-50%,-50%);animation:systemFloat var(--dur,7s) ease-in-out infinite var(--delay,0s)}
  .system-planet-icon{position:relative;width:clamp(54px,5.2vw,66px);height:clamp(54px,5.2vw,66px);border-radius:8px;display:grid;place-items:center;isolation:isolate;overflow:hidden;color:#fff;background-image:linear-gradient(155deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.035) 29%,rgba(1,5,12,.12) 58%,rgba(1,4,10,.48) 100%),radial-gradient(circle at 28% 18%,rgba(255,255,255,.2),transparent 34%),var(--art,linear-gradient(145deg,color-mix(in srgb,var(--pc,#77b5ff) 34%,#151a22),#080b10));background-position:center,center,var(--art-pos,50% 50%);background-size:cover,cover,var(--art-size,cover);background-repeat:no-repeat;border:1px solid rgba(255,255,255,.27);box-shadow:0 22px 48px -19px rgba(0,0,0,.98),0 0 34px color-mix(in srgb,var(--pc,#77b5ff) 22%,transparent),0 0 0 1px rgba(255,255,255,.035),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -12px 24px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .system-planet-icon::before{content:"";position:absolute;z-index:0;left:-20%;top:-32%;width:86%;height:66%;border-radius:50%;background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.38) 48%,transparent 76%);filter:blur(5px);rotate:-18deg;opacity:.58;mix-blend-mode:screen}
  .system-planet-icon::after{content:"";position:absolute;z-index:3;inset:2px;border:1px solid rgba(255,255,255,.2);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 8px 15px rgba(255,255,255,.025);pointer-events:none}
  .system-planet-icon svg{position:relative;z-index:2;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.58)) drop-shadow(0 0 6px rgba(255,255,255,.2))}
  .system-planet[data-product="mist"] .system-planet-icon svg,.journey-node[data-product="mist"] .system-planet-icon svg{width:30px;height:30px}
  .system-planet-name{font-size:clamp(.72rem,1.1vw,.88rem);font-weight:600;letter-spacing:0;color:#dce2ea;white-space:nowrap;text-shadow:0 3px 14px #000}
  .system-planet:hover{z-index:5;animation-play-state:paused}
  .system-planet:hover .system-planet-icon{transform:translateY(-6px) scale(1.06);box-shadow:0 26px 54px -18px rgba(0,0,0,.95),0 0 38px color-mix(in srgb,var(--pc,#77b5ff) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
  .system-map:has(.system-planet:hover) .system-planet:not(:hover){opacity:.42}
  .system-map .system-planet{transition:opacity .3s ease}
  @keyframes systemFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}}
  @keyframes systemBreath{0%,100%{scale:.94;opacity:.7}50%{scale:1.04;opacity:1}}
  @keyframes systemSignal{to{stroke-dashoffset:-80}}
  @media(max-width:700px){
    .platform-universe{padding:100px 0 118px}
    .system-map{height:auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:190px 12px 0;margin-top:48px}
    .system-map::before{top:80px;width:240px}
    .system-lines{top:0;height:170px}
    .system-lines ellipse{transform-origin:50% 50%;transform:scale(.45)}
    .system-rays{display:none}
    .system-core{top:78px;width:138px}
    .system-core-mark{width:48px;height:48px;margin-bottom:9px;font-size:1.35rem}
    .system-core strong{font-size:1rem}.system-core span{font-size:.62rem}
    .system-planet{position:relative;left:auto!important;top:auto!important;transform:none!important;animation:none;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.025)}
    .system-planet-icon{width:46px;height:46px;flex:0 0 46px}
    .system-planet-icon::after{inset:2px}
    .system-planet-icon svg{width:22px;height:22px}
    .system-planet-name{font-size:.78rem;white-space:normal;text-align:left}
  }
  @media(prefers-reduced-motion:reduce){.system-map::before,.system-planet,.system-rays line{animation:none}}

  /* ---------- generic cards / grids ---------- */
  .grid{display:grid;gap:18px}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
  .card{border:1px solid var(--ln);border-radius:18px;padding:28px}
  .band--light .card,.band--light2 .card{background:#fff}
  .band--dark .card,.band--dark2 .card{background:rgba(255,255,255,.025)}
  .card h4{font-size:1.15rem;font-weight:650;letter-spacing:-.015em}
  .card p{margin-top:10px;color:var(--muted);font-size:.98rem;line-height:1.6}

  /* command cards (section 4) */
  .cmdcard{border:1px solid var(--ln);border-radius:20px;padding:clamp(24px,3.4vw,36px);background:#fff;display:flex;flex-direction:column}
  .cmdcard .said{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.35;letter-spacing:-.01em}
  .cmdcard .said::before{content:"→ ";font-family:var(--sans);font-style:normal;color:var(--accent);font-weight:700}
  .cmdcard .res{margin-top:18px;color:var(--muted);font-size:.97rem;line-height:1.65}
  .cmdcard .res b{color:var(--text);font-weight:600}
  .cmdcard .chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;list-style:none}
  .cmdcard .chips li{font-size:.85rem;border:1px solid var(--ln);border-radius:8px;padding:5px 11px;color:var(--text);background:var(--paper)}
  .cmdcard .verdict{margin-top:16px;font-weight:600;font-size:.95rem}
  .cmdcard .fbtns{margin-top:auto;padding-top:22px;display:flex;gap:8px;flex-wrap:wrap}
  .fbtn{font-size:.83rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--ln);background:transparent;color:var(--text);cursor:pointer}
  .fbtn:first-child{background:var(--ink-d);color:#fff;border-color:var(--ink-d)}
  .band--dark .fbtn,.band--dark2 .fbtn{color:var(--ink)}
  .band--dark .fbtn:first-child,.band--dark2 .fbtn:first-child{background:var(--ink);color:var(--bg);border-color:var(--ink)}

  /* before/with */
  .bw{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
  @media(max-width:820px){.bw{grid-template-columns:1fr}}
  .bw-col{border-radius:20px;padding:clamp(26px,3.5vw,42px)}
  .bw-before{background:#fff;border:1px solid var(--ln)}
  .bw-with{background:var(--ink-d);color:var(--ink);--text:var(--ink);--muted:#a7abb4;--ln:rgba(255,255,255,.1);border:1px solid var(--ink-d);box-shadow:0 30px 70px -30px rgba(20,21,25,.55)}
  .bw-label{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .bw-with .bw-label{color:var(--accent)}
  .bw h3{margin-top:16px;font-size:clamp(1.25rem,2vw,1.55rem);font-weight:650;letter-spacing:-.015em;line-height:1.25}
  .bw ol{margin-top:22px;list-style:none;counter-reset:step}
  .bw ol li{position:relative;padding:9px 0 9px 34px;color:var(--muted);font-size:.97rem;border-bottom:1px dashed var(--ln)}
  .bw ol li:last-child{border-bottom:0}
  .bw ol li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:9px;width:22px;height:22px;border:1px solid var(--ln);border-radius:50%;font-size:.72rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .bw-with ol li::before{border-color:rgba(7,123,255,.5);color:var(--accent)}
  .bw .outcome{margin-top:22px;font-weight:650;font-size:1.05rem;line-height:1.5}
  .bw-before .outcome{color:#b3543f}
  .bw-with .outcome{color:#7de0a6}

  /* ladder */
  .ladder{position:relative;margin-top:10px}
  .ladder::before{content:"";position:absolute;left:23px;top:10px;bottom:10px;width:1px;background:var(--ln)}
  .rung{position:relative;padding:26px 0 26px 76px}
  .rung .n{position:absolute;left:0;top:24px;width:47px;height:47px;border-radius:50%;background:var(--paper);border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:var(--accent)}
  .rung h4{font-size:1.3rem;font-weight:650;letter-spacing:-.015em}
  .rung .rb{margin-top:10px;color:var(--muted);font-size:.98rem;line-height:1.65;max-width:560px}
  .rung .rb b{color:var(--text);font-weight:600}

  /* example grid */
  .excard{background:rgba(255,255,255,.025);border:1px solid var(--ln);border-radius:18px;padding:26px}
  .excard h4{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  .excard ul{margin-top:16px;list-style:none;display:grid;gap:12px}
  .excard li{font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.45;color:var(--ink);padding-left:18px;position:relative}
  .excard li::before{content:"›";font-family:var(--sans);font-style:normal;position:absolute;left:0;color:var(--accent);font-weight:700}

  /* chips cloud */
  .cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
  .cloud span{border:1px solid var(--ln);border-radius:999px;padding:9px 18px;font-size:.93rem;color:var(--muted);transition:color .2s,border-color .2s}
  .cloud span:hover{color:var(--text);border-color:var(--accent)}

  /* contrast pairs (section 9) */
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ln)}
  .pair:last-of-type{border-bottom:1px solid var(--ln)}
  @media(max-width:720px){.pair{grid-template-columns:1fr}}
  .pair>div{padding:26px 28px}
  .pair .cos{color:var(--dim);font-size:1.02rem}
  .pair .flu{font-size:1.08rem;font-weight:550;border-left:1px solid var(--ln)}
  @media(max-width:720px){.pair .flu{border-left:0;padding-top:0}}
  .pair .flu::before{content:"→";display:block;color:var(--accent);margin-bottom:6px;font-weight:700}

  /* FAQ */
  details{border-top:1px solid var(--ln)}
  details:last-of-type{border-bottom:1px solid var(--ln)}
  summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;font-size:clamp(1.08rem,1.8vw,1.3rem);font-weight:600;letter-spacing:-.01em}
  summary::-webkit-details-marker{display:none}
  summary .pm{flex-shrink:0;width:30px;height:30px;border:1px solid var(--ln);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:400;color:var(--muted);transition:transform .3s}
  details[open] summary .pm{transform:rotate(45deg);color:var(--accent);border-color:var(--accent)}
  .faq-a{padding:0 4px 30px;color:var(--muted);max-width:620px;line-height:1.65}
  .faq-a p{margin-bottom:10px}
  .faq-a p:last-child{margin-bottom:0}
  .faq-a b{color:var(--text);font-weight:600}

  /* footer */
  footer{position:relative;background:#050608;border-top:1px solid rgba(255,255,255,.1);padding:clamp(72px,9vw,120px) 0 32px;overflow:hidden}
  /* footer::before (a 2px x 34% blue bar pinned to the footer top) deleted —
     Chey called this out for removal; it was the last thin decorative bar
     on the page. A computed-style scan of every ::before/::after confirms
     no other painted thin bar remains. */
  .foot-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.58fr);gap:clamp(48px,9vw,140px);align-items:end}
  .foot-statement{max-width:12ch;font-size:clamp(2.65rem,5.8vw,5.6rem);font-weight:650;letter-spacing:-.045em;line-height:.98;color:var(--ink)}
  .foot-statement span{display:block;color:#717681}
  .foot-side p{max-width:34ch;color:var(--dim);font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.65}
  .foot-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
  .foot-link{color:var(--ink);font-size:.96rem;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px;transition:color .2s,border-color .2s}
  .foot-link:hover{color:#fff;border-color:var(--accent)}
  .foot-bar{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:clamp(72px,9vw,116px);padding-top:28px;border-top:1px solid var(--line)}
  .foot-brand{display:flex;align-items:center;gap:18px;min-width:0}
  .foot-brand img{display:block;width:auto;height:34px;max-width:190px;object-fit:contain;filter:brightness(0) invert(1)}
  .foot-brand span{color:#656a74;font-size:.78rem;white-space:nowrap}
  .foot-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.5vw,34px);flex-wrap:wrap}
  .foot-nav a{color:var(--dim);font-size:.86rem;text-decoration:none;transition:color .2s}
  .foot-nav a:hover{color:var(--ink)}
  @media(max-width:760px){
    .foot-main{grid-template-columns:1fr;gap:38px}
    .foot-statement{max-width:10ch}
    .foot-bar{align-items:flex-start;flex-direction:column;margin-top:72px}
    .foot-brand{width:100%;justify-content:space-between}
    .foot-nav{justify-content:flex-start;gap:18px 26px}
  }

  /* reveal */
  .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
  .rv.on{opacity:1;transform:none}
  .rv2{transition-delay:.12s}.rv3{transition-delay:.24s}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

  /* ============================================================
     AWWWARDS BUILD — post-hero dark sections
     ============================================================ */
  :root{
    /* --mono deliberately NOT redeclared here — it is defined once at the top. */
    --green:#69d29a; --amber:#e8b34d; --coral:#f27a6d; --faint:#4b505a;
    --panel:#0e1117; --panel2:#12161d;
  }
  .sx{position:relative;padding:clamp(104px,15vw,210px) 0;background:var(--bg);overflow:hidden}
  .sx--lift{background:linear-gradient(180deg,var(--bg) 0%,#0a0c11 50%,var(--bg) 100%)}
  .sx .wrap{position:relative;z-index:2}
  .display{font-size:clamp(2.5rem,6.4vw,5.1rem);font-weight:650;letter-spacing:-.042em;line-height:1.0}
  .display .soft{color:var(--dim);display:block}

  /* --- S1 problem --- */
  .p1 .display{max-width:15ch}
  .p1 .movement{position:relative;white-space:nowrap}
  .p1 .movement::after{content:"";position:absolute;left:0;bottom:.02em;width:100%;height:.085em;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.6,0,.15,1) .35s}
  .p1 .rv.on .movement::after{transform:scaleX(1)}
  .p1 .body{margin:clamp(40px,6vw,70px) 0 0 auto;max-width:660px;font-size:clamp(1.12rem,1.55vw,1.32rem);line-height:1.68;color:var(--dim)}
  .p1 .body b{color:var(--ink);font-weight:500}
  .tag{display:inline-block;font-family:var(--mono);font-size:.8em;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:.04em .48em;margin:.1em .05em;letter-spacing:-.02em;white-space:nowrap}
  .opportunity-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(330px,.96fr);gap:clamp(42px,7vw,94px);align-items:center}
  .opportunity-copy{min-width:0}
  .opportunity-universe{--op-flow:0;--check-o:1;--core-o:0;--core-s:.7;--orbit-o:0;position:relative;min-height:clamp(520px,48vw,650px);perspective:1400px;transform-style:preserve-3d;isolation:isolate}
  .opportunity-universe::before{content:"";position:absolute;inset:10% 5%;z-index:-2;border:1px solid rgba(152,192,237,.11);border-radius:50%;transform:rotate(-9deg);opacity:var(--orbit-o);box-shadow:0 0 110px rgba(54,120,202,.08),inset 0 0 100px rgba(54,120,202,.045)}
  .opportunity-orbits{position:absolute;inset:1%;width:98%;height:98%;z-index:-1;overflow:visible;opacity:var(--orbit-o);transition:opacity .18s linear}
  .opportunity-orbits ellipse{fill:none;vector-effect:non-scaling-stroke}
  .opportunity-core-orbit{stroke:rgba(150,199,255,.3);stroke-width:.52;stroke-dasharray:1.4 2.8;filter:drop-shadow(0 0 2px rgba(70,160,255,.6))}
  .opportunity-atom-shells,.opportunity-atom-traces,.opportunity-electrons{transform-box:view-box;transform-origin:50% 52%}
  .opportunity-atom-shells ellipse{stroke:rgba(146,194,249,.3);stroke-width:.5;filter:drop-shadow(0 0 1.5px rgba(63,145,236,.38))}
  .opportunity-atom-shells ellipse:nth-child(2){stroke:rgba(119,177,242,.25)}
  .opportunity-atom-shells ellipse:nth-child(3){stroke:rgba(177,213,255,.22)}
  .opportunity-atom-traces ellipse{stroke:rgba(151,210,255,.38);stroke-width:.72;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(74,164,255,.5))}
  .opportunity-atom-traces ellipse:nth-child(2){opacity:.78}
  .opportunity-atom-traces ellipse:nth-child(3){opacity:.62}
  .opportunity-electrons circle{fill:#effaff;opacity:.72;filter:drop-shadow(0 0 4px rgba(99,184,255,1)) drop-shadow(0 0 8px rgba(44,137,255,.72))}
  .opportunity-network path{fill:none;stroke:color-mix(in srgb,var(--nc,#8ecbff) 17%,transparent);stroke-width:.34;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1px color-mix(in srgb,var(--nc,#8ecbff) 18%,transparent))}
  .opportunity-network .data-cross{stroke:color-mix(in srgb,var(--nc,#8ecbff) 24%,transparent);stroke-width:.42}
  .opportunity-network-streams{mix-blend-mode:screen}
  .opportunity-network-streams use{fill:none;stroke:var(--nc,#9bd4ff);stroke-width:.66;stroke-linecap:round;stroke-dasharray:2.2 96;stroke-dashoffset:0;vector-effect:non-scaling-stroke;opacity:.5;filter:drop-shadow(0 0 2px var(--nc,#8ecbff)) drop-shadow(0 0 4px rgba(32,128,255,.36));animation:opportunityDataFlow var(--dur,7.5s) linear infinite var(--delay,0s)}
  .opportunity-network-dots circle{fill:var(--nc,#e9f8ff);opacity:.82;filter:drop-shadow(0 0 2px var(--nc,#8ecbff)) drop-shadow(0 0 5px rgba(35,132,255,.52))}
  @keyframes opportunityDataFlow{to{stroke-dashoffset:-98}}
  @media(prefers-reduced-motion:reduce){.opportunity-network-streams,.opportunity-network-dots{display:none}.opportunity-network-streams use{animation:none!important}}
  .opportunity-check{position:absolute;left:50%;top:52%;z-index:0;width:min(64%,390px);aspect-ratio:1.45;translate:-50% -50%;overflow:visible;opacity:var(--check-o);transform:scale(var(--check-s,.82));filter:drop-shadow(0 0 22px rgba(56,151,255,.35));transition:opacity .15s linear}
  .opportunity-check path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .opportunity-check .check-glow{stroke:rgba(15,128,255,.28);stroke-width:16px}
  .opportunity-check .check-main{stroke:#36a0ff;stroke-width:7px}
  .opportunity-check .check-light{stroke:rgba(237,248,255,.86);stroke-width:1.5px}
  .opportunity-core{position:absolute;left:50%;top:52%;z-index:1;translate:-50% -50%;display:grid;place-items:center;isolation:isolate;opacity:var(--core-o);transform:scale(var(--core-s));filter:blur(var(--core-blur,5px));transition:filter .15s linear}
  .opportunity-core::before{content:"";position:absolute;width:190%;aspect-ratio:1;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(214,240,255,.2) 0,rgba(48,151,255,.15) 22%,rgba(7,123,255,.06) 46%,transparent 72%);filter:blur(4px);opacity:.76}
  .opportunity-core-mark{width:clamp(88px,7.8vw,112px);height:clamp(78px,6.8vw,98px);display:grid;place-items:center}
  .opportunity-core-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 9px rgba(218,242,255,.58)) drop-shadow(0 0 24px rgba(7,123,255,.34))}
  .opportunity-nodes{position:absolute;inset:0;z-index:2;pointer-events:none;transform-style:preserve-3d}
  .opportunity-nodes .journey-node{position:absolute;left:0;top:0;opacity:0;transform-style:preserve-3d;will-change:transform,opacity}
  .opportunity-nodes .system-planet-icon{width:clamp(48px,4.5vw,60px);height:clamp(48px,4.5vw,60px);box-shadow:0 18px 42px -18px rgba(0,0,0,.96),0 0 28px color-mix(in srgb,var(--pc,#77b5ff) 30%,transparent),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 20px rgba(0,0,0,.16)}
  .opportunity-nodes .system-planet-icon svg{width:44%;height:44%}
  .opportunity-nodes .system-planet-name{font-size:clamp(.58rem,.82vw,.72rem);opacity:var(--label-o,0);transition:opacity .15s linear}
  @media(max-width:920px){
    .opportunity-layout{grid-template-columns:1fr}
    .opportunity-universe{min-height:clamp(480px,126vw,590px);width:min(100%,620px);margin:0 auto}
    .opportunity-universe::before{inset:10% 0}
    .opportunity-check{width:min(72%,330px)}
    .opportunity-nodes .system-planet-icon{width:46px;height:46px}
    .opportunity-nodes .system-planet-name{font-size:.62rem}
  }
  @media(max-width:520px){
    .opportunity-universe{min-height:470px;width:calc(100% + 24px);margin-left:-12px}
    .opportunity-core-mark{width:78px;height:68px}
    .opportunity-nodes .system-planet-icon{width:40px;height:40px}
    .opportunity-nodes .system-planet-name{font-size:.55rem}
  }
  .p1 .oneline{margin-top:clamp(64px,9vw,120px);display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start;border-top:1px solid var(--line);padding-top:clamp(38px,4.5vw,58px)}
  .p1 .oneline .pr{font-family:var(--mono);color:var(--accent);font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.05}
  .p1 .oneline h3{font-size:clamp(1.8rem,4vw,3.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:16ch}

  /* --- S2 command console --- */
  .console{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(24px,4vw,60px);align-items:start}
  @media(max-width:880px){.console{grid-template-columns:1fr;gap:30px}}
  .cmdrail{display:flex;flex-direction:column;gap:2px}
  .cmdrow{position:relative;text-align:left;width:100%;display:flex;gap:13px;align-items:flex-start;padding:19px 18px;border-radius:13px;border:1px solid transparent;color:var(--dim);cursor:pointer;transition:background .35s,color .35s,border-color .35s;font-size:1.03rem;line-height:1.42;letter-spacing:-.012em;overflow:hidden}
  .cmdrow .pr{font-family:var(--mono);color:var(--dim);transition:color .35s;margin-top:.02em}
  .cmdrow:hover{color:var(--ink)}
  .cmdrow.on{color:var(--ink);background:var(--panel);border-color:var(--line)}
  .cmdrow.on .pr{color:var(--accent)}
  .cmdrow .fill{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}
  .cmdrow.on .fill{width:100%;transition:width var(--dwell,4600ms) linear}
  .workstage{position:relative;min-height:430px}
  .workcard{position:absolute;inset:0;background:linear-gradient(180deg,var(--panel),#0a0d12);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3vw,40px);opacity:0;transform:translateY(16px) scale(.99);transition:opacity .55s ease,transform .55s ease;pointer-events:none;display:flex;flex-direction:column}
  .workcard.on{opacity:1;transform:none;pointer-events:auto;z-index:2}
  .workcard .asked{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
  .workcard .cmd{margin-top:10px;font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.25}
  .workcard .cmd .pr{color:var(--accent);font-family:var(--mono)}
  .workcard .rule{height:1px;background:var(--line);margin:22px 0}
  .workcard .res{color:var(--dim);font-size:1.04rem;line-height:1.62}
  .workcard .res b{color:var(--ink);font-weight:550}
  .wchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .wchips span{font-size:.83rem;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:9px;padding:7px 12px;color:var(--ink)}
  .workcard.on .wchips span{animation:chipin .5s cubic-bezier(.2,.7,.2,1)}
  .workcard.on .wchips span:nth-child(1){animation-delay:.16s}
  .workcard.on .wchips span:nth-child(2){animation-delay:.24s}
  .workcard.on .wchips span:nth-child(3){animation-delay:.32s}
  .workcard.on .wchips span:nth-child(4){animation-delay:.40s}
  .workcard.on .wchips span:nth-child(5){animation-delay:.48s}
  @keyframes chipin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .workcard .foot{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .workcard .gate{font-size:.86rem;color:var(--dim)}
  .workcard .gate b{color:var(--green);font-weight:600}
  @media(prefers-reduced-motion:reduce){.cmdrow.on .fill{transition:none}.workcard.on .wchips span{animation:none;opacity:1}}

  /* --- S3 ROI / drag strikethrough --- */
  .roi .lead2{font-size:clamp(1.35rem,2.5vw,2rem);font-weight:500;letter-spacing:-.025em;line-height:1.28;max-width:740px}
  .roi .lead2 .soft{color:var(--dim)}
  .draglist{margin:clamp(44px,6vw,72px) 0 clamp(32px,4vw,46px)}
  .dragitem{position:relative;font-size:clamp(1.5rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.46;color:var(--ink);width:fit-content;text-decoration-line:line-through;text-decoration-color:transparent;text-decoration-thickness:3px;text-decoration-skip-ink:none;transition:color .7s ease,text-decoration-color .55s ease}
  .dragitem.cut{color:var(--faint);text-decoration-color:var(--coral)}
  .draghinge{display:flex;gap:15px;align-items:baseline;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
  .draghinge .pr{color:var(--accent);font-family:var(--mono)}
  .roigrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:clamp(54px,7vw,96px)}
  @media(max-width:680px){.roigrid{grid-template-columns:1fr}}
  .roicell{background:var(--bg);padding:clamp(28px,3.2vw,42px);transition:background .35s}
  .roicell:hover{background:var(--panel)}
  .roicell .m{font-family:var(--mono);color:var(--accent);font-size:1.5rem;line-height:1}
  .roicell h4{margin-top:20px;font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
  .roicell p{margin-top:11px;color:var(--dim);font-size:.98rem;line-height:1.6}
  .roibig{margin-top:clamp(58px,8vw,104px);font-size:clamp(2rem,4.6vw,3.6rem);font-weight:650;letter-spacing:-.035em;line-height:1.08}
  .roibig .soft{color:var(--dim)}

  /* --- S4 safety --- */
  .safe{text-align:center}
  .safe .display{margin:0 auto;max-width:16ch}
  .safe .intro{margin:26px auto 0;max-width:500px;color:var(--dim);font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.6}
  .safe .intro b{color:var(--ink);font-weight:600}
  .fears{margin:clamp(42px,5vw,64px) auto 0;max-width:430px;display:grid;gap:13px;text-align:left}
  .fears p{display:flex;gap:13px;align-items:baseline;color:var(--dim);font-size:1.06rem;line-height:1.4}
  .fears .x{color:var(--coral);font-weight:700;font-size:.8rem;flex-shrink:0;position:relative;top:-.05em}
  .safe .startline{margin-top:clamp(54px,7vw,86px);font-size:clamp(2rem,4.2vw,3.1rem);font-weight:650;letter-spacing:-.035em}
  .stack{margin:clamp(34px,4vw,50px) auto 0;max-width:410px;display:grid;gap:10px}
  .stackrow{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 17px;font-size:.98rem;color:var(--ink)}
  .stackrow .pr{font-family:var(--mono);color:var(--accent)}
  .stackrow .ro{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:rgba(105,210,154,.1);border:1px solid rgba(105,210,154,.25);border-radius:99px;padding:5px 10px;white-space:nowrap}
  .safe .then{margin-top:clamp(34px,4vw,50px);font-size:1.3rem;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.5}
  .safe .then .soft{color:var(--dim);font-weight:400}

  /* --- S5 control --- */

  /* --- S6 people --- */
  .people{text-align:center}
  .people .display{max-width:20ch;margin:0 auto}
  .people .sub{margin:26px auto 0;max-width:560px;color:var(--dim);font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.6}
  .people .sub b{color:var(--ink);font-weight:600}
  .marquee{margin:clamp(48px,6vw,80px) 0;display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
  .mrow{display:flex;gap:16px;width:max-content;will-change:transform}
  .mrow.a{animation:mL 36s linear infinite}
  .mrow.b{animation:mR 42s linear infinite}
  @keyframes mL{to{transform:translateX(-50%)}}
  @keyframes mR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .mword{font-size:clamp(1.7rem,3.6vw,3rem);font-weight:650;letter-spacing:-.035em;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:16px}
  .mword::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.6}
  .mword.hot{color:var(--ink)}
  .people .closer{max-width:660px;margin:0 auto;color:var(--dim);font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62}
  .people .closer .turn{color:var(--ink);font-weight:600}
  @media(prefers-reduced-motion:reduce){.mrow.a,.mrow.b{animation:none}}

  /* --- finale --- */
  .finale{position:relative;padding:0;text-align:left;background:#06080b;overflow:hidden}
  .finale-scene{position:relative;width:100%;aspect-ratio:1672/941;isolation:isolate;overflow:hidden}
  .finale-visual{position:absolute;inset:0;z-index:0}
  .finale-visual>img{display:block;width:100%;height:100%;object-fit:cover}
  .finale-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,8,.9) 0%,rgba(3,5,8,.76) 25%,rgba(3,5,8,.42) 45%,rgba(3,5,8,.08) 70%),linear-gradient(180deg,rgba(3,5,8,.2),transparent 48%,rgba(3,5,8,.78) 100%)}
  .finale-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .finale .display{margin:0;max-width:10.5ch;color:#fff;text-shadow:0 20px 64px rgba(0,0,0,.52)}
  .finale-phone{position:absolute;z-index:2;left:60.7%;top:34.75%;width:8.1%;height:32.8%;display:flex;flex-direction:column;overflow:hidden;border-radius:clamp(10px,1.15vw,20px);background:linear-gradient(180deg,#090d15,#040609);color:#f7f9fc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 48px -18px rgba(0,0,0,.88);font-size:clamp(5px,.54vw,10px)}
  .fphone-head{display:flex;align-items:center;gap:.65em;padding:1.45em 1.25em .9em;border-bottom:1px solid rgba(255,255,255,.08)}
  .fphone-mark{width:2.2em;height:2.2em;border-radius:.7em;display:grid;place-items:center;background:var(--accent);font-weight:750;font-size:.95em;box-shadow:0 0 1.5em rgba(7,123,255,.38)}
  .fphone-head b{font-size:1.05em;letter-spacing:0}
  .fphone-live{width:.55em;height:.55em;border-radius:50%;margin-left:auto;background:var(--green);box-shadow:0 0 .9em rgba(105,210,154,.8)}
  .fphone-body{flex:1;min-height:0;padding:1.4em 1.25em;display:flex;flex-direction:column}
  .fphone-kicker{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;color:var(--green)}
  .fphone-body>strong{margin-top:.55em;font-size:1.25em;line-height:1.1;letter-spacing:-.02em}
  .fphone-revenue{margin-top:1.5em;padding:1em;border:1px solid rgba(255,255,255,.1);border-radius:1em;background:rgba(255,255,255,.035)}
  .fphone-revenue span{display:block;color:rgba(247,249,252,.52);font-size:.8em}
  .fphone-revenue b{display:block;margin-top:.25em;font-size:1.7em;letter-spacing:-.04em}
  .fphone-revenue i{color:var(--green);font-style:normal;font-size:.62em;margin-left:.35em}
  .fphone-tasks{display:grid;gap:.72em;margin-top:1em}
  .fphone-task{display:flex;align-items:center;gap:.65em;color:rgba(247,249,252,.72);font-size:.78em;line-height:1.2}
  .fphone-task::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--accent);box-shadow:0 0 .8em rgba(7,123,255,.65);flex-shrink:0}
  .fphone-command{margin:0 1.15em 1.25em;padding:.9em 1em;border:1px solid rgba(255,255,255,.11);border-radius:.9em;color:rgba(247,249,252,.5);font-size:.76em;display:flex;align-items:center}
  .fphone-command span{margin-left:auto;width:1.75em;height:1.75em;border-radius:.55em;display:grid;place-items:center;background:var(--accent);color:#fff}
  .shouldnot{margin:clamp(44px,5vw,64px) auto 0;max-width:600px;display:grid;gap:11px;text-align:left}
  .shouldnot p{color:var(--dim);font-size:1.07rem;line-height:1.5;display:flex;gap:13px;align-items:baseline}
  .shouldnot p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;position:relative;top:.5em}
  .shouldnot s{text-decoration-color:var(--coral);text-decoration-thickness:2px;color:var(--dim)}
  .leverage{margin:clamp(42px,5vw,62px) auto 0;max-width:540px;display:grid;gap:7px}
  .leverage .turn{color:var(--ink);font-weight:650;font-size:1.22rem;letter-spacing:-.015em}
  .leverage p{color:var(--dim);font-size:1.06rem}
  .finale .hero-ctas{justify-content:flex-start;margin-top:clamp(28px,3.5vw,46px)}
  .finale .foot-note{margin-top:clamp(64px,8vw,96px);padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--dim);font-size:.94rem}
  .finale .foot-note .logo{color:var(--ink)}

  /* --- copy overhaul additions --- */
  .flowlist{max-width:720px;margin:clamp(30px,4vw,48px) 0 0;display:grid;gap:13px}
  .flowlist p{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.4;color:var(--dim);letter-spacing:-.01em}
  .flowlist p b{color:var(--ink);font-weight:500}
  .flowlist p .no{color:var(--faint)}
  #problem{overflow:clip}
  .problem-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(470px,1.18fr);gap:clamp(44px,7vw,104px);align-items:start;margin-top:clamp(34px,5vw,68px)}
  .problem-copy{min-width:0}
  .problem-copy>.quiet{margin-top:0!important}
  .problem-copy .flowlist{margin-top:clamp(34px,4vw,50px)}
  .problem-visual{position:sticky;top:clamp(104px,14vh,150px);min-width:0;margin:clamp(-70px,-4vw,-38px) clamp(-108px,-7vw,-54px) 0 clamp(-36px,-2vw,-18px)}
  .problem-art{position:relative;aspect-ratio:1/1;transform:rotate(-2.2deg) scale(1.08);transform-origin:52% 50%;animation:problemDrift 9s ease-in-out infinite;will-change:transform}
  .problem-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 58px rgba(0,0,0,.62))}
  .problem-x{position:absolute;inset:13% 9% 13% 8%;z-index:2;width:83%;height:74%;overflow:visible;pointer-events:none;transform:rotate(-2deg);filter:drop-shadow(0 12px 24px rgba(242,74,61,.24))}
  .problem-x path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.05s cubic-bezier(.64,0,.18,1)}
  .problem-x .x-under{stroke:rgba(48,7,8,.78);stroke-width:13px}
  .problem-x .x-main{stroke:#f45146;stroke-width:8px}
  .problem-x .x-light{stroke:rgba(255,210,199,.5);stroke-width:1.6px}
  .problem-x .x-a{transition-delay:.18s}
  .problem-x .x-b{transition-delay:.58s}
  .problem-visual.on .problem-x path{stroke-dashoffset:0}
  .problem-close{margin-top:clamp(54px,8vw,110px)!important}
  @keyframes problemDrift{0%,100%{transform:rotate(-2.2deg) scale(1.08) translate3d(0,0,0)}50%{transform:rotate(-1.2deg) scale(1.08) translate3d(0,-9px,0)}}
  @media(max-width:920px){
    .problem-layout{grid-template-columns:1fr;gap:clamp(28px,7vw,54px)}
    .problem-visual{position:relative;left:auto;top:auto;width:100%;margin:-12px 0 -6vw;translate:none}
    .problem-art{transform:rotate(-1.5deg) scale(1.06);animation:none}
    .problem-close{margin-top:clamp(44px,8vw,76px)!important}
  }
  @media(max-width:560px){
    .problem-layout{margin-top:32px}
    .problem-visual{width:100%;margin-top:0;margin-bottom:-2vw}
    .problem-art{transform:rotate(-1deg) scale(1.18)}
    .problem-x .x-under{stroke-width:10px}
    .problem-x .x-main{stroke-width:6px}
    .problem-x .x-light{stroke-width:1.2px}
  }
  @media(prefers-reduced-motion:reduce){.problem-art{animation:none}}
  @media(prefers-reduced-motion:reduce){.problem-x path{stroke-dashoffset:0;transition:none}}
  .punch{margin-top:clamp(30px,4vw,48px);font-size:clamp(2.6rem,7vw,5rem);font-weight:650;letter-spacing:-.045em;line-height:.98;color:var(--ink)}
  .quiet{color:var(--dim);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;letter-spacing:-.015em;line-height:1.35}
  .knows{max-width:820px;margin:clamp(34px,5vw,56px) 0 0;display:grid;gap:clamp(12px,1.6vw,18px)}
  .knows p{font-size:clamp(1.3rem,2.7vw,2.1rem);font-weight:600;letter-spacing:-.025em;line-height:1.2}
  .knows .s{color:var(--dim)}
  .knows .k{color:var(--accent);font-weight:500;font-family:var(--mono);font-size:.78em;letter-spacing:0;padding:0 .1em}
  .knows .o{color:var(--ink)}
  .ledger{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line)}
  .ledger div{display:flex;align-items:baseline;gap:18px;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.025em;color:var(--ink);transition:color .3s,padding-left .3s}
  .ledger div:hover{padding-left:10px}
  .ledger div .m{font-family:var(--mono);color:var(--accent);font-size:.7em;line-height:1}
  .finale .body-lead{max-width:520px;margin:clamp(24px,3vw,34px) 0 0;color:rgba(255,255,255,.72);font-size:clamp(1rem,1.45vw,1.22rem);line-height:1.55;text-shadow:0 3px 28px rgba(0,0,0,.48)}
  .finale .body-lead b{color:#fff;font-weight:500}
  .finale .asrs{margin-top:clamp(22px,2.8vw,34px);font-size:clamp(1.25rem,2.3vw,1.8rem);font-weight:650;letter-spacing:-.03em;line-height:1.15;color:#fff}
  .finale .tagline{margin-top:clamp(16px,2vw,24px);color:rgba(255,255,255,.7);font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.5}
  .finale .tagline b{color:#fff;font-weight:600}
  @media(max-width:920px){
    .finale-scene{height:1200px;aspect-ratio:auto;background:linear-gradient(180deg,#06080b 0%,#06080b 38%,#0b1118 100%)}
    .finale-visual{inset:auto;top:590px;left:calc(50% - 680px);width:1060px;aspect-ratio:1672/941}
    .finale-visual::after{background:linear-gradient(180deg,#06080b 0%,rgba(6,8,11,.12) 30%,rgba(6,8,11,.08) 72%,#06080b 100%),linear-gradient(90deg,rgba(6,8,11,.38),transparent 48%)}
    .finale-copy{height:auto;padding-top:86px;justify-content:flex-start}
    .finale .display{font-size:clamp(2.7rem,13vw,3.75rem);max-width:9.5ch}
    .finale .body-lead{max-width:33ch}
    .finale .asrs{max-width:18ch}
    .finale .tagline{max-width:28ch}
  }

  /* ===== featured video + thumbnail mosaic ===== */
  .feat{--hero-flow:0;position:relative;padding:0;background:#090b0f;overflow:hidden;perspective:1800px}
  .feat::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:8;height:clamp(110px,17vw,260px);pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,0),rgba(5,6,10,.28) 48%,#090b0f 100%)}
  .feat-wrap{width:100vw;margin-left:calc(50% - 50vw);padding:0;overflow:hidden}
  .feat-stage{--hero-copy-start:clamp(64px,4.2vw,92px);--hero-copy-clearance:clamp(14px,2vw,30px);position:relative;width:112vw;max-width:2100px;margin-left:50%;transform:translateX(-50%) perspective(1800px) translate3d(0,calc(-2.5vh - var(--hero-flow)*5vh),calc(var(--hero-flow)*150px)) rotateX(calc(var(--hero-flow)*-1.4deg)) scale(calc(1 + var(--hero-flow)*.085));transform-origin:50% 66%;will-change:transform,filter;filter:brightness(calc(1 - var(--hero-flow)*.08)) saturate(calc(1 - var(--hero-flow)*.04));border-radius:0;overflow:hidden;border:0;background:#090b0f url("https://ik.imagekit.io/fluid/980191006/command-laptop-mlm-executive-v2_6QZh96EKJ.png?tr=w-2200,q-84") center/cover no-repeat;box-shadow:0 70px 170px -58px rgba(0,0,0,.94);aspect-ratio:1448/1086}
  .feat-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,10,.38),rgba(5,6,10,.08) 22%,rgba(5,6,10,.08) 76%,rgba(5,6,10,.26)),linear-gradient(180deg,rgba(5,6,10,.74),rgba(5,6,10,.24) 32%,rgba(5,6,10,.06) 54%,rgba(5,6,10,.3))}
  .feat-desktop{position:absolute;left:33.12%;top:53.8%;width:33.78%;aspect-ratio:1.52;z-index:2;overflow:hidden;border-radius:clamp(5px,.62vw,9px);background:#07111d url("https://ik.imagekit.io/fluid/980191006/grad_4_blue_navy_N5kd4gMqk.png?tr=w-1200,q-88") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -30px 70px rgba(1,5,12,.22);transform:translateZ(calc(var(--hero-flow)*5px));will-change:transform}
  .feat-desktop::before{content:"";position:absolute;left:0;right:0;top:0;height:8%;background:linear-gradient(180deg,rgba(4,9,16,.68),rgba(4,9,16,.3));border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 4px 18px rgba(0,0,0,.18)}
  .feat-desktop::after{content:"";position:absolute;left:50%;bottom:2.8%;width:27%;height:7%;translate:-50% 0;border:1px solid rgba(255,255,255,.13);border-radius:clamp(3px,.38vw,6px);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.055));box-shadow:0 8px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .feat-screen{position:absolute;left:33.4%;top:57.15%;width:33.1%;aspect-ratio:16/9;z-index:3;overflow:hidden;border-radius:clamp(4px,.55vw,8px);background:#07111d url("https://ik.imagekit.io/fluid/980191006/grad_4_blue_navy_N5kd4gMqk.png?tr=w-1200,q-86") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 12px 32px -18px rgba(0,0,0,.8),0 0 calc(var(--hero-flow)*52px) rgba(52,145,255,calc(var(--hero-flow)*.38));transform:translateZ(calc(var(--hero-flow)*8px));will-change:transform,box-shadow}
  .feat-screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.11),transparent 25%,transparent 68%,rgba(2,7,14,.28)),linear-gradient(180deg,rgba(2,7,14,.02),rgba(2,7,14,.2));box-shadow:inset 0 0 24px rgba(2,7,14,.32)}
  .feat-screen video{position:absolute;left:4%;top:4%;z-index:1;width:92%;height:92%;object-fit:cover;display:block;background:#000;border-radius:clamp(3px,.4vw,6px);box-shadow:0 12px 30px -12px rgba(0,0,0,.88),0 0 0 1px rgba(255,255,255,.12)}
  .feat-open{position:absolute;left:50%;top:50%;z-index:5;width:clamp(54px,5.2vw,86px);height:clamp(54px,5.2vw,86px);border-radius:50%;border:1px solid rgba(255,255,255,.38);background:rgba(7,123,255,.9);color:#fff;display:grid;place-items:center;transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 20px 58px -18px rgba(7,123,255,.95),0 14px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
  .feat-open::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);opacity:.85}
  .feat-open:hover{transform:translate(-50%,-50%) scale(1.06);background:#1688ff;box-shadow:0 24px 70px -16px rgba(7,123,255,1),0 16px 54px -24px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.4)}
  .feat-open:focus-visible{outline:2px solid rgba(255,255,255,.88);outline-offset:6px}
  .feat-open svg{position:relative;z-index:1;width:38%;height:38%;margin-left:4%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.22))}
  .feat-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,.2),transparent 28%,transparent 72%,rgba(5,6,10,.34))}
  .feat-copy{position:absolute;left:50%;top:var(--hero-copy-start);z-index:5;width:min(88vw,1240px);height:calc(57.15% - var(--hero-copy-start) - var(--hero-copy-clearance));transform:translateX(-50%) translate3d(0,calc(-1.5vh - var(--hero-flow)*7vh),calc(var(--hero-flow)*30px)) scale(calc(1 - var(--hero-flow)*.115));opacity:calc(1 - var(--hero-flow)*.78);filter:blur(calc(var(--hero-flow)*1.4px));will-change:transform,opacity,filter;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
  .feat-copy h2{font-size:clamp(2.35rem,5.25vw,5.7rem);font-weight:720;letter-spacing:-.04em;line-height:1.04;color:#f4f3ef;text-shadow:0 18px 64px rgba(0,0,0,.46)}
  .feat-copy h2 .rot{display:inline-block;color:#f4f3ef;font-family:"FluidHand",var(--sans);font-weight:700;letter-spacing:0;line-height:.9;will-change:transform,opacity}
  .feat-copy h2 .rot.anim{animation:rotin .55s cubic-bezier(.2,.75,.25,1)}
  .feat-copy h2.mist-hero{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5vw,22px);letter-spacing:normal;text-transform:none}
  .mist-icon-wrap{margin-bottom:6px;will-change:transform,opacity}
  .mist-app-icon{display:block;width:clamp(66px,7.8vw,88px);height:clamp(66px,7.8vw,88px);border-radius:22%;object-fit:contain;background:#000;border:1px solid rgba(0,0,0,.9);box-shadow:0 18px 44px -12px rgba(0,0,0,.72),0 5px 16px rgba(0,0,0,.5)}
  .mist-sub{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vw,16px)}
  .mist-line{font-family:"FLFontBold",var(--sans);font-size:clamp(2.2rem,5.2vw,4rem);font-weight:700;line-height:1.04;letter-spacing:.01em;color:#fff;text-shadow:0 12px 44px rgba(0,0,0,.45)}
  .mist-line .ac{font-size:1.1em;font-weight:700;color:#fff}
  .mist-line .fy{font-family:var(--sans);font-weight:500;font-size:.6em;letter-spacing:-.01em;color:rgba(255,255,255,.6)}
  .mist-demys{font-size:clamp(.95rem,1.7vw,1.28rem);font-weight:450;line-height:1.4;letter-spacing:-.005em;color:rgba(255,255,255,.72);max-width:min(90vw,720px)}
  .mist-demys .em{font-weight:650;color:#fff}
  .feat-copy .hero-ctas{margin-top:clamp(26px,3vw,42px)}
  .feat-copy .btn{pointer-events:auto}
  .feat-cmd{position:absolute;left:clamp(16px,2.4vw,30px);top:clamp(16px,2.4vw,30px);z-index:4;display:inline-flex;align-items:center;gap:12px;max-width:calc(100% - 64px);background:rgba(10,12,16,.56);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:12px 17px;font-size:clamp(.86rem,1.4vw,1.12rem);font-weight:550;color:#fff;line-height:1.3}
  .feat-cmd .pr{color:#5aa8ff;font-family:var(--mono);flex-shrink:0}
  .feat-info{display:none;position:absolute;left:clamp(18px,3vw,46px);top:clamp(18px,3vw,42px);z-index:4}
  .feat-info .t{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#5aa8ff}
  .feat-info .h{margin-top:6px;font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:650;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
  .feat-ctrl{position:absolute;right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);z-index:4;display:flex;gap:10px}
  .fbtn{width:48px;height:48px;border-radius:50%;background:rgba(10,12,16,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;padding:0}
  .fbtn:hover{background:var(--accent);border-color:transparent}
  .fbtn svg{width:19px;height:19px}
  .feat-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);z-index:4;box-shadow:0 0 12px var(--accent)}
  @media(max-width:680px){
    .feat-stage{--hero-copy-start:54px;--hero-copy-clearance:18px;width:260vw}
    .feat-copy{width:min(90vw,560px)}
    .feat-copy h2{font-size:clamp(1.75rem,8.8vw,3rem);line-height:1.04}
    .feat-copy .hero-ctas{margin-top:20px;gap:10px}
    .feat-copy .btn{padding:11px 16px;font-size:.84rem}
    .feat-ctrl{right:12px;bottom:12px;gap:8px}
    .fbtn{width:40px;height:40px}
  }

  /* liquid command prompt bridge */
  .prompt-bridge{--prompt-focus:0;--handoff:0;position:relative;height:190svh;overflow:clip;background:linear-gradient(180deg,#090b0f 0%,#07090d 42%,var(--bg) 100%);perspective:1500px}
  .prompt-bridge::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 26%,transparent 70%,rgba(255,255,255,.025)),linear-gradient(180deg,rgba(255,255,255,.028),transparent 24%,transparent 72%,rgba(5,6,10,.72));opacity:.86}
  .prompt-bridge::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34svh;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg) 78%)}
  .prompt-sticky{position:sticky;top:0;height:100svh;min-height:0;display:grid;place-items:center;padding:clamp(74px,9vw,116px) 20px clamp(76px,9vw,118px);perspective:1500px;transform-style:preserve-3d;overflow:hidden}
  .prompt-systems{position:absolute;inset:-4%;z-index:0;pointer-events:none;perspective:1500px;transform-style:preserve-3d;opacity:clamp(.08,calc(.3 + var(--prompt-focus)*.52 - var(--handoff)*.66),.7);transform:perspective(1500px) rotateX(calc(7deg + var(--look-y,0deg)*.35)) rotateY(calc(var(--look-x,0deg)*.4)) scale(calc(.96 + var(--prompt-focus)*.04));will-change:transform,opacity}
  .prompt-systems::before{content:"";position:absolute;left:50%;top:50%;width:min(82vw,1120px);height:min(52vw,610px);translate:-50% -50%;border:1px solid rgba(161,199,241,.065);border-radius:50%;box-shadow:0 0 84px rgba(61,126,205,.035),inset 0 0 84px rgba(61,126,205,.025);transform:rotateX(66deg) rotateZ(-8deg)}
  .journey-node{transform-style:preserve-3d}
  .journey-node-body{display:grid;justify-items:center;gap:7px;transform-style:preserve-3d;animation:journeyFloat var(--jdur,7s) ease-in-out infinite var(--jdelay,0s)}
  .prompt-systems .journey-node{position:absolute;left:var(--jx);top:var(--jy);transform:translate(-50%,-50%) translate3d(calc(var(--handoff)*var(--to-x,0px)),calc(var(--handoff)*var(--to-y,0px)),calc(var(--jz,0px) + var(--handoff)*340px)) rotateX(var(--jrx,0deg)) rotateY(var(--jry,0deg));will-change:transform,opacity}
  .prompt-systems .system-planet-icon{width:clamp(40px,4.2vw,55px);height:clamp(40px,4.2vw,55px);opacity:.94;box-shadow:0 18px 42px -20px rgba(0,0,0,.96),0 0 28px color-mix(in srgb,var(--pc,#77b5ff) 24%,transparent),0 0 0 1px rgba(255,255,255,.035),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -9px 18px rgba(0,0,0,.15)}
  .prompt-systems .system-planet-icon::after{inset:2px}
  .prompt-systems .system-planet-icon svg{width:43%;height:43%}
  .prompt-systems .system-planet-name{font-size:clamp(.56rem,.78vw,.7rem);color:rgba(220,226,234,.74)}
  @keyframes journeyFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
  .prompt-videos{position:absolute;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d;transform:perspective(1300px) translateZ(calc(var(--prompt-focus)*36px)) scale(calc(1 + var(--prompt-focus)*.035));will-change:transform,opacity}
  .prompt-wrap{position:relative;z-index:3;width:min(780px,100%);display:grid;justify-items:center;text-align:center;transform-style:preserve-3d;transform:perspective(1500px) translate3d(0,calc(var(--handoff)*-8vh),calc(var(--prompt-focus)*68px - var(--handoff)*520px)) rotateX(calc(var(--look-y,0deg) + var(--handoff)*18deg)) rotateY(var(--look-x,0deg)) scale(calc(1 - var(--handoff)*.26));opacity:clamp(0,calc(1 - var(--handoff)*1.18),1);filter:blur(calc(var(--handoff)*5px));will-change:transform,opacity,filter}
  .prompt-title{max-width:14ch;font-size:4.4rem;font-weight:700;letter-spacing:0;line-height:1.02;color:#f4f3ef;text-shadow:0 24px 90px rgba(0,0,0,.5)}
  .glass-prompt{position:relative;width:min(640px,100%);margin-top:30px;text-align:left;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04) 54%,rgba(255,255,255,.028));box-shadow:0 34px 92px -48px rgba(0,0,0,.96),0 0 calc(var(--prompt-focus)*62px) rgba(40,137,255,calc(var(--prompt-focus)*.23)),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06);backdrop-filter:blur(24px) saturate(138%);-webkit-backdrop-filter:blur(24px) saturate(138%);overflow:hidden;transform:rotateX(calc((1 - var(--prompt-focus))*3deg)) translateZ(calc(var(--prompt-focus)*38px));transform-origin:50% 50%;will-change:transform,box-shadow}
  .glass-prompt::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 24%,transparent 70%,rgba(255,255,255,.065));opacity:.46}
  .glass-prompt::after{content:"";position:absolute;left:16px;right:16px;top:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);pointer-events:none}
  .glass-top{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.085);color:rgba(244,243,239,.58);font-family:var(--mono);font-size:.64rem}
  .glass-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  .glass-dot:nth-child(1){background:rgba(242,122,109,.74)}
  .glass-dot:nth-child(2){background:rgba(232,179,77,.72)}
  .glass-dot:nth-child(3){background:rgba(105,210,154,.72)}
  .glass-top b{margin-left:7px;color:rgba(244,243,239,.78);font-weight:600}
  .glass-input{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;min-height:104px;padding:20px 22px 14px;color:#fff}
  .glass-input .pr{font-family:var(--mono);font-size:1.06rem;line-height:1.24;color:var(--accent)}
  #promptType{display:block;font-size:1.34rem;font-weight:600;letter-spacing:0;line-height:1.26;overflow-wrap:anywhere}
  .type-caret{width:2px;height:1.68rem;margin-top:1px;background:var(--accent);box-shadow:0 0 14px rgba(7,123,255,.72);animation:caretBlink .9s steps(2,end) infinite}
  @keyframes caretBlink{50%{opacity:.1}}
  .glass-status{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:0 22px 16px;color:rgba(244,243,239,.64);font-size:.78rem;line-height:1.45}
  .glass-status .pulse{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 13px rgba(105,210,154,.68);flex-shrink:0}
  .prompt-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;padding:0 22px 22px}
  .prompt-chips span{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.036);border-radius:99px;padding:6px 9px;color:rgba(244,243,239,.68);font-size:.7rem;line-height:1}
  .prompt-note{max-width:620px;margin:22px auto 0;color:rgba(244,243,239,.52);font-size:1rem;line-height:1.5}
  .prompt-videos .citem{position:absolute;width:var(--w,clamp(112px,10vw,164px));border:0;background:none;padding:0;font:inherit;cursor:pointer;rotate:var(--r,0deg);opacity:0;translate:0 24px;scale:.94;pointer-events:auto;transform:translate3d(calc(var(--handoff)*var(--flow-x,0px)),calc(var(--handoff)*var(--flow-y,0px)),calc(var(--handoff)*var(--flow-z,-620px))) rotateX(calc(var(--handoff)*var(--tilt-x,12deg))) rotateY(calc(var(--handoff)*var(--tilt-y,-16deg)));transform-origin:50% 50%;transform-style:preserve-3d;transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),scale .6s ease var(--d,0ms),rotate .45s ease,transform .2s linear;will-change:transform,opacity}
  .prompt-bridge.in .citem{opacity:clamp(0,calc(.72 - var(--handoff)),.72);translate:0 0;scale:1}
  .prompt-videos .citem:hover{opacity:1;rotate:0deg;transform:translate3d(calc(var(--handoff)*var(--flow-x,0px)),calc(var(--handoff)*var(--flow-y,0px) - 9px),calc(var(--handoff)*var(--flow-z,-620px))) rotateX(calc(var(--handoff)*var(--tilt-x,12deg))) rotateY(calc(var(--handoff)*var(--tilt-y,-16deg))) scale(1.06);z-index:4}
  .prompt-videos .ccard{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#080a0e;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 62px -25px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.13);transition:box-shadow .4s,border-color .4s}
  .prompt-videos .citem:hover .ccard{box-shadow:0 40px 88px -25px rgba(0,0,0,.96),0 0 0 1px rgba(7,123,255,.34);border-color:rgba(7,123,255,.42)}
  .prompt-videos .ccard img,.prompt-videos .ccard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .prompt-videos .ccard video{opacity:0;z-index:1;transition:opacity .35s}
  .prompt-videos .citem.playing .ccard video{opacity:1}
  .prompt-videos .ccard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,.08),transparent 42%,rgba(5,6,10,.6));opacity:.86}
  .prompt-videos .cplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s}
  .prompt-videos .cplay i{width:38px;height:38px;border-radius:50%;background:rgba(10,12,16,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.36);display:flex;align-items:center;justify-content:center}
  .prompt-videos .cplay svg{width:14px;height:14px;color:#fff;margin-left:2px}
  .prompt-videos .citem.playing .cplay{opacity:0}
  .prompt-videos .clabel{display:block;margin-top:9px;text-align:center;font-size:.72rem;line-height:1.25;color:rgba(244,243,239,.62);letter-spacing:0;text-shadow:0 2px 18px rgba(0,0,0,.72)}
  .prompt-videos .clabel .pr{display:none}
  .prompt-videos .clabel b{color:rgba(244,243,239,.86);font-weight:600}
  .prompt-videos .c1{left:4%;top:9%;--r:-5deg;--w:clamp(124px,11vw,178px)}
  .prompt-videos .c2{left:18%;top:20%;--r:4deg}
  .prompt-videos .c3{left:5%;top:43%;--r:6deg}
  .prompt-videos .c4{left:18%;top:65%;--r:-4deg;--w:clamp(124px,11vw,178px)}
  .prompt-videos .c5{left:7%;top:78%;--r:3deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c6{left:78%;top:10%;--r:5deg}
  .prompt-videos .c7{left:90%;top:20%;--r:-5deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c8{left:74%;top:38%;--r:-4deg;--w:clamp(124px,11vw,178px)}
  .prompt-videos .c9{left:89%;top:52%;--r:5deg}
  .prompt-videos .c10{left:76%;top:72%;--r:-6deg}
  .prompt-videos .c11{left:91%;top:82%;--r:3deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c12{left:33%;top:5%;--r:-3deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c13{left:59%;top:6%;--r:4deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c14{left:34%;top:82%;--r:5deg;--w:clamp(100px,8.5vw,138px)}
  .prompt-videos .c15{left:60%;top:82%;--r:-4deg;--w:clamp(100px,8.5vw,138px)}
  @media(max-width:720px){
    .prompt-bridge{height:165svh}
    .prompt-sticky{padding:78px 16px 88px}
    .prompt-videos{opacity:.34}
    .prompt-videos .citem{width:96px}
    .prompt-videos .clabel{display:none}
    .prompt-videos .c1{left:-18px;top:10%}
    .prompt-videos .c2{left:auto;right:-22px;top:14%}
    .prompt-videos .c3{left:-24px;top:69%}
    .prompt-videos .c4{left:auto;right:-18px;top:72%}
    .prompt-videos .c5,.prompt-videos .c6,.prompt-videos .c7,.prompt-videos .c8,.prompt-videos .c9,.prompt-videos .c10,.prompt-videos .c11,.prompt-videos .c12,.prompt-videos .c13,.prompt-videos .c14,.prompt-videos .c15{display:none}
    .prompt-systems .journey-node:nth-child(n+7){display:none}
    .prompt-systems .system-planet-icon{width:38px;height:38px}
    .prompt-systems .system-planet-name{display:none}
    .prompt-title{font-size:2.65rem;max-width:13ch}
    .glass-prompt{margin-top:24px;border-radius:18px}
    .glass-top{padding:11px 14px;font-size:.62rem}
    .glass-dot{width:6px;height:6px}
    .glass-input{min-height:142px;padding:20px 16px 14px;gap:9px}
    .glass-input .pr{font-size:1rem}
    #promptType{font-size:1.18rem;line-height:1.28}
    .type-caret{height:1.5rem}
    .glass-status{margin:0 16px 16px;font-size:.78rem;align-items:flex-start}
    .prompt-chips{padding:0 16px 18px}
    .prompt-chips span{font-size:.68rem;padding:6px 9px}
    .prompt-note{font-size:.92rem}
  }
  @media(prefers-reduced-motion:reduce){
    #openingFx{display:none}
    .feat-stage,.feat-copy,.feat-screen,.prompt-wrap,.prompt-videos,.glass-prompt{transform:none!important;filter:none!important;opacity:1!important}
    .prompt-bridge{height:auto}
    .prompt-sticky{position:relative;min-height:100svh;height:auto}
    .prompt-videos .citem{opacity:.58;translate:0 0;scale:1}
    .prompt-systems{display:none}
    .type-caret{animation:none}
  }

  /* ===== experts UGC carousel (9:16) ===== */
  .ugc{position:relative;padding:clamp(66px,8vw,120px) 0;background:linear-gradient(180deg,var(--bg),#0a0c11 42%,var(--bg));overflow:hidden}
  .ugc-wrap{max-width:1580px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
  .ugc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:clamp(30px,4vw,54px)}
  .ugc-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:650;letter-spacing:-.032em;line-height:1.06;color:var(--ink);max-width:15ch}
  .ugc-head p{margin-top:18px;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55;color:var(--dim);max-width:50ch}
  .ugc-nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
  .ugc-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s,transform .25s}
  .ugc-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
  .ugc-arrow:disabled{opacity:.3;cursor:default}
  .ugc-arrow svg{width:20px;height:20px}
  .ugc-track{display:flex;gap:clamp(14px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ugc-track::-webkit-scrollbar{display:none}
  .ucard{position:relative;flex:0 0 auto;width:clamp(230px,23vw,298px);aspect-ratio:9/16;margin:0;padding:0;border-radius:20px;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 60px -22px rgba(0,0,0,.72);scroll-snap-align:start;cursor:pointer;opacity:0;translate:0 32px;transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
  .ugc.in .ucard{opacity:1;translate:0 0}
  .ucard:hover{transform:translateY(-6px);box-shadow:0 46px 88px -24px rgba(0,0,0,.84),0 0 0 1px rgba(7,123,255,.34);border-color:rgba(7,123,255,.42)}
  .ucard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a0b0e}
  .ucard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(4,5,9,.14),transparent 24%,transparent 60%,rgba(4,5,9,.52));transition:opacity .35s}
  .ucard.playing::after{opacity:.2}
  .uplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s}
  .uplay svg{width:56px;height:56px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));transition:transform .3s}
  .ucard:hover .uplay svg{transform:scale(1.09)}
  .ucard.playing .uplay{opacity:0}
  @media(max-width:640px){
    .ugc-head{flex-direction:column;align-items:flex-start;gap:20px}
    .ugc-nav{display:none}
    .ucard{width:73vw}
  }
  @media(prefers-reduced-motion:reduce){.ucard{opacity:1;translate:0 0}}

  /* lightbox */
  .lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);background:rgba(4,5,8,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .35s}
  .lightbox.open{opacity:1;pointer-events:auto}
  .lb-inner{position:relative;width:100%;max-width:1120px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 50px 130px rgba(0,0,0,.85);transform:scale(.95);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .lightbox.open .lb-inner{transform:none}
  .lb-inner video{width:100%;height:100%;object-fit:cover;display:block}
  .lightbox.portrait .lb-inner{width:min(92vw,460px);height:min(88vh,818px);max-width:460px;aspect-ratio:9/16}
  .lightbox.portrait .lb-inner video{object-fit:contain}
  .lb-cmd{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:10px;background:rgba(10,12,16,.6);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:10px 14px;font-size:clamp(.82rem,1.4vw,1rem);font-weight:550;color:#fff}
  .lb-cmd .pr{color:#5aa8ff;font-family:var(--mono)}
  .lb-close{position:absolute;top:14px;right:14px;z-index:4;width:46px;height:46px;border-radius:50%;background:rgba(10,12,16,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
  .lb-close:hover{background:var(--accent);border-color:transparent}
  @media(prefers-reduced-motion:reduce){.thumb{opacity:1;translate:0 0;scale:1}}

  /* ===== content overhaul additions ===== */
  .loop{margin:clamp(30px,4vw,48px) 0 0;display:grid;gap:11px;max-width:660px}
  .loop p{font-size:clamp(1.12rem,1.9vw,1.5rem);font-weight:550;letter-spacing:-.02em;color:var(--ink);display:flex;gap:14px;align-items:baseline}
  .loop p::before{content:"↳";color:var(--accent);font-family:var(--mono);font-weight:400}
  .loop p.last{color:var(--accent);font-weight:600;margin-top:6px}
  .loop p.last::before{content:"∞"}
  .pullq{margin-top:clamp(46px,6vw,84px);font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.2;border-left:3px solid var(--accent);padding-left:clamp(20px,2.5vw,30px);max-width:20ch}
  .pullq .soft{color:var(--dim);display:block}
  /* playbooks */
  .plays{display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(44px,5vw,68px)}
  .play{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,48px);align-items:start;transition:border-color .35s,transform .3s,box-shadow .35s}
  .play::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grad,none) center/cover no-repeat;opacity:.96;transition:opacity .5s,transform 7s ease}
  .play::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(103deg,rgba(8,10,13,.84),rgba(8,10,13,.67) 38%,rgba(8,10,13,.28) 72%,rgba(8,10,13,.38)),linear-gradient(0deg,rgba(8,10,13,.24),transparent 44%)}
  .play>*{position:relative;z-index:2}
  .play:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px);box-shadow:0 32px 74px -34px rgba(0,0,0,.85)}
  .play:hover::before{opacity:1;transform:scale(1.05)}
  @media(max-width:720px){.play{grid-template-columns:1fr;gap:14px;padding:26px}}
  .play .pn{font-family:"FluidHand",var(--sans);font-size:clamp(2.5rem,4.8vw,4rem);font-weight:700;letter-spacing:0;color:#fff;line-height:.82;text-shadow:0 10px 34px rgba(0,0,0,.48)}
  .play h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:650;letter-spacing:-.025em;line-height:1.1}
  .play .pb{margin-top:14px;color:#b0b4bc;font-size:1.02rem;line-height:1.62;max-width:62ch}
  .play .pb b{color:#fff;font-weight:550}
  .play .cmds{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
  .play .cmds span{font-family:var(--mono);font-size:.82rem;color:var(--ink);background:rgba(8,10,14,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px 12px;transition:border-color .25s,color .25s,background .25s}
  .play .cmds span::before{content:"› ";color:var(--accent)}
  .play:hover .cmds span{border-color:rgba(7,123,255,.28)}
  /* ===== chat console ===== */
  .chat{max-width:720px;margin:0 auto;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--panel),#0a0d12);overflow:hidden;box-shadow:0 44px 100px -44px rgba(0,0,0,.85),0 0 0 1px rgba(7,123,255,.05)}
  .chat-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.18)}
  .chat-ava{width:36px;height:36px;border-radius:11px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.95rem;flex-shrink:0;box-shadow:0 0 20px -4px var(--accent)}
  .chat-id{display:flex;flex-direction:column;line-height:1.28}
  .chat-id b{font-size:.96rem;font-weight:650;letter-spacing:-.01em}
  .chat-id span{font-size:.74rem;color:var(--dim)}
  .chat-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--dim)}
  .chat-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
  .chat-thread{height:clamp(388px,54vh,472px);overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .chat-thread::-webkit-scrollbar{width:6px}.chat-thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .msg{max-width:84%;animation:msgin .42s cubic-bezier(.2,.7,.2,1)}
  @keyframes msgin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .msg.me{align-self:flex-end;background:var(--accent);color:#fff;padding:12px 16px;border-radius:16px 16px 5px 16px;font-size:.98rem;font-weight:500;line-height:1.4}
  .msg.me .pr{opacity:.75;font-family:var(--mono);margin-right:2px}
  .msg.ai{align-self:flex-start;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--ink);padding:15px 17px;border-radius:16px 16px 16px 5px}
  .msg.ai .ai-status{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
  .msg.ai .ai-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .msg.ai .ai-status.amber{color:var(--amber)}
  .msg.ai .ai-res{margin-top:10px;font-size:.97rem;line-height:1.55;color:var(--dim)}
  .msg.ai .ai-res b{color:var(--ink);font-weight:550}
  .msg.ai .ai-chips{margin-top:13px;display:flex;flex-wrap:wrap;gap:6px}
  .msg.ai .ai-chips span{font-size:.75rem;border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--ink);background:rgba(255,255,255,.025)}
  .msg.ai .ai-cta{margin-top:15px}
  .msg.typing{align-self:flex-start;display:flex;gap:5px;padding:16px 18px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px 16px 16px 5px}
  .msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:typedot 1.3s infinite ease-in-out}
  .msg.typing i:nth-child(2){animation-delay:.18s}.msg.typing i:nth-child(3){animation-delay:.36s}
  @keyframes typedot{0%,65%,100%{opacity:.3;transform:translateY(0)}32%{opacity:1;transform:translateY(-5px)}}
  .chat-input{border-top:1px solid var(--line);padding:14px 16px 16px;background:rgba(0,0,0,.22)}
  .chat-suggest{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
  .chat-suggest::-webkit-scrollbar{display:none}
  .sug{flex:0 0 auto;font-size:.82rem;border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--dim);background:transparent;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
  .sug:hover{color:var(--ink);border-color:var(--accent);background:rgba(7,123,255,.08)}
  .chat-box{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:13px 15px;color:var(--dim);font-size:.95rem}
  .chat-box .pr{color:var(--accent);font-family:var(--mono)}
  .chat-box .send{margin-left:auto;width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
  .command-ipad-section{padding:0;background:#07080a;overflow:hidden}
  .command-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:#07080a;isolation:isolate}
  .command-stage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,#07080a 88%)}
  .command-art{position:relative;width:100%;aspect-ratio:1672/941}
  .command-art>img{display:block;width:100%;height:100%;object-fit:cover}
  .command-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,.22) 30%,rgba(0,0,0,.03) 55%,rgba(0,0,0,.08))}
  .command-copy{position:absolute;z-index:6;left:clamp(30px,6.8vw,118px);top:clamp(104px,16vw,260px);width:min(440px,31vw);color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.46)}
  .command-copy .display{max-width:9.5ch;font-size:clamp(2.45rem,4.7vw,5.15rem);letter-spacing:-.052em}
  .command-copy .quiet{color:rgba(255,255,255,.84);max-width:34ch}
  .command-proof{margin-top:clamp(22px,2.7vw,34px);font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.45;color:rgba(255,255,255,.9);max-width:30ch}
  .command-proof b{color:#fff;font-weight:650}
  .ipad-backdrop{display:none}
  .ipad-screen{position:absolute;z-index:4;left:45.33%;top:27.84%;width:35.05%;height:46.23%;overflow:hidden;border-radius:4px;box-shadow:0 24px 70px -30px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.09)}
  .ipad-screen::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.035),transparent 32%,transparent 76%,rgba(104,147,203,.025));box-shadow:inset 0 0 34px rgba(0,0,0,.2)}
  .ipad-screen .chat{width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:3px;background:linear-gradient(180deg,rgba(11,14,20,.9),rgba(5,7,11,.88));box-shadow:none;display:flex;flex-direction:column;backdrop-filter:blur(18px) saturate(132%);-webkit-backdrop-filter:blur(18px) saturate(132%)}
  .ipad-screen .chat-head{padding:10px 14px;background:rgba(0,0,0,.2)}
  .ipad-screen .chat-ava{width:28px;height:28px;border-radius:9px;font-size:.74rem}
  .ipad-screen .chat-id b{font-size:.78rem}
  .ipad-screen .chat-id span{font-size:.6rem}
  .ipad-screen .chat-status{display:none}
  .ipad-screen .chat-thread{height:auto;min-height:0;flex:1;padding:13px 14px;gap:8px}
  .ipad-screen .msg{max-width:82%}
  .ipad-screen .msg.me{padding:8px 11px;border-radius:12px 12px 4px 12px;font-size:.68rem;line-height:1.32}
  .ipad-screen .msg.ai{padding:9px 11px;border-radius:12px 12px 12px 4px}
  .ipad-screen .msg.ai .ai-status{font-size:.49rem}
  .ipad-screen .msg.ai .ai-res{margin-top:6px;font-size:.65rem;line-height:1.38}
  .ipad-screen .msg.ai .ai-chips{margin-top:8px;gap:4px}
  .ipad-screen .msg.ai .ai-chips span{font-size:.5rem;padding:4px 6px;border-radius:6px}
  .ipad-screen .msg.ai .ai-chips span:nth-child(n+5){display:none}
  .ipad-screen .msg.ai .ai-cta{margin-top:9px;padding:6px 10px;font-size:.6rem}
  .ipad-screen .msg.typing{padding:10px 12px}
  .ipad-screen .msg.typing i{width:5px;height:5px}
  .ipad-screen .chat-input{padding:9px 11px 10px;background:rgba(0,0,0,.24)}
  .ipad-screen .chat-suggest{display:none}
  .ipad-screen .chat-box{gap:7px;border-radius:10px;padding:8px 10px;font-size:.65rem}
  .ipad-screen .chat-box .send{width:23px;height:23px;border-radius:7px;font-size:.68rem}
  @media(max-width:920px){
    .command-stage{min-height:990px}
    .command-stage::after{height:12%}
    .command-art{position:absolute;top:540px;left:calc(50% - 468px);width:720px;aspect-ratio:1672/941}
    .command-copy{top:94px;left:24px;width:min(342px,calc(100vw - 48px));text-shadow:0 3px 24px rgba(0,0,0,.5)}
    .command-copy .display{font-size:clamp(2.35rem,13vw,3.65rem);max-width:9.5ch}
    .command-copy .quiet{font-size:1rem}
    .command-proof{font-size:1rem;max-width:30ch}
    .ipad-screen{left:45.33%;top:27.84%;width:35.05%;height:46.23%}
    .ipad-screen .chat-head{padding:8px 11px}
    .ipad-screen .chat-ava{width:24px;height:24px;border-radius:7px}
    .ipad-screen .chat-id b{font-size:.68rem}
    .ipad-screen .chat-id span,.ipad-screen .chat-status{display:none}
    .ipad-screen .chat-thread{padding:10px 11px;gap:7px}
    .ipad-screen .msg.me{font-size:.68rem;padding:7px 9px}
    .ipad-screen .msg.ai{padding:8px 9px}
    .ipad-screen .msg.ai .ai-status{font-size:.48rem}
    .ipad-screen .msg.ai .ai-res{font-size:.68rem}
    .ipad-screen .msg.ai .ai-chips span:nth-child(n+4){display:none}
    .ipad-screen .msg.ai .ai-chips span{font-size:.49rem;padding:3px 6px}
    .ipad-screen .msg.ai .ai-cta{display:none}
    .ipad-screen .chat-input{padding:8px 10px}
    .ipad-screen .chat-suggest{display:none}
    .ipad-screen .chat-box{font-size:.61rem;padding:8px 9px}
    .ipad-screen .chat-box .send{width:22px;height:22px}
  }
  @media(prefers-reduced-motion:reduce){.msg{animation:none}.msg.typing i{animation:none}}

  /* ==========================================================================
     ==========================================================================
     WE-COMMERCE RESTYLE — Mist page (2026-07)

     Everything below this line is the restyle pass and deliberately overrides
     the styling above it by source order. Net-new selectors are namespaced
     .we-fc-* / --we-fc-*. Two var blocks are copied verbatim from the gold
     reference (assets/teardown-rhode.css lines 1-6 and 817-832) so the paper
     and the torn edges are byte-identical to the teardowns.
     ==========================================================================
     ========================================================================== */

  /* --- 1. Procedural paper — verbatim, assets/teardown-rhode.css:1-6 --- */
:root{
  --pp-grain-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.52%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.46%27%20numOctaves%3D%273%27%20seed%3D%2710%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.64%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-grain-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.8%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.32%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.52%27%20numOctaves%3D%274%27%20seed%3D%271%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.34%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-g-size:304px 304px;--pp-s-size:280px 280px;--pp-gb-size:304px 304px;--pp-sb-size:800px 800px}

  /* --- 2. Torn-edge tiles + painted strokes — verbatim, assets/teardown-rhode.css:817-832 --- */
:root{
  --tx1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tx2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C24.6%200.1%2C24.6%203.6%2C24.4%206.9%2C23.3%2012.1%2C19.3%2018.1%2C18.3%2027.6%2C18.3%2028.4%2C18.8%2032.6%2C19.3%2033.1%2C19.8%2038.9%2C20.5%2041.6%2C20%2051.9%2C20.5%2054.4%2C21%2055.9%2C22.3%2056.9%2C24%2059.1%2C25.5%2068.9%2C27%2074.1%2C26.5%2082.1%2C24%2090.1%2C24.3%20104.1%2C23.5%20115.6%2C24.8%20119.1%2C24%20119.9%2C24.3%20120.6%2C23.8%20128.6%2C24.3%20137.9%2C24.3%20141.9%2C23.8%20149.4%2C24%20152.6%2C23.3%20155.4%2C21.8%20158.1%2C21%20163.6%2C20.3%20167.9%2C20.3%20171.9%2C22.5%20172.1%2C22.3%20173.6%2C23.5%20176.1%2C23.8%20176.4%2C24.3%20178.6%2C24.3%20180.1%2C25%20188.1%2C26%20192.9%2C27.3%20202.1%2C28.3%20226.9%2C25.8%20238.4%2C23.8%20248.4%2C24.5%20260.6%2C24.3%20263.9%2C24.8%20272.1%2C24.8%20273.9%2C25.3%20274.6%2C25%20275.1%2C25.5%20275.9%2C25.3%20276.4%2C25.8%20277.4%2C25.5%20278.6%2C26%20282.9%2C26.3%20287.1%2C26%20291.1%2C25.1%20299.9%2C24.6%20340%2C24.6%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tx3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%203.9%2C23.5%2012.9%2C21.8%2019.1%2C23.3%2026.9%2C23%2031.6%2C24.3%2034.9%2C24.3%2043.1%2C22.5%2048.9%2C22.8%2055.4%2C21%2059.1%2C21%2061.1%2C21.5%2065.4%2C24.8%2066.9%2C25.3%2074.6%2C23.8%2080.6%2C25.3%2089.6%2C25.5%2092.9%2C26.8%2096.4%2C27%20100.1%2C26.3%20106.4%2C26%20115.6%2C22.8%20118.4%2C22.3%20126.4%2C22.8%20131.1%2C20.3%20137.9%2C19.5%20140.1%2C20%20146.1%2C24%20151.6%2C24.5%20154.1%2C26.8%20155.4%2C27.3%20159.9%2C27.5%20167.9%2C27%20171.9%2C28.8%20178.6%2C27.5%20186.6%2C24%20193.6%2C22.8%20196.6%2C23.3%20203.1%2C27.3%20205.6%2C27.3%20207.1%2C25.3%20207.4%2C23%20208.1%2C22%20210.4%2C21.3%20213.9%2C21.3%20217.1%2C23%20224.1%2C24.3%20226.4%2C25.5%20229.6%2C25.5%20233.1%2C24.5%20238.6%2C24.5%20242.9%2C23.8%20245.9%2C24%20250.4%2C25.3%20253.9%2C25.3%20257.6%2C24.3%20262.4%2C24.3%20272.6%2C22.3%20277.6%2C23%20284.9%2C26%20288.4%2C26.4%20295.6%2C24.2%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tx4:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C26.3%200.1%2C26.3%205.1%2C25.2%2012.1%2C22.8%2021.6%2C23.8%2035.4%2C24.3%2041.6%2C22.3%2053.9%2C21.3%2058.4%2C20%2073.6%2C19%2077.4%2C19.3%2083.1%2C18.5%2090.4%2C18.8%2097.9%2C20.8%20108.6%2C22.8%20128.6%2C22.8%20136.1%2C23.8%20146.1%2C23.5%20149.9%2C24.3%20152.9%2C25.5%20161.4%2C25.3%20177.6%2C22%20185.6%2C22.5%20189.1%2C22.3%20193.1%2C23%20195.9%2C24.8%20200.9%2C26.5%20201.1%2C27.3%20201.4%2C26.8%20201.9%2C27.5%20205.9%2C28.8%20210.4%2C28.5%20213.4%2C27.8%20214.6%2C26.5%20219.1%2C26%20233.9%2C26.5%20240.1%2C25.3%20242.1%2C23.5%20248.6%2C21%20256.6%2C20.3%20264.9%2C20.3%20270.4%2C19.5%20284.6%2C21.3%20286.1%2C22.3%20286.4%2C21.8%20286.9%2C22.5%20289.4%2C23.8%20289.6%2C24.5%20292.4%2C25.6%20296.6%2C26.3%20299.9%2C26.3%20340%2C26.3%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-r1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2727.8%2C-40%2027.8%2C0.1%2027.8%2C8.6%2028.5%2C17.1%2028%2C22.1%2026%2C31.9%2025.8%2C36.4%2026.8%2C40.9%2026.8%2C43.9%2026%2C49.4%2023.5%2C54.1%2023%2C56.6%2023.3%2C69.1%2022.8%2C72.4%2022.8%2C76.9%2023.3%2C79.4%2023%2C90.6%2023.8%2C94.9%2023.3%2C104.9%2024.5%2C116.4%2025.5%2C120.4%2025%2C132.6%2025.8%2C136.1%2025.3%2C140.4%2026%2C143.6%2026.5%2C143.9%2026.3%2C144.9%2027%2C146.1%2027.3%2C148.9%2025.3%2C159.1%2025.5%2C160.4%2025.3%2C162.6%2024.8%2C162.9%2025%2C163.9%2024.3%2C169.4%2023.5%2C171.1%2023.8%2C171.6%2023.3%2C171.9%2024%2C177.4%2023%2C186.1%2024%2C194.1%2024.8%2C196.1%2025.3%2C204.6%2024.5%2C211.9%2023.8%2C214.9%2022.8%2C216.4%2022%2C220.6%2022%2C226.4%2022.8%2C227.4%2023.5%2C230.1%2023.5%2C234.1%2022.8%2C241.1%2021%2C249.1%2021.5%2C272.4%2022.3%2C275.4%2024%2C277.9%2024.5%2C283.4%2025.5%2C286.9%2027.3%2C290.1%2027.9%2C294.6%2027.8%2C299.9%2027.8%2C340%20-40%2C340%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-r2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2724%2C-40%2024%2C0.1%2025.5%2C10.6%2023%2C18.1%2022.5%2C22.6%2025.3%2C30.4%2026%2C37.4%2025.3%2C42.4%2025%2C54.6%2022%2C68.6%2022%2C72.6%2020.8%2C82.6%2021%2C94.4%2020.3%2C99.1%2020.5%2C103.4%2021%2C103.9%2022.3%2C108.9%2022.5%2C115.4%2025.5%2C122.6%2026.5%2C126.6%2026.5%2C131.1%2025%2C137.1%2024.5%2C143.4%2026.8%2C157.6%2026.3%2C162.4%2024.3%2C170.9%2023.8%2C176.4%2023.5%2C185.6%2024%2C190.9%2024%2C202.4%2022%2C213.6%2021.5%2C214.4%2021.5%2C218.9%2023.3%2C226.6%2023.8%2C231.4%2024%2C245.9%2023%2C251.9%2023%2C256.6%2024.8%2C260.6%2025.5%2C264.6%2025.5%2C269.9%2024%2C276.4%2024%2C279.4%2024.5%2C279.6%2024.3%2C280.4%2025%2C284.4%2023.8%2C292.6%2024%2C299.9%2024%2C340%20-40%2C340%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-r3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2723.8%2C-40%2023.8%2C0.1%2023.8%2C7.1%2023%2C13.1%2025.5%2C20.4%2025.5%2C25.1%2024.5%2C34.6%2023.3%2C38.6%2021.3%2C50.6%2023.3%2C55.1%2024.3%2C56.6%2025%2C56.9%2025.3%2C58.6%2024.8%2C58.9%2024.8%2C59.9%2026%2C66.6%2023%2C77.6%2023%2C81.4%2024%2C85.1%2023.8%2C92.4%2024.3%2C95.4%2024.3%2C105.9%2023.8%2C113.4%2024.3%2C116.4%2024%2C123.9%2024.5%2C128.9%2022.5%2C133.1%2023%2C136.4%2024.5%2C138.1%2025.5%2C141.1%2025.8%2C146.6%2025.3%2C148.4%2022.8%2C151.6%2022.5%2C154.1%2023.3%2C157.1%2023.3%2C163.1%2024.3%2C166.6%2024.5%2C173.9%2026%2C177.9%2026%2C179.4%2024%2C185.6%2023%2C195.4%2024%2C202.9%2023.3%2C206.6%2024%2C224.6%2022.5%2C232.1%2022.5%2C236.9%2023.5%2C241.6%2025.8%2C244.4%2026%2C250.4%2026.5%2C251.6%2026.5%2C255.1%2023.3%2C263.4%2021.8%2C272.1%2022.3%2C276.1%2024.5%2C279.6%2025.3%2C282.6%2024.8%2C284.6%2025%2C286.4%2023.8%2C299.9%2023.8%2C340%20-40%2C340%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-l1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2723.5%2C-40%2023.5%2C0.1%2023%2C12.1%2023.3%2C25.6%2026.8%2C45.4%2026.8%2C49.9%2023.8%2C60.4%2023%2C73.1%2021.5%2C79.9%2021.3%2C84.6%2022%2C90.6%2024.3%2C96.9%2024%2C101.1%2023.3%2C102.9%2023.3%2C107.1%2025.3%2C112.1%2025.8%2C118.6%2025%2C122.9%2023.3%2C128.1%2023.5%2C131.4%2021.3%2C143.1%2021.3%2C154.1%2020.3%2C158.9%2020.3%2C162.4%2019.3%2C169.6%2019.5%2C174.9%2020.3%2C178.6%2019.5%2C192.1%2019.8%2C194.6%2021%2C197.1%2021.5%2C200.1%2021%2C217.6%2022.8%2C222.9%2024%2C224.9%2025.3%2C225.4%2026.3%2C227.9%2026%2C232.6%2024%2C238.1%2022.8%2C255.6%2020.8%2C263.1%2021.3%2C268.9%2024.3%2C280.4%2024.5%2C284.4%2024%2C287.1%2023.5%2C299.9%2023.5%2C340%2088%2C340%2088%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-l2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2724%2C-40%2024%2C0.1%2024.5%2C11.4%2023.8%2C26.1%2025.3%2C37.4%2025%2C49.1%2025.8%2C56.6%2025.3%2C57.1%2025.3%2C59.1%2022.8%2C62.6%2022.5%2C68.9%2023.5%2C74.6%2023.5%2C80.1%2026.3%2C89.4%2026.8%2C99.4%2026.3%2C105.9%2024.8%2C111.1%2023.8%2C117.4%2023.5%2C134.1%2024.5%2C146.1%2023.8%2C150.4%2023.3%2C150.9%2021.5%2C157.4%2021%2C161.4%2021%2C164.9%2022.3%2C167.9%2022.8%2C168.1%2024%2C173.9%2024%2C179.4%2023.3%2C183.6%2023.8%2C194.6%2023.5%2C207.1%2025.3%2C216.4%2023.3%2C232.1%2023.8%2C239.4%2024.8%2C243.6%2024.8%2C248.4%2021%2C262.9%2020.8%2C269.1%2021.3%2C269.4%2021.3%2C270.4%2020.8%2C271.6%2021.3%2C271.9%2020.8%2C272.1%2021%2C276.4%2020.5%2C276.6%2021.5%2C280.6%2021%2C281.1%2022%2C283.4%2023.4%2C290.4%2024%2C299.9%2024%2C340%2088%2C340%2088%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tv-l3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2724.8%2C-40%2024.8%2C0.1%2025.5%2C7.6%2027.3%2C12.6%2026.8%2C14.6%2025.3%2C17.1%2024.5%2C23.6%2023.3%2C27.4%2023.3%2C32.1%2023.8%2C34.4%2023.5%2C42.4%2024.5%2C49.1%2024%2C52.4%2022.3%2C57.1%2022.3%2C61.6%2023.8%2C69.9%2023.8%2C77.1%2024.8%2C83.1%2024.8%2C86.4%2025.5%2C87.6%2027.8%2C89.4%2029%2C91.4%2029.3%2C96.1%2028.5%2C104.1%2027.3%2C108.1%2024.5%2C113.1%2022.5%2C113.9%2020.8%2C116.1%2019%2C121.1%2019%2C123.6%2020.8%2C129.1%2020.8%2C131.4%2019.3%2C134.9%2019.5%2C139.4%2023%2C147.1%2023.8%2C147.4%2028%2C158.6%2027.8%2C162.4%2026%2C168.1%2026%2C176.4%2025.3%2C178.1%2023.5%2C188.1%2023.5%2C191.9%2024%2C193.4%2023.5%2C201.4%2024.3%2C203.4%2025.8%2C205.4%2025.5%2C206.1%2026%2C206.4%2026.5%2C215.4%2024.8%2C220.1%2023.3%2C226.9%2021.3%2C230.9%2021.3%2C232.9%2023%2C239.9%2024.8%2C242.9%2028%2C246.6%2028.5%2C249.6%2027.8%2C253.4%2024.8%2C261.6%2022%2C265.1%2021.5%2C266.9%2021.5%2C274.1%2020.8%2C276.9%2020%2C277.6%2020.3%2C278.4%2019.8%2C278.6%2020.5%2C282.6%2023.1%2C289.9%2024.8%2C299.9%2024.8%2C340%2088%2C340%2088%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  --tear-amp:26px;
  --scissors-sm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='16'%20viewBox='0%200%2034%2016'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='5'%20cy='11'%20r='2.6'/%3E%3Cpath%20d='M7%206.4%20L20%2011%20M7%209.6%20L20%205'/%3E%3Cpath%20d='M20%208%20L30%208'/%3E%3C/g%3E%3C/svg%3E");
  --paint-underline-1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5%2010%20C64%204,124%2013,184%208%20C236%204,286%2012,315%208'%20fill='none'%20stroke='%23fff'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --paint-underline:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2018'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2011%20C60%205,120%2014,180%209%20C230%205,280%2013,316%208'%20fill='none'%20stroke='%23fff'%20stroke-width='5.5'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2015%20C70%2011,150%2017,230%2013%20C270%2011,300%2015,312%2013'%20fill='none'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linecap='round'%20opacity='0.55'/%3E%3C/svg%3E");
}

  /* ==========================================================================
     3. Brand tokens — one blue
     `--accent:#077bff` was a second, unbranded blue; the system has exactly one
     (#42b1ff), redeclared here so every existing use re-resolves.
     (`--mono` was also overridden from here; it now lives at its single source
     at the top of the file instead, so the token reads the same everywhere.)
     ========================================================================== */
  :root{
    --accent:#42b1ff; --accent-2:#7ec7ff; --blue-2:#7ec7ff;
    --accent-soft:rgba(66,177,255,.14);
    --we-ink-w:#141109;
    /* net-new annotation marks: the system ships a painted underline and a
       painted arrow but no hand-drawn circle, so this one is authored here. */
    --we-fc-circle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2090%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C0%200.1%2C0%206.6%2C0%207.1%2C49.5%209.9%2C56.8%2016.9%2C65.8%2030.6%2C75.5%2046.4%2C82%2070.4%2C86.5%20104.4%2C88%20115.6%2C88%20131.4%2C86.5%20156.4%2C81.3%20167.1%2C77.3%20173.6%2C73.8%20186.4%2C63.8%20191.6%2C57.3%20194.6%2C49.8%20194.9%2C0%20199.9%2C0%20240%2C0%20240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
    --we-fc-arrow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2022%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C0%200.1%2C0%201.6%2C0%201.9%2C11.5%202.4%2C12.3%204.1%2C12.8%2023.4%2C12.5%2023.6%2C18.8%2024.1%2C19.5%2025.9%2C19.5%2026.6%2C19%2028.6%2C17%2035.1%2C12%2035.4%2C11.5%2035.6%2C0%2039.9%2C0%2080%2C0%2080%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  }

  /* ==========================================================================
     4. The canvas — dark noisy paper instead of flat near-black
     One continuous sheet: `background-attachment:fixed` on every surface that
     carries the stock so the grain registers across section boundaries instead
     of restarting per element.
     ========================================================================== */
  body{background-color:var(--bg);background-image:var(--we-paper-dark);
    background-size:cover;background-position:center;background-attachment:fixed}
  .sx{background:transparent}
  .sx--lift{background:linear-gradient(180deg,rgba(7,8,10,0) 0%,rgba(13,15,20,.62) 50%,rgba(7,8,10,0) 100%)}
  .feat,.command-ipad-section,.command-stage,#cinema{
    background-color:#07080a;background-image:var(--we-paper-dark);
    background-size:cover;background-position:center;background-attachment:fixed}
  .prompt-bridge{background-color:#07080a;
    background-image:linear-gradient(180deg,rgba(9,11,15,.88) 0%,rgba(7,9,13,.84) 42%,rgba(7,8,10,.8) 100%),var(--we-paper-dark);
    background-size:auto,cover;background-position:center,center;
    background-attachment:scroll,fixed}
  /* Footer carries the same stock as the body, so no flat band shows under it
     where the page stops short of the viewport (RECON §6). */
  footer{background-color:#050608;
    /* The stock is a photograph, and the crop that lands at the footer's top is
       one of its lighter passages — light enough that the torn edge added in the
       fix pass had nothing to read against. Veiled to near-black the same way
       the nav bar veils this identical stock. */
    background-image:linear-gradient(rgba(4,5,8,.72),rgba(4,5,8,.72)),var(--we-paper-dark);
    background-size:auto,cover;background-position:center,center;
    /* NOT `fixed`: a fixed background attachment defeats a mask on the same
       element — measured, the torn top edge collapsed to a 4px wobble at the
       box top and went to a full rag the moment the attachment was released.
       `fixed` was only here to register the footer's grain with the body's so
       no flat band showed at a flush seam; the seam is torn now, so a ragged
       edge hides any texture offset far better than registration did. */
    background-attachment:scroll,scroll;
    border-top:none}


  /* ==========================================================================
     6. Buttons — the analog signature: 4px radius, hard offset shadow, tilt
     `rotate:`/`translate:` are used instead of `transform:` throughout so the
     .rv reveal system (which writes `transform:none`) can never win.
     ========================================================================== */
  .btn{border-radius:4px;padding:13px 24px;font-size:.9rem;font-weight:700;
    letter-spacing:-.005em;border:1px solid transparent;
    transition:box-shadow .22s ease,translate .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
  .btn:hover{transform:none}
  .btn--primary{background:#fff;color:#07101a;border-color:transparent;
    box-shadow:3px 3px 0 rgba(0,0,0,.5);rotate:-.6deg}
  .btn--primary:hover{background:#fff;box-shadow:4px 5px 0 rgba(0,0,0,.55);translate:0 -2px}
  .btn--ghost{background:rgba(255,255,255,.04);color:#fff;
    border:1px solid rgba(255,255,255,.22);box-shadow:none;rotate:0deg}
  .btn--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.44);
    color:#fff;translate:0 -2px}
  .btn--sm{padding:9px 16px;font-size:.82rem}
  .foot-link{border-bottom-color:rgba(255,255,255,.4)}
  .foot-link:hover{border-color:var(--accent)}

  /* The hero play control: a white paper chip, not a glowing glass orb. */
  .feat-open{width:clamp(54px,4.8vw,78px);height:clamp(46px,4.1vw,66px);
    border:0;border-radius:4px;color:#0c0d10;
    background:var(--pp-speck-w) 0 0/var(--pp-s-size) repeat,
               var(--pp-grain-w) 0 0/var(--pp-g-size) repeat #fff;
    background-blend-mode:multiply,multiply;
    box-shadow:4px 4px 0 rgba(0,0,0,.55);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    transform:translate(-50%,-50%);rotate:-1.4deg;
    transition:box-shadow .22s ease,scale .22s ease}
  .feat-open::before{display:none}
  .feat-open:hover{background-color:#fff;box-shadow:6px 6px 0 rgba(0,0,0,.6);
    transform:translate(-50%,-50%);scale:1.05}
  .feat-open svg{width:32%;height:32%;margin-left:6%;filter:none}
  .feat-open:focus-visible{outline:2.5px solid #fff;outline-offset:5px}

  /* Media + carousel controls: small black paper chips on the same signature. */
  .fbtn,.lb-close,.ugc-arrow{border-radius:4px;border:0;
    background:var(--pp-speck-b) 0 0/var(--pp-sb-size) repeat,
               var(--pp-grain-b) 0 0/var(--pp-gb-size) repeat #0c0d10;
    background-blend-mode:screen,screen;color:#f4f5f7;
    box-shadow:2px 2px 0 rgba(0,0,0,.55);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .fbtn{width:44px;height:40px}
  .lb-close{width:44px;height:40px;font-size:1rem}
  .ugc-arrow{width:44px;height:40px}
  .fbtn:hover,.lb-close:hover,.ugc-arrow:hover:not(:disabled){
    background-color:#fff;color:#0c0d10;box-shadow:3px 4px 0 rgba(0,0,0,.6)}

  /* ==========================================================================
     7. The hero photo, torn along the bottom (12:35 / 18:55)
     The authored gradient fade is removed — the rag is the transition now. The
     stage's own box-shadow goes with it, because a mask clips the shadow it
     casts and would leave a hard rectangle behind the teeth.
     ========================================================================== */
  .feat::after{display:none}
  .feat-stage{box-shadow:none;
    -webkit-mask-image:var(--tx2),linear-gradient(#000,#000);
            mask-image:var(--tx2),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
    -webkit-mask-size:300px 48px,100% calc(100% - 46px);
            mask-size:300px 48px,100% calc(100% - 46px);
    -webkit-mask-position:bottom left,top;mask-position:bottom left,top}

  /* Hero annotation. SITE-WIDE RULE (Chey, 2026-07-27): a mark must never
     share its ink with the text it decorates — this underline sits under
     solid-white words, so it takes the accent, not currentColor. */
  .mist-demys .we-underline{font-style:normal}
  .mist-demys .we-underline::after{bottom:-.16em;height:.22em;background:var(--accent)}

  /* ==========================================================================
     8. Video tags → black paper strips (12:45)
     Torn on both vertical edges, and every strip picks a different tile, tilt
     and texture offset so no two rags match.
     ========================================================================== */
  /* the scatter caps card opacity at .72, which renders a black strip invisible
     against a black ground — lifted just enough that the paper reads, without
     flattening the depth the mosaic is built on */
  .prompt-bridge.in .citem{opacity:clamp(0,calc(.92 - var(--handoff)),.92)}
  .prompt-videos .citem{text-align:center}
  .prompt-videos .clabel{display:inline-block;margin-top:11px;text-align:left;
    font-family:var(--mono);font-size:.68rem;line-height:1.25;letter-spacing:.01em;
    color:#e7eaef;text-shadow:none;
    background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
               var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #0c0d10;
    background-blend-mode:screen,screen;
    padding:7px calc(6px + var(--we-strip-amp,17px));
    -webkit-mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
            mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;mask-repeat:repeat-y,repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,48px 300px,calc(100% - 60px) 100%;
            mask-size:48px 300px,48px 300px,calc(100% - 60px) 100%;
    -webkit-mask-position:left top,right top,center;mask-position:left top,right top,center;
    rotate:var(--we-strip-r,-1.2deg)}
  .prompt-videos .clabel b{color:#fff;font-weight:650}
  .prompt-videos .citem:nth-child(3n+1) .clabel{--we-tl:var(--tv-l1);--we-tr:var(--tv-r3);--we-strip-r:1.1deg;--pp-sp:120px 70px;--pp-gp:40px 150px}
  .prompt-videos .citem:nth-child(3n+2) .clabel{--we-tl:var(--tv-l3);--we-tr:var(--tv-r2);--we-strip-r:-1.6deg;--pp-sp:200px 130px;--pp-gp:90px 40px}
  .prompt-videos .citem:nth-child(3n)   .clabel{--we-tl:var(--tv-l2);--we-tr:var(--tv-r1);--we-strip-r:.7deg}

  .lb-cmd{border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    color:#f4f5f7;font-family:var(--mono);font-weight:600;
    background:var(--pp-speck-b) 0 0/var(--pp-sb-size) repeat,
               var(--pp-grain-b) 0 0/var(--pp-gb-size) repeat #0c0d10;
    background-blend-mode:screen,screen;
    padding:10px calc(12px + var(--tear-amp)) 11px 14px;
    -webkit-mask-image:var(--tv-r2),linear-gradient(#000,#000);
            mask-image:var(--tv-r2),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;
            mask-size:48px 300px,calc(100% - 46px) 100%;
    -webkit-mask-position:right top,left;mask-position:right top,left;
    rotate:-.8deg}

  /* ==========================================================================
     9. Diagram lines → brand annotations, icons → hand-drawn wobble (13:23)
     Every line loses its per-node hue and blue bloom and becomes one
     transparent-white ink; the wobble comes from the page-local #we-fc-ink
     filter (declared in the section markup with a bbox-relative region — the
     shared #wobble-stroke uses a userSpaceOnUse region sized for page-scale
     coordinates and would blow up inside a viewBox-100 diagram).
     ========================================================================== */
  .opportunity-core-orbit{stroke:rgba(238,237,232,.26);stroke-width:.5;filter:none}
  .opportunity-atom-shells ellipse,
  .opportunity-atom-shells ellipse:nth-child(2),
  .opportunity-atom-shells ellipse:nth-child(3){stroke:rgba(238,237,232,.2);stroke-width:.52;filter:none}
  .opportunity-atom-traces ellipse{stroke:rgba(238,237,232,.36);stroke-width:.75;filter:none}
  .opportunity-electrons circle{fill:#f3f2ee;opacity:.6;filter:none}
  .opportunity-network path{stroke:rgba(238,237,232,.17);stroke-width:.38;filter:none}
  .opportunity-network .data-cross{stroke:rgba(238,237,232,.24);stroke-width:.44}
  .opportunity-network-streams use{stroke:rgba(238,237,232,.7);opacity:.42;filter:none}
  .opportunity-network-dots circle{fill:#f3f2ee;opacity:.7;filter:none}
  .opportunity-check .check-glow{stroke:rgba(238,237,232,.12)}
  .opportunity-check .check-main{stroke:#eeede8}
  .opportunity-check .check-light{stroke:rgba(255,255,255,.9)}
  .opportunity-check{filter:none}
  .opportunity-universe::before{border-color:rgba(238,237,232,.09);box-shadow:none}
  .prompt-systems::before{border-color:rgba(238,237,232,.07);box-shadow:none}
  .system-lines ellipse,.system-lines line{stroke:rgba(238,237,232,.16)}
  /* the icon glyphs read as drawn, without displacing the tile they sit in */
  .opportunity-nodes .system-planet-icon svg,
  .prompt-systems .system-planet-icon svg{filter:url(#we-fc-wob)}
  @media(prefers-reduced-motion:reduce){
    .opportunity-nodes .system-planet-icon svg,
    .prompt-systems .system-planet-icon svg{filter:none}
  }

  /* ==========================================================================
     10. The orbit core is now <mist-logo> (12:16)
     The authored blur is gone so the mark is crisp, and the core clears
     .opportunity-nodes (z-index 2, pointer-events:none) so the canvas receives
     the cursor.
     ========================================================================== */
  .opportunity-core{z-index:3;filter:none;transition:opacity .15s linear}
  .opportunity-core::before{display:none}
  .opportunity-core-mark{width:clamp(280px,35vw,490px);height:auto;display:block;
    pointer-events:auto;cursor:crosshair;translate:6% 0}
  .opportunity-core-mark mist-logo{display:block;width:100%}

  /* ==========================================================================
     11. Brands row → torn paper slips over a white halftone patch (14:47/15:41)
     The patch itself is generated in fc-landing.js: tone is carried by dot SIZE
     only — no opacity ramp, no gradient fade.
     ========================================================================== */
  .we-fc-brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:clamp(11px,1.3vw,19px);
    margin:clamp(30px,3.6vw,48px) 0 clamp(30px,3.5vw,44px);
    padding:clamp(18px,2.2vw,28px) 0;
    border-top:1px solid rgba(255,255,255,.075);
    border-bottom:1px solid rgba(255,255,255,.075)}
  .we-fc-slip-sh{filter:drop-shadow(0 9px 16px rgba(0,0,0,.6))}
  .we-fc-slip{--we-slip-amp:26px;position:relative;isolation:isolate;
    display:grid;place-items:center;
    /* minmax(0,1fr) is load-bearing: in an auto-sized track the track is sized
       BY the logo, so the img's max-width:100% has nothing definite to resolve
       against and every mark overflows the slip into the torn edge. */
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    width:clamp(126px,11.6vw,164px);height:clamp(54px,5vw,66px);
    padding:9px calc(7px + var(--we-slip-amp));
    background:transparent;
    -webkit-mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
            mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;mask-repeat:repeat-y,repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,48px 300px,calc(100% - 58px) 100%;
            mask-size:48px 300px,48px 300px,calc(100% - 58px) 100%;
    -webkit-mask-position:left top,right top,center;mask-position:left top,right top,center;
    rotate:var(--we-slip-r,0deg);
    transition:translate .24s ease,rotate .24s ease}
  .we-fc-slip .we-fc-ht{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
  /* Logo artwork is dark-on-transparent and sits on the halftone patch untouched
     — no filter, so the three marks that keep their brand colour (OLIPOP, Liquid
     I.V., Dr. Squatch) stay as drawn. --we-logo-h optically balances the row:
     the marks vary from very wide wordmarks to near-square stacked lockups, and
     `contain` alone sizes the tall ones off their height and leaves them small. */
  .we-fc-slip img{position:relative;z-index:1;display:block;
    max-width:100%;max-height:var(--we-logo-h,100%);object-fit:contain;filter:none}
  .we-fc-slip-sh:hover .we-fc-slip{translate:0 -4px;rotate:0deg}
  .we-fc-slip-sh:nth-child(4n+1) .we-fc-slip{--we-tl:var(--tv-l1);--we-tr:var(--tv-r3);--we-slip-r:-1.8deg;--pp-sp:120px 70px;--pp-gp:40px 150px}
  .we-fc-slip-sh:nth-child(4n+2) .we-fc-slip{--we-tl:var(--tv-l3);--we-tr:var(--tv-r2);--we-slip-r:1.4deg;--pp-sp:200px 130px;--pp-gp:90px 40px}
  .we-fc-slip-sh:nth-child(4n+3) .we-fc-slip{--we-tl:var(--tv-l2);--we-tr:var(--tv-r1);--we-slip-r:-.9deg;--pp-sp:60px 210px;--pp-gp:170px 80px}
  .we-fc-slip-sh:nth-child(4n)   .we-fc-slip{--we-tl:var(--tv-l1);--we-tr:var(--tv-r2);--we-slip-r:1.9deg;--pp-sp:240px 30px;--pp-gp:20px 60px}

  /* ==========================================================================
     12. Play cards → black paper, torn bottom + right, halftone-printed fill
     (16:43 / 18:06). The gradient is not painted any more: fc-landing.js prints
     a dot screen of it, tone by dot size. The shadow is cast by the unmasked
     .we-fc-card-sh wrapper, because a mask clips the shadow of the element it
     is applied to.
     ========================================================================== */
  .plays{gap:clamp(24px,2.8vw,38px)}
  .we-fc-card-sh{filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
  .play{border:0;border-radius:0;overflow:hidden;box-shadow:none;
    background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
               var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #0c0d10;
    background-blend-mode:screen,screen;
    padding:clamp(28px,3.4vw,46px) clamp(28px,3.4vw,46px) calc(clamp(30px,3.6vw,48px) + var(--tear-amp));
    -webkit-mask-image:var(--we-tb,var(--tx1)),linear-gradient(#000,#000);
            mask-image:var(--we-tb,var(--tx1)),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
    -webkit-mask-size:300px 48px,100% calc(100% - 46px);
            mask-size:300px 48px,100% calc(100% - 46px);
    -webkit-mask-position:bottom left,top;mask-position:bottom left,top;
    rotate:var(--we-card-r,0deg);
    transition:translate .3s ease,rotate .3s ease}
  .play::before,.play::after{display:none}
  .play:hover{border:0;transform:none;box-shadow:none;translate:0 -3px}
  .play .we-fc-ht{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
    pointer-events:none}
  .we-fc-card-sh:nth-child(3n+1) .play{--we-tb:var(--tx1);--we-card-r:-.35deg}
  .we-fc-card-sh:nth-child(3n+2) .play{--we-tb:var(--tx3);--we-card-r:.3deg;--pp-sp:200px 130px;--pp-gp:90px 40px}
  .we-fc-card-sh:nth-child(3n)   .play{--we-tb:var(--tx4);--we-card-r:-.25deg;--pp-sp:60px 210px;--pp-gp:170px 80px}
  .play .pn{color:#fff;text-shadow:none}
  .play .pb{color:#c9ced6;max-width:52ch}
  .play .pb b{color:#fff}

  /* Command chips → small black paper strips, torn left and right, randomized. */
  .play .cmds{margin-top:24px;gap:11px 13px;max-width:64%}
  .play .cmds span{--we-strip-amp:18px;
    font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.005em;
    color:#e7eaef;border:0;border-radius:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
               var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #0c0d10;
    background-blend-mode:screen,screen;
    padding:8px calc(5px + var(--we-strip-amp));
    -webkit-mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
            mask-image:var(--we-tl,var(--tv-l2)),var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;mask-repeat:repeat-y,repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,48px 300px,calc(100% - 62px) 100%;
            mask-size:48px 300px,48px 300px,calc(100% - 62px) 100%;
    -webkit-mask-position:left top,right top,center;mask-position:left top,right top,center;
    rotate:var(--we-strip-r,0deg);
    transition:translate .2s ease}
  .play .cmds span::before{color:var(--accent)}
  .play:hover .cmds span{border:0}
  .play .cmds span:nth-child(4n+1){--we-tl:var(--tv-l1);--we-tr:var(--tv-r3);--we-strip-r:-1.5deg;--pp-sp:120px 70px;--pp-gp:40px 150px}
  .play .cmds span:nth-child(4n+2){--we-tl:var(--tv-l3);--we-tr:var(--tv-r2);--we-strip-r:1.2deg;--pp-sp:200px 130px;--pp-gp:90px 40px}
  .play .cmds span:nth-child(4n+3){--we-tl:var(--tv-l2);--we-tr:var(--tv-r1);--we-strip-r:-.7deg;--pp-sp:60px 210px;--pp-gp:170px 80px}
  .play .cmds span:nth-child(4n)  {--we-tl:var(--tv-l1);--we-tr:var(--tv-r2);--we-strip-r:1.7deg;--pp-sp:240px 30px;--pp-gp:20px 60px}

  /* ==========================================================================
     13. Hand-drawn annotations (14:19 / 18:55)
     SITE-WIDE RULE (Chey, 2026-07-27): marks never share ink with the text
     they decorate. These sit on near-white display text, so both take the
     accent. (The old currentColor idiom — "inherit the text's own ink" — is
     the exact banned pattern: it guarantees colour-on-colour.)
     ========================================================================== */
  .we-fc-circle{position:relative;display:inline-block;font-style:normal}
  .we-fc-circle::after{content:"";position:absolute;left:-9%;top:-19%;
    width:118%;height:138%;pointer-events:none;z-index:0;opacity:.85;
    background:var(--accent);
    -webkit-mask:var(--we-fc-circle) center/100% 100% no-repeat;
            mask:var(--we-fc-circle) center/100% 100% no-repeat}
  .display .we-underline{font-style:normal}
  .display .we-underline::after{bottom:-.2em;height:.26em;background:var(--accent)}

  /* ==========================================================================
     14. Sweep — leftovers of the same diseases
     ========================================================================== */
  /* the movement rule under S1/S2 headings was a flat blue bar; make it the
     painted stroke the rest of the system uses — but keep it ACCENT-inked:
     currentColor here silently regressed it to white-on-white (the heading
     is near-white), which the 2026-07-27 annotation rule bans. */
  .p1 .movement::after{height:.16em;bottom:-.06em;border-radius:0;background:var(--accent);
    -webkit-mask:var(--paint-underline) left bottom/100% 100% no-repeat;
            mask:var(--paint-underline) left bottom/100% 100% no-repeat}
  /* pill chips and suggestion chips lose the glassy AI look */
  .prompt-chips span,.msg.ai .ai-chips span,.sug{border-radius:4px;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .tag{border-radius:4px;font-family:var(--mono)}
  /* the loop list's terminal arrow becomes the painted brand arrow */
  .loop p::before{content:"";display:inline-block;width:1.05em;height:.56em;
    flex:0 0 auto;align-self:center;background:currentColor;
    -webkit-mask:var(--we-fc-arrow) center/contain no-repeat;
            mask:var(--we-fc-arrow) center/contain no-repeat}
  .loop p.last::before{opacity:.9}
  .loop p.last{color:var(--ink)}

  @media(max-width:920px){
    /* A tear tile is a 48px band, so it needs ~46px of the axis it cuts before
       any solid middle survives. Two vertical bands on a narrow slip (or one
       horizontal band on a short one) leaves nothing but rag — so below this
       width every strip tears on ONE vertical edge only, and widths are given
       in vw because these boxes sit inside shrink-to-fit flex wrappers where a
       percentage has nothing definite to resolve against. */
    /* The logo is stretched to fill the content box, so its edge sits exactly at
       the padding edge — unlike the command strips, which shrink-wrap their text
       and get clearance for free. A filled box needs the padding to clear the
       rag itself, hence the much larger reserve here. */
    .we-fc-slip{--we-slip-amp:40px;width:calc(50vw - 40px);height:60px;
      padding:8px calc(6px + var(--we-slip-amp)) 8px 12px;
      -webkit-mask-image:var(--we-tr,var(--tv-r2)),linear-gradient(#000,#000);
              mask-image:var(--we-tr,var(--tv-r2)),linear-gradient(#000,#000);
      -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
      -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;
              mask-size:48px 300px,calc(100% - 46px) 100%;
      -webkit-mask-position:right top,left;mask-position:right top,left}
    .play .cmds{max-width:none}
    .play .cmds span{--we-strip-amp:20px;
      padding:8px calc(6px + var(--we-strip-amp)) 8px 11px;
      -webkit-mask-image:var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
              mask-image:var(--we-tr,var(--tv-r1)),linear-gradient(#000,#000);
      -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
      -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;
              mask-size:48px 300px,calc(100% - 46px) 100%;
      -webkit-mask-position:right top,left;mask-position:right top,left}
    .play{padding:26px 26px calc(28px + var(--tear-amp))}
  }
  @media(max-width:680px){
    .we-fc-brands{gap:10px;padding:16px 0}
    .feat-open{width:54px;height:46px}
  }

/* ============================================================
   CANONICAL SITE NAV — ported by the global pass
   ------------------------------------------------------------
   One nav across all 26 pages. This page previously carried the
   bespoke `nav#nav` mega-dropdown; the markup is now the teardown
   chassis (header.nav#siteNav > .nav-inner > a.brand + nav.nav-actions
   + .dd#teardownsDd, with the torn strip hanging off the bar) and
   these rules are its stylesheet, transcribed from the COMPUTED
   styles of the reference page rather than from its cascade — the
   teardown sheets override several nav rules further down the file
   (the CTA's hard offset shadow becomes a soft ambient one, .dd-head
   becomes FLBold in brand colour), so reading the source rules alone
   would have ported a nav that does not match what ships.

   Every token the nav needs is declared ON .nav rather than on :root,
   so this block cannot re-tint the page around it (gotcha 9) and is
   byte-identical in all five files that received it.
   ============================================================ */
.nav{
  --nav-bg:#05070a;
  --nav-ink:#f7f8fa;
  --nav-line:rgba(255,255,255,.1);
  --nav-brand:#42b1ff;
  --nav-label:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
  --nav-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  /* rag depth; the bar's own painted height derives from it — see the
     global-pass note in assets/teardown-rhode.css for the derivation. */
  --nav-tear-h:24px;
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(69px - .558 * var(--nav-tear-h));
  transition:box-shadow .3s,border-color .3s;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  border-bottom:1px solid transparent;
  /* pinned: .btn-cta and .nav-link carry no line-height of their own, so they
     inherited each host page's body metric and the CTA measured anywhere from
     34px to 40.4px across the five. */
  font-family:var(--nav-sans);line-height:1.65}
@media(max-width:640px){.nav{--nav-tear-h:18px}}
.nav.scrolled{border-bottom-color:var(--nav-line);
  box-shadow:0 8px 18px -11px rgba(0,0,0,.53)}
/* the content box stays 68px and overflows the shorter painted bar, so
   the raised strip supplies the last stretch of paper; z-index 6 keeps
   the CTA and its shadow above the strip (which is 5). */
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6}
/* the host page may already own a .brand class (the tour's 3D-scene HUD does,
   with its own padding) — reset rather than inherit it. */
.nav .brand{display:flex;align-items:center;flex:0 0 auto;height:68px;
  padding:0;margin:0;gap:0;background:none;border:0;text-decoration:none}
.nav .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain}
.nav-actions{display:flex;align-items:center;gap:30px}
.nav-link{color:var(--nav-ink);font-size:.92rem;text-decoration:none;transition:color .18s ease}
.nav-link:hover{color:#fff}
.nav-link[aria-current="page"]{color:#fff}
.nav .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;
  font-size:.85rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  background:var(--nav-brand);color:#050a12;white-space:nowrap;
  /* BATCH (V1-F5): the §8 nav-CTA spec is a blur-free hard offset. The
     de-glow pass had replaced it with a soft ambient shadow, making this the
     only button in the theme without the analog signature. Edited HERE rather
     than appended: this rule is `.nav .btn-cta` (0,2,0) and a later bare
     `.btn-cta` (0,1,0) loses to it silently. */
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
  transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease}
.nav .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}
.nav .dd{position:relative}
/* `font:inherit` is a SHORTHAND and resets font-size, so it has to come
   first — after `font-size` it silently put the trigger back to the button's
   16px while the sibling .nav-links stayed at .92rem (V6-2). */
.dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--nav-ink);
  font:inherit;font-size:.92rem;border:0;background:none;cursor:pointer;transition:color .18s ease}
.dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff}
.dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px;
  border:1px solid var(--nav-line);border-radius:12px;background:rgba(11,15,21,.98);
  box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70}
.dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-head{font-family:"FLBold","Arial Black",sans-serif;font-size:.74rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--nav-brand);padding:8px 12px 6px;
  transform:rotate(-.6deg);display:inline-block}
.dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  text-decoration:none;transition:background .18s ease}
.dd-item:hover{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28);
  color:var(--nav-brand);font-family:var(--nav-label);font-size:.62rem;font-weight:700;margin-top:1px}
.dd-item .tt{display:block;color:var(--nav-ink);font-size:.86rem;font-weight:560;line-height:1.25}
.dd-item .ds{display:block;color:var(--nav-ink);font-size:.72rem;line-height:1.3;margin-top:3px}
.dd-item.now{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item.now .tt{color:var(--nav-brand)}
.dd-item.now .ic{border-color:color-mix(in srgb,var(--nav-brand) 60%,transparent)}
/* the torn bottom edge. Same paper stock AND same darkening veil as the
   bar, both at background-attachment:fixed so the texture and the veil
   register to the viewport — that is what makes the strip a seamless
   continuation of the bar rather than a lighter band under it. */
.nav .tstrip--nav{position:absolute;left:0;right:0;top:100%;margin-top:-1px;
  height:var(--nav-tear-h);pointer-events:none;z-index:5;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.408));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C63.5%200.1%2C63.5%207.9%2C64.3%2020.4%2C61.3%2031.1%2C64.5%2055.6%2C67.8%2068.1%2C64.3%2075.9%2C65%2091.6%2C62.8%20118.1%2C67.8%20136.1%2C67.8%20157.1%2C62.3%20162.9%2C64.8%20171.6%2C65.3%20186.4%2C64.8%20198.4%2C62.5%20204.4%2C62.5%20208.4%2C64%20221.6%2C63%20244.4%2C64.8%20259.6%2C60%20266.9%2C63.3%20277.4%2C64%20283.4%2C65.8%20289.9%2C64%20305.4%2C65.8%20316.1%2C64.3%20329.9%2C64.3%20340.9%2C69.5%20354.4%2C66%20363.9%2C66.5%20367.4%2C65.5%20371.9%2C66.5%20386.1%2C65.5%20395.9%2C69.5%20408.6%2C65.3%20426.6%2C64%20436.1%2C67%20444.6%2C65.3%20458.9%2C70%20478.1%2C68%20489.1%2C65.5%20506.6%2C67.5%20520.9%2C66%20527.9%2C69.8%20531.9%2C70.3%20536.4%2C68%20550.1%2C65.8%20562.1%2C61.8%20571.4%2C65.3%20577.6%2C65%20585.4%2C70.3%20600.6%2C68.3%20605.6%2C66%20611.6%2C66.3%20620.1%2C64.5%20625.4%2C66%20640.6%2C64.8%20645.6%2C66.3%20663.4%2C67%20671.1%2C65.5%20681.1%2C67%20691.9%2C64.5%20697.1%2C66%20706.6%2C66%20714.9%2C70%20726.1%2C66.5%20744.6%2C65.8%20749.6%2C67.5%20761.4%2C67%20768.9%2C71.5%20780.9%2C69.3%20786.4%2C70.8%20793.9%2C68%20797.4%2C68%20804.6%2C70.8%20822.6%2C68%20827.9%2C68.8%20833.4%2C71.3%20844.1%2C71.3%20850.1%2C70.3%20857.6%2C65.5%20866.9%2C64.5%20878.6%2C68.5%20884.6%2C66.8%20891.1%2C67.5%20896.1%2C66%20901.1%2C68%20908.1%2C67.3%20912.6%2C69.3%20918.1%2C68.5%20921.1%2C69.8%20931.4%2C68.8%20945.4%2C65%20949.9%2C67.8%20961.1%2C66%20981.4%2C69.5%20992.1%2C68.5%20996.1%2C70.3%201006.1%2C70%201012.9%2C66.5%201018.4%2C66%201025.6%2C68.5%201038.4%2C68.5%201041.1%2C69.5%201048.6%2C66.8%201056.6%2C66.8%201063.6%2C69.3%201070.4%2C69.5%201079.4%2C71.8%201090.4%2C72%201096.9%2C70%201116.6%2C73.5%201127.9%2C69.8%201136.9%2C71.5%201147.4%2C70%201153.9%2C72%201168.6%2C66.8%201178.4%2C67.8%201191.4%2C73%201199.9%2C71%201240%2C71%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C63.5%200.1%2C63.5%207.9%2C64.3%2020.4%2C61.3%2031.1%2C64.5%2055.6%2C67.8%2068.1%2C64.3%2075.9%2C65%2091.6%2C62.8%20118.1%2C67.8%20136.1%2C67.8%20157.1%2C62.3%20162.9%2C64.8%20171.6%2C65.3%20186.4%2C64.8%20198.4%2C62.5%20204.4%2C62.5%20208.4%2C64%20221.6%2C63%20244.4%2C64.8%20259.6%2C60%20266.9%2C63.3%20277.4%2C64%20283.4%2C65.8%20289.9%2C64%20305.4%2C65.8%20316.1%2C64.3%20329.9%2C64.3%20340.9%2C69.5%20354.4%2C66%20363.9%2C66.5%20367.4%2C65.5%20371.9%2C66.5%20386.1%2C65.5%20395.9%2C69.5%20408.6%2C65.3%20426.6%2C64%20436.1%2C67%20444.6%2C65.3%20458.9%2C70%20478.1%2C68%20489.1%2C65.5%20506.6%2C67.5%20520.9%2C66%20527.9%2C69.8%20531.9%2C70.3%20536.4%2C68%20550.1%2C65.8%20562.1%2C61.8%20571.4%2C65.3%20577.6%2C65%20585.4%2C70.3%20600.6%2C68.3%20605.6%2C66%20611.6%2C66.3%20620.1%2C64.5%20625.4%2C66%20640.6%2C64.8%20645.6%2C66.3%20663.4%2C67%20671.1%2C65.5%20681.1%2C67%20691.9%2C64.5%20697.1%2C66%20706.6%2C66%20714.9%2C70%20726.1%2C66.5%20744.6%2C65.8%20749.6%2C67.5%20761.4%2C67%20768.9%2C71.5%20780.9%2C69.3%20786.4%2C70.8%20793.9%2C68%20797.4%2C68%20804.6%2C70.8%20822.6%2C68%20827.9%2C68.8%20833.4%2C71.3%20844.1%2C71.3%20850.1%2C70.3%20857.6%2C65.5%20866.9%2C64.5%20878.6%2C68.5%20884.6%2C66.8%20891.1%2C67.5%20896.1%2C66%20901.1%2C68%20908.1%2C67.3%20912.6%2C69.3%20918.1%2C68.5%20921.1%2C69.8%20931.4%2C68.8%20945.4%2C65%20949.9%2C67.8%20961.1%2C66%20981.4%2C69.5%20992.1%2C68.5%20996.1%2C70.3%201006.1%2C70%201012.9%2C66.5%201018.4%2C66%201025.6%2C68.5%201038.4%2C68.5%201041.1%2C69.5%201048.6%2C66.8%201056.6%2C66.8%201063.6%2C69.3%201070.4%2C69.5%201079.4%2C71.8%201090.4%2C72%201096.9%2C70%201116.6%2C73.5%201127.9%2C69.8%201136.9%2C71.5%201147.4%2C70%201153.9%2C72%201168.6%2C66.8%201178.4%2C67.8%201191.4%2C73%201199.9%2C71%201240%2C71%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E")}
@media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}}
@media(max-width:480px){.nav .brand img{height:28px;max-width:158px}.nav .btn-cta{padding:9px 14px;font-size:.82rem}}

  /* ==========================================================================
     ==========================================================================
     FIX PASS — verify-wave findings (2026-07-24)
     ==========================================================================
     ========================================================================== */

  /* --- [2] command strips were invisible ------------------------------------
     They were black paper (#0c0d10) sitting on a card of the same black paper,
     so at 1x they read as bare text and the torn edges did nothing. The strip
     is now a lighter stock than the sheet it sits on, plus a paper lip along
     the top edge — the mask clips the inset shadow to the rag, which is what
     makes it read as a torn slip rather than a rectangle. */
  .play .cmds span{
    background:var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
               var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #1c2027;
    color:#f1f3f6;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5)}
  .play:hover .cmds span{background-color:#232830}


  /* --- top-rag tear tiles -------------------------------------------------
     The shipped --tx1..4 all carry their rag on the BOTTOM edge (polygon
     y=-12..24 in a 48 band), so they only make a torn BOTTOM. Positioning one
     at `top` leaves a straight top edge plus a transparent gap — which is
     exactly what the footer showed. These are the vertical mirror: polygon
     y=24..60, so the displaced edge faces UP. Same seeds, so a top tear and a
     bottom tear on the same page do not share a contour. --------------- */
  :root{
    --we-fc-txt1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C88%20-40%2C88%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
    --we-fc-txt2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C24.1%200.1%2C24.1%208.4%2C23.4%2018.1%2C19.8%2023.9%2C20%2032.9%2C21.8%2041.4%2C21.5%2050.1%2C22%2055.1%2C23.3%2058.1%2C25.3%2063.1%2C25%2066.6%2C23.8%2070.4%2C23.5%2072.6%2C22.8%2073.4%2C23%2074.9%2C22.3%2083.1%2C22.5%2091.9%2C21%20106.1%2C21.3%20107.1%2C21.8%20113.4%2C22.3%20120.9%2C24%20126.4%2C24.3%20128.4%2C24.8%20130.4%2C26%20140.1%2C26%20147.4%2C27.5%20156.9%2C28%20162.1%2C28%20168.1%2C26.5%20175.9%2C26%20178.6%2C25.3%20185.9%2C22%20192.4%2C21%20203.4%2C21.3%20209.4%2C22.3%20214.4%2C21.8%20234.9%2C21.8%20242.9%2C22.8%20250.1%2C22.5%20255.9%2C24%20260.1%2C24.3%20265.9%2C23.8%20283.6%2C24%20287.1%2C23%20294.1%2C24.1%20299.9%2C24.1%20340%2C24.1%20340%2C88%20-40%2C88%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
    --we-fc-txt3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C22.4%200.1%2C22.4%203.9%2C22%2010.9%2C19.4%2015.4%2C18.8%2030.9%2C20%2033.1%2C21.3%2034.1%2C24%2037.9%2C25.5%2042.6%2C25.5%2050.1%2C23.8%2061.1%2C23.8%2067.4%2C22.8%2078.9%2C24.3%2083.6%2C26.3%20101.9%2C26.5%20115.1%2C24.8%20128.6%2C25.3%20136.4%2C25%20137.6%2C24.3%20138.1%2C24.5%20138.4%2C24%20138.9%2C24.3%20139.9%2C23.3%20142.9%2C22.5%20154.6%2C22%20163.4%2C20.8%20170.1%2C22.5%20171.9%2C24.3%20172.4%2C26.3%20173.6%2C27%20191.4%2C28.3%20205.6%2C25.8%20213.4%2C25.3%20229.9%2C25.3%20236.9%2C25.8%20246.1%2C27.5%20261.1%2C28%20267.6%2C28%20270.1%2C27.5%20271.6%2C26.3%20273.9%2C25.5%20281.1%2C25.3%20285.1%2C26%20286.1%2C27%20287.4%2C27%20287.9%2C27.5%20290.4%2C26%20291.1%2C24.3%20292.9%2C23.3%20295.9%2C22.6%20299.9%2C22.4%20340%2C22.4%20340%2C88%20-40%2C88%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
    --we-fc-txt4:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C26.3%200.1%2C26.3%205.1%2C25.2%2012.1%2C22.8%2021.6%2C23.8%2035.4%2C24.3%2041.6%2C22.3%2053.9%2C21.3%2058.4%2C20%2073.6%2C19%2077.4%2C19.3%2083.1%2C18.5%2090.4%2C18.8%2097.9%2C20.8%20108.6%2C22.8%20128.6%2C22.8%20136.1%2C23.8%20146.1%2C23.5%20149.9%2C24.3%20152.9%2C25.5%20161.4%2C25.3%20177.6%2C22%20185.6%2C22.5%20189.1%2C22.3%20193.1%2C23%20195.9%2C24.8%20200.9%2C26.5%20201.1%2C27.3%20201.4%2C26.8%20201.9%2C27.5%20205.9%2C28.8%20210.4%2C28.5%20212.6%2C28%20214.6%2C26.5%20219.1%2C26%20233.9%2C26.5%20240.1%2C25.3%20242.1%2C23.5%20248.6%2C21%20256.6%2C20.3%20264.9%2C20.3%20270.4%2C19.5%20284.6%2C21.3%20285.9%2C22%20286.4%2C21.8%20290.1%2C24.6%20292.4%2C25.6%20294.6%2C26.1%20299.9%2C26.3%20340%2C26.3%20340%2C88%20-40%2C88%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  }

  /* --- [6a] dark grain zone -> airplane photo -------------------------------
     The photo met the dark zone on a dead-straight line. The stage itself is
     mask-clipped (variant B) rather than given a .tstrip, because
     .command-ipad-section clips overflow and a strip would be cut away
     (gotcha 5). Teeth bite the sky; the copy sits ~200px lower. */
  .command-stage{
    -webkit-mask-image:var(--we-fc-txt3),linear-gradient(#000,#000);
            mask-image:var(--we-fc-txt3),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
    -webkit-mask-size:300px 48px,100% calc(100% - 46px);
            mask-size:300px 48px,100% calc(100% - 46px);
    -webkit-mask-position:top left,bottom;mask-position:top left,bottom}

  /* --- [6b] video section -> closer -----------------------------------------
     Same hard line at the footer. A tear only reads where the two sides differ
     in value, and both were near-identical dark paper — so the video zone is
     lifted a step (it already carried a gradient) and the footer sheet is torn
     over it. Footer padding is ~72px+, so no text is anywhere near the teeth. */
  .ugc{background:linear-gradient(180deg,var(--bg) 0%,#151a21 38%,#262b34 100%);
    padding-bottom:calc(clamp(66px,8vw,120px) + 48px)}
  footer{
    /* The footer UNDERLAPS the video zone by the full tear band. Without this
       the zone's background stops dead at the footer's box top, so the rag
       revealed the BODY's paper behind a hard line — the tear was working the
       whole time and the straight edge above it was the zone ending, not the
       mask failing. Same underlap the reference uses to hand a torn edge
       something to tear INTO. */
    margin-top:-48px;
    padding-top:calc(clamp(72px,9vw,120px) + var(--tear-amp));
    border-top:none;
    /* NO contour drop-shadow here. A shadow cast up from a 24px-deep rag fills
       the torn-away strip with near-black and visually erases the very rag it
       is meant to describe — measured, not assumed. What makes this tear read
       is tone: the video zone above ends light enough for the near-black footer
       paper to tear over it. */
    -webkit-mask-image:var(--we-fc-txt1),linear-gradient(#000,#000);
            mask-image:var(--we-fc-txt1),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
    -webkit-mask-size:300px 48px,100% calc(100% - 46px);
            mask-size:300px 48px,100% calc(100% - 46px);
    -webkit-mask-position:top left,bottom;mask-position:top left,bottom}

  /* --- [3] video carousel -> the paper-card chassis (home's model) ----------
     White paper, a print margin around the clip, a torn bottom edge, and the
     caption UNDER the image at reading size instead of a chip floating on it.
     The shadow is cast by the unmasked <button> wrapper, since a mask clips the
     element's own drop-shadow. */
  :root{--we-fc-cardsh:drop-shadow(0 2px 3px rgba(0,0,0,.42)) drop-shadow(0 14px 20px rgba(0,0,0,.45))}
  .ucard-sh{flex:0 0 auto;width:clamp(232px,23vw,300px);margin:0;padding:0;border:0;background:none;
    text-align:left;cursor:pointer;scroll-snap-align:start;filter:var(--we-fc-cardsh);
    opacity:0;translate:0 32px;
    transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .35s ease}
  .ugc.in .ucard-sh{opacity:1;translate:0 0}
  .ucard{position:relative;display:block;width:auto;aspect-ratio:auto;flex:none;
    border:0;border-radius:3px 3px 0 0;box-shadow:none;overflow:visible;opacity:1;translate:0 0;
    padding:11px 11px calc(15px + var(--tear-amp));
    background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,
               var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;
    background-blend-mode:multiply,multiply;
    transition:translate .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1);
    -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
    -webkit-mask-size:300px 48px,100% calc(100% - 46px);mask-size:300px 48px,100% calc(100% - 46px);
    -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
  .ucard::after{display:none}
  .ugc-track .ucard-sh:nth-child(4n+1) .ucard{-webkit-mask-image:var(--tx2),linear-gradient(#000,#000);mask-image:var(--tx2),linear-gradient(#000,#000)}
  .ugc-track .ucard-sh:nth-child(4n+2) .ucard{--pp-sp:120px 70px;--pp-gp:40px 150px;-webkit-mask-image:var(--tx4),linear-gradient(#000,#000);mask-image:var(--tx4),linear-gradient(#000,#000)}
  .ugc-track .ucard-sh:nth-child(4n+3) .ucard{--pp-sp:200px 130px;--pp-gp:90px 30px;-webkit-mask-image:var(--tx1),linear-gradient(#000,#000);mask-image:var(--tx1),linear-gradient(#000,#000)}
  .ugc-track .ucard-sh:nth-child(4n)   .ucard{--pp-sp:60px 210px;--pp-gp:170px 90px;-webkit-mask-image:var(--tx3),linear-gradient(#000,#000);mask-image:var(--tx3),linear-gradient(#000,#000)}
  .ucard-sh:hover{filter:var(--we-fc-cardsh) drop-shadow(0 12px 18px rgba(0,0,0,.3))}
  .ucard-sh:hover .ucard{translate:0 -4px;rotate:-.5deg}
  .ucard-sh:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px}
  .ucard-media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#e9e5dc}
  .ucard-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#e9e5dc}
  .uplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s}
  .uplay svg{width:54px;height:54px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));transition:scale .3s}
  .ucard-sh:hover .uplay svg{scale:1.09}
  .ucard.playing .uplay{opacity:0}
  .ucard-cap{display:block;margin-top:13px;font-size:1rem;font-weight:700;letter-spacing:-.012em;
    line-height:1.28;color:var(--we-ink-w)}
  @media(max-width:640px){.ucard-sh{width:73vw}}
  @media(prefers-reduced-motion:reduce){.ucard-sh{opacity:1;translate:0 0;transition:none}.ucard{transition:none}}

  /* --- [5] blur -> sharp pop-in (global rule 6) -----------------------------
     filter + opacity ONLY: .rv writes transform, the carousels write translate,
     and the cards write scale, so a transform-based load state would fight all
     three. The class is added from JS and ONLY to images that are not already
     decoded, so a cached image never flashes blurred. */
  .js .we-imgload{filter:blur(18px);opacity:.28;
    transition:filter .6s cubic-bezier(.2,.65,.25,1),opacity .5s ease}
  .js .we-imgload.is-loaded{filter:blur(0);opacity:1}
  @media(prefers-reduced-motion:reduce){
    .js .we-imgload{filter:none;opacity:1;transition:none}
  }

/* ---- BATCH · the Intelligence dropdown was the last navy AI card (V1-F3) ----
   `.dd-panel` shipped as rgba(11,15,21,.98) with a 12px radius, a hairline
   stroke and a blue inner ring; its `.ic` chips were 26px navy-gradient tiles.
   Only surviving navy + AI-gradient element in the theme, and it rode on
   EVERY page. V1 puts the 03:13 screenshot ring precisely on "Intelligence",
   so this is plausibly what that task was pointing at.

   It becomes a torn piece of the same dark paper the nav bar is printed on:
   `--we-paper-dark` from theme.liquid :root, which every page already has, so
   this needs no new tokens and is byte-identical in all 25 nav stylesheets.

   Three mechanics worth keeping straight:
   - the tear is the REPEATING 300x48 tile, not the full-width strip mask. The
     strip mask is a 1200x120 viewBox stretched with preserveAspectRatio:none;
     squeezed into a 28px band it renders ~1.6px of rag, i.e. a straight line
     (measured — it is the same squeeze V2-F5 raised about the nav strip).
   - the shadow is a FILTER, not a box-shadow. A mask clips an element's own
     box-shadow to its box (gotcha 4); drop-shadow() runs on the masked result
     and hugs the torn contour.
   - the bottom padding clears the rag, so the tear eats paper rather than the
     "See all teardowns" row.
   The panel hangs off a fixed nav and is not inside a masked parent, so the
   tear survives here (unlike a .tstrip in a masked zone, gotcha 5). */
.dd-panel{
  border:0;border-radius:0;
  background-color:#14120d;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;
  padding:10px 8px 46px;
  box-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.5));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
  mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top;
}
/* numerals become little white paper tabs with ink on them — the house
   artifact — instead of navy gradient tiles with cyan type. */
.dd-item .ic{
  background:#f4f2e9;border:0;border-radius:2px;
  color:#141109;font-family:"FLBold","Arial Black",sans-serif;
  font-size:.68rem;letter-spacing:0;rotate:-1.5deg;
}
.dd-item:nth-child(odd) .ic{rotate:1.2deg}
/* the current-page row was a blue-tinted rounded slab, which reads as another
   soft UI card on paper. It becomes a torn-off paper marker instead: the row
   keeps the stock, the numeral tab goes full white, and the title takes the
   brand blue (legal here — the ground is dark). */
.dd-item.now{background:rgba(255,255,255,.06);border-radius:0}
.dd-item.now .ic{background:#fff;color:#141109}
.dd-item:hover{border-radius:0}

/* ---- BATCH · nav CTA lost the hard offset shadow (V1-F5) ----
   The de-glow pass replaced the brand's blur-free offset with a soft ambient
   `0 10px 30px -12px`, which BRAND-SYSTEM-INDEX §8 already flags as "worth
   revisiting" — it made the nav CTA the only button in the theme without the
   analog signature. Restored to the §8 nav-CTA spec exactly (2px 2px 0, and
   3px 4px 0 on hover — the small-button values, not the larger `.button`'s).
   Radius and tilt unchanged. */
.btn-cta{box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}


/* ==========================================================================
   ==========================================================================
   CHEY PASS — 2026-07-27 review of the mist page
   ==========================================================================
   Nine notes, in page order. Everything here is an override of a rule above,
   so it is appended rather than edited in place: several of the targets are
   multi-selector rules shared with other sections and rewriting them in situ
   would move more than was asked for.
   ========================================================================== */

/* --- [1] the hero mark is the LIVE <mist-logo>, free-standing ---------------
   Was an <img> of the mark, then briefly an app tile. Both are gone (Chey,
   2026-07-28): the particle canvas is transparent, so it stands on the hero
   photograph with nothing behind it.
   The width is the canvas width, and the mark occupies well under half of its
   own 16:9 canvas — so ~230px of canvas paints an M about 120px wide, which is
   the size the tile used to read at. `cols` lives in the markup and matches the
   orbit core exactly, so the two marks are the same grain. */
.mist-app-icon{all:unset}
.mist-icon-wrap{margin-bottom:6px;display:flex;justify-content:center;
  will-change:transform,opacity}
.mist-icon-wrap mist-logo{display:block;width:clamp(206px,21vw,292px);
  pointer-events:auto;cursor:crosshair;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}

/* The backing sheet stock, shared by every dual-layer tear below.
   NOT #fff: a pure-white rag against this near-black page reads as a bright
   border drawn around the photo rather than as paper the photo is mounted on
   — measured on the jet and the beach frames, where the bottom lip was the
   loudest thing in the section. Aged stock sits a step off the page's own
   paper: clearly a second layer, quiet enough to stay a seam. */
:root{--we-fc-sheet:#cfc8b7}

/* --- [2] dual-layer tear under the hero video ------------------------------
   The fluid_platform hero recipe (assets/fp-landing.css, ".hero — a torn
   photograph mounted on white paper"): TWO rags cut from INDEPENDENT tiles,
   never sharing a phase, because a photo and the sheet behind it do not rip
   along the same path.
     .feat      = the white paper sheet, torn along --tx2
     .feat-wrap = the photograph,        torn along --tx4, phase-shifted 117px
   The sheet runs ~16px lower than the photo, so a white torn lip shows under
   the image; where the photo's rag dips below the sheet's, the sheet's own
   mask clips it and the ink runs right to the edge. Both behaviours are what
   a real ripped print does.
   The section's bottom fade moves onto .feat-wrap — on .feat it would have
   painted over the white lip. */
.feat{background-color:transparent;
  background:var(--pp-speck-w) 0 0/var(--pp-s-size) repeat,
             var(--pp-grain-w) 0 0/var(--pp-g-size) repeat var(--we-fc-sheet);
  background-blend-mode:multiply,multiply;
  padding-bottom:13px;
  -webkit-mask-image:var(--tx2),linear-gradient(#000,#000);
          mask-image:var(--tx2),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
.feat::after{display:none}
.feat-wrap{position:relative;background:#090b0f;
  -webkit-mask-image:var(--tx4),linear-gradient(#000,#000);
          mask-image:var(--tx4),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:337px 48px,100% calc(100% - 46px);
          mask-size:337px 48px,100% calc(100% - 46px);
  -webkit-mask-position:-117px bottom,top;mask-position:-117px bottom,top}
.feat-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:8;
  height:clamp(110px,17vw,260px);pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,10,0),rgba(5,6,10,.28) 48%,#090b0f 100%)}
@media(max-width:680px){.feat{padding-bottom:10px}}

/* --- [3] the two animated sections share ONE paper ------------------------
   The bridge was a lighter blue-grey gradient panel, so the page cut from dark
   paper to a gradient and back inside three screens. It now carries the same
   stock as #cinema and the body, and the diagonal sheen / bottom fade that
   sold the gradient are off. */
.prompt-bridge{background-color:#07080a;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed}
.prompt-bridge::before{display:none}
.prompt-bridge::after{display:none}

/* --- [4] brand slips → the BRIGHT halftone collage ------------------------
   The code-drawn dot patch is gone (its painter is removed from
   fc-landing.js). These now print the AI halftone collage — the same artwork
   as the teardown hero stock, pulled bright on off-white instead of dark on
   black, tonally compressed to ~179..252 so the dark logo artwork reads
   anywhere on it, and halved-then-restored so the dot screen is coarse enough
   to see at slip size. Each slip shows a different window of the sheet, so no
   two cards print the same passage.
   Dimensions: the row was a strip of 2.5:1 slivers — "short and stubby"
   (Chey). Back to a real card proportion (~1.5:1) with the torn edges kept. */
.we-fc-brands{gap:clamp(13px,1.5vw,21px)}
.we-fc-slip{--we-slip-amp:30px;
  width:clamp(140px,12.6vw,178px);height:clamp(94px,8.1vw,118px);
  padding:16px calc(9px + var(--we-slip-amp));
  background-color:#f3f1e8;
  background-image:var(--we-fc-slip-print);
  background-repeat:no-repeat;
  /* zoomed hard on purpose: at a looser crop the collage's "E-COMMERCE IN AN
     AFTERNOON" sign lands inside a card and competes with the brand mark. At
     this scale the sheet reads as printed texture, not as a picture of words. */
  background-size:auto 300%;
  background-position:var(--we-slip-pos,28% 44%);
  -webkit-mask-size:48px 300px,48px 300px,calc(100% - 54px) 100%;
          mask-size:48px 300px,48px 300px,calc(100% - 54px) 100%}
/* the canvas painter is retired; nothing should render one, but a stale node
   must not sit on top of the print */
.we-fc-slip .we-fc-ht{display:none}
.we-fc-slip img{max-height:var(--we-logo-h,74%)}
.we-fc-slip-sh:nth-child(7n+1) .we-fc-slip{--we-slip-pos:12% 62%}
.we-fc-slip-sh:nth-child(7n+2) .we-fc-slip{--we-slip-pos:74% 78%}
.we-fc-slip-sh:nth-child(7n+3) .we-fc-slip{--we-slip-pos:38% 34%}
.we-fc-slip-sh:nth-child(7n+4) .we-fc-slip{--we-slip-pos:92% 44%}
.we-fc-slip-sh:nth-child(7n+5) .we-fc-slip{--we-slip-pos:24% 92%}
.we-fc-slip-sh:nth-child(7n+6) .we-fc-slip{--we-slip-pos:46% 52%}
.we-fc-slip-sh:nth-child(7n)   .we-fc-slip{--we-slip-pos:84% 68%}

/* --- [5] play cards → the printed mesh gradients --------------------------
   Also not a code halftone any more. Each card's own mesh gradient was run
   back through image generation as a piece of offset printing on uncoated
   stock — same composition and palette, but a real fine dot screen, paper
   tooth and ink misregistration. The art fills the whole card (`cover`); the
   scrim is a single left-to-right wash so the copy keeps its contrast without
   flattening the print on the open side. */
.play{background-color:#0c0d10;background-image:none}
.play .we-fc-ht{display:none}
.play::before{content:"";display:block;position:absolute;inset:0;z-index:0;
  background:var(--grad,none) center/cover no-repeat;
  transition:transform 7s ease}
.play::after{content:"";display:block;position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,10,13,.9),rgba(8,10,13,.78) 34%,rgba(8,10,13,.34) 68%,rgba(8,10,13,.2)),
             linear-gradient(0deg,rgba(8,10,13,.3),transparent 46%)}
.play > *{position:relative;z-index:2}
.play:hover::before{transform:scale(1.04)}

/* the command strips had ~23px of padding against a rag that reaches ~31px in,
   so the first and last glyphs sat inside the torn edge. The reserve now
   clears the rag with room to spare. */
.play .cmds span{--we-strip-amp:32px;
  padding:8px calc(6px + var(--we-strip-amp))}
@media(max-width:920px){
  .play .cmds span{--we-strip-amp:26px;
    padding:8px calc(6px + var(--we-strip-amp)) 8px 14px}
  /* Narrow slips tear on ONE vertical edge only — two 48px rag tiles leave a
     narrow box with no solid middle at all. The existing @media block above
     already switches to that single-edge mask, but it only lasts while nothing
     LATER re-declares a mask longhand: the desktop rule in [4] sets a 3-value
     `mask-size` against this block's 2-layer `mask-image`, the sizes cycle, and
     the solid middle is handed a 48px rag size. Measured at 390px: a 161px slip
     rendered as a ~100px sliver with the wordmark cut in half.
     So the whole mask is re-declared here — image, size and position together.
     Longhands from different rules must never describe different layer counts. */
  .we-fc-slip{--we-slip-amp:34px;width:calc(50vw - 34px);height:104px;
    padding:12px calc(8px + var(--we-slip-amp)) 12px 16px;
    -webkit-mask-image:var(--we-tr,var(--tv-r2)),linear-gradient(#000,#000);
            mask-image:var(--we-tr,var(--tv-r2)),linear-gradient(#000,#000);
    -webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat;
    -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;
            mask-size:48px 300px,calc(100% - 46px) 100%;
    -webkit-mask-position:right top,left;mask-position:right top,left}
}

/* --- [6] full-bleed photo sections are torn top AND bottom ----------------
   GENERAL RULE (Chey, 2026-07-27): a photograph that runs the full width of
   the page is a print laid on the page, so it is torn on every edge that
   meets the paper — and torn in TWO layers, exactly as the hero is: a light
   paper sheet behind, cut on one tile, and the photo in front on another.
   Applies to .command-stage (the jet) and .finale-visual (the beach).

   Both hosts clip overflow, so a .tstrip child would be cut away (gotcha 5);
   the tear has to be a mask on the boxes themselves. --we-fc-txt* are the
   top-rag tiles (rag faces UP), --tx* the bottom-rag ones. */
.we-torn-sheet{
  background:var(--pp-speck-w) 0 0/var(--pp-s-size) repeat,
             var(--pp-grain-w) 0 0/var(--pp-g-size) repeat var(--we-fc-sheet);
  background-blend-mode:multiply,multiply;
  padding-block:11px;
  -webkit-mask-image:var(--we-fc-txt2),var(--tx3),linear-gradient(#000,#000);
          mask-image:var(--we-fc-txt2),var(--tx3),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,repeat-x,no-repeat;mask-repeat:repeat-x,repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,300px 48px,100% calc(100% - 92px);
          mask-size:300px 48px,300px 48px,100% calc(100% - 92px);
  -webkit-mask-position:top left,bottom left,center;
          mask-position:top left,bottom left,center}
.we-torn-print{
  -webkit-mask-image:var(--we-fc-txt4),var(--tx1),linear-gradient(#000,#000);
          mask-image:var(--we-fc-txt4),var(--tx1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,repeat-x,no-repeat;mask-repeat:repeat-x,repeat-x,no-repeat;
  -webkit-mask-size:341px 48px,337px 48px,100% calc(100% - 92px);
          mask-size:341px 48px,337px 48px,100% calc(100% - 92px);
  -webkit-mask-position:-83px top,-117px bottom,center;
          mask-position:-83px top,-117px bottom,center}
@media(max-width:680px){.we-torn-sheet{padding-block:7px}}

/* The jet: the SECTION is the sheet, the STAGE is the print — the classes go
   on in the markup. Nothing is re-declared for either host here on purpose;
   both already carry `padding:0` / a dark background from rules ABOVE this
   block, so .we-torn-* (same specificity, later in source) simply wins. The
   stage's old top-only mask and its bottom scrim are what the pair replaces. */
.command-stage::after{display:none}

/* --- [7] the command copy is vertically centred ---------------------------
   It was pinned to a top offset, which left it hard against the bottom of the
   frame with a large gap above — the block now centres on the photo. */
.command-copy{top:50%;bottom:auto;translate:0 -50%}
@media(max-width:680px){
  .command-copy{top:78px;translate:0 0}
}

/* --- [8] the finale photo gets the same two rags --------------------------
   Same split: .finale is the sheet, .finale-visual is the print. .finale-visual
   is inset:0 inside .finale-scene, so the rags reveal the scene's transparent
   ground and, through it, the sheet's paper. */

/* --- [9] the strike-throughs are drawn by hand ----------------------------
   `text-decoration:line-through` is a ruler-straight 3px rule — the one
   mechanical mark left on a page whose circles, underlines and arrows are all
   painted. This is a wobbled stroke instead, carried as a background on an
   INLINE span so `box-decoration-break:clone` gives every wrapped line its own
   mark (a block <p> gets a single background box no matter how many lines it
   runs to, which is why the span exists in the markup).
   It draws left-to-right on reveal rather than fading up — the gesture of
   crossing something out, not a rule appearing. */
.dragitem{text-decoration:none}
.dragitem > span{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:var(--we-fc-strike);
  background-repeat:no-repeat;
  background-position:0 center;
  background-size:0 100%;
  transition:background-size .62s cubic-bezier(.22,.68,.24,1)}
.dragitem.cut{color:var(--faint);text-decoration-color:transparent}
.dragitem.cut > span{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){
  .dragitem > span{transition:none}
}
:root{
  /* a single pass of a brush-ish nib: the centre line wanders, the ends taper,
     and a fainter second contact stroke trails it — displaced by turbulence so
     no two rendered widths repeat the same wobble. preserveAspectRatio:none,
     so the stroke stretches to whatever the line measures. */
  --we-fc-strike:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C0%200.1%2C0%204.1%2C0%204.6%2C22%205.9%2C22.8%2013.1%2C22.5%2013.6%2C24%2029.9%2C23.5%2043.4%2C23.8%2048.1%2C23.3%20105.9%2C23.3%20118.1%2C24%20143.4%2C24%20151.9%2C23.5%20193.9%2C23.8%20203.6%2C23.5%20203.9%2C23%20213.6%2C23%20216.9%2C22.5%20234.6%2C22.5%20250.1%2C21.8%20264.6%2C21.8%20273.9%2C22.3%20311.9%2C22.3%20347.1%2C23.3%20373.4%2C23.3%20377.6%2C22.8%20383.1%2C23%20383.4%2C22.5%20387.4%2C22.8%20387.9%2C22.5%20388.1%2C21%20393.6%2C20.8%20394.9%2C20%20395.4%2C0%20399.9%2C0%20440%2C0%20440%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}

/* --- [10] the experts carousel sits on the page's own paper ---------------
   It was a three-stop gradient that lifted to #262b34 at the footer seam —
   the only place on the page that left the stock. That lift existed to give
   the footer's torn top edge something to tear INTO; the tear now carries a
   light paper lip of its own (below), so the tone difference is no longer
   load-bearing and the section can come back to the body's paper. */
.ugc{background-color:#07080a;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  padding-bottom:calc(clamp(66px,8vw,120px) + 60px)}
/* the lip: a light strip pinned to the seam, torn on a tile the footer does
   not use, so a pale rag shows through the footer's own rag. Same dual-layer
   idea as the hero, at section scale. .ugc does not clip overflow, so a
   positioned child survives here (gotcha 5). */
.ugc::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:4;
  height:56px;pointer-events:none;
  background:var(--pp-speck-w) 0 0/var(--pp-s-size) repeat,
             var(--pp-grain-w) 0 0/var(--pp-g-size) repeat var(--we-fc-sheet);
  background-blend-mode:multiply,multiply;
  -webkit-mask-image:var(--tx2),linear-gradient(#000,#000);
          mask-image:var(--tx2),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}

/* the carousel poster is an <img> now, not a <video poster> — same box. */
.ucard-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#e9e5dc}

/* ==========================================================================
   CHEY PASS — 2026-07-28
   ========================================================================== */

/* --- [11] the cinematic section really is on the page's paper now ----------
   The 2026-07-27 pass put the stock on `#cinema`, which did nothing visible:
   `.cinema-sticky` is a position:sticky child that covers the section edge to
   edge and paints its OWN opaque background — two blue radial-gradient washes
   over a flat #05070b. That is what was still showing (Chey's screenshot).
   The stock goes on the element that actually paints, and the blue washes come
   off. `background-attachment:fixed` so the grain registers with the body's,
   exactly as .feat and the other paper surfaces do.
   The two overlays are neutralised as well — ::before is a top/bottom tint
   ramp and ::after a 54px inset black vignette, and both were there to shape
   the blue field, not the paper. Together they were darkening the section's
   edges away from the page's own value. */
.cinema-sticky{background-color:#07080a;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed}
.cinema-sticky::before{display:none}
.cinema-sticky::after{display:none}

/* --- [12] hero scroll performance -----------------------------------------
   Measured before this block: median frame 49.9ms (~20fps) through the hero,
   72 of 98 frames over 32ms, and ZERO long tasks — so nothing here is
   JavaScript. It was all raster/composite, and two of the costs were mine.

   (a) The 2026-07-27 dual-layer tear masked .feat AND .feat-wrap. Both are
   ancestors of .feat-stage, which transforms and filters on every scroll
   frame — and a CSS mask on an ancestor forces that whole subtree to
   re-rasterise per frame instead of being composited. That is the blink.
   The tear is now built the way the rest of the theme builds zone
   boundaries (we-fp-paper.css §"ZONE-BOUNDARY tear strips"): the edge is
   PAINTED ON TOP as strips, so the rag lives on two ~60px bands instead of
   two full-viewport elements. Same two independent contours, same aged lip
   between photo and page — see [2] above for the intent.

   (b) .feat-stage carried `filter: brightness() saturate()` driven by
   --hero-flow. A filter on a 112vw box re-rasterises it every frame for an
   8% dim. It is now a flat overlay whose OPACITY is animated, which the
   compositor handles without repainting anything.
   ------------------------------------------------------------------------ */

/* (a) .feat and .feat-wrap go back to being unmasked, ordinary boxes. */
.feat{background-color:#07080a;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  padding-bottom:0;
  -webkit-mask-image:none;mask-image:none}
.feat-wrap{-webkit-mask-image:none;mask-image:none}

/* the two rags, as strips over the photo's straight bottom edge.
   Each strip is 60px so the tile's own 46px band leaves a solid remainder;
   the tile's opaque region starts 24px down, which is where the rag lands.
     ::before = the aged sheet, rag ~50px above the section bottom
     ::after  = the page's own paper, rag ~36px  ← 14px of lip shows between
   Different tiles and a different x-phase, because a photo and the sheet
   behind it never rip along the same path. */
/* `display:block` is load-bearing: TWO earlier rules park .feat::after at
   display:none (the pre-tear bottom-fade removal, and block [2]), and both win
   over a later rule that only sets `content`. Without it the lower rag simply
   never paints and the cream lip reads with a ruler-straight bottom edge. */
.feat::before,.feat::after{content:"";display:block;position:absolute;left:0;right:0;
  height:60px;pointer-events:none;
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px)}
.feat::before{bottom:14px;z-index:9;
  background:var(--pp-speck-w) 0 0/var(--pp-s-size) repeat,
             var(--pp-grain-w) 0 0/var(--pp-g-size) repeat var(--we-fc-sheet);
  background-blend-mode:multiply,multiply;
  -webkit-mask-image:var(--we-fc-txt2),linear-gradient(#000,#000);
          mask-image:var(--we-fc-txt2),linear-gradient(#000,#000);
  -webkit-mask-position:top left,bottom;mask-position:top left,bottom}
.feat::after{bottom:0;z-index:10;
  /* The lower rag was invisible: this strip is the same paper as the page it
     sits on, and a tear only reads where the two sides differ in value. A veil
     that is strongest AT the rag and gone by the strip's bottom gives the
     contour something to read against, then dissolves into the page — the
     shade a torn sheet casts on what is behind it. A drop-shadow was the other
     option and is the wrong one here: cast up from a 24px rag it floods the
     14px cream lip and erases the very edge it describes (the footer note in
     the 2026-07-24 pass records that measurement). */
  background-color:#07080a;
  background-image:linear-gradient(180deg,rgba(2,3,5,.92),rgba(2,3,5,.55) 46%,rgba(2,3,5,0) 88%),var(--we-paper-dark);
  background-size:auto,cover;background-position:center,center;
  background-attachment:scroll,fixed;
  -webkit-mask-image:var(--we-fc-txt4),linear-gradient(#000,#000);
          mask-image:var(--we-fc-txt4),linear-gradient(#000,#000);
  -webkit-mask-position:-117px top,bottom;mask-position:-117px top,bottom}

/* (b) the scroll dim: opacity on a flat layer, not a filter on the stage. */
.feat-stage{filter:none}
.feat-wrap::before{content:"";position:absolute;inset:0;z-index:7;
  pointer-events:none;background:#05060a;
  opacity:calc(var(--hero-flow,0) * .1)}
@media(max-width:680px){
  .feat::before,.feat::after{height:46px}
  .feat::before{bottom:10px}
}

/* ==========================================================================
   CHEY PASS 2026-08-03 — annotation marks + hero tear breathing room
   --------------------------------------------------------------------------
   WHY THIS BLOCK EXISTS
   The 2026-07 "bake the wobble filters into static polygons" pass (the Safari
   perf fix — never ship runtime feTurbulence/feDisplacementMap) ran the
   TORN-PAPER EDGE generator over every mask var in this file, including the
   three annotation marks, which are not torn edges at all. So --we-fc-arrow,
   --we-fc-circle and --we-fc-strike all shipped as white ragged combs:
     - the loop-list arrows became blue notched flags
     - the mark around "Fluid" became a solid blue slab
     - the strikes became solid WHITE bars laid over the text
   Every original comment still describes the intended brush stroke, which is
   how we know the SHAPES regressed and the rules were always fine. Re-baked
   below as static hand-drawn paths — still no runtime SVG filters, so the
   Safari scroll rule holds.
   ========================================================================== */
:root{
  /* (1) loop-list bullet: an actual arrow. Consumed as a MASK over a blue
     background-color, so the artwork is white-on-transparent and the colour
     keeps coming from the existing rule. viewBox stays 40x22 so the
     `center/contain` sizing above is untouched. */
  --we-fc-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 11.4 C11 10.5,19 11.9,27.4 10.9'/%3E%3Cpath d='M20.4 4.3 C23.6 6.6,26.6 8.9,29.2 11 C26.4 13.2,23.4 15.4,20.2 17.6'/%3E%3C/g%3E%3C/svg%3E");

  /* (2) the mark around "Fluid": an OPEN hand-drawn oval. fill='none' is the
     entire point — the baked comb was a FILLED shape, which is why it read as
     a solid slab. preserveAspectRatio stays 'none' because the rule stretches
     this to the word box (center/100% 100%), and the two ends deliberately
     overshoot instead of meeting, the way a marker circle actually closes. */
  --we-fc-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' preserveAspectRatio='none'%3E%3Cpath d='M104 4.6 C58 3.4,13 16.4,8.6 40.2 C4.8 62.6,44 85.4,101 86 C154 86.6,193 72.4,192.6 46.6 C192.2 22.4,153 6.2,92 5.2' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* (3) the strike on .dragitem > span. This one is a BACKGROUND-IMAGE, not a
     mask, so it must carry its own colour — hence --coral (#f27a6d) hardcoded:
     a CSS var cannot be interpolated inside a data URI. Wandering centre line
     plus a fainter trailing contact stroke, per the original intent note.
     viewBox stays 400x40 and preserveAspectRatio stays 'none', so the existing
     0% -> 100% background-size wipe animates exactly as before. */
  --we-fc-strike:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M3.5 21.6 C68 17.2,148 24.4,208 19.6 C276 14.4,340 23.2,396.5 18.2' fill='none' stroke='%23f27a6d' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M12 25.2 C92 21.6,162 27.8,232 23.2 C300 18.8,352 26.4,391 22.4' fill='none' stroke='%23f27a6d' stroke-width='1.4' stroke-linecap='round' opacity='.42'/%3E%3C/svg%3E");

  /* (5) the torn under-sheet. #cfc8b7 was aged-paper cream, chosen back when
     this recipe lived on the light page; against the Mist page's near-black it
     read as a random tan band. My first attempt swapped it for a cool slate,
     which was still a THIRD colour at the seam and still wrong.
     fluid_platform's doctrine (we-fp-paper.css §1a) is the real answer: a tear
     is never a band of its own stock — the strip is painted in the SAME paper
     as the canvas it belongs to, so it is invisible except as a torn contour.
     So this is now the page's own --bg, and the rag reads from its drop-shadow
     rather than from a value step. */
  --we-fc-sheet:#07080a;
}

/* (3b) belt-and-braces: the strike is painted purely as a background IMAGE, so
   the span must never carry a background COLOUR of its own — a flat fill here
   would survive the artwork fix above and still read as a bar. */
.dragitem > span{background-color:transparent}

/* ==========================================================================
   CHEY PASS 2026-08-03 (b) — .we-torn-sheet re-cut on the fluid_platform recipe
   --------------------------------------------------------------------------
   THE BUG, precisely: .we-torn-sheet MASKS THE SECTION ITSELF —
     mask-size: 300px 48px, 300px 48px, 100% calc(100% - 92px)
   i.e. an opaque band with a 46px rag tile at the top and another at the
   bottom. A mask does not care whether it is clipping paper or a headline, so
   the top 46px of #book ate the "Run the entire…" headline and the bottom 46px
   sliced the "See Fluid in action" / "Book a demo" buttons in half.
   padding-block:11px was never going to clear a 46px rag.

   fluid_platform never does this. we-fp-paper.css §1a: "the DARK side owns
   every tear. The cream light-zone is NEVER CUT — instead a dark-paper strip,
   mask-shaped along a rag, is painted ON TOP of it at the boundary. Because
   the strip is the same paper stock as the body canvas, it is invisible while
   the zone is still dark and emerges as a torn edge." That is .fp-tstrip:
   an absolutely-positioned span, page paper at background-attachment:fixed so
   its grain registers with the body's, one rag mask, one Tier-3 tear shadow.

   Ported here as ::before/::after rather than markup spans so both hosts
   (#book and #command) pick it up from the class they already carry. Two
   deliberate departures from a literal copy of .fp-tstrip:
     - the rag tiles are THIS file's own --tx3 / --we-fc-txt2, not fp's
       1200x120 deep polygons, so the contour stays in the Mist page's rag
       family and we don't duplicate ~5KB of foreign geometry;
     - --tear-sh-strong / --tear-sh-up live in we-fp-paper.css, which is
       page-scoped to Home and NOT loaded here, so the Tier-3 drop-shadows are
       inlined at their computed values (t3 2px/3px/.24, strong = .24 * 1.7).
   Verify with `--tx3` etc: fc-landing.css:920-935 defines its own paper/rag
   tokens, which is why the masks resolve on this page at all.
   ========================================================================== */

/* 1. Stop cutting the zone. The section keeps its paper, but it is now the
      PAGE's paper (see --we-fc-sheet above), so with the mask gone the sheet
      does not become a giant cream/slate slab. background-blend-mode has to be
      reset too — the original multiply,multiply pairs with the two --pp-*
      texture layers, and those are gone with it. */
.we-torn-sheet{
  position:relative;
  -webkit-mask-image:none;mask-image:none;
  background:var(--bg) var(--we-paper-dark) center/cover;
  background-attachment:fixed;
  background-blend-mode:normal;
  padding-block:0}

/* 2. Paint the two tears instead. 48px tall to match the tile box exactly.
      Each tile's polygon runs off-canvas (y=-40 / y=160) on its solid side, so
      one layer covers the strip's outer edge with no gap and tears on the
      inner edge — no second linear-gradient layer needed.
        --tx3          rag on the BOTTOM edge -> the TOP strip, hangs down
        --we-fc-txt2   the vertical mirror     -> the BOTTOM strip, rises up
      (Reversed from the old section mask on purpose: masking a section at the
      top needs the mirror to reveal what is BELOW the rag, painting a strip
      there needs the opposite.) z-index sits above .finale-scene, which is an
      `isolation:isolate` stacking context — so a strip cannot be tucked under
      .finale-copy, and clearance (3.) is what keeps copy off the rag. */
.we-torn-sheet::before,
.we-torn-sheet::after{
  content:"";position:absolute;left:0;right:0;height:48px;
  pointer-events:none;z-index:6;
  background:var(--bg) var(--we-paper-dark) center/cover;
  background-attachment:fixed;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:300px 48px;mask-size:300px 48px}
.we-torn-sheet::before{top:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.408));
  -webkit-mask-image:var(--tx3);mask-image:var(--tx3);
  -webkit-mask-position:top left;mask-position:top left}
.we-torn-sheet::after{bottom:0;
  filter:drop-shadow(0 -2px 3px rgba(0,0,0,.24));
  -webkit-mask-image:var(--we-fc-txt2);mask-image:var(--we-fc-txt2);
  -webkit-mask-position:bottom left;mask-position:bottom left}

/* 3. #book's copy also OVERFLOWED its own frame, independently of the mask:
      .finale-scene is a hard aspect-ratio:1672/941 box with overflow:hidden,
      and .finale-copy is height:100% + justify-content:center — so once the
      headline, lead, sub, tagline and CTAs together ran taller than the frame,
      centring pushed equal amounts of copy out of BOTH ends and overflow
      clipped them. That is the second reason the buttons looked sliced, and no
      amount of tear work would have fixed it.
      min-height keeps the intended 1672:941 proportion as a FLOOR while
      letting the frame grow for tall copy; the photo is object-fit:cover so it
      just crops a little more. padding-block then buys the 48px strips their
      clearance at both ends. */
.finale-scene{aspect-ratio:auto;min-height:56.28vw}
.finale-copy{height:auto;min-height:100%;
  padding-block:clamp(64px,7vw,92px)}
@media(max-width:680px){
  .finale-scene{min-height:1200px}
  .finale-copy{padding-block:72px 56px}
}

/* 4. The .ugc footer lip is the same mistake at section scale: a pale strip of
      --we-fc-sheet so "a pale rag shows through the footer's own rag". Now
      that --we-fc-sheet is the page's own colour it needs the rest of the
      fp treatment to actually disappear into the canvas — fixed attachment so
      the grain registers with the body, and a tear shadow so the rag still
      reads without a value step. */
.ugc::after{
  background:var(--bg) var(--we-paper-dark) center/cover;
  background-attachment:fixed;
  background-blend-mode:normal;
  filter:drop-shadow(0 -2px 3px rgba(0,0,0,.24))}