/* Franchise Watchlist site CSS. Carries ZERO colour literals and ZERO font names. Every value comes from tokens.generated.css, which comes from the brand pack. Translucency is derived from those tokens with color-mix(), never from a literal. Look compiled from Andrew's brand sheet and mockups, 2026-09-03. Kinetic rebuild r1, 2026-09-03. DEFAULT LIT, NEVER DEFAULT DIM. Everything below is visible in the base cascade. Reveal animations live behind .js-reveal, which JS puts on only once it has confirmed it can run and the reader is not asking for reduced motion. JS off, or a screenshotter, gets the whole page lit and readable. */ :root{ --ease:cubic-bezier(.16,1,.3,1); /* derived translucency, all mixed from pack tokens */ --w-82:color-mix(in srgb, var(--paper) 82%, transparent); --w-45:color-mix(in srgb, var(--paper) 45%, transparent); --w-22:color-mix(in srgb, var(--paper) 22%, transparent); --glass:color-mix(in srgb, var(--paper) 88%, transparent); --scrim:color-mix(in srgb, var(--ink) 38%, transparent); --acc-40:color-mix(in srgb, var(--accent) 40%, transparent); --acc-14:color-mix(in srgb, var(--accent) 14%, transparent); --acc-00:color-mix(in srgb, var(--accent) 0%, transparent); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%} a{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} b,strong{color:var(--ink);font-weight:700} ::selection{background:var(--accent);color:var(--paper)} h1,h2,h3{text-wrap:balance} p,li{text-wrap:pretty} .n,.price,.phases td:first-child{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .wrap{max-width:880px;margin:0 auto;padding:0 24px;position:relative;z-index:2} /* ============================================================ fixed chrome ============================================================ */ .progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-light));z-index:120;transition:width .12s linear;pointer-events:none} .bar{position:sticky;top:0;z-index:60;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s,border-color .3s} .bar.stuck{box-shadow:var(--shadow);border-color:var(--line-strong)} .bar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px} .mark{display:flex;align-items:center;gap:11px;text-decoration:none} .mark img{width:26px;height:29px;display:block;transition:transform .4s var(--ease)} .mark:hover img{transform:translateY(-2px) scale(1.06)} .mark .wm{display:block;line-height:1.05} .mark .wm .a{display:block;font-size:.86rem;font-weight:800;letter-spacing:.02em;color:var(--ink)} .mark .wm .b{display:block;font-size:.68rem;font-weight:600;letter-spacing:.3em;color:var(--accent)} .bar small{font-size:.7rem;color:var(--muted);letter-spacing:.02em;text-align:right} /* chapter rail, right edge, wide screens only */ .rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:11px} .rail a{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block;position:relative;transition:background .3s,transform .3s var(--ease)} .rail a:hover{background:var(--ink);transform:scale(1.3)} .rail a.on{background:var(--accent);transform:scale(1.4)} .rail a .tip{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:var(--shadow)} .rail a:hover .tip{opacity:1} .counter{position:fixed;right:20px;bottom:20px;z-index:60;display:none;font-size:.64rem;font-weight:700;letter-spacing:.2em;color:var(--muted);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;font-variant-numeric:tabular-nums} @media(min-width:1240px){.rail{display:flex}.counter{display:block}} /* mobile chapter menu */ .mbtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:var(--r-pill);cursor:pointer;padding:0} .mbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .toc{position:fixed;top:70px;left:0;right:0;z-index:59;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain} .toc.open{opacity:1;transform:none;pointer-events:auto} .toc a{display:flex;align-items:center;gap:12px;padding:13px 24px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none} .toc a:last-child{border-bottom:0} .toc a .n{font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--accent);width:24px;flex:none} .toc a .tl{flex:1} .toc a.on{background:var(--accent-ghost)} .mscrim{position:fixed;inset:0;background:var(--scrim);z-index:58;opacity:0;pointer-events:none;transition:opacity .25s} .mscrim.show{opacity:1;pointer-events:auto} /* ============================================================ type ============================================================ */ section{position:relative;padding:84px 0;border-bottom:1px solid var(--line);overflow:hidden;scroll-margin-top:74px} section:last-of-type{border-bottom:0} /* alternating ground, the pale lavender band from the mockups */ section.tint{background:var(--accent-ghost);border-bottom-color:var(--line-strong)} section.tint .stat,section.tint .door,section.tint .steps li{background:var(--paper)} section.tint .callout{background:var(--paper)} section.tint .tbar{background:var(--accent-soft)} section.tint .phases tbody tr:hover{background:var(--paper)} .kicker{display:flex;align-items:center;gap:11px;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;max-width:none} .kicker img{width:13px;height:13px;flex:none;animation:twinkle 5s ease-in-out infinite} .kicker::after{content:"";height:1px;flex:1;max-width:210px;background:linear-gradient(90deg,var(--line-strong),transparent)} h1{font-size:clamp(2.2rem,5.6vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin:0 0 20px;max-width:14em} h2{font-size:clamp(1.65rem,3.4vw,2.35rem);font-weight:700;letter-spacing:-.025em;line-height:1.18;color:var(--ink);margin:0 0 16px;max-width:18em} h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin:0 0 8px} p{margin:0 0 16px;max-width:38em} .lead{font-size:clamp(1.04rem,1.7vw,1.18rem);font-weight:400;color:var(--ink-2)} .hl{color:var(--accent)} /* ============================================================ reveal, enhancement only ============================================================ */ .hw{display:inline-block;will-change:transform} .js-reveal .rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js-reveal .rise.in{opacity:1;transform:none} .js-reveal .hw{opacity:0;transform:translateY(38px) scale(.94);transition:opacity .85s var(--ease),transform .85s var(--ease)} .js-reveal .hw.in{opacity:1;transform:none} /* ============================================================ ambient decor ============================================================ */ .orb{position:absolute;border:1.5px solid var(--line-strong);border-radius:50%;pointer-events:none;z-index:0;opacity:.55;animation:float 13s ease-in-out infinite} .orb.dash{border-style:dashed;animation:spin 90s linear infinite;opacity:.45} .wash{position:absolute;border-radius:50%;pointer-events:none;z-index:0} .spark{position:absolute;width:14px;height:14px;pointer-events:none;z-index:1;background:var(--coral);-webkit-mask:url(/brand/star.svg) center/contain no-repeat;mask:url(/brand/star.svg) center/contain no-repeat;animation:twinkle 5.4s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}} @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes twinkle{0%,100%{opacity:.28;transform:scale(.72) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--acc-40)}70%{box-shadow:0 0 0 13px var(--acc-00)}100%{box-shadow:0 0 0 0 var(--acc-00)}} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.07)}100%{transform:translate3d(2%,-3%,0) scale(1.03)}} /* ============================================================ hero ============================================================ */ .hero{position:relative;overflow:hidden;padding:92px 0 84px;background:var(--paper);border-bottom:1px solid var(--line)} .hero .w1{width:660px;height:660px;top:-280px;right:-190px;background:radial-gradient(circle at 50% 50%,var(--accent-soft) 0%,var(--accent-ghost) 46%,transparent 70%);animation:drift 26s ease-in-out infinite alternate} .hero .w2{width:540px;height:540px;bottom:-310px;left:-190px;background:radial-gradient(circle at 50% 50%,var(--coral-soft) 0%,var(--accent-ghost) 45%,transparent 70%);opacity:.7;animation:drift 32s ease-in-out infinite alternate-reverse} .hero .o1{width:300px;height:300px;top:40px;right:7%} .hero .o2{width:170px;height:170px;bottom:60px;right:24%;animation-delay:-4s} .hero .o3{width:430px;height:430px;top:-100px;right:-80px} .hero .s1{top:98px;right:28%;animation-delay:-1.2s} .hero .s2{top:300px;right:9%;width:10px;height:10px;animation-delay:-3.1s} .hero .s3{bottom:118px;left:5%;width:11px;height:11px;animation-delay:-2.2s} .hero .orb{opacity:.75} .hero .orb.dash{opacity:.6} /* the mark, ghosted large behind the right of the hero */ .heromark{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:300px;height:336px;z-index:0;pointer-events:none;background:var(--grad-bars-soft);-webkit-mask:url(/brand/mark.svg) center/contain no-repeat;mask:url(/brand/mark.svg) center/contain no-repeat;opacity:.5;transform-origin:50% 100%;transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)} .js-reveal .heromark{opacity:0;transform:translateY(-50%) scale(.86)} .js-reveal .heromark.in{opacity:.5;transform:translateY(-50%)} @media(max-width:1180px){.heromark{right:-40px;width:230px;height:258px;opacity:.32}.js-reveal .heromark.in{opacity:.32}} @media(max-width:760px){.heromark{display:none}} .hero .kicker{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);border-radius:var(--r-pill);padding:9px 18px 9px 13px;margin-bottom:24px;letter-spacing:.1em;color:var(--accent)} .hero .kicker::after{display:none} .hero .kicker img{width:14px;height:14px} .pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none} .pills li{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 17px 9px 13px;box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s} .pills li:hover{transform:translateY(-2px);border-color:var(--accent-light);box-shadow:var(--shadow-lg)} .pills li::before{content:"";width:12px;height:12px;flex:none;background:var(--coral);-webkit-mask:url(/brand/star.svg) center/contain no-repeat;mask:url(/brand/star.svg) center/contain no-repeat} .js-reveal .pills li{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .js-reveal .pills.in li{opacity:1;transform:none} .js-reveal .pills li:nth-child(1){transition-delay:.30s} .js-reveal .pills li:nth-child(2){transition-delay:.42s} .js-reveal .pills li:nth-child(3){transition-delay:.54s} .cue{display:flex;justify-content:center;margin:56px 0 0} .cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--accent-light),transparent);animation:cue 2.4s ease-in-out infinite} /* ============================================================ the bars motif, real page furniture ============================================================ */ .bars{display:flex;align-items:flex-end;gap:9px;height:100px;flex:none} .bars i{display:block;width:22px;border-radius:3px 3px 0 0;background:var(--grad-bars);height:var(--h);transform-origin:bottom;transition:transform 1.1s var(--ease)} .js-reveal .bars i{transform:scaleY(0)} .js-reveal .bars.in i{transform:none} .js-reveal .bars i:nth-child(1){transition-delay:.05s} .js-reveal .bars i:nth-child(2){transition-delay:.2s} .js-reveal .bars i:nth-child(3){transition-delay:.35s} .js-reveal .bars i:nth-child(4){transition-delay:.5s} /* ============================================================ star divider ============================================================ */ .star-rule{display:flex;align-items:center;justify-content:center;gap:18px;max-width:880px;margin:0 auto;padding:56px 24px;border:0} .star-rule::before{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,transparent,var(--line-strong))} .star-rule::after{content:"";height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,var(--line-strong),transparent)} .star-rule img{width:26px;height:26px;display:block;animation:twinkle 6s ease-in-out infinite} /* ============================================================ stats ============================================================ */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:32px 0 0} .stat{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .stat:hover{transform:translateY(-4px);border-color:var(--accent-light);box-shadow:var(--shadow-lg)} .stat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:0;transition:opacity .35s} .stat:hover::before{opacity:1} .stat .n{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1;margin:0} .stat .c{font-size:.8rem;color:var(--muted);margin:10px 0 0;line-height:1.5;max-width:none} .src{font-size:.76rem;color:var(--muted);margin:20px 0 24px;max-width:44em} .src:last-child{margin-bottom:0} /* ============================================================ steps ============================================================ */ .steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px} .steps li{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .steps li:hover{transform:translateX(5px);border-color:var(--accent-light);box-shadow:var(--shadow-lg)} .steps li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-light));opacity:0;transition:opacity .35s} .steps li:hover::before{opacity:1} .steps .n{width:28px;height:28px;border-radius:50%;background:var(--grad-bars);color:var(--paper);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px} .steps li:hover .n{animation:pulse 1.8s infinite} .steps p{margin:0;font-size:.96rem;max-width:none} /* ============================================================ callout ============================================================ */ .callout{position:relative;background:var(--accent-ghost);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:22px 26px;margin:30px 0 0} .callout p{margin-bottom:14px} .callout p:last-child{margin-bottom:0} /* ============================================================ phases table, timeline bar grows per row ============================================================ */ .phases{width:100%;border-collapse:collapse;margin:30px 0 0;font-size:.93rem} .phases th{text-align:left;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;border-bottom:1px solid var(--line-strong);padding:0 14px 12px 0} .phases td{border-bottom:1px solid var(--line);padding:16px 14px 16px 0;vertical-align:top;line-height:1.55} .phases td:first-child{white-space:nowrap;font-weight:700;color:var(--ink);padding-right:22px} .phases tbody tr{transition:background .3s} .phases tbody tr:hover{background:var(--accent-ghost)} .tbar{display:block;height:5px;border-radius:var(--r-pill);background:var(--accent-soft);margin-top:11px;overflow:hidden;position:relative;width:100%;min-width:80px} .tbar::after{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent-light));transform:scaleX(var(--w));transform-origin:left;transition:transform 1.2s var(--ease)} .js-reveal .tbar::after{transform:scaleX(0)} .js-reveal tr.in .tbar::after{transform:scaleX(var(--w))} /* ============================================================ pricing doors ============================================================ */ .doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 0} .door{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .door::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--coral));transform:scaleX(var(--hair,.34));transform-origin:left;transition:transform .6s var(--ease)} .door:hover{transform:translateY(-5px);border-color:var(--accent-light);box-shadow:var(--shadow-lg)} .door:hover::before{transform:scaleX(1)} .door.b{--hair:1;border-color:var(--accent-light);box-shadow:var(--shadow-lg)} .door .t{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px} .door.b .t{color:var(--accent)} .door .price{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0} .door.b .price{color:var(--accent)} .door .term{font-size:.83rem;color:var(--muted);margin:6px 0 18px} .door ul{list-style:none;margin:0;padding:0} .door li{position:relative;padding-left:24px;margin-bottom:11px;font-size:.89rem;line-height:1.55} .door li:last-child{margin-bottom:0} .door li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--accent)} .door.a li::before{background:var(--line-strong)} .js-reveal .door li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .js-reveal .door.in li{opacity:1;transform:none} .js-reveal .door li:nth-child(1){transition-delay:.34s} .js-reveal .door li:nth-child(2){transition-delay:.42s} .js-reveal .door li:nth-child(3){transition-delay:.50s} .js-reveal .door li:nth-child(4){transition-delay:.58s} .js-reveal .door li:nth-child(5){transition-delay:.66s} /* ============================================================ dark ink bands ============================================================ */ .band{position:relative;overflow:hidden;background:var(--ink);color:var(--stone-2);border-radius:var(--r);padding:44px 40px;margin:34px 0 0} .band::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none; background:radial-gradient(760px 520px at 82% 6%,var(--acc-40),transparent 62%), radial-gradient(600px 460px at 6% 96%,var(--acc-14),transparent 60%); animation:drift 24s ease-in-out infinite alternate} .band .sheen{position:absolute;top:0;left:0;right:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,var(--w-45) 30%,var(--w-22) 70%,transparent)} .band .ghost{position:absolute;right:-26px;bottom:-36px;width:250px;height:280px;background:var(--grad-bars-soft);-webkit-mask:url(/brand/mark.svg) center/contain no-repeat;mask:url(/brand/mark.svg) center/contain no-repeat;opacity:.2;pointer-events:none;z-index:1} .band .ghost.l{right:auto;left:-96px;bottom:-76px;opacity:.09} .band>*{position:relative;z-index:3} .band h2,.band h3,.band b,.band strong{color:var(--paper)} .band h3{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0 0 14px} .band p{color:var(--w-82)} .band p:last-child{margin-bottom:0} .bandgrid{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:end} .bandgrid>div{min-width:0} .band .bars i{background:linear-gradient(180deg,var(--accent-light),var(--accent-soft))} @media(max-width:760px){.bandgrid{grid-template-columns:1fr;gap:26px}.band .bars{height:72px}} .close{margin-top:38px;padding:48px 40px} .close h2{max-width:20em} /* ============================================================ footer ============================================================ */ footer{padding:46px 0 66px} footer p{font-size:.76rem;color:var(--muted);line-height:1.65;max-width:52em} /* ============================================================ buttons ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-size:.95rem;font-weight:600;padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;text-decoration:none;cursor:pointer} .btn-primary{background:var(--accent);color:var(--paper)} .btn-primary:hover{background:var(--accent-deep)} .btn-secondary{background:var(--paper);color:var(--accent);border-color:var(--accent-light)} .btn-secondary:hover{background:var(--accent-ghost)} /* ============================================================ gate page ============================================================ */ .gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--accent-ghost);padding:24px} .gate-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:36px 32px;max-width:420px;width:100%} .gate-card h1{font-size:1.4rem;margin:0 0 10px;max-width:none} .gate-card p{font-size:.89rem;color:var(--muted)} .gate-card input{width:100%;font-family:var(--font);font-size:16px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)} .gate-card button{width:100%;margin-top:12px;font-family:var(--font);font-size:.95rem;font-weight:600;padding:13px 15px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--paper);cursor:pointer} .gate-card button:hover{background:var(--accent-deep)} .gate-err{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:11px 13px;font-size:.85rem;margin:0 0 14px} /* ============================================================ coming soon ============================================================ */ .soon{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;background:var(--paper)} .soon::before{content:"";position:absolute;width:760px;height:760px;top:-330px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--accent-soft) 0%,var(--accent-ghost) 45%,transparent 70%)} .soon>*{position:relative;z-index:1} .lockup-lg{justify-content:center;gap:18px;margin:0 0 34px} .lockup-lg img{width:52px;height:58px} .lockup-lg .wm .a{font-size:1.75rem;letter-spacing:.03em} .lockup-lg .wm .b{font-size:1.32rem;letter-spacing:.335em;margin-top:2px} .soon h1{max-width:16em;font-size:clamp(1.75rem,4vw,2.7rem);margin-bottom:16px} .soon p{max-width:32em;color:var(--muted)} /* ============================================================ responsive ============================================================ */ @media(max-width:1000px){.doors{grid-template-columns:1fr}} @media(max-width:900px){ .js-nav .mbtn{display:flex} .bar small{display:none} } @media(max-width:640px){ section{padding:60px 0} .hero{padding:56px 0 56px} .bar .wrap{height:64px} .toc{top:64px;max-height:calc(100vh - 64px)} .band{padding:30px 24px;border-radius:var(--r-sm)} .close{padding:32px 24px} .band .ghost{width:158px;height:178px;right:-30px;bottom:-38px;opacity:.16} .phases{font-size:.86rem} .phases td:first-child{white-space:normal;padding-right:14px} .hero .o1,.hero .o2,.hero .o3{opacity:.3} .stats{gap:12px} .steps li{padding:18px 18px} .door{padding:24px 20px} .kicker::after{max-width:70px} .star-rule{padding:44px 24px} } /* ============================================================ reduced motion: everything lit, nothing moves ============================================================ */ @media print{ .rail,.toc,.mscrim,.progress,.bar,.mbtn,.counter{display:none!important} .band{background:none!important;color:var(--ink)!important;border:1px solid var(--line-strong)} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise,.hw,.pills li,.door li{opacity:1!important;transform:none!important;transition:none!important} .bars i{transform:none!important;transition:none!important} .tbar::after{transform:scaleX(var(--w))!important;transition:none!important} .orb,.wash,.spark,.kicker img,.star-rule img,.cue i,.band::before,.steps li:hover .n{animation:none!important} .door::before{transform:scaleX(1)} *{transition-duration:.01ms!important;animation-duration:.01ms!important} }