/* Re:Wire · rewire8.com home page (10/9/2026), built from Landing Round 5 (design/landing-5-2026-10-09.html). */
:root{color-scheme:dark;
  --bg:#050605;--panel:#0C0F0C;--panel2:#111511;--ink:#EAF6E7;--muted:#7F9B79;--line:#1A231A;
  --green:#39FF14;--gold:#FFB300;--red:#FF3B1F;--cyan:#7CF5FF;--orange:#FF8000;
  --scr-top:#0B130B;--bub:#0E130E;--edge:#243024;--sw-off:#1E241E;--knob:#55604F;--ghost:#2C3C2C;--side:#070907;--push:#222622;
  --bg2:color-mix(in srgb,var(--bg) 40%,var(--panel));--ink2:color-mix(in srgb,var(--ink) 78%,transparent);
  --green-soft:color-mix(in srgb,var(--green) 12%,transparent);--cyan-soft:color-mix(in srgb,var(--cyan) 14%,transparent);
  --rule:color-mix(in srgb,var(--muted) 17%,transparent);
  --jf:#2EE6FF;--orange:#FF8000;--caution:#FFE14D;--jf-dk:#0E7F91;--jf-lt:#BDF6FF;--cmu:#A3CBD1;--paper:#F2F0E6;--pink:#17160F;
  --display:"Exo 2","Inter",system-ui,sans-serif;--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hs:42px;--bs:15px;--ls:12px;--etch-d:rgba(0,0,0,.72);--etch-l:color-mix(in srgb,var(--ink) 12%,transparent);--shade:rgba(0,0,0,.85);   --jf-cy:#2EE6FF;--jf-cy-hi:#BDF6FF;--jf-cy-dk:#0E7F91;   --jf-or:var(--orange);--jf-or-hi:#FFBF80;--jf-or-dk:#8C4600;   --jf-rd:var(--red);--jf-rd-hi:#FF9D8F;--jf-rd-dk:#8C2011;--spark:#FFFFFF;   --p-paper:#F2F0E6;--p-ink:#14160F;--p-red:#C8260F;--p-gold:#8A5E00;--p-note:#4A4E43;--p-lead:#9A9C90;--p-hint:#6E7366;--p-won:#5B5F52;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}

/* ===== shared by every treatment (inside its iframe): take A's full-colour look ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{background:#070907}
body{margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
/* the lockup: the static PNG (round 5, Donan 10/9 09:40: no animation on the logo) */
.lk { position:relative; display:inline-block; line-height:0; }
.lk img{display:block;width:100%;height:auto}
/* the pre-save form (POST /api/presave) */
.ps .ps-note{flex-basis:100%;margin:0;font-size:13px;line-height:1.4}
.ps .ps-note:empty{display:none}
.ps.done input,.ps.done button{display:none}
/* reveal on view */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.is-in{opacity:1;transform:none}

/* ---------- the page: take A ---------- */
.P{--g:#39FF14;--gd:#1C8F12;--k:#050605;--p:#0C0F0C;--p2:#111511;--ink:#EAF6E7;--mu:#7F9B79;--ln:#1A231A;--red:#FF3B1F;
  background:var(--g);color:var(--k);font:400 17px/1.55 Inter,system-ui,sans-serif;overflow-x:clip}
.P .in{max-width:1200px;margin:0 auto;padding:0 40px}
.P a{text-decoration:none}
.P .nav{position:relative;z-index:3}
.P .nav .in{display:flex;align-items:center;gap:28px;height:92px}
.P .plate{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:var(--k);box-shadow:0 10px 30px rgba(5,6,5,.25)}
.P .plate .lk{width:198px;margin:-13px -42px}
.P .links{display:flex;gap:26px;margin-left:auto;font:600 15px/1 Inter,sans-serif}
.P .links a:hover{text-decoration:underline;text-underline-offset:4px}
.P .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;background:var(--k);color:var(--ink);font:700 15px/1 Inter,sans-serif;border:0;cursor:pointer;white-space:nowrap}
.P .btn:hover{background:#000}
/* hero: A's copy on the left, C's phone on the right */
.P .hero .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;min-height:640px;padding-bottom:60px}
.P .soon{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;background:var(--k);color:var(--ink);font:600 14px/1 Inter,sans-serif;white-space:nowrap}
.P .soon .dot{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.P h1{margin:26px 0 22px;font:800 100px/.92 Inter,sans-serif;letter-spacing:-.055em}
.P .lead{margin:0;max-width:24em;font-size:20px;line-height:1.45;color:rgba(5,6,5,.86)}
.P .ps{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:520px}
.P .ps input{flex:1 1 240px;min-width:0;height:56px;padding:0 22px;border-radius:999px;border:2px solid var(--k);background:var(--ink);color:var(--k);font:500 16px Inter,sans-serif}
.P .ps input::placeholder{color:#55604F}
.P .ps input:focus{outline:3px solid var(--k);outline-offset:2px}
.P .ps .btn{height:56px;padding:0 28px;font-size:16px}
.P .ps .ps-note{font-weight:600}.P .ps .ps-note.bad{color:#7A0F00}
.P .follow{margin:18px 0 0;font-size:14px;color:rgba(5,6,5,.8)}.P .follow a{font-weight:700;border-bottom:1.5px solid var(--k)}
.P .stage{position:relative;display:grid;justify-items:center;padding:10px 0 40px}
.P .stage .shadow{position:absolute;left:22%;right:22%;bottom:12px;height:50px;border-radius:50%;background:var(--gd);filter:blur(18px);opacity:.8}
.P .stage .phn{animation:drift 9s ease-in-out infinite;--r:-1.5deg;--dy:-10px}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}50%{transform:translate(var(--dx,0),var(--dy,-8px)) rotate(calc(var(--r,0deg) * -1))}}
/* the phone (C's lock screen), dark: only the lockup and one callout */
.phn{position:relative;width:300px;height:610px;border-radius:48px;padding:11px;background:#0B0E0B;box-shadow:0 0 0 1px #243024,0 40px 70px rgba(5,6,5,.35)}
.phn .scn{position:relative;height:100%;border-radius:38px;overflow:hidden;background:radial-gradient(90% 50% at 50% 62%,rgba(57,255,20,.07),transparent 70%),linear-gradient(180deg,#0B130B,#050605 72%)}
.phn .isl{position:absolute;left:50%;top:16px;width:92px;height:26px;margin-left:-46px;border-radius:14px;background:#000;z-index:3}
.phn .mk{position:absolute;left:50%;top:58%;width:180px;margin-left:-90px;transform:translateY(-50%);opacity:.92}
.phn .mk .lk{width:100%}
.phn .flash{position:absolute;inset:0;background:radial-gradient(70% 30% at 50% 14%,rgba(255,59,31,.28),transparent 70%);opacity:0;pointer-events:none}
.phn .st{position:absolute;left:10px;right:10px;top:56px;z-index:2}
.phn .st .push{box-shadow:0 14px 30px rgba(0,0,0,.45)}
.phn.live .st{animation:callin 7s cubic-bezier(.2,1,.3,1) infinite}
.phn.live .flash{animation:flash 7s ease-out infinite}
@keyframes callin{0%{transform:translateY(-150%);opacity:0}7%{transform:translateY(4%);opacity:1}10%{transform:none}84%{transform:none;opacity:1}92%{transform:translateY(-30%);opacity:0}100%{transform:translateY(-150%);opacity:0}}
@keyframes flash{0%,5%{opacity:0}9%{opacity:1}40%{opacity:.35}84%{opacity:.35}92%,100%{opacity:0}}
/* the special guest: a clip box at an edge; he slides out of it and back (positions are set per treatment) */
.gst{position:absolute;z-index:4;width:var(--gw);height:var(--gw);pointer-events:none}
.gst .gclip{position:absolute;inset:0;overflow:hidden}
.gst canvas{display:block;width:100%;height:100%;image-rendering:pixelated;transform:translateY(100%)}
.gst.g-left canvas{transform:translateX(100%)}.gst.g-right canvas{transform:translateX(-100%)}
.gst .gsay{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:grid;justify-items:center;gap:10px;opacity:0;transition:opacity .25s}
.gst .gsay.tg{gap:18px}
/* his speech bubble, in his pixel style: 3 px cells, notched corners, his outline colour, a stepped tail */
.gst .bub{position:relative;display:block;padding:7px 10px 6px;background:#F4ECFF;color:#1A0626;font:700 12px/1.25 "JetBrains Mono",monospace;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 -3px 0 0 #9B4DFF,0 3px 0 0 #9B4DFF,-3px 0 0 0 #9B4DFF,3px 0 0 0 #9B4DFF,0 0 18px 4px rgba(155,77,255,.4)}
.gst .bub::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:3px;margin-left:-11px;background:#9B4DFF;box-shadow:3px 0px #F4ECFF,6px 0px #F4ECFF,9px 0px #F4ECFF,12px 0px #F4ECFF,15px 0px #F4ECFF,18px 0px #9B4DFF,3px 3px #9B4DFF,6px 3px #F4ECFF,9px 3px #F4ECFF,12px 3px #F4ECFF,15px 3px #9B4DFF,6px 6px #9B4DFF,9px 6px #F4ECFF,12px 6px #9B4DFF,9px 9px #9B4DFF}
.gst .gtag{padding:4px 8px;border-radius:999px;background:#050605;color:#D9B8FF;box-shadow:0 0 0 1px rgba(155,77,255,.55),0 0 12px rgba(155,77,255,.3);font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.phn .gst{left:50%;bottom:0;margin-left:calc(var(--gw) / -2)}
#f2 .mk{display:none}
/* in the small frames the bubble wraps rather than run to the screen edge */
.phn.sm .gst .bub{white-space:normal;width:max-content;max-width:176px;text-align:center;text-wrap:balance}
/* round 5 · the callout: the real iOS lock-screen notification, verbatim from landing-phone-2026-10-09.html (no emoji; the A136 app icon).
   There it is sized in device points against the phone's width (1 pt = .2376cqw of the phone). Here the screen (.scn, 92.67% of the
   phone's width) is the container, so each value is divided by .92667: the card scales with each phone's width. */
.phn .scn{container-type:inline-size}
.phn .st{left:calc(2.4cqw / .92667);right:calc(2.4cqw / .92667);top:calc(17.4cqw / .92667)}
.nt{display:grid;grid-template-columns:calc(9cqw / .92667) minmax(0,1fr);column-gap:calc(2.4cqw / .92667);align-items:center;padding:calc(3.3cqw / .92667) calc(3.4cqw / .92667);border-radius:calc(5.2cqw / .92667);
  background:rgba(64,68,64,.58);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 calc(.8cqw / .92667) calc(5cqw / .92667) rgba(0,0,0,.32);color:#fff;font-family:var(--font);text-align:left}
.nt .ic{display:block;width:calc(9cqw / .92667);height:calc(9cqw / .92667);border-radius:calc(2.05cqw / .92667)}
.nt .bx{min-width:0}
.nt .h{display:flex;justify-content:space-between;align-items:baseline;gap:calc(2cqw / .92667);font:600 calc(3.5cqw / .92667)/1.3 var(--font);letter-spacing:-.01em}
.nt .h span:last-child{font-weight:400;font-size:calc(3.15cqw / .92667);color:rgba(255,255,255,.58)}
.nt .m{font:400 calc(3.6cqw / .92667)/1.3 var(--font);letter-spacing:-.01em;color:#fff}
.nt .m span{display:inline-block}
/* round 5 · seams: F · Pixel edge from landing-seams-2026-10-09.html, static: four rows of 6 px cells, an ordered dither 7/8 → 1/8 of the
   upper colour over the lower. Laid over the top 24 px of the lower section so nothing below moves. */
.P .how,.P .story,.P .for,.P .ft{position:relative}
.dith{position:absolute;left:0;right:0;top:0;height:24px;background-size:48px 24px;background-repeat:repeat-x;pointer-events:none}
/* Donan 10/9 09:52: a sentence per line, everywhere on the page; the How it works title runs each sentence on one line where the column allows */
.sn,.nt .m .sn,.HX .ntf .nm .sn{display:block}
/* Donan 10/9 10:17: consecutive sentences read as separate lines: a gap after each sentence (body .6 em, headlines .35 em); a sentence's own
   wrapped lines stay tight. The lock-screen card keeps iOS spacing (its two lines are one notification). */
.sn+.sn{margin-top:.6em}
.P .how h2 .sn+.sn{margin-top:.35em}
.nt .m .sn+.sn,.HX .ntf .nm .sn+.sn{margin-top:0}
.sn{text-wrap:balance}   /* where a sentence must wrap (phone, narrow cards), it wraps evenly, no lone last word */
.say .big .s0{color:inherit}
.P .for h2{text-wrap:balance}   /* even wraps, no lone "counts." */
.say .big .wd{color:var(--k);transition:color .6s ease}
.say .big .wd.dim{color:rgba(5,6,5,.5)}
/* the inline wordmark (Donan 10/9 10:04): the lockup PNG cropped to its letters only (no mark), at the line's cap height (Inter .727em;
   the crop's bottom row is the letters' baseline), so it never grows the line. On green it sits on its own dark plate (never recoloured) */
.wmk{display:inline-block;vertical-align:baseline}
.wmk img{display:inline;height:.733em;width:auto;max-width:none;vertical-align:baseline;margin:0}
.wmp{background:#050605;border-radius:.16em;padding:0 .16em}

.P .how h2{max-width:none}
@media (max-width:760px){.P .how h2{max-width:15ch}}
/* round 5 · Gamble C · Peek then leap (Donan 10/9 10:08), the stage CSS verbatim from design/gamble-motion-2026-10-09.html, scoped under .say (the hero phone keeps Landing 2's own .gst Gamble) */
/* "and", the gap and "the" keep to one line, so the two words spread apart instead of the gap indenting the next line */
.say .big .aw{white-space:nowrap;color:inherit}
/* the gap between "you" and "that" (10:36; was "and"/"the") (zero wide until it opens, JS-driven so a still can pin it) */
.say .big .gap{position:relative;display:inline-block;width:0;height:0;vertical-align:baseline}
.say .gbox{position:absolute;left:.25em;bottom:0;width:var(--gw);height:var(--gw);pointer-events:none}
/* the clip: only the baseline cuts him (wide on the sides and above); .nar also cuts at the gap's sides (C's peek from behind "the") */
.say .gclip{position:absolute;left:-300px;right:-300px;top:-400px;bottom:0;overflow:hidden}
.say .gclip canvas{position:absolute;left:300px;bottom:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:50% 100%}
.say .gclip.nar{left:0;right:0}.say .gclip.nar canvas{left:0}
.say .gtags{position:absolute;left:50%;bottom:calc(100% + 2px);display:grid;justify-items:center;gap:5px;transform:translateX(calc(-50% + var(--tx,0px)))}
.say .gtags.row{grid-auto-flow:column;align-items:end}
.say .gtag{display:block;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,1.2,.4,1);
  padding:4px 8px;border-radius:999px;background:#050605;color:#D9B8FF;box-shadow:0 0 0 1px rgba(155,77,255,.55),0 0 12px rgba(155,77,255,.3);font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.say .big .gtag{color:#D9B8FF}
.say .gtag.on{opacity:1;transform:none}
.pin .say .gtag{transition:none}
@media (max-width:760px){.say .gbox{bottom:-10px}}
@media (prefers-reduced-motion:reduce){.say .gtag{transition:none}}
/* section type */
.P .eb{margin:0 0 14px;font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.P h2{margin:0;font:800 64px/.98 Inter,sans-serif;letter-spacing:-.045em;max-width:15ch}
.P h3{margin:0 0 6px;font:700 18px/1.3 Inter,sans-serif}
.P .dark{background:var(--k);color:var(--ink)}
.P .dark h2{color:var(--g)}
.P .dark+.dark{border-radius:0}
/* How it works: B's four glass cards on a current line, a spark running along it */
.P .how{padding:96px 0 110px}
.P .wire{position:relative;margin-top:52px}
.P .wire .ln{position:absolute;left:0;right:0;top:44px;height:2px;background:#243024;overflow:hidden}
.P .wire .ln i{position:absolute;top:-1px;left:0;width:90px;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 6px #39FF14,0 0 14px #39FF14;animation:spark 4.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes spark{from{transform:translateX(-90px)}to{transform:translateX(1200px)}}
.P .on-g .wire .ln{background:rgba(5,6,5,.4)}
.P .on-g .wire .ln i{background:#fff;box-shadow:0 0 6px #fff,0 0 2px #050605}
/* 10:24: the spark is placed by sparks() (stops at each card), not by the old keyframes; the card it waits at swells its icon's glow */
.P .how .wire .ln i{animation:none!important}
.P .gc .ico{transition:box-shadow .3s ease,border-color .3s ease}
.P .gc.hit .ico{border-color:#39FF14;box-shadow:0 0 0 1px rgba(57,255,20,.6),0 0 16px rgba(57,255,20,.55)}
.P .cards4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.P .gc{position:relative;padding:24px 22px 26px;border-radius:16px;background:linear-gradient(180deg,#0E120E,#080A08);border:1px solid var(--ln);color:var(--ink);box-shadow:inset 0 1px 0 rgba(234,246,231,.06),0 20px 40px rgba(0,0,0,.35)}
.P .gc::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(57,255,20,.6),transparent)}
.P .ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:22px;border-radius:12px;border:1px solid #243024;background:var(--k);color:var(--g)}
.P .ico svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(57,255,20,.5))}
.P .ico .lm{width:20px;height:20px}.P .ico .lm-ring{fill:#39FF14}.P .ico .lm-core{fill:#FF3B1F}
.P .gc .n{display:block;margin-bottom:6px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--mu)}
.P .gc p{margin:0;font-size:15px;line-height:1.5;color:var(--mu)}
/* Built for, the second ask */
.P .for{padding:100px 0 110px}
.P .for .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
.P .for h2{max-width:16ch;font-size:56px}
.P .tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.P .tags span{padding:10px 16px;border-radius:999px;background:var(--k);color:var(--ink);font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.P .ask p.q{margin:0;font:800 30px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.P .ask .ps{margin-top:18px}
.P .ask p.edge{margin-bottom:22px}
.P .dark .tags span{background:var(--g);color:var(--k)}
.P .dark .ps input{border-color:var(--ink)}
.P .dark .ps .btn{background:var(--g);color:var(--k)}
.P .dark .ps .ps-note.good{color:var(--g)}.P .dark .ps .ps-note.bad{color:#FF7A66}
/* footer */
.P .ft{background:var(--k);color:var(--mu);padding:46px 0 52px;font-size:14px}
.P .ft .in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.P .ft .lk{width:170px;margin:-12px -36px}
.P .ft .co{flex-basis:100%;margin:6px 0 0;color:var(--ink)}
.P .ft nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.P .ft nav a{color:var(--mu);border-bottom:1px solid var(--ln)}.P .ft nav a:hover{color:var(--ink)}
/* phone width */
@media (max-width:760px){
  .P .in{padding:0 16px}
  .P .nav .in{height:72px;gap:10px}
  .P .plate{padding:7px 12px}.P .plate .lk{width:132px;margin:-9px -28px}
  .P .links{gap:12px;font-size:13px}.P .links a.hm{display:none}
  .P .nav .btn{height:40px;padding:0 14px;font-size:13px}
  .P .hero .in{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:18px;padding-bottom:30px;gap:30px}
  .P h1{font-size:60px;margin:22px 0 18px}
  .P .lead{font-size:18px}
  .P .ps input,.P .ps .btn{flex:1 1 100%}
  .phn{width:262px;height:532px;border-radius:42px;padding:10px}.phn .scn{border-radius:33px}.phn .mk{width:156px;margin-left:-78px}
  .P h2,.P .for h2{font-size:42px}
  .P .how{padding:64px 0 72px}
  .P .wire{margin-top:34px;padding-left:30px}
  .P .wire .ln{left:9px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .P .wire .ln i{left:-1px;top:0;width:4px;height:90px;animation-name:sparkv}
  @keyframes sparkv{from{transform:translateY(-90px)}to{transform:translateY(1000px)}}
  .P .cards4{grid-template-columns:minmax(0,1fr);gap:12px}
  .P .for{padding:64px 0 72px}
  .P .for .in{grid-template-columns:minmax(0,1fr);gap:30px}
  .P .ask p.q{font-size:26px}
  .P .ft .lk{width:150px;margin:-10px -32px}
}
@media (prefers-reduced-motion:reduce){
  .P *,.P *::before,.P *::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .P .wire .ln i{display:none}
}

/* ===== round 5 · the hero: Hero Options (design/landing-hero-2026-10-09.html) treatment B · Dark light, its CSS verbatim, scoped under .HX ===== */
.HX{--g:#39FF14;--green:#39FF14;--k:#050605;--ink:#EAF6E7;--red:#FF3B1F;
  --hf:#070907;--ht:#EAF6E7;--bb:#39FF14;--bt:#050605;--ib:#0C0F0C;--it:#EAF6E7;--ibd:#2E3B2E;--ip:#7F9B79;--sb:rgba(234,246,231,.08);--sbd:rgba(234,246,231,.16);
  color:var(--ink);font:400 17px/1.55 Inter,system-ui,sans-serif}
.HX *{box-sizing:border-box}
.HX a{color:inherit;text-decoration:none}
.HX .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.HX .lk{ position:relative; display:inline-block; line-height:0; }
.HX .lk img{display:block;width:100%;height:auto}
.HX .fld{background:var(--hf);color:var(--ht)}
.HX .H{position:relative;overflow-x:clip}
.HX .in{max-width:1200px;margin:0 auto;padding:0 40px}
.HX .nav{position:relative;z-index:3}
.HX .nav .in{display:flex;align-items:center;gap:28px;height:92px}
.HX .plate{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:#050605;box-shadow:0 0 0 1px rgba(234,246,231,.09),0 10px 30px rgba(5,6,5,.22)}
.HX .plate .lk{width:198px;margin:-13px -42px}
.HX .plate.glow{box-shadow:0 0 0 1px rgba(57,255,20,.28),0 0 34px rgba(57,255,20,.28),0 0 90px rgba(57,255,20,.14)}
.HX .links{display:flex;gap:26px;margin-left:auto;font:600 15px/1 Inter,sans-serif;white-space:nowrap}
.HX .links a:hover{text-decoration:underline;text-underline-offset:4px}
.HX .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;font:700 15px/1 Inter,sans-serif}
.HX .fld .btn{background:var(--bb);color:var(--bt);box-shadow:inset 0 0 0 2px #050605}
.HX .btn:hover{filter:brightness(1.08)}
.HX .soon{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;font:600 14px/1 Inter,sans-serif;white-space:nowrap}
.HX .fld .soon{background:var(--sb);color:#EAF6E7;box-shadow:inset 0 0 0 1px var(--sbd)}
.HX .soon .dot{width:8px;height:8px;border-radius:50%;background:#39FF14;box-shadow:0 0 10px #39FF14}
.HX .hl{margin:0;font:800 100px/.92 Inter,sans-serif;letter-spacing:-.055em}
.HX .lead{margin:0;max-width:24em;font-size:20px;line-height:1.45}
.HX .hl{font-family:var(--hff,'Inter'),Inter,system-ui,sans-serif}
.HX .ps{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.HX .ps input{flex:1 1 240px;min-width:0;height:56px;padding:0 22px;border-radius:999px;font:500 16px Inter,sans-serif}
.HX .fld .ps input{background:var(--ib);color:var(--it);border:2px solid var(--ibd)}
.HX .fld .ps input::placeholder{color:var(--ip)}
.HX .ps input:focus{outline:3px solid currentColor;outline-offset:2px}
.HX .ps .btn{height:56px;padding:0 28px;font-size:16px}
.HX .ps .ps-note{flex-basis:100%;margin:0;font-size:14px;font-weight:600;line-height:1.4}
.HX .ps .ps-note:empty{display:none}
.HX .ps.done input,.HX .ps.done button{display:none}
.HX .follow{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;font-weight:600}
.HX .follow a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%}
.HX .follow a:hover{background:rgba(127,127,127,.18)}
.HX .follow svg{display:block;width:20px;height:20px}
.HX .phn{position:relative;width:300px;height:610px;border-radius:48px;padding:11px;background:#0B0E0B;box-shadow:0 0 0 1px #243024,0 40px 70px rgba(5,6,5,.35)}
.HX .phn .scn{position:relative;height:100%;border-radius:38px;overflow:hidden;background:radial-gradient(90% 50% at 50% 62%,rgba(57,255,20,.07),transparent 70%),linear-gradient(180deg,#0B130B,#050605 72%)}
.HX .phn .isl{position:absolute;left:50%;top:16px;width:92px;height:26px;margin-left:-46px;border-radius:14px;background:#000;z-index:3}
.HX .phn .mk{position:absolute;left:50%;top:58%;width:180px;margin-left:-90px;transform:translateY(-50%);opacity:.92}
.HX .phn .mk .lk{width:100%}
.HX .phn .flash{position:absolute;inset:0;background:radial-gradient(70% 30% at 50% 14%,rgba(255,59,31,.28),transparent 70%);opacity:0;pointer-events:none}
.HX .phn .st{position:absolute;z-index:2}
.HX .phn.live .st{animation:callin 7s cubic-bezier(.2,1,.3,1) infinite}
.HX .phn.live .flash{animation:flash 7s ease-out infinite}
@keyframes callin{0%{transform:translateY(-150%);opacity:0}7%{transform:translateY(4%);opacity:1}10%{transform:none}84%{transform:none;opacity:1}92%{transform:translateY(-30%);opacity:0}100%{transform:translateY(-150%);opacity:0}}
@keyframes flash{0%,5%{opacity:0}9%{opacity:1}40%{opacity:.35}84%{opacity:.35}92%,100%{opacity:0}}
.HX .phn .st{left:7.2px;right:7.2px;top:52.2px}
.HX .ntf{display:grid;grid-template-columns:27px minmax(0,1fr);column-gap:7.2px;align-items:center;padding:9.9px 10.2px;border-radius:15.6px;
  background:rgba(64,68,64,.58);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 2.4px 15px rgba(0,0,0,.32);
  color:#fff;font-family:Inter,system-ui,sans-serif;text-align:left;letter-spacing:normal}
.HX .ntf .ic{display:block;width:27px;height:27px;border-radius:6.15px}
.HX .ntf .nb{min-width:0}
.HX .ntf .nh{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font:600 10.5px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em}
.HX .ntf .nh span:last-child{font-weight:400;font-size:9.45px;color:rgba(255,255,255,.58)}
.HX .ntf .nm{font:400 10.8px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#fff}
.HX .ntf .nm span{display:inline-block}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(var(--dy,-8px)) rotate(var(--r2,var(--r,0deg)))}}
.HX .tB{background:var(--hf)}
.HX .tB .hero .in{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px;padding-bottom:84px}
.HX .tB .pv{position:relative;width:100%;display:flex;justify-content:center}
.HX .tB .pv .phn{z-index:1;box-shadow:0 0 0 1px rgba(57,255,20,.35),0 0 60px rgba(57,255,20,.22),0 40px 70px rgba(0,0,0,.6);animation:drift 11s ease-in-out infinite;--dy:-8px}
.HX .tB .halo{position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(57,255,20,.34),rgba(57,255,20,.12) 45%,rgba(57,255,20,0) 100%);pointer-events:none}
.HX .tB .hl.sp{position:absolute;inset:0;margin:0;font-size:80px;pointer-events:none;z-index:2}
.HX .tB .hl.sp span{position:absolute;white-space:nowrap}
.HX .tB .h1a{right:calc(50% + 178px);top:92px;text-align:right}
.HX .tB .h1b{left:calc(50% + 178px);bottom:92px}
.HX .tB .ask{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;margin-top:46px}
.HX .tB .lead{max-width:30em}
.HX .tB .ps{justify-content:center;width:100%}
.HX .tB .follow{justify-content:center}
.HX .tB .lkglow{position:absolute;left:40px;top:46px;width:280px;height:0;pointer-events:none}
.HX .tB .lkglow::before{content:"";position:absolute;left:-60px;top:-90px;width:340px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(57,255,20,.22),rgba(57,255,20,0))}
@media (max-width:760px){.HX .in{padding:0 16px}
.HX .nav .in{height:72px;gap:10px}
.HX .plate{padding:7px 12px}
.HX .plate .lk{width:132px;margin:-9px -28px}
.HX .links{gap:12px;font-size:13px}
.HX .links a.hm{display:none}
.HX .nav .btn{height:40px;padding:0 14px;font-size:13px}
.HX .hl{font-size:58px;letter-spacing:-.055em}
.HX .lead{font-size:18px}
.HX .ps{max-width:none;width:100%}
.HX .ps input,.HX .ps .btn{flex:1 1 100%}
.HX .soon{font-size:13px}
.HX .tB .hero .in{padding-top:14px;padding-bottom:48px}
.HX .tB .pv{padding:76px 0 76px}
.HX .tB .hl.sp{font-size:58px}
.HX .tB .h1a{right:auto;left:0;top:0;text-align:left}
.HX .tB .h1b{left:auto;right:0;bottom:0;text-align:right}
.HX .tB .halo{width:440px;height:440px;margin:-220px 0 0 -220px}
.HX .tB .ask{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){.HX *,.HX *::before,.HX *::after{animation:none!important;transition:none!important}}
/* round 5 (Donan 10/9 09:38): "live" in the neon, the final period red, blinking like the site's pulse (2.4 s ease, 1 → .35 → 1) */
.HX .tB .hl.sp .h1b span{position:static}
.HX .h1b .lv{color:#39FF14}
.HX .h1b .pd{color:#FF3B1F}
.HX .phn .bgc{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0}   /* 11:05: Gamble Stage II C + haze, behind everything on the screen */
@media (prefers-reduced-motion:no-preference){.HX .h1b .pd{animation:pdblink 2.4s ease-in-out infinite}}
@keyframes pdblink{0%,100%{opacity:1}50%{opacity:.35}}
/* round 5 critic: the lead keeps its two lines (Donan 10/9 09:32); where a line must wrap (phone), it wraps evenly, no lone "break them." */
.HX .lead .ln{display:block;text-wrap:balance}
/* Donan 10/9 10:16 / 10:21 / 10:22: a clear space between the two lead sentences. Sentence 1 is still. Sentence 2 is a call and response,
   opacity only: the question "Don't know which rule you break?" fades in (0-1.2 s) and sits alone (to 3.0 s); the answer "Re:Wire will
   show you." fades in on its own line below it (3.0-4.2 s); both hold (to 6.7 s); sentence 2 fades out (6.7-7.5 s); 1 s blank; again at
   8.5 s. Reduced motion: all shown, still */
.HX .lead .ln+.ln{margin-top:.7em}
.HX .lead .q1,.HX .lead .q2{display:block}
@media (prefers-reduced-motion:no-preference){
  .HX .lead .q1{animation:lq1 8.5s ease-in-out infinite}
  .HX .lead .q2{animation:lq2 8.5s ease-in-out infinite}}
@keyframes lq1{0%{opacity:0}14.12%,78.82%{opacity:1}88.24%,100%{opacity:0}}
@keyframes lq2{0%,35.29%{opacity:0}49.41%,78.82%{opacity:1}88.24%,100%{opacity:0}}
/* Donan 10/9 10:16: at phone widths the tagline reads as one unit above the phone ("Your rules." / "Called live.", left, same size, the red
   period still blinking), and the phone drops to 80% (240 x 488 px, about 62% of a 390 viewport), its notification and Gamble scaled with it */
@media (max-width:760px){
  .HX .tB .pv{flex-direction:column;align-items:center;padding:0}
  .HX .tB .hl.sp{position:static;align-self:stretch;margin:0 0 30px;text-align:left}
  .HX .tB .hl.sp .h1a,.HX .tB .hl.sp .h1b{position:static;display:block;text-align:left}
  .HX .tB .pv .phn{zoom:.8}}

/* ===== the page: paragraph, three frames ===== */
/* the paragraph, in A's big type */
.say .big{margin:0;max-width:19ch;font:800 64px/1.02 Inter,sans-serif;letter-spacing:-.045em;color:var(--k);text-wrap:pretty}
.say .big span{color:rgba(5,6,5,.5)}
.say-a{padding:40px 0 30px}
.say-b{padding:0 0 120px}
.how:has(+.say-b){padding-bottom:110px}
/* the three frames */
.story{padding:100px 0 110px}
.fr3{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;justify-items:center}
.fr3 li{display:grid;justify-items:center;gap:18px}
.cap{margin:0;font:800 26px/1 Inter,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.cap i{font:700 13px/1 "JetBrains Mono",monospace;font-style:normal;letter-spacing:.1em;color:var(--g);margin-right:10px;vertical-align:4px}
.phn.sm{width:236px;height:480px;border-radius:40px;padding:9px}.phn.sm .scn{border-radius:32px}.phn.sm .isl{width:74px;height:21px;margin-left:-37px;top:13px}
.phn.sm .mk{width:120px;margin-left:-60px;top:84%;opacity:.5}
.phn.sm .st{top:48px;left:8px;right:8px}
.rk{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
/* frame 1: the rule, set */
.set{position:absolute;left:16px;right:16px;top:38%;transform:translateY(-50%);display:grid;justify-items:center;gap:12px;text-align:center}
.set .rv1{font:800 64px/.9 Inter,sans-serif;letter-spacing:-.05em;color:var(--ink)}
.set .ok{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(57,255,20,.5);background:rgba(57,255,20,.1);color:var(--g);font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.set .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
/* frame 2 (stop): the stop line walks away from entry */
.slip{position:absolute;left:18px;right:18px;top:20%;height:46%}
.slip .lv{position:absolute;left:0;right:0;height:0;border-top:2px dashed #3A4A3A}
.slip .lv b{position:absolute;right:0;top:-22px;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--mu)}
.slip .en{top:12%}.slip .s1{top:44%;border-color:rgba(57,255,20,.35)}.slip .s1 b{color:rgba(57,255,20,.6)}
.slip .s2{top:88%;border-top:2px solid #FF3B1F;box-shadow:0 0 12px rgba(255,59,31,.6)}.slip .s2 b{color:#FF7A66}
.slip .ar{position:absolute;left:50%;top:46%;width:2px;height:38%;margin-left:-1px;background:linear-gradient(#FF3B1F00,#FF3B1F)}
.slip .ar::after{content:"";position:absolute;left:-5px;bottom:-2px;border:6px solid transparent;border-top-color:#FF3B1F;border-bottom:0}
.live2 .s2{animation:walk 4s ease-in-out infinite}
@keyframes walk{0%,20%{top:44%;opacity:.4}55%,100%{top:88%;opacity:1}}
.live2 .ar{animation:grow 4s ease-in-out infinite;transform-origin:top}
@keyframes grow{0%,20%{transform:scaleY(0)}55%,100%{transform:scaleY(1)}}
/* frame 2 (size): four contracts fill against a max of two */
.fill{position:absolute;left:16px;right:16px;top:36%;transform:translateY(-50%);display:grid;justify-items:center;gap:12px;text-align:center}
.fill .n4{font:800 64px/.9 Inter,sans-serif;letter-spacing:-.05em;color:#FF3B1F;text-shadow:0 0 18px rgba(255,59,31,.45)}
.fill .bars{position:relative;display:grid;grid-template-columns:repeat(4,22px);gap:6px;margin-top:6px}
.fill .bars i{height:30px;border-radius:5px;background:#39FF14;box-shadow:0 0 10px rgba(57,255,20,.45)}
.fill .bars i.x{background:#FF3B1F;box-shadow:0 0 10px rgba(255,59,31,.55)}
.fill .bars::after{content:"";position:absolute;left:calc(50% - 1px);top:-6px;bottom:-6px;width:2px;background:var(--ink);opacity:.7}
.fill .mx{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.live2 .bars i{animation:blk 4s ease-out infinite}
.live2 .bars i:nth-child(2){animation-delay:.25s}.live2 .bars i:nth-child(3){animation-delay:.5s}.live2 .bars i:nth-child(4){animation-delay:.75s}
.live2 .n4{animation:n4 4s ease-out infinite}
@keyframes blk{0%,12%{opacity:0;transform:scaleY(.2)}22%,100%{opacity:1;transform:none}}
@keyframes n4{0%,32%{opacity:.25}40%,100%{opacity:1}}
/* Donan 10/9 10:43: the big number sits at the same height in all three frames (each block's top label at 104 px, so frame 2's 4 and
   frame 3's number line up with frame 1's 2) */
.set,.fill{top:104px;transform:none}
/* frame 3: the cut back to 2. Still (and reduced motion) = the end state: green 2, two green blocks, LOCKED IN */
.f3 .nn{display:grid;justify-items:center}
.f3 .nn b{grid-area:1/1;font:800 64px/.9 Inter,sans-serif;letter-spacing:-.05em}
.f3 .v4{color:#FF3B1F;text-shadow:0 0 18px rgba(255,59,31,.45);opacity:0}
.f3 .v2{color:#39FF14;text-shadow:0 0 18px rgba(57,255,20,.45)}
.f3 .bars i.x{opacity:0}
.f3 .lk3{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(57,255,20,.5);background:rgba(57,255,20,.1);color:var(--g);font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.f3 .lk3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
.story .phn.live .st{animation-duration:4s}.story .phn.live .flash{animation-duration:4s}
/* the loop (4 s, with frame 2): the callout lands (.3 s) on the red 4; at 1.2 s the cut: both red blocks drop off together and the 4 is
   swapped for the green 2 with a pop; LOCKED IN at 1.4-1.6 s; it holds; resets at the loop's end */
.live3 .v4{animation:f3v4 4s linear infinite}
.live3 .v2{animation:f3v2 4s ease-out infinite}
.live3 .bars i.x{animation:f3x 4s ease-in infinite}
.live3 .lk3{animation:f3p 4s ease infinite}
@keyframes f3v4{0%,30%{opacity:1}31%,97%{opacity:0}100%{opacity:1}}
@keyframes f3v2{0%,30%{opacity:0;transform:scale(1.3)}31%{opacity:1;transform:scale(1.3)}37%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(1)}}
@keyframes f3x{0%,30%{opacity:1;transform:none}38%,97%{opacity:0;transform:translateY(34px)}100%{opacity:1;transform:none}}
@keyframes f3p{0%,34%{opacity:0;transform:translateY(4px)}40%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
/* the spark between frames */
.wire3{position:absolute;left:16%;right:16%;top:240px;height:2px;background:#243024;overflow:hidden}
.wire3 i{position:absolute;top:-1px;left:0;width:90px;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 6px #39FF14,0 0 14px #39FF14;animation:spark3 3.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes spark3{from{transform:translateX(-90px)}to{transform:translateX(900px)}}
@media (max-width:760px){
  .say .big{font-size:38px;max-width:none}.say-a{padding:20px 0 10px}.say-b{padding:0 0 72px}.how:has(+.say-b){padding-bottom:64px}
  .story{padding:64px 0 70px}.fr3{grid-template-columns:minmax(0,1fr);gap:40px}.wire3{display:none}.cap{font-size:24px}}
@media (prefers-reduced-motion:reduce){.wire3 i{display:none}}

/* ===== site build (10/9): the seams' dither as files; the form's honeypot; content shows without JS ===== */
.dith.d-hg{background-color:#39FF14;background-image:url(/assets/dith-h-g.svg)}
.dith.d-kg{background-color:#39FF14;background-image:url(/assets/dith-k-g.svg)}
.dith.d-gk{background-color:#050605;background-image:url(/assets/dith-g-k.svg)}
.ps .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
html:not(.js) .rv{opacity:1;transform:none}

#drop{scroll-margin-top:30vh}