/* ClueBeat home. Every section has one idea and one motion. */

@property --hwa { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.home .pin { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }

/* =================================================================
   HERO: a living character leads into the existing blue motion field
   ================================================================= */
.hero { position: relative; height: 400vh; background: #fff; }
.hero .pin {
  background: #fff;
  --out: clamp(0, calc(var(--p, 0) / .09), 1);
  --a: clamp(0, calc((var(--p, 0) - .05) / .28), 1);
  --hold: clamp(0, calc((var(--p, 0) - .34) / .26), 1);
  --z: clamp(0, calc((var(--p, 0) - .64) / .3), 1);
  --zz: calc(var(--z) * var(--z));
}
/* the flow: blue silk moving under the white page, drawn by nw-kit. Without WebGL a still gradient stands in. */
.hero-sea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.hero-sea[data-off] { background: radial-gradient(70% 34% at 18% 100%, rgba(0,23,176,.9) 0%, rgba(0,23,176,0) 100%), radial-gradient(60% 30% at 86% 100%, rgba(0,17,140,.8) 0%, rgba(0,17,140,0) 100%), linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #EEF1FF 60%, #8093FF 71%, #2E50FF 82%, #0029FF 100%); }

.hero-stage { position: absolute; left: 50%; top: calc(74px + 4vh + var(--a) * 21vh); width: calc(min(19vh, 166px) + var(--a) * min(19vh, 166px)); aspect-ratio: 480 / 510; z-index: 3; pointer-events: none;
  transform: translateX(-50%);
  opacity: calc(1 - clamp(0, (var(--p, 0) - .63) / .16, 1)); }
/* Size the SVG at its rendered size. No oversized compositor texture, 3D tilt or displacement filter. */
.mascot-tilt { position: relative; width: 100%; height: 100%; animation: mascotFloat 5.4s ease-in-out infinite; }
.hero-mascot { display: block; width: 100%; height: 100%; object-fit: contain; }
.mascot-shadow { position: absolute; left: 25%; right: 25%; bottom: -5%; height: 6%; border-radius: 50%; background: rgba(0,41,255,.18); filter: blur(9px); transform: scale(calc(1 + var(--a) * .35)); opacity: calc(1 - var(--a)); }
[data-js] .mascot-tilt { animation: mascotEnter .95s var(--ease-drop) both, mascotFloat 5.4s ease-in-out 1s infinite; }
@keyframes mascotEnter { from { opacity: 0; translate: 0 -70px; scale: .72; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mascotFloat { 0%,100% { translate: 0 0; rotate: -2deg; } 35% { translate: 5px -9px; rotate: 2deg; } 70% { translate: -4px -4px; rotate: -1deg; } }

/* copy */
.hero-copy { position: absolute; left: 50%; top: calc(74px + 4vh + min(19vh, 166px) + 3vh); width: min(1120px, 92vw); text-align: center; z-index: 4;
  transform: translate3d(-50%, calc(var(--out) * 14vh), 0); opacity: calc(1 - var(--out) * 1.25); pointer-events: auto; }
.hero-title { font-size: clamp(48px, min(7.4vw, 11.2vh), 118px); }
.hero-title .ln { display: block; overflow: hidden; padding: .05em .1em .12em; margin: -.05em 0 -.12em; }
.hero-title .lw { display: inline-block; }
[data-js] .hero-title .l1 .lw { animation: lnUp 1s var(--ease) .42s both; }
[data-js] .hero-title .l2 .lw { animation: lnUp 1s var(--ease) .56s both; }
@keyframes lnUp { from { translate: 0 110%; rotate: 3deg; } to { translate: 0 0; rotate: 0deg; } }
[data-js] .hero-title .l2 .hl { animation: hwIn 1s var(--ease) 1.18s forwards; }
@keyframes hwIn { to { --hw: 100%; } }
.hero-sub { max-width: 640px; margin: min(2.6vh, 24px) auto 0; color: var(--ink-3); font-size: clamp(16px, min(1.3vw, 2.2vh), 20px); }
[data-js] .hero-sub, [data-js] .hero-form, [data-js] .hero-ticks { animation: riseIn 1s var(--ease) both; }
[data-js] .hero-sub { animation-delay: .78s; }
[data-js] .hero-form { animation-delay: .9s; }
[data-js] .hero-ticks { animation-delay: 1.02s; }
@keyframes riseIn { from { opacity: 0; translate: 0 22px; } }
.hero-form { margin-top: min(3.4vh, 32px); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.hero-ticks { margin-top: min(2.6vh, 22px); justify-content: center; }

/* Fixed three-line composition; only the reserved middle changes. */
.hero-question { font-size: clamp(38px, min(5.8vw, 7.5vh), 82px); line-height: 1.02; }
.hero-subject { display: block; font-size: .72em; letter-spacing: -.035em; word-spacing: .08em; }
.hero-change { --signal: var(--blue); position: relative; display: grid; place-items: center; height: 2.3em; margin: .07em auto .06em; max-width: 1100px; isolation: isolate; }
.hero-phrase { grid-area: 1 / 1; display: none; align-self: center; max-width: 100%; color: var(--blue); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.hero-phrase:nth-of-type(3n + 2) { color: var(--coral); }
.hero-phrase:nth-of-type(3n) { color: var(--lime); -webkit-text-stroke: 1.2px #374300; paint-order: stroke fill; }
.hero-phrase.is-current { display: block; }
.hero-phrase .hw-word { display: inline-block; white-space: nowrap; margin-inline: .055em; }
.hero-phrase .hw-letter { display: inline-block; transform-origin: 50% 90%; }
.hero-question-fixed { position: relative; display: block; font-size: .82em; letter-spacing: -.035em; word-spacing: .05em; }
.headline-scan { position: absolute; left: 1%; right: 1%; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--lime) 55%, var(--coral)); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.hero-question + .hero-sub { margin-top: 14px; font-size: clamp(14px, 1.25vw, 18px); max-width: 630px; }
.headline-control { position: absolute; right: 0; bottom: -31px; padding: 4px 7px; display: flex; gap: 9px; align-items: center; font-family: var(--mono); font-size: 10px; color: var(--ink-3); border-radius: 5px; }
.headline-control:hover { color: var(--blue); }
.headline-control:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hero-question ~ .hero-form { margin-top: 18px; }

.hero-cue { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 99px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px -16px rgba(0,16,120,.6); font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); opacity: calc(1 - var(--out) * 3); z-index: 5; white-space: nowrap; }
.cue-l { position: relative; width: 16px; height: 14px; }
.cue-l i { position: absolute; left: 0; width: 12px; height: 6px; border-radius: 2px; transform: skewX(-26deg); }
.cue-l i:nth-child(1) { top: 8px; background: var(--blue); }
.cue-l i:nth-child(2) { top: 4px; left: 2px; background: var(--lime); animation: cueUp 2.2s var(--ease-io) infinite; }
.cue-l i:nth-child(3) { top: 0; left: 4px; background: var(--coral); animation: cueUp 2.2s var(--ease-io) .12s infinite; }
@keyframes cueUp { 0%, 100% { translate: 0 0; } 45% { translate: 0 -5px; } }
.hero-flood { position: absolute; inset: 0; z-index: 8; background: var(--blue); opacity: clamp(0, calc((var(--p, 0) - .9) * 12), 1); pointer-events: none; }

/* =================================================================
   PROBLEM: forty tabs fall into a wall, collapse into one deck,
   the top card flips into the change card
   ================================================================= */
.prob { position: relative; height: 340vh; background: var(--blue); color: #fff; --l1: var(--lime); --l2: var(--coral); --l3: var(--ink); }
.prob .pin { background: var(--blue);
  --wd: clamp(0, calc(var(--p, 0) / .2), 1);
  --cl: clamp(0, calc((var(--p, 0) - .33) / .3), 1);
  --fl: clamp(0, calc((var(--p, 0) - .62) / .16), 1);
  --sw: clamp(0, calc((var(--p, 0) - .64) / .12), 1);
  --cw: min(6.3vw, 104px);
  --chh: calc(var(--cw) * .74);
}
.pb-copy { position: absolute; left: max(48px, calc(50vw - 640px)); top: 50%; transform: translateY(-50%); width: min(430px, 34vw); z-index: 3; }
.pb-a, .pb-b { position: absolute; left: 0; top: 50%; width: 100%; }
.pb-a { --o: clamp(0, calc(var(--sw) * 2.2), 1); transform: translateY(calc(-50% - var(--o) * 50px)); opacity: calc(1 - var(--o)); }
.pb-b { --o: clamp(0, calc((var(--sw) - .45) * 1.9), 1); transform: translateY(calc(-50% + (1 - var(--o)) * 50px)); opacity: var(--o); }
.pb-b .hl { --hw: calc(clamp(0, (var(--sw) - .75) * 4, 1) * 100%); transition: none; }
.pb-copy .h2 { margin-top: 18px; font-size: clamp(38px, 4.3vw, 70px); }
.pb-copy .lead { margin-top: 22px; color: rgba(255,255,255,.78); }
.prob .hl-l { color: var(--lime); }
.prob .label .sq i:nth-child(1) { background: #fff; }
.wall { position: absolute; left: calc(max(48px, calc(50vw - 640px)) + min(430px, 34vw) + 5vw); top: 50%; width: calc(var(--cw) * 8); height: calc(var(--chh) * 5); transform: translateY(-50%); }
.win { position: absolute; left: calc(var(--c) * var(--cw)); top: calc(var(--r) * var(--chh)); width: calc(var(--cw) - 8px); height: calc(var(--chh) - 8px); border-radius: 7px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 10px 22px -12px rgba(0,8,70,.7);
  --wl: clamp(0, calc((var(--wd) * 1.55 - var(--dd)) * 2.4), 1);
  --we: calc(var(--wl) * (2 - var(--wl)));
  --ck: clamp(0, calc((var(--cl) * 1.5 - var(--cd)) * 2), 1);
  --ce: calc(var(--ck) * var(--ck) * (3 - 2 * var(--ck)));
  transform:
    translate3d(calc((3.5 - var(--c)) * var(--cw) * var(--ce)), calc((2 - var(--r)) * var(--chh) * var(--ce) - (1 - var(--we)) * 75vh), 0)
    rotate(calc(var(--rz) * var(--ce) + (1 - var(--we)) * var(--rz) * 2))
    scale(calc(1 - var(--ce) * .04));
  opacity: calc(clamp(0, var(--wl) * 4, 1) * (1 - clamp(0, (var(--fl) - .15) * 6, 1)));
  z-index: calc(40 - var(--i)); }
.win .wb { height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 5px; background: #F2F4F8; border-bottom: 1px solid var(--line); }
.win .tf { width: 10px; height: 10px; border-radius: 3px; display: grid; place-items: center; font-size: 7px; font-weight: 800; flex-shrink: 0; }
.win .tt { font-size: 7.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .wpg { padding: 7px 7px 0; display: flex; flex-direction: column; gap: 4px; }
.win .wpg i { height: 4px; border-radius: 2px; background: #E4E8F0; width: 86%; }
.win .wpg i:nth-child(2) { width: 62%; }
.win .wpg i.s { width: 40%; background: #C9D2FF; }
.win .wrf { position: absolute; right: 5px; bottom: 5px; width: 13px; height: 13px; color: var(--blue); animation: spin 1.3s linear infinite; animation-delay: calc(var(--i) * -97ms); opacity: calc(.9 - var(--ce) * .9); }
.win .wrf svg { width: 100%; height: 100%; }
@keyframes spin { to { rotate: 360deg; } }
.deck { position: absolute; left: calc(max(48px, calc(50vw - 640px)) + min(430px, 34vw) + 5vw + var(--cw) * 4); top: 50%; width: 0; height: 0; z-index: 60; perspective: 1600px; }
.dk-flip { position: absolute; width: min(460px, 36vw); left: calc(min(460px, 36vw) * -.5); top: -150px; height: 300px; transform-style: preserve-3d;
  --fe: calc(var(--fl) * var(--fl) * (3 - 2 * var(--fl)));
  transform: scale(calc(.24 + var(--fe) * .76)) rotateY(calc(var(--fe) * 180deg));
  opacity: clamp(0, calc((var(--cl) - .82) * 10), 1); }
.dk-front, .dk-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 14px; }
.dk-front { background: #fff; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,8,70,.8); }
.dk-front .wb { height: 60px; gap: 14px; padding: 0 22px; }
.dk-front .tf { width: 36px; height: 36px; border-radius: 10px; font-size: 22px; }
.dk-front .tt { font-size: 26px; }
.dk-front .wpg { padding: 26px; gap: 16px; }
.dk-front .wpg i { height: 14px; border-radius: 7px; }
.dk-back { transform: rotateY(180deg); }
.dk-back .cc { height: 100%; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,8,70,.9); }
.pb-count { position: absolute; right: max(48px, calc(50vw - 640px)); bottom: 7vh; z-index: 5; font-size: 22px; opacity: calc(clamp(0, var(--wd) * 3, 1)); }
.pb-count .flap { --fw: .66em; --fh: 1.3em; --fbg: rgba(0,16,120,.9); }

/* =================================================================
   HOW: a cursor runs the product while you scroll
   ================================================================= */
.how { position: relative; height: 560vh; background: #fff; }
.how .pin { background: #fff; display: grid; grid-template-columns: minmax(280px, 360px) auto; justify-content: center; align-items: center; column-gap: min(5vw, 64px); padding: 68px 40px 0;
  --t: clamp(0, calc((var(--p, 0) - .02) / .95), 1);
  --as: 1; }
.hw-copy .h2 { margin-top: 16px; font-size: clamp(38px, 4vw, 64px); }
.hw-steps { margin-top: 32px; display: flex; flex-direction: column; gap: 4px; }
.hs { --on: calc(clamp(0, calc((var(--t) - var(--sa)) * 80), 1) * clamp(0, calc((var(--sb) - var(--t)) * 80), 1)); position: relative; display: block; width: 100%; text-align: left; padding: 11px 0 11px 20px; }
.hs.s0 { --sa: -1; --sb: .6; }
.hs.s1 { --sa: .6; --sb: .78; }
.hs.s2 { --sa: .78; --sb: .86; }
.hs.s3 { --sa: .86; --sb: .925; }
.hs.s4 { --sa: .925; --sb: 2; }
.hs::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 3px; background: var(--line); }
.hs::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 3px; background: var(--blue); transform-origin: 50% 0; transform: scaleY(var(--on)); }
.hs .hn { display: block; font-size: 21px; font-weight: 780; letter-spacing: -.02em; font-variation-settings: "wdth" 106; color: color-mix(in srgb, var(--ink) calc(35% + var(--on) * 65%), #fff); }
.hs .hb { display: block; overflow: hidden; max-height: calc(var(--on) * 90px); opacity: var(--on); margin-top: calc(var(--on) * 6px); font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

.hw-stage { position: relative; width: calc(880px * var(--as)); height: calc(600px * var(--as)); }
.app { position: absolute; left: 0; top: 0; width: 880px; height: 600px; transform: scale(var(--as)); transform-origin: 0 0; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(8,11,22,.1), 0 50px 100px -40px rgba(8,11,22,.5), 0 20px 40px -30px rgba(0,41,255,.35); font-size: 13px; color: var(--ink); }
.app-top { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
.app-top .dots { display: flex; gap: 6px; }
.app-top .dots i { width: 10px; height: 10px; border-radius: 99px; background: #E0E3EA; }
.app-search { flex: 1; max-width: 360px; height: 28px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; background: #F1F3F7; font-size: 12px; color: var(--ink-4); }
.app-search svg { width: 13px; height: 13px; }
.app-search .kbd { margin-left: auto; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.live i { width: 7px; height: 7px; border-radius: 99px; background: #18B45B; box-shadow: 0 0 0 3px rgba(24,180,91,.18); }
.app-side { position: absolute; left: 0; top: 44px; bottom: 0; width: 180px; padding: 16px 12px; border-right: 1px solid var(--line); background: #FBFCFE; display: flex; flex-direction: column; gap: 14px; }
.as-ws { display: flex; align-items: center; gap: 9px; }
.as-ws .av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 800; }
.as-ws b { display: block; font-size: 12.5px; }
.as-ws small { display: block; font-size: 10.5px; color: var(--ink-4); }
.as-new { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 650; }
.as-new svg { width: 13px; height: 13px; }
.as-new .kbd { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }
.as-nav { display: flex; flex-direction: column; gap: 2px; }
.sn { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; color: var(--ink-3); }
.sn svg { width: 14px; height: 14px; }
.sn b { margin-left: auto; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: var(--coral-soft); color: var(--coral-2); }
.sn-wat { background: color-mix(in srgb, var(--ice) calc(clamp(0, (var(--t) - .62) * 60, 1) * 100%), transparent); color: var(--ink); }
.as-meter { margin-top: auto; font-size: 11px; color: var(--ink-3); }
.as-meter > div { display: flex; justify-content: space-between; margin-bottom: 7px; }
.as-meter b { font-weight: 600; }
.as-meter > i { display: block; height: 5px; border-radius: 3px; background: #E7EAF1; overflow: hidden; }
.as-meter > i > i { display: block; height: 100%; width: calc(6% + var(--t) * 3%); background: var(--blue); }

/* views */
.vw { position: absolute; left: 180px; top: 44px; right: 0; bottom: 0; padding: 22px 24px; }
.va { --v: calc(1 - clamp(0, (var(--t) - .615) * 40, 1)); opacity: var(--v); transform: translateX(calc((1 - var(--v)) * -30px)); }
.vb { --v: calc(clamp(0, (var(--t) - .615) * 40, 1) * (1 - clamp(0, (var(--t) - .795) * 40, 1))); opacity: var(--v); transform: translateX(calc((1 - clamp(0, (var(--t) - .615) * 40, 1)) * 40px)); }
.vc { --v: calc(clamp(0, (var(--t) - .795) * 40, 1) * (1 - clamp(0, (var(--t) - .9) * 40, 1))); opacity: var(--v); display: grid; place-items: center; }
.vd { --v: clamp(0, (var(--t) - .9) * 40, 1); opacity: var(--v); }
.pv-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pv-t { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variation-settings: "wdth" 104; }
.pv-sub { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }
.wz-steps { display: flex; gap: 12px; font-size: 11px; color: var(--ink-4); }
.wz-steps span { display: inline-flex; align-items: center; gap: 5px; }
.wz-steps i { width: 7px; height: 7px; border-radius: 99px; background: #D8DCE5; }
.wz-steps .z1 i { background: var(--blue); }
.wz-steps .z2 i { background: color-mix(in srgb, var(--blue) calc(clamp(0, (var(--t) - .22) * 80, 1) * 100%), #D8DCE5); }
.wz-steps .z3 i { background: color-mix(in srgb, var(--blue) calc(clamp(0, (var(--t) - .41) * 80, 1) * 100%), #D8DCE5); }
.wz-url { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 5px 0 12px; border-radius: 11px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) calc(clamp(0, (var(--t) - .065) * 80, 1) * 100%), rgba(8,11,22,.14)); }
.wz-url > svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.wz-url .u { position: relative; flex: 1; height: 100%; display: flex; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.wz-url .ph, .wz-rule .ph { position: absolute; left: 0; color: var(--ink-4); font-family: var(--sans); opacity: calc(1 - clamp(0, (var(--t) - .075) * 300, 1)); }
.wz-rule .ph { opacity: calc(1 - clamp(0, (var(--t) - .435) * 300, 1)); }
.wz-url .ty { --u: clamp(0, calc((var(--t) - .075) / .075), 1); white-space: nowrap; clip-path: inset(0 calc((1 - var(--u)) * 100%) 0 0); }
.caret { position: absolute; top: 50%; width: 1.5px; height: 16px; margin-top: -8px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wz-url .caret { left: calc(var(--u, 0) * 240px); opacity: calc(clamp(0, (var(--t) - .06) * 200, 1) * (1 - clamp(0, (var(--t) - .17) * 200, 1))); --u: clamp(0, calc((var(--t) - .075) / .075), 1); }
.wz-url .rb { height: 32px; padding: 0 16px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 650;
  scale: calc(1 - clamp(0, 1 - max(calc((var(--t) - .178) * 90), calc((var(--t) - .178) * -90)), 1) * .08); }
.wz-res { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; --r: clamp(0, calc((var(--t) - .19) * 50), 1); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * -8px)); }
.wz-res .c { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: #F1F3F7; font-size: 11.5px; color: var(--ink-2); }
.wz-res .c svg { width: 12px; height: 12px; color: #18A052; }
.wz-res .fnd { font-size: 12px; color: var(--ink-2); margin-left: 4px; }
.wz-q { margin-top: 16px; font-size: 13px; font-weight: 700; --r: clamp(0, calc((var(--t) - .22) * 50), 1); opacity: var(--r); }
.wz-opts { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; --r: clamp(0, calc((var(--t) - .225) * 50), 1); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 10px)); }
.wz-opts .o { padding: 11px 13px; border-radius: 11px; box-shadow: 0 0 0 1.5px rgba(8,11,22,.12) inset; }
.wz-opts .o b { display: block; font-size: 12.5px; }
.wz-opts .o small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-4); }
.wz-opts .o2 { --sl: clamp(0, calc((var(--t) - .293) * 200), 1); box-shadow: 0 0 0 calc(1.5px + var(--sl) * .5px) color-mix(in srgb, var(--blue) calc(var(--sl) * 100%), rgba(8,11,22,.12)) inset; background: color-mix(in srgb, var(--ice) calc(var(--sl) * 100%), #fff); }
.wz-parts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; --r: clamp(0, calc((var(--t) - .305) * 50), 1); opacity: var(--r); }
.wz-parts .pt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 7px; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(8,11,22,.12) inset; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.wz-parts .pt i { width: 15px; height: 15px; border-radius: 4px; box-shadow: 0 0 0 1.5px rgba(8,11,22,.2) inset; display: grid; place-items: center; }
.wz-parts .pt i svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.wz-parts .p1 { --ck: clamp(0, calc((var(--t) - .352) * 200), 1); }
.wz-parts .p2 { --ck: clamp(0, calc((var(--t) - .382) * 200), 1); }
.wz-parts .p1, .wz-parts .p2 { color: color-mix(in srgb, var(--ink) calc(var(--ck) * 100%), var(--ink-3)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) calc(var(--ck) * 100%), rgba(8,11,22,.12)) inset; }
.wz-parts .p1 i, .wz-parts .p2 i { background: color-mix(in srgb, var(--blue) calc(var(--ck) * 100%), transparent); }
.wz-parts .p1 i svg, .wz-parts .p2 i svg { opacity: var(--ck); }
.wz-rule { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: #F6F7FB; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) calc(clamp(0, (var(--t) - .42) * 200, 1) * 100%), rgba(8,11,22,.08)) inset; --r: clamp(0, calc((var(--t) - .395) * 50), 1); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 10px)); }
.wz-rule .rq { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wz-rule .rq > svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.wz-rule .rt { position: relative; flex: 1; height: 20px; display: flex; align-items: center; }
.wz-rule .ty { --u: clamp(0, calc((var(--t) - .435) / .09), 1); white-space: nowrap; clip-path: inset(0 calc((1 - var(--u)) * 100%) 0 0); }
.wz-rule .caret { left: calc(var(--u, 0) * 321px); --u: clamp(0, calc((var(--t) - .435) / .09), 1); opacity: calc(clamp(0, (var(--t) - .425) * 200, 1) * (1 - clamp(0, (var(--t) - .54) * 200, 1))); }
.wz-rule .ra { margin-top: 9px; font-size: 12px; color: var(--ink-2); --r: clamp(0, calc((var(--t) - .532) * 60), 1); opacity: var(--r); }
.wz-rule .rcs { margin-top: 8px; display: flex; gap: 6px; }
.rchip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650; background: var(--ice); color: var(--blue-2); }
.rchip.ig, .rchip.ai { background: #F0F2F6; color: var(--ink-3); }
.rchip.st, .rchip.it, .rchip.tx { background: var(--lime-soft); color: var(--lime-ink); }
.rchip.ur { background: var(--coral-soft); color: var(--coral-2); }
.wz-rule .r1 { --r: clamp(0, calc((var(--t) - .545) * 80), 1); }
.wz-rule .r2 { --r: clamp(0, calc((var(--t) - .558) * 80), 1); }
.wz-rule .r1, .wz-rule .r2 { opacity: var(--r); translate: 0 calc((1 - var(--r)) * -14px); rotate: calc((1 - var(--r)) * -6deg); }
.wz-go { margin-top: 14px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; --r: clamp(0, calc((var(--t) - .565) * 60), 1); opacity: var(--r); }
.wz-go .sched { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; background: #F1F3F7; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.wz-go .sched svg { width: 13px; height: 13px; }
.wz-go .gob { height: 34px; padding: 0 18px; display: grid; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 700;
  scale: calc(1 - clamp(0, 1 - max(calc((var(--t) - .603) * 90), calc((var(--t) - .603) * -90)), 1) * .08); }

.health { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; background: #E7F7EC; color: #0E7A3D; font-size: 11.5px; font-weight: 650; }
.health i { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.wd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.wd-meta > div { padding: 9px 11px; border-radius: 10px; background: #F6F7FB; }
.wd-meta span { display: block; font-size: 10.5px; color: var(--ink-4); }
.wd-meta b { display: block; margin-top: 3px; font-size: 12.5px; }
.wd-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; }
.wd-page .mp { padding: 16px; }
.mp-h { font-size: 15px; font-weight: 800; text-align: center; }
.mp-plans { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mp-plans .pl { padding: 10px 6px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line) inset; text-align: center; }
.mp-plans .pl small { display: block; font-size: 10px; color: var(--ink-4); }
.mp-plans .pl b { position: relative; display: block; margin-top: 5px; font-size: 19px; font-weight: 800; height: 24px; }
.mp-plans .pl em { position: relative; display: block; margin-top: 3px; font-style: normal; font-size: 10px; color: var(--ink-3); height: 14px; }
.mp-plans .hot { box-shadow: 0 0 0 1.5px var(--blue) inset; --sw2: clamp(0, calc((var(--t) - .745) * 100), 1); }
.mp-plans .hot .o, .mp-plans .hot .n { position: absolute; left: 0; right: 0; }
.mp-plans .hot .o { opacity: calc(1 - var(--sw2)); transform: translateY(calc(var(--sw2) * -6px)); }
.mp-plans .hot .n { opacity: var(--sw2); transform: translateY(calc((1 - var(--sw2)) * 6px)); color: var(--blue); }
.mp-plans .hot em .n { color: var(--coral-2); }
.mp-ft { margin-top: 12px; font-size: 10px; text-align: center; color: var(--ink-4); }
/* the careers page inside the watch: one role arrives, one closes */
.mj { --sw2: clamp(0, calc((var(--t) - .745) * 100), 1); --gone: clamp(0, calc((var(--t) - .752) * 90), 1); }
.mj-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mj-h b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.mj-n { display: inline-grid; font-size: 10.5px; font-weight: 700; }
.mj-n > span { grid-area: 1 / 1; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.mj-n .o { background: #F1F3F7; color: var(--ink-3); opacity: calc(1 - var(--sw2)); }
.mj-n .n { background: var(--lime-soft); color: var(--lime-ink); opacity: var(--sw2); }
.mj-l { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.jr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; height: 30px; padding: 0 9px; border-radius: 8px; background: #F6F7FB; font-size: 11.5px; overflow: hidden; }
.jr .jt { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr .jl { font-size: 10.5px; color: var(--ink-4); }
.jr .jg { padding: 2px 6px; border-radius: 5px; background: var(--lime); color: var(--ink); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jr.jn { height: calc(var(--sw2) * 30px); margin-bottom: calc((var(--sw2) - 1) * 5px); opacity: var(--sw2); background: var(--lime-soft); box-shadow: 0 0 0 1.5px var(--lime-2) inset; }
.jr.jx { height: calc((1 - var(--gone)) * 30px); margin-top: calc(var(--gone) * -5px); opacity: calc(1 - var(--gone) * .9); }
.jr.jx .jt { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--coral) calc(var(--sw2) * 100%), transparent); }
.wd-hist .hh { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }
.wd-hist .clk { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--ink); color: var(--lime); font-family: var(--mono); }
.wd-hist .clk svg { width: 12px; height: 12px; animation: spin 2.2s linear infinite; }
.wd-hist .clk .tm { position: relative; display: inline-block; width: 38px; height: 14px; overflow: hidden; font-size: 11px; }
.wd-hist .clk .tm span { position: absolute; left: 0; top: 0; transform: translateY(calc((var(--q) - clamp(0, (var(--t) - .655) * 40, 1) - clamp(0, (var(--t) - .685) * 40, 1) - clamp(0, (var(--t) - .715) * 40, 1)) * 100%)); }
.wd-hist .clk .tm span:nth-child(1) { --q: 0; }
.wd-hist .clk .tm span:nth-child(2) { --q: 1; }
.wd-hist .clk .tm span:nth-child(3) { --q: 2; }
.wd-hist .clk .tm span:nth-child(4) { --q: 3; }
.hr { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; margin-bottom: 5px; background: #F6F7FB; opacity: var(--r); translate: 0 calc((1 - var(--r)) * -12px); }
.hr .t { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.hr .d { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr .s { font-weight: 700; font-size: 11px; }
.hr.warn { background: #FFF6E5; }
.hr.warn .s { color: #A86200; }
.hr.chg { background: var(--coral-soft); box-shadow: 0 0 0 1.5px rgba(253,74,48,.4) inset; }
.hr.chg .s { color: var(--coral-2); }
.hr.h1 { --r: clamp(0, calc((var(--t) - .645) * 70), 1); }
.hr.h2 { --r: clamp(0, calc((var(--t) - .675) * 70), 1); }
.hr.h3 { --r: clamp(0, calc((var(--t) - .705) * 70), 1); }
.hr.h4 { --r: clamp(0, calc((var(--t) - .735) * 70), 1); }
.nd-line { margin-top: 10px; display: flex; gap: 8px; align-items: center; padding: 10px 11px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; font-size: 12px; --r: clamp(0, calc((var(--t) - .755) * 70), 1); opacity: var(--r); }
.nd-line .sg { font-family: var(--mono); font-weight: 800; color: var(--coral); }
.nd-ign { margin-top: 7px; font-size: 11px; color: var(--ink-4); --r: clamp(0, calc((var(--t) - .77) * 70), 1); opacity: var(--r); }
.exl { width: 520px; transform: translateY(calc((1 - clamp(0, (var(--t) - .795) * 25, 1)) * -40px)) rotate(calc((1 - clamp(0, (var(--t) - .795) * 25, 1)) * -2deg)); }
.vpb { scale: calc(1 - clamp(0, 1 - max(calc((var(--t) - .885) * 90), calc((var(--t) - .885) * -90)), 1) * .08); }
.ev-snap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; font-size: 11px; color: var(--ink-3); }
.ev-snap > div { display: flex; align-items: center; gap: 8px; }
.ev-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.evc { border-radius: 12px; box-shadow: 0 0 0 1px var(--line) inset; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.el { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.el i { font-style: normal; width: 18px; color: var(--ink-4); font-size: 10px; }
.el.rm { background: color-mix(in srgb, var(--removed-bg) calc(clamp(0, (var(--t) - .925) * 40, 1) * 100%), transparent); }
.el.ad { background: color-mix(in srgb, var(--added-bg) calc(clamp(0, (var(--t) - .94) * 40, 1) * 100%), transparent); font-weight: 700; }
.ev-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-4); }

/* the cursor: one keyframe track scrubbed by --t, and a ring for each click */
.cur { position: absolute; left: 0; top: 0; z-index: 30; width: 24px; height: 24px; pointer-events: none; animation: curPath 1s linear both paused; animation-delay: calc(var(--t) * -1s); }
.cur svg { position: absolute; left: -4px; top: -2px; filter: drop-shadow(0 3px 5px rgba(8,11,22,.35)); }
.cur .ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 99px; border: 2px solid var(--blue); animation: curRing 1s linear both paused; animation-delay: calc(var(--t) * -1s); }
@keyframes curPath {
  0% { translate: 840px 560px; }
  3% { translate: 840px 560px; }
  7% { translate: 300px 139px; }
  15% { translate: 300px 139px; }
  17.8% { translate: 815px 139px; }
  19.5% { translate: 815px 139px; }
  23% { translate: 700px 205px; }
  27% { translate: 695px 270px; }
  29.3% { translate: 695px 270px; }
  33% { translate: 252px 310px; }
  35.2% { translate: 252px 310px; }
  36.6% { translate: 356px 310px; }
  38.2% { translate: 356px 310px; }
  41% { translate: 300px 370px; }
  42.2% { translate: 300px 370px; }
  44% { translate: 610px 430px; }
  53% { translate: 610px 430px; }
  57.5% { translate: 795px 468px; }
  60.3% { translate: 795px 468px; }
  63% { translate: 720px 300px; }
  73% { translate: 692px 330px; }
  77% { translate: 560px 420px; }
  80.5% { translate: 600px 530px; }
  86% { translate: 350px 461px; }
  88.5% { translate: 350px 461px; }
  91% { translate: 560px 250px; }
  100% { translate: 650px 205px; }
}
@keyframes curRing {
  0% { opacity: 0; scale: .4; }
  7.05% { opacity: 0; scale: .4; }
  7.20% { opacity: 1; scale: .7; }
  8.60% { opacity: 0; scale: 1.7; }
  17.65% { opacity: 0; scale: .4; }
  17.80% { opacity: 1; scale: .7; }
  19.20% { opacity: 0; scale: 1.7; }
  29.15% { opacity: 0; scale: .4; }
  29.30% { opacity: 1; scale: .7; }
  30.70% { opacity: 0; scale: 1.7; }
  35.05% { opacity: 0; scale: .4; }
  35.20% { opacity: 1; scale: .7; }
  36.60% { opacity: 0; scale: 1.7; }
  38.05% { opacity: 0; scale: .4; }
  38.20% { opacity: 1; scale: .7; }
  39.60% { opacity: 0; scale: 1.7; }
  42.05% { opacity: 0; scale: .4; }
  42.20% { opacity: 1; scale: .7; }
  43.60% { opacity: 0; scale: 1.7; }
  60.15% { opacity: 0; scale: .4; }
  60.30% { opacity: 1; scale: .7; }
  61.70% { opacity: 0; scale: 1.7; }
  88.35% { opacity: 0; scale: .4; }
  88.50% { opacity: 1; scale: .7; }
  89.90% { opacity: 0; scale: 1.7; }
  100% { opacity: 0; scale: .4; }
}


/* =================================================================
   NOISE: nine differences fall onto a rule that tips like a seesaw.
   Noise slides off to the left with its reason; signal drops into the alert.
   ================================================================= */
.noise { position: relative; height: 420vh; background: var(--ink); color: #fff; }
.noise .pin { background: var(--ink); display: grid; grid-template-columns: minmax(300px, 400px) auto; justify-content: center; align-items: center; column-gap: min(4vw, 56px); padding: 68px 40px 0;
  --t: var(--p, 0); --ms: 1; }
.nz-copy .h2 { margin-top: 16px; font-size: clamp(38px, 4.2vw, 68px); }
.nz-copy .lead { margin-top: 20px; color: var(--d-text-2); }
.nz-counts { margin-top: 34px; display: flex; gap: 26px; }
.nz-counts > div { display: flex; flex-direction: column; gap: 10px; }
.nz-counts .k { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-text-3); }
.nz-counts .flap { font-size: 44px; --fw: .7em; --fh: 1.24em; --fbg: #1A2036; }
.nz-mach { position: relative; width: calc(780px * var(--ms)); height: calc(760px * var(--ms)); }
.nm-in { position: absolute; left: 0; top: 0; width: 780px; height: 760px; transform: scale(var(--ms)); transform-origin: 0 0; }
.nm-src { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--d-text-3); letter-spacing: .02em; }
.nm-chute { position: absolute; left: 250px; top: 30px; width: 280px; height: 70px; }
.nm-chute::before, .nm-chute::after { content: ""; position: absolute; top: 0; width: 3px; height: 74px; background: rgba(255,255,255,.18); border-radius: 2px; }
.nm-chute::before { left: 0; transform: rotate(-24deg); transform-origin: 50% 100%; left: 24px; }
.nm-chute::after { right: 24px; transform: rotate(24deg); transform-origin: 50% 100%; }
.nm-gate { position: absolute; left: 110px; top: 272px; width: 560px; height: 44px; border-radius: 10px; background: #1A2036; box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 16px 30px -16px rgba(0,0,0,.8); display: flex; align-items: center; gap: 12px; padding: 0 14px; transform-origin: 50% 50%;
  animation: gateTilt 1s linear both paused; animation-delay: calc(var(--t) * -1s); }
.nm-gate::after { content: ""; position: absolute; left: 50%; top: 100%; width: 22px; height: 30px; margin-left: -11px; background: #252C45; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.nm-gate .gr { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0; }
.nm-gate .gr svg { width: 12px; height: 12px; }
.nm-gate .gt { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-gate .slot { display: none; }
.nm-tray { position: absolute; left: 0; top: 356px; width: 400px; }
.nm-out { position: absolute; left: 420px; top: 356px; width: 360px; }
.nm-tray .th, .nm-out .th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--d-text-3); padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,.14); }
.nm-out .th { color: var(--lime); border-bottom-color: rgba(209,252,12,.3); }
.tok { position: absolute; left: 0; top: 0; z-index: 3;
  --lt: clamp(0, calc((var(--t) - .04 - var(--s)) / .085), .999);
  animation: tokAside 1s linear both paused; animation-delay: calc(var(--lt) * -1s); }
.tok.kp { animation-name: tokPass; }
.tok .tk-in { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px 0 10px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 14px 26px -14px rgba(0,0,0,.8); transform: translate(-50%, -50%); }
.tok .sg { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--mist-2); font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--ink-3); }
.tok.kp .tk-in { background: var(--lime); box-shadow: 0 0 0 0 rgba(209,252,12,.0), 0 14px 26px -14px rgba(0,0,0,.8); }
.tok.kp .sg { background: var(--ink); color: var(--lime); }
.tok .why { position: absolute; left: 0; top: 0; transform: translate(-50%, 19px); white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--lime); opacity: clamp(0, calc((var(--lt) - .9) * 20), 1); }
.tok.ig .tk-in { transition: none; }
.tok.ig { --land: clamp(0, calc((var(--lt) - .86) * 12), 1); z-index: calc(1 + 3 * var(--land)); }
.tok.ig .tk-in { background: color-mix(in srgb, #252C45 calc(var(--land) * 100%), #fff); color: color-mix(in srgb, var(--d-text-2) calc(var(--land) * 100%), var(--ink)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--coral) calc(var(--land) * 100%), transparent); text-decoration-thickness: 1.5px; }
.tok.kp { z-index: 2; opacity: calc(1 - clamp(0, (var(--t) - .87) * 20, 1)); }
.tok .why { display: block; }
.tok.kp .why { display: none; }
@keyframes tokAside {
  0% { translate: 390px -40px; rotate: -8deg; opacity: 0; }
  8% { opacity: 1; }
  34% { translate: 390px 244px; rotate: 0deg; }
  40% { translate: 390px 240px; rotate: 0deg; }
  50% { translate: 330px 254px; rotate: -9deg; }
  66% { translate: 150px 290px; rotate: -12deg; }
  80% { translate: 190px calc(408px + var(--j) * 50px); rotate: -3deg; }
  88% { translate: 190px calc(400px + var(--j) * 50px); rotate: 1deg; }
  100% { translate: 190px calc(403px + var(--j) * 50px); rotate: 0deg; opacity: 1; }
}
@keyframes tokPass {
  0% { translate: 390px -40px; rotate: 8deg; opacity: 0; }
  8% { opacity: 1; }
  34% { translate: 390px 244px; rotate: 0deg; }
  40% { translate: 390px 240px; rotate: 0deg; }
  50% { translate: 450px 254px; rotate: 9deg; }
  66% { translate: 630px 290px; rotate: 12deg; }
  80% { translate: 600px calc(410px + var(--j) * 46px); rotate: 3deg; }
  88% { translate: 600px calc(402px + var(--j) * 46px); rotate: -1deg; }
  100% { translate: 600px calc(405px + var(--j) * 46px); rotate: 0deg; opacity: 1; }
}
@keyframes gateTilt {
  0.0% { rotate: 0deg; }
  7.23% { rotate: 0deg; }
  7.995% { rotate: -9deg; }
  9.44% { rotate: -9deg; }
  10.46% { rotate: 0deg; }
  15.98% { rotate: 0deg; }
  16.745% { rotate: -9deg; }
  18.19% { rotate: -9deg; }
  19.21% { rotate: 0deg; }
  24.73% { rotate: 0deg; }
  25.495% { rotate: -9deg; }
  26.94% { rotate: -9deg; }
  27.96% { rotate: 0deg; }
  33.48% { rotate: 0deg; }
  34.245% { rotate: -9deg; }
  35.69% { rotate: -9deg; }
  36.71% { rotate: 0deg; }
  42.23% { rotate: 0deg; }
  42.995% { rotate: -9deg; }
  44.44% { rotate: -9deg; }
  45.46% { rotate: 0deg; }
  50.98% { rotate: 0deg; }
  51.745% { rotate: -9deg; }
  53.19% { rotate: -9deg; }
  54.21% { rotate: 0deg; }
  59.73% { rotate: 0deg; }
  60.495% { rotate: 9deg; }
  61.94% { rotate: 9deg; }
  62.96% { rotate: 0deg; }
  68.48% { rotate: 0deg; }
  69.245% { rotate: 9deg; }
  70.69% { rotate: 9deg; }
  71.71% { rotate: 0deg; }
  77.23% { rotate: 0deg; }
  77.995% { rotate: -9deg; }
  79.44% { rotate: -9deg; }
  80.46% { rotate: 0deg; }
  100.0% { rotate: 0deg; }
}

.nz-card { position: absolute; left: 430px; top: 392px; width: 350px; z-index: 5; padding: 16px 18px 14px;
  --c: clamp(0, calc((var(--t) - .875) * 14), 1); opacity: var(--c); translate: 0 calc((1 - var(--c)) * -46px); rotate: calc((1 - var(--c)) * 4deg); }
.nz-card .cc-t { font-size: 18px; margin-top: 10px; }
.nz-card .cc-sum { font-size: 12.5px; }

/* =================================================================
   RULE: lime, opened through a W; the examples are a physics pile
   ================================================================= */
.rule { position: relative; background: var(--lime); color: var(--ink); padding: 150px 0 30vh; }
.rl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: min(6vw, 80px); align-items: start; }
.rl-head .h2 { margin-top: 18px; font-size: clamp(40px, 5vw, 80px); }
.rl-head .hl-b { background-image: linear-gradient(var(--ink), var(--ink)); }
.rl-head .lead { margin-top: 22px; color: rgba(8,11,22,.72); max-width: 520px; }
.rl-notes { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.rl-notes > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(8,11,22,.8); }
.rl-notes svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.rl-box { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 0 0 1.5px var(--ink), 10px 10px 0 var(--ink); }
.rl-lab { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.rl-in { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--mist); box-shadow: 0 0 0 1.5px var(--line-2) inset; }
.rl-in:focus-within { box-shadow: 0 0 0 2px var(--blue) inset; background: #fff; }
.rl-in svg { width: 18px; height: 18px; color: var(--blue); margin-top: 3px; flex-shrink: 0; }
.rl-in textarea { flex: 1; min-height: 52px; border: 0; outline: 0; background: transparent; resize: none; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.rl-out { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--line-2); }
.rl-k { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.rl-s { margin-top: 9px; font-size: 16px; line-height: 1.5; font-weight: 520; }
.rl-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; min-height: 26px; }
.rl-chips .rchip { height: 28px; padding: 0 11px; font-size: 12.5px; }
[data-js] .rl-chips.fa .rchip { animation: chipA .7s var(--ease-drop) both; animation-delay: calc(var(--i, 0) * 80ms); }
[data-js] .rl-chips.fb .rchip { animation: chipB .7s var(--ease-drop) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes chipA { from { opacity: 0; translate: 0 -22px; rotate: -6deg; } 40% { opacity: 1; } }
@keyframes chipB { from { opacity: 0; translate: 0 -22px; rotate: -6deg; } 40% { opacity: 1; } }
.rl-warn, .rl-ai { margin-top: 12px; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.45; }
.rl-warn { background: #FFF4E0; color: #7A4B00; }
.rl-ai { background: var(--ice); color: var(--blue-3); }
.rl-warn svg, .rl-ai svg { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }
.rl-pile { position: relative; height: 330px; margin-top: 90px; border-top: 1.5px dashed rgba(8,11,22,.3); overflow: hidden; touch-action: pan-y; }
.rl-try { position: absolute; left: max(40px, calc(50vw - 620px)); top: 18px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: rgba(8,11,22,.62); pointer-events: none; }
.rl-try .mono { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 5px 9px; border-radius: 6px; background: rgba(8,11,22,.08); }
.sgb { position: absolute; left: 0; top: 0; height: 50px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--ink), 3px 4px 0 var(--ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translate(var(--bx, 0px), var(--by, -200px)) rotate(var(--br, 0rad)); }
.sgb { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.sgb.on { background: var(--ink); color: var(--lime); }
.sgb[data-grab] { cursor: grabbing; box-shadow: 0 0 0 1.5px var(--ink), 6px 10px 0 var(--ink); }
.sgb:nth-of-type(3n) { background: var(--blue); color: #fff; }
.sgb:nth-of-type(4n) { background: var(--coral); color: #fff; }
.sgb.on:nth-of-type(n) { background: var(--ink); color: var(--lime); }
[data-js] .rl-pile:not([data-live]):not([data-static]) .sgb { opacity: 0; }
.rl-pile[data-static], .site:not([data-js]) .rl-pile {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
  padding: 64px max(40px, calc(50vw - 620px)) 40px; height: auto;
}
.rl-pile[data-static] .sgb, .site:not([data-js]) .rl-pile .sgb {
  position: static; transform: none;
}

/* =================================================================
   USE CASES: tiles slide along the grid and lock into a bento
   ================================================================= */
.cases { position: relative; background: #fff; padding: 130px 0 150px; overflow: clip; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 46px; }
.cs-head .h2 { margin-top: 16px; font-size: clamp(40px, 4.8vw, 78px); max-width: 780px; }
.cs-head .lead { max-width: 400px; color: var(--ink-3); }
.bento { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 236px; gap: 14px; }
.bgrid { position: absolute; inset: -14px; z-index: 0; pointer-events: none; border-radius: 26px;
  background-image: linear-gradient(90deg, rgba(0,41,255,.09) 1px, transparent 1px), linear-gradient(rgba(0,41,255,.09) 1px, transparent 1px);
  background-size: calc((100% - 28px) / 4 + 3.5px) 250px; background-position: 14px 14px; opacity: calc(1 - clamp(0, (var(--e, 1) - .8) * 5, 1) * .6); }
.tile { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; border-radius: 20px; background: #fff; color: var(--ink); overflow: hidden;
  --te: clamp(0, calc((var(--e, 1) - .12 - var(--dl)) * 2.6), 1); --ez: calc(1 - (1 - var(--te)) * (1 - var(--te)) * (1 - var(--te)));
  transform: translate3d(calc(var(--fx) * (1 - var(--ez))), calc(var(--fy) * (1 - var(--ez))), 0) rotate(calc((1 - var(--ez)) * 8deg));
  box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); transition: box-shadow .35s var(--ease), translate .35s var(--ease); }
.tile:hover { translate: -3px -3px; box-shadow: 0 0 0 1.5px var(--ink), 10px 10px 0 var(--ink); }
.tile.w2 { grid-column: span 2; }
.tile.h2 { grid-row: span 2; }
.tl-top { display: flex; align-items: center; gap: 8px; }
.tl-n { margin: 14px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; font-variation-settings: "wdth" 106; }
.tl-v { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.tl-v .k { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.tl-v .flap { font-size: 30px; --fw: .66em; --fh: 1.26em; }
.tl-q { margin: 12px 0 0; font-size: 13px; line-height: 1.45; opacity: .72; max-width: 92%; }
.tl-go { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(8,11,22,.06); transition: transform .45s var(--ease-back); }
.tl-go svg { width: 16px; height: 16px; }
.tile:hover .tl-go { transform: translateX(3px) rotate(-45deg); }
.tile.h2 .tl-n { font-size: 40px; }
.tile.h2 .tl-v .flap { font-size: 64px; }
.tile.h2 .tl-q { font-size: 15px; letter-spacing: normal; font-weight: 400; font-variation-settings: "wdth" 100; }
.c-blue { background: var(--blue); color: #fff; }
.c-blue .tl-go { background: rgba(255,255,255,.14); }
.c-ink, .c-ink2 { background: var(--ink); color: #fff; }
.c-ink .tl-go, .c-ink2 .tl-go { background: rgba(255,255,255,.1); }
.c-ink, .c-ink2, .c-blue { box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--lime); }
.c-ink:hover, .c-ink2:hover, .c-blue:hover { box-shadow: 0 0 0 1.5px var(--ink), 10px 10px 0 var(--lime); }
.c-lime { background: var(--lime); }
.c-coral { background: var(--coral); color: #fff; }
.c-coral .tl-go { background: rgba(255,255,255,.18); }
.c-ice { background: var(--ice); }
.c-blue .tchip, .c-ink .tchip, .c-ink2 .tchip, .c-coral .tchip { background: rgba(255,255,255,.14); color: #fff; }
.c-blue .stat, .c-ink .stat, .c-ink2 .stat, .c-coral .stat { background: rgba(255,255,255,.14); color: #fff; }
.c-lime .tchip, .c-lime .stat { background: rgba(8,11,22,.08); color: var(--ink); }

/* =================================================================
   PROOF: a lens over the old page shows the new page
   ================================================================= */
.proof { position: relative; z-index: 2; background: var(--ice); padding: 150px 0 160px; }
[data-js] .swing { transform-origin: 50% 0; transform: perspective(1800px) rotateX(calc((1 - var(--e, 1)) * -24deg)) scale(calc(.94 + var(--e, 1) * .06)); border-radius: calc((1 - var(--e, 1)) * 60px) calc((1 - var(--e, 1)) * 60px) 0 0; }
[data-js] .swing[data-arrived] { transform: none; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: min(6vw, 80px); align-items: center; }
.pf-copy .h2 { margin-top: 18px; font-size: clamp(40px, 4.6vw, 74px); }
.pf-copy .lead { margin-top: 20px; color: var(--ink-3); }
.pf-diff { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.pd { display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 15px; }
.pd .sg { font-family: var(--mono); font-weight: 800; color: var(--coral); }
.pd .strike { color: var(--ink-3); }
.pd .nw { font-weight: 700; background: var(--added-bg); color: var(--added-fg); border-radius: 5px; padding: 0 .25em; margin-left: .3em; }
.pf-ticks { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13.5px; color: var(--ink-3); }
.pf-ticks span { display: flex; gap: 8px; align-items: flex-start; }
.pf-ticks svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.lensbox { --lr: 96px; position: relative; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 12px 12px 0 var(--ink); overflow: hidden; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.doc { padding: 28px 34px 64px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.doc .dh { display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.doc .dh b { font-size: 15px; }
.doc .dh small { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.doc .sec { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase; }
.doc .dt { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.doc p { margin: 14px 0 0; }
.doc em { display: block; margin-top: 18px; font-style: normal; font-size: 13px; color: var(--ink-4); }
.doc .gh { min-height: 1.6em; }
.doc.before .o { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(253,74,48,.6); text-underline-offset: 3px; }
.doc.after { position: absolute; inset: 0; background: #FCFDFF; clip-path: circle(var(--lr) at var(--lx, 60%) var(--ly, 35%)); transform-origin: var(--lx, 60%) var(--ly, 35%); transform: scale(1.1); }
.lens { position: absolute; left: 0; top: 0; width: calc(var(--lr) * 2.2); height: calc(var(--lr) * 2.2); margin: calc(var(--lr) * -1.1) 0 0 calc(var(--lr) * -1.1); translate: var(--lx, 60%) var(--ly, 35%); pointer-events: none; }
.lens .rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--coral), 0 0 0 10px rgba(253,74,48,.14), 0 24px 44px -12px rgba(8,11,22,.45), inset 0 0 0 1px rgba(255,255,255,.8); transition: transform .4s var(--ease-back); }
.lensbox[data-lensing] .lens .rim { transform: scale(1.04); }
.lens .lt { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); height: 24px; padding: 0 9px; display: grid; place-items: center; border-radius: 7px; background: var(--coral); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.dtag { position: absolute; left: 34px; bottom: 20px; display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.pf-note { margin-top: 26px; font-size: 11.5px; color: var(--ink-4); }

/* =================================================================
   FACTS: numbers draw lines to the facts, drafts get stamped
   ================================================================= */
.facts { position: relative; height: 330vh; background: var(--ink); color: #fff; --l1: var(--blue); --l2: var(--lime); --l3: var(--coral); }
.facts .pin { background: var(--ink); display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 700px); justify-content: center; align-items: center; column-gap: min(5vw, 64px); padding: 68px 40px 0; }
.fx-copy .h2 { margin-top: 16px; font-size: clamp(36px, 3.8vw, 62px); }
.fx-note { margin-top: 14px; max-width: 390px; color: var(--lime); font-size: 13px; line-height: 1.5; font-weight: 650; }
.fx-steps { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; }
.fs { position: relative; display: block; width: 100%; text-align: left; padding: 12px 0 12px 20px; color: var(--d-text-3); transition: color .4s ease; }
.fs::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 4px; border-radius: 3px; background: rgba(255,255,255,.12); }
.fs::after { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 4px; border-radius: 3px; background: var(--lime); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease); }
.fs b { display: block; font-size: 18px; font-weight: 750; letter-spacing: -.015em; }
.fs span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; line-height: 1.55; color: var(--d-text-2); transition: max-height .6s var(--ease), opacity .5s ease, margin .5s ease; }
.facts[data-step="0"] .f0, .facts[data-step="1"] .f1, .facts[data-step="2"] .f2 { color: #fff; }
.facts[data-step="0"] .f0::after, .facts[data-step="1"] .f1::after, .facts[data-step="2"] .f2::after { transform: scaleY(1); }
.facts[data-step="0"] .f0 span, .facts[data-step="1"] .f1 span, .facts[data-step="2"] .f2 span { max-height: 100px; opacity: 1; margin-top: 6px; }
.fx-lab { position: relative; display: grid; grid-template-columns: 170px 1fr; grid-template-rows: auto 1fr auto; gap: 16px 22px; }
.fx-facts { grid-column: 1 / -1; background: #fff; color: var(--ink); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.fx-facts .fh { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.fx-facts .fh svg { width: 13px; height: 13px; }
.fx-page { position: relative; }
.xp { padding: 12px 12px; border-radius: 12px; background: #141A2E; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; display: flex; flex-direction: column; gap: 3px; }
.xp i { display: block; height: 3px; width: var(--w); border-radius: 2px; background: rgba(255,255,255,.2); transition: background-color .5s ease, transform .7s var(--ease), opacity .5s ease; }
.facts[data-step] .xp i { opacity: .45; }
.facts[data-step] .xp i.go { opacity: 1; background: var(--lime); box-shadow: 0 0 8px rgba(209,252,12,.8); transform: translateX(18px) scaleY(1.6); }
.xp-note { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; line-height: 1.4; }
.xp-note span { display: flex; gap: 6px; align-items: flex-start; }
.xp-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.xp-note .in { color: var(--lime); }
.xp-note .out { color: var(--d-text-3); }
.fx-drafts { position: relative; display: flex; flex-direction: column; gap: 14px; }
.fx-draft { position: relative; padding: 16px 18px; border-radius: 16px; background: #141A2E; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; transition: opacity .6s ease, transform .7s var(--ease-drop); }
.fx-draft .dh { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--d-text-3); }
.fx-draft p { margin: 8px 0 0; font-size: 17px; line-height: 1.45; color: #fff; }
.fx-draft .x { color: #FF8A78; text-decoration: underline wavy var(--coral); text-underline-offset: 4px; }
.fx-draft .x2 { color: #FF8A78; text-decoration: underline wavy rgba(253,74,48,.7); text-underline-offset: 4px; }
.fx-draft .y { color: var(--lime); font-weight: 700; }
.fx-draft .m { font-style: italic; color: var(--blue-ice); }
.fx-draft .vd { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vdk { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 650; }
.vdk svg { width: 12px; height: 12px; }
.vdk.bad { background: rgba(253,74,48,.16); color: #FF8A78; }
.vdk.ok { background: rgba(209,252,12,.14); color: var(--lime); }
.fx-draft .stamp { position: absolute; right: 14px; top: 12px; font-size: 14px; background: transparent; mix-blend-mode: normal; }
.facts .d1, .facts .d2 { opacity: 0; transform: translateY(-24px) rotate(-1.5deg); }
.facts[data-step="1"] .d1, .facts[data-step="2"] .d1 { opacity: 1; transform: none; }
.facts[data-step="2"] .d1 { opacity: .38; }
.facts[data-step="2"] .d2 { opacity: 1; transform: none; }
.facts .stamp.slam { opacity: 0; }
.facts[data-step="1"] .st1, .facts[data-step="2"] .st1 { animation: slam .55s var(--ease) .45s forwards; }
.facts[data-step="2"] .st2 { animation: slam .55s var(--ease) .45s forwards; }
.fx-fb { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--d-text-3); }
.fx-fb svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--lime); }
.fx-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.fx-wires path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); transition: stroke-dashoffset 1s var(--ease) .15s, opacity .5s ease; }
.fx-wires .w25, .fx-wires .wmot { stroke: var(--coral); stroke-dasharray: var(--len, 900); }
.fx-wires .w39, .fx-wires .w204 { stroke: var(--lime); }
.facts[data-step="1"] .w25, .facts[data-step="1"] .wmot { stroke-dashoffset: calc(var(--len, 900) * .42); }
.facts[data-step="2"] .w25, .facts[data-step="2"] .wmot { stroke-dashoffset: calc(var(--len, 900) * .42); opacity: .3; }
.facts[data-step="2"] .w39, .facts[data-step="2"] .w204 { stroke-dashoffset: 0; }

/* =================================================================
   FAILS: keycaps and a receipt printer
   ================================================================= */
.fail { position: relative; background: #fff; padding: 150px 0 160px; }
.fl-head { max-width: 760px; }
.fl-head .h2 { margin-top: 18px; font-size: clamp(40px, 5vw, 80px); }
.fl-head .lead { margin-top: 20px; color: var(--ink-3); }
.fl-grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: min(5vw, 64px); align-items: start; }
.fl-keys .keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.fl-keys .key { width: 100%; }
.fl-bad { position: relative; margin-top: 34px; padding: 18px 20px; border-radius: 18px; background: #FFF5F3; box-shadow: 0 0 0 1px rgba(253,74,48,.25) inset; }
.fl-bad .k { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-2); }
.fl-bad .nf { margin-top: 12px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px -16px rgba(154,28,12,.5); }
.fl-bad .nb { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--coral); color: #fff; }
.fl-bad .nb svg { width: 16px; height: 16px; }
.fl-bad .nf b { display: block; font-size: 15px; }
.fl-bad .nf small { display: block; font-size: 12px; color: var(--ink-4); }
.fl-bad .m { margin-top: 12px; font-size: 15px; }
.fl-bad .s { margin-top: 10px; font-size: 13px; color: var(--coral-ink); }
.scribble { position: absolute; left: 6%; top: 18%; width: 88%; height: 70%; pointer-events: none; }
.scribble path { stroke-dasharray: 700; stroke-dashoffset: 700; }
[data-in] .fl-bad.pa .scribble path { animation: scrA .9s var(--ease) .9s forwards; }
[data-in] .fl-bad.pb .scribble path { animation: scrB .9s var(--ease) .9s forwards; }
@keyframes scrA { to { stroke-dashoffset: 0; } }
@keyframes scrB { to { stroke-dashoffset: 0; } }
[data-in] .fl-bad.pa .nf { animation: buzzA .5s ease both; }
[data-in] .fl-bad.pb .nf { animation: buzzB .5s ease both; }
@keyframes buzzA { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes buzzB { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.fl-print { position: relative; }
.printer { position: relative; z-index: 3; height: 62px; border-radius: 18px 18px 12px 12px; background: var(--ink); display: flex; align-items: center; gap: 12px; padding: 0 20px; box-shadow: 0 20px 40px -24px rgba(8,11,22,.8); }
.printer .mono { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--d-text-3); }
.printer .led { width: 8px; height: 8px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 10px var(--lime); margin-left: auto; animation: led 1.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; } }
.printer .slotline { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 5px; border-radius: 3px; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.receipt { position: relative; z-index: 2; margin: -12px 30px 0; overflow: hidden; padding-bottom: 14px; }
.rc-in { position: relative; background: #FFFEFA; color: var(--ink); padding: 26px 22px 34px; font-family: var(--mono); font-size: 12px; line-height: 1.55; box-shadow: 0 18px 30px -18px rgba(8,11,22,.45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
[data-in] .receipt.pa .rc-in { animation: feedA 1.5s steps(18, end) both; }
[data-in] .receipt.pb .rc-in { animation: feedB 1.5s steps(18, end) both; }
@keyframes feedA { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes feedB { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.rc-h { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); padding-bottom: 10px; border-bottom: 1.5px dashed var(--line-2); }
.rc-code { margin-top: 14px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--blue); }
.rc-t { display: block; margin-top: 4px; font-family: var(--sans); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.rc-in p { margin: 8px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rc-fix { color: var(--ink-3) !important; }
.rc-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--line-2); font-size: 11.5px; }
.rc-row span:first-child { color: var(--ink-4); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.rc-row.ours span:last-child { color: #0E7A3D; font-weight: 700; }
.rc-stamp { position: absolute; right: 18px; bottom: 26px; font-size: 13px; opacity: 0; }
[data-in] .receipt.pa .rc-stamp { animation: slam .55s var(--ease) 1.55s forwards; }
[data-in] .receipt.pb .rc-stamp { animation: slamB .55s var(--ease) 1.55s forwards; }
@keyframes slamB { 0% { opacity: 0; scale: 2.3; } 55% { opacity: 1; scale: .94; } 72% { scale: 1.03; } 100% { opacity: 1; scale: 1; } }

/* =================================================================
   PRICING TEASER: keycaps, a flap price, a box that fills with checks
   ================================================================= */
.ptz { position: relative; background: var(--mist); padding: 140px 0 150px; --f: clamp(0, calc((var(--p, 0) - .2) / .38), 1); }
.ptz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: min(6vw, 80px); align-items: center; }
.ptz .h2 { font-size: clamp(40px, 4.8vw, 78px); }
.ptz .lead { color: var(--ink-3); }
.ptz-draft { margin-top: 14px; font-size: 12px; color: var(--ink-4); }
.ptz-con { background: #fff; border-radius: 24px; padding: 26px; box-shadow: 0 0 0 1.5px var(--ink), 12px 12px 0 var(--ink); }
.ptz-con .keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ptz-con .key { width: 100%; min-width: 0; }
.pc-price { margin-top: 24px; display: flex; align-items: flex-end; gap: 8px; }
.pc-price .cur { font-size: 34px; font-weight: 800; align-self: flex-start; margin-top: 8px; }
.pc-price .flap { font-size: 76px; --fw: .64em; --fh: 1.2em; --fgap: .04em; }
.pc-price .per { font-size: 14px; color: var(--ink-4); margin-bottom: 10px; }
.pc-blurb { margin-top: 10px; font-size: 16px; font-weight: 650; }
.pc-lines { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.pl2 { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pl2 .k { color: var(--ink-3); }
.pl2 .v { font-weight: 700; }
.capbox { margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--mist); }
.cb-h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; }
.cb-h .cb-n { font-size: 12px; color: var(--ink-3); }
.cb-stage { position: relative; height: 200px; margin-top: 6px; }
.cubes { position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform: translateX(-50%); overflow: visible; }
.cube { --v: clamp(0, calc(var(--f) * 50 - var(--i)), 1); transform: translate(var(--x), calc(var(--y) - (1 - var(--v)) * 46px)); opacity: var(--v); }
.cube .ct { fill: #3355FF; }
.cube .cl { fill: #0022D6; }
.cube .cr { fill: #0018A0; }
.cb-full { position: absolute; right: 0; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cb-full .flap { font-size: 22px; --fw: .7em; --fh: 1.28em; }
.cb-full .stamp { opacity: 0; }
.ptz[data-step="1"] .cb-stamp { animation: slam .55s var(--ease) .9s forwards; }
.ptz[data-step="1"] .glass path:first-child { stroke: var(--coral); }
.cb-note { margin-top: 6px; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.cb-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* =================================================================
   CTA: the layers fall back into the W
   ================================================================= */
.cta { position: relative; background: var(--blue); color: #fff; padding: 110px 0 160px; text-align: center; overflow: hidden; }
.cta .seam-edge { background: var(--lime); }
.cta-w { position: relative; height: 195px; display: grid; place-items: center; }
.cta-w .brand-display { transform: translateY(12px) rotate(-3deg); transition: transform .9s var(--ease-back); }
.cta-w:hover .brand-display { transform: translateY(0) rotate(0deg); }
.cta-in .label { justify-content: center; }
.cta-h { margin: 18px 0 0; font-size: clamp(52px, 8vw, 132px); line-height: .92; letter-spacing: -.045em; font-weight: 800; font-variation-settings: "wdth" 112; }
.cta .lead { margin-top: 20px; color: rgba(255,255,255,.8); }
.cta .urlbox { margin: 0 auto; box-shadow: 0 0 0 1.5px var(--ink), 8px 8px 0 var(--lime); }
.cta-ticks { margin-top: 24px; justify-content: center; color: rgba(255,255,255,.75); }
.cta-ticks svg { color: var(--lime); }
.cta .label .sq i:nth-child(1) { background: #fff; }
.cta .c3-cta { justify-content: center; margin-top: 34px; }
.chapter-cut { height: 100px; background: linear-gradient(180deg, #EEF1FF, #080B16); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
.how .pin { --asw: 1; --ash: 1; --as: min(var(--asw), var(--ash)); }
.noise .pin { --msw: 1; --msh: 1; --ms: min(var(--msw), var(--msh)); }
@media (max-width: 1380px) { .how .pin { --asw: .9; } .noise .pin { --msw: .9; } }
@media (max-width: 1220px) { .how .pin { --asw: .78; } .noise .pin { --msw: .76; } .hw-copy .h2 { font-size: 44px; } }
@media (max-width: 1060px) { .how .pin { --asw: .66; } .noise .pin { --msw: .66; } }
@media (max-height: 860px) { .how .pin { --ash: .9; } .noise .pin { --msh: .92; } }
@media (max-height: 780px) { .how .pin { --ash: .8; } .noise .pin { --msh: .82; } .hw-steps { margin-top: 18px; } .hs { padding-top: 7px; padding-bottom: 7px; } .nz-counts { margin-top: 20px; } }
@media (max-height: 700px) { .how .pin { --ash: .72; } .noise .pin { --msh: .74; } }

@media (max-width: 980px) {
  .pb-copy { left: 40px; top: 16vh; transform: none; width: calc(100% - 80px); height: 220px; }
  .pb-a, .pb-b { top: 0; }
  .pb-a { transform: translateY(calc(var(--o) * -40px)); }
  .pb-b { transform: translateY(calc((1 - var(--o)) * 40px)); }
  .prob .pin { --cw: 10.4vw; }
  .wall, .deck { left: 50%; top: 64%; }
  .wall { transform: translate(-50%, -50%); }
  .deck { left: 50%; }
  .dk-flip { width: min(460px, 82vw); left: calc(min(460px, 82vw) * -.5); }
  .how .pin, .noise .pin, .facts .pin { grid-template-columns: 1fr; justify-items: center; align-content: center; row-gap: 26px; padding: 76px 24px 20px; }
  .hw-copy, .nz-copy, .fx-copy { width: 100%; max-width: 640px; }
  .rl-wrap, .pf-grid, .fl-grid, .ptz-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .tile.w2 { grid-column: span 2; }
  .cs-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fx-lab { width: 100%; max-width: 640px; }
}

@media (max-width: 640px) {
  .home .pin { min-height: 0; }
  /* hero */
  .hero { height: 340vh; }
  .hero-stage { top: calc(108px + 3vh + var(--a) * 20vh); width: calc(min(15vh, 120px) + var(--a) * min(14vh, 115px)); transform: translateX(-50%); }
  .hero-copy { top: calc(108px + 3vh + min(15vh, 120px) + 2vh); width: calc(100% - 32px); }
  .hero-title { font-size: min(11.1vw, 6vh, 52px); }
  .hero-title .ln { padding-left: 0; padding-right: 0; }
  .hero-sub { font-size: 15.5px; }
  .hero-form { gap: 10px; }
  .hero-form .btn { width: 100%; }
  .hero-ticks { gap: 6px 14px; font-size: 12.5px; }
  .hero-ticks span:nth-child(3) { display: none; }
  .hero-cue { display: none; }
  .hero-change { height: 2.55em; }
  .hero-question + .hero-sub { font-size: 14px; margin-top: 12px; }
  .hero-question ~ .hero-form { margin-top: 14px; }
  .headline-control { bottom: -29px; }
  /* problem */
  .prob { height: 300vh; }
  .pb-copy { left: 18px; width: calc(100% - 36px); top: 13vh; }
  .pb-copy .h2 { font-size: 38px; }
  .pb-copy .lead { font-size: 15px; margin-top: 14px; }
  .prob .pin { --cw: 11.2vw; }
  .wall { top: 70%; }
  .deck { top: 68%; }
  .dk-flip { top: -130px; height: 260px; }
  .dk-back .cc { padding: 16px; }
  .dk-back .cc-t { font-size: 17px; }
  .pb-count { right: 18px; bottom: 3vh; font-size: 16px; }
  /* how */
  .how { height: 520vh; }
  .how .pin { --asw: calc(.405); --ash: 1; row-gap: 16px; padding-top: 72px; }
  .hw-copy .h2 { font-size: 34px; margin-top: 10px; }
  .hw-steps { margin-top: 10px; gap: 0; }
  .hs { padding: 5px 0 5px 14px; }
  .hs .hn { font-size: 16px; }
  .hs .hb { font-size: 13px; max-height: calc(var(--on) * 60px); }
  .hs:not(.s0):not(.s1):not(.s2):not(.s3):not(.s4) { display: none; }
  /* noise */
  .noise { height: 400vh; }
  .noise .pin { padding-top: 70px; row-gap: 10px; }
  .nz-copy .h2 { font-size: 34px; margin-top: 10px; }
  .nz-copy .lead { display: none; }
  .nz-counts { margin-top: 14px; gap: 18px; }
  .nz-counts .flap { font-size: 28px; }
  .nz-mach { width: calc(360px * var(--ms)); height: calc(620px * var(--ms)); }
  .noise .pin { --msw: .98; --msh: 1; }
  .nm-in { width: 360px; height: 620px; }
  .nm-src { display: none; }
  .nm-chute { left: 60px; top: -14px; width: 240px; height: 40px; }
  .nm-chute::before, .nm-chute::after { height: 44px; }
  .nm-gate { left: 10px; top: 96px; width: 340px; height: 38px; }
  .nm-gate .gt { font-size: 11px; }
  .nm-tray { top: 150px; width: 360px; }
  .nm-out { left: 0; top: 150px; width: 360px; opacity: 0; }
  .tok .tk-in { height: 30px; font-size: 11px; padding: 0 10px 0 8px; gap: 7px; }
  .tok .sg { width: 15px; height: 15px; font-size: 10px; }
  .tok .why { font-size: 9px; transform: translate(-50%, 16px); }
  .tok { animation-name: tokAsideM; }
  .tok.kp { animation-name: tokPassM; }
  .nz-card { left: 10px; top: 360px; width: 340px; }
  /* rule */
  .rule { padding: 110px 0 24vh; }
  .rl-head .h2 { font-size: 40px; }
  .rl-box { padding: 18px; box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); }
  .rl-in textarea { font-size: 15.5px; }
  .rl-pile { height: 360px; margin-top: 60px; }
  .rl-try { left: 18px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .sgb { height: 42px; padding: 0 15px; font-size: 13.5px; }
  /* cases */
  .cases { padding: 100px 0 110px; }
  .cs-head .h2 { font-size: 38px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 10px; }
  .tile { padding: 14px 14px 16px; border-radius: 16px; box-shadow: 0 0 0 1.5px var(--ink), 4px 4px 0 var(--ink); }
  .tile.w2, .tile.h2 { grid-column: span 2; }
  .tile.h2 { grid-row: span 1; }
  .tile.h2 .tl-n, .tl-n { font-size: 19px; margin-top: 10px; }
  .tile.h2 .tl-v .flap, .tl-v .flap { font-size: 24px; }
  .tl-q { display: none; }
  .tile.h2 .tl-q, .tile.w2 .tl-q { display: block; font-size: 12.5px; }
  .tl-go { right: 12px; bottom: 12px; width: 28px; height: 28px; }
  .c-ink, .c-ink2, .c-blue { box-shadow: 0 0 0 1.5px var(--ink), 4px 4px 0 var(--lime); }
  /* proof */
  .proof { padding: 100px 0 110px; }
  .pf-copy .h2 { font-size: 40px; }
  .pf-ticks { grid-template-columns: 1fr; }
  .lensbox { --lr: 70px; box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); }
  .doc { padding: 20px 20px 56px; font-size: 15px; }
  .doc .dt { font-size: 21px; }
  .dtag { left: 20px; font-size: 9.5px; }
  /* facts */
  .facts { height: 320vh; }
  .facts .pin { padding-top: 70px; row-gap: 14px; }
  .fx-copy .h2 { font-size: 30px; margin-top: 8px; }
  .fx-steps { display: none; }
  .fx-lab { grid-template-columns: 96px 1fr; gap: 10px 12px; }
  .fx-facts { padding: 10px 12px; }
  .fx-facts .fr { grid-template-columns: 64px auto auto auto auto; gap: 4px; font-size: 11px; }
  .fx-facts .fr .fd { display: inline-block; font-size: 9.5px; padding: 1px 4px; }
  .fx-facts .fr .fo, .fx-facts .fr .fn { font-size: 10.5px; padding: 1px 4px; }
  .xp { padding: 8px; gap: 2px; }
  .xp i { height: 2px; }
  .xp-note { font-size: 10px; }
  .fx-draft { padding: 12px; border-radius: 12px; }
  .fx-draft p { font-size: 14px; }
  .fx-draft .vd .vdk:nth-child(n+2) { display: none; }
  .fx-draft .stamp { font-size: 11px; right: 8px; top: 8px; padding: 4px 8px; }
  .fx-fb { font-size: 11px; }
  /* fails */
  .fail { padding: 100px 0 110px; }
  .fl-head .h2 { font-size: 40px; }
  .fl-keys .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .fl-keys .key { min-width: 0; height: 58px; padding: 8px 9px; }
  .fl-keys .key .k2 { font-size: 13px; }
  .fl-keys .key .k1 { font-size: 8.5px; }
  .receipt { margin: -12px 14px 0; }
  /* pricing */
  .ptz { padding: 100px 0 110px; }
  .ptz .h2 { font-size: 40px; }
  .ptz-con { padding: 16px; box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); }
  .ptz-con .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-price .flap { font-size: 60px; }
  .pc-lines { grid-template-columns: 1fr; }
  .cb-stage { height: 170px; }
  .cb-full { top: 0; }
  /* cta */
  .cta { padding: 90px 0 110px; }
  .cta-w { height: 190px; }
  .cta-w .w3d { --s: 120px; }
  .cta-h { font-size: 13vw; }
}

/* Autoplay scenes occupy a normal section, not a multi-screen scroll runway. */
.how[data-autoplay] { height: auto; }
.how[data-autoplay] > .pin { position: relative; height: auto; min-height: max(800px, 100svh); padding-top: 112px; padding-bottom: 90px; }
@media (max-width: 980px) {
  .how[data-autoplay] > .pin { min-height: 0; padding: 130px 24px 90px; row-gap: 42px; }
}
@keyframes tokAsideM {
  0% { translate: 180px -40px; rotate: -8deg; opacity: 0; }
  8% { opacity: 1; }
  34% { translate: 180px 72px; rotate: 0deg; }
  40% { translate: 180px 70px; rotate: 0deg; }
  52% { translate: 110px 84px; rotate: -9deg; }
  66% { translate: 40px 128px; rotate: -14deg; }
  80% { translate: 180px calc(186px + var(--j) * 40px); rotate: -3deg; scale: .92; }
  88% { translate: 180px calc(180px + var(--j) * 40px); rotate: 1deg; scale: .92; }
  100% { translate: 180px calc(182px + var(--j) * 40px); rotate: 0deg; scale: .92; opacity: 1; }
}
@keyframes tokPassM {
  0% { translate: 180px -40px; rotate: 8deg; opacity: 0; }
  8% { opacity: 1; }
  34% { translate: 180px 72px; rotate: 0deg; }
  40% { translate: 180px 70px; rotate: 0deg; }
  52% { translate: 250px 84px; rotate: 9deg; }
  66% { translate: 320px 128px; rotate: 14deg; }
  80% { translate: 180px calc(470px + var(--j) * 38px); rotate: 3deg; }
  88% { translate: 180px calc(464px + var(--j) * 38px); rotate: -1deg; }
  100% { translate: 180px calc(466px + var(--j) * 38px); rotate: 0deg; opacity: 1; }
}