/* ============================================================ THE WAY IN · movement site. Chrome / high-energy / dark. Brand name is templated (see brand.js BRAND.name). Swap one line there and it cascades everywhere. ============================================================ */ /* Fonts are loaded non-render-blocking from each page (preconnect + media=print swap). @import here was render-blocking and hurt FCP/LCP. */ :root{ /* neutral warm-charcoal dark (no navy) so accents read as bioelectric signal, not stars */ --bg:#0a0a0c; --bg2:#101013; --panel:#15151a; --panel2:#1b1b21; --line:#27272f; --line2:#35353f; --ink:#eef0f3; --soft:#b2b6bf; --mute:#8b9099; /* mute lightened to clear WCAG AA 4.5:1 on dark panels */ /* ELECTRIC palette (sampled from logo emblem): electric BLUE primary, electric RED hot accent. --cyan/--teal are kept as token names for back-compat but now resolve to electric blue. */ --blue:#2f6bff; --blue2:#5b9bff; --bluedeep:#1f4fd0; --cyan:#5b9bff; --ice:#cfe0ff; --teal:#2f6bff; --energy:#ff2e3c; --energy2:#ff5a64; --hot:#ff2e3c; /* COLOR MEANING (approved roadmap, "Build one family with intentional modes"). Color carries STATE, never tier rank or decoration, and text must always accompany it: signal blue (--blue) primary action and learned signal load red (--energy) overload and urgent state ONLY, never an invitation baseline green(--baseline) saved and resolved state research cyan (--cyan) sources and deeper detail amber (--amber) unknown, conflict, expiry, or review owed Escalation between membership tiers is carried by the CARD (.tier.feat border, glow, badge), not by promoting a button into a state color that means alarm. */ --amber:#e0a93b; --amber2:#f2c063; --baseline:#2fe08a; /* steel + electric chrome: white -> bright blue -> deep blue, hot-red glint via --chrome-glint */ --chrome1:#ffffff; --chrome2:#dfe7ff; --chrome3:#9ab2ee; --chrome4:#6478b0; --radius:16px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:92px} body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,Arial,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} /* soft neural-tissue ambient (off-center organic glows, no sky/horizon, no stars) */ body::before{content:"";position:fixed;inset:0;z-index:-3;background: radial-gradient(60% 48% at 18% 14%, rgba(47,107,255,.07), transparent 62%), radial-gradient(55% 50% at 86% 96%, rgba(255,46,60,.05), transparent 64%), radial-gradient(130% 120% at 50% 50%, transparent 56%, rgba(0,0,0,.5)), var(--bg);} /* faint organic tissue mottle (replaces the old star-grid) */ body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.7; background: radial-gradient(40% 30% at 72% 22%, rgba(123,160,180,.035), transparent 70%), radial-gradient(45% 34% at 24% 78%, rgba(47,107,255,.03), transparent 72%);} /* the animated nervous system (injected by brand.js) */ #nerve{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9} .wrap{max-width:1140px;margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ---------- type ---------- */ .chrome{background:linear-gradient(180deg,var(--chrome1) 0%,var(--chrome2) 34%,#5b9bff 62%,var(--chrome3) 82%,var(--chrome4) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.12)} .eyebrow{font-family:'Space Grotesk';font-size:12px;letter-spacing:.28em;font-weight:700;text-transform:uppercase;color:var(--cyan)} h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.05;letter-spacing:-.01em} .display{font-family:'Sora',sans-serif;font-weight:900;letter-spacing:.01em;line-height:.98;text-transform:uppercase} /* ---------- nav ---------- */ /* Reserve chrome heights BEFORE brand.js injects, so injection causes zero layout shift (CLS). */ #nav{min-height:68px;display:block} #footer{min-height:340px;display:block} #cries{min-height:46px} .hero-stats{min-height:84px} @media(max-width:600px){#footer{min-height:520px}} .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,6,10,.72);border-bottom:1px solid var(--line)} /* A design audit (2026-08-14) found this visibly overlapping the "Verify your email" banner on /account by about 33px, for every unverified new registrant, on both mobile and desktop. Root cause: position:absolute + a translateY(-180%) offset calculated relative to this element's OWN height (~38.8px) assumes it always sits at the very top of the page. When the verification banner renders above it in the same positioned ancestor, that assumption breaks and the -180% offset under-shoots. position:fixed with a flat, comfortably-oversized top offset ties it to the viewport instead of any ancestor's content, so it is fully off-screen regardless of what renders above it -- the standard, robust pattern for a skip link. */ .skip-link{position:fixed;left:14px;top:-100px;z-index:101;padding:10px 14px;border:1px solid var(--cyan);border-radius:10px;background:#07111f;color:#fff;font:800 14px/1.2 'Space Grotesk',sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.5);transition:top .16s ease;text-decoration:none} .skip-link:focus,.skip-link:focus-visible{top:8px} .nav .wrap{max-width:1440px;display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:11px;flex:none;white-space:nowrap} .brand .mark{width:38px;height:38px;flex:none;object-fit:contain;border-radius:8px;display:block} .brand .nm{font-family:'Sora';font-weight:900;font-size:19px;letter-spacing:.06em;white-space:nowrap} .brand-wordmark{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap} .brand-primary{color:var(--ink);font-family:'Sora';font-size:19px;font-weight:900;letter-spacing:.035em;text-transform:uppercase} .brand-container{color:var(--mute);font-family:'Space Grotesk';font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .navlinks{display:flex;gap:26px;align-items:center;font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--soft)} .navlinks a:hover{color:var(--ink)} .navlinks .joinbtn{color:#04101f} @media(max-width:1180px){.navlinks{display:none}} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:15px;padding:14px 26px;border-radius:13px;cursor:pointer;border:none;transition:.2s;letter-spacing:.01em} .btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101f;box-shadow:0 10px 30px rgba(91,155,255,.30),inset 0 1px 0 rgba(255,255,255,.4)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(91,155,255,.45),inset 0 1px 0 rgba(255,255,255,.5)} .btn-energy{background:linear-gradient(135deg,var(--energy),var(--energy2));color:#1a0a04;box-shadow:0 10px 30px rgba(255,46,60,.32),inset 0 1px 0 rgba(255,255,255,.35)} .btn-energy:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(255,46,60,.5)} .btn-ghost{background:rgba(120,160,255,.06);color:var(--ink);border:1px solid var(--line2)} .btn-ghost:hover{border-color:var(--blue2);background:rgba(120,160,255,.12)} /* D-1410: "Erase my data permanently" used .btn-ghost, the same class as "Download my data" and every other routine account-page button, despite the erase flow already gating the action behind three deliberate friction steps (a closed disclosure, a password, a typed confirmation phrase) -- the button itself gave no visual signal to match that seriousness. Red-tinted using the existing --energy/--hot token (the only red in this palette) rather than the loud filled .btn-energy gradient built for high-energy CTAs, which would read as exciting rather than as a warning for a destructive, irreversible action. */ .btn-danger{background:rgba(255,46,60,.08);color:var(--ink);border:1px solid rgba(255,46,60,.4)} .btn-danger:hover{border-color:var(--hot);background:rgba(255,46,60,.16)} .btn-block{display:flex;width:100%;justify-content:center} /* ---------- sections ---------- */ /* Compaction pass, Bridge handoff 9870384d (Breanne, 2026-08-21): homepage was too long, every section carried equal visual weight. Desktop vertical padding brought down from 96px to 64px per-section -- the same value already proven safe at the <=600px breakpoint below, so this just makes desktop consistent with spacing already live on mobile rather than introducing an unproven number. This is the mechanical, content-neutral half of that request (item 7, spacing/page length); the content-consolidation half (items 2-4) is a separate, judgment-heavy pass not attempted here. */ section{padding:64px 0;position:relative} .sec-head{max-width:760px;margin:0 auto 40px;text-align:center} .sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 12px} .sec-head p{color:var(--soft);font-size:1.08rem} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- hero ---------- */ /* Compaction pass, Bridge handoff 9870384d: hero was 94vh minimum plus 120px/80px of its own padding on top of that, on a page criticized for making every section feel oversized. Content and hierarchy are unchanged -- same logo, h1, sub, CTAs, scarcity line -- only the surrounding whitespace is reduced, so the first viewport reads as intentional rather than empty without losing what made the hero feel important. */ .hero{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:88px 0 56px;position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2;width:100%;margin-left:auto;margin-right:auto} .hero-logo{font-family:'Sora';font-weight:900;font-size:clamp(3rem,11vw,8.2rem);letter-spacing:.02em;line-height:.9;text-transform:uppercase;margin-bottom:10px; filter:drop-shadow(0 6px 30px rgba(47,107,255,.45))} .hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:700;max-width:920px;margin:22px auto 0} .hero .sub{color:var(--soft);font-size:clamp(1.05rem,2vw,1.3rem);max-width:680px;margin:20px auto 0} .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px} .hero .scarcity{margin-top:22px;font-family:'Space Grotesk';font-size:13px;letter-spacing:.04em;color:var(--mute)} .hero .scarcity b{color:var(--cyan)} .beam{position:absolute;left:50%;top:-10%;width:140vw;height:120vh;transform:translateX(-50%);z-index:0; background:conic-gradient(from 180deg at 50% 0,transparent 0deg,rgba(47,107,255,.10) 40deg,transparent 80deg,rgba(91,155,255,.08) 130deg,transparent 200deg); animation:spin 40s linear infinite;pointer-events:none} @keyframes spin{to{transform:translateX(-50%) rotate(360deg)}} .spark{position:absolute;border-radius:50%;z-index:1;pointer-events:none;animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-16px);opacity:1}} /* ---------- enemy strip ---------- */ .enemy{background:linear-gradient(180deg,transparent,rgba(255,46,60,.04),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .enemy .big{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.5rem,3.4vw,2.5rem);text-align:center;max-width:900px;margin:0 auto;line-height:1.25} .enemy .big .x{color:var(--energy)} /* Merv, 2026-08-20 (relayed by Breanne): this block is a manifesto, not body copy, and the flat 900px width made it an oversized wall of text -- 900px lands at ~70% of a 1280 laptop and ~88% of a 1024 tablet, which is exactly the 70-90% he measured off the screenshot. He asked for 40-50% of screen width, centred, with real negative space. The width is set by measure (ch) with a hard vw ceiling rather than by vw alone: a pure 46vw column collapses to ~18 characters per line at 900px once the display type hits its clamp floor, which is narrower than anyone can read. Pinning ~40ch against a 46vw cap lands at 44-49% of viewport across 820-1920px while the line length stays constant. Below 820px the narrowing is deliberately switched OFF -- a 46vw column on a phone is unreadable, and keeping mobile readable was an explicit part of the request. */ .enemy .big.enemy-stanza{display:flex;flex-direction:column;align-items:center;gap:.85em;max-width:100%;font-size:clamp(1.25rem,4.6vw,1.7rem);text-wrap:balance} .enemy .big.enemy-stanza p{margin:0} /* The one long sentence steps down from the display size so the short declarative lines keep the hierarchy. The 1rem floor is load-bearing: a bare .74em drops this to 14.8px on a 375px phone and 15.9px on a 1024 tablet, i.e. below readable body size, at exactly the widths where it also wraps to 4 lines. */ .enemy .big.enemy-stanza .enemy-stanza-body{font-size:max(1rem,.74em);font-weight:600;line-height:1.4;opacity:.94;text-wrap:pretty} @media(min-width:820px){ .enemy .big.enemy-stanza{max-width:min(46vw,40ch);font-size:clamp(1.25rem,2.1vw,1.95rem);gap:.95em} } /* ---------- pillars ---------- */ .grid{display:grid;gap:18px} .g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}} @media(max-width:620px){.g3,.g4,.g2{grid-template-columns:1fr}} .card{background:linear-gradient(180deg,var(--panel),rgba(14,19,32,.6));border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.25s;position:relative;overflow:hidden} .card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(47,107,255,.2)} .card .n{font-family:'Sora';font-weight:700;font-size:13px;color:var(--cyan);letter-spacing:.1em} .card h3{font-size:1.28rem;margin:10px 0 8px} .card p{color:var(--soft);font-size:.97rem} .pillar .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(47,107,255,.12);border:1px solid rgba(47,107,255,.3);margin-bottom:14px;font-size:22px} .ui-icon{width:1.05em;height:1.05em;display:inline-block;object-fit:contain;vertical-align:-.16em;flex:none} .ico .ui-icon,.bi .ui-icon,.ic .ui-icon,.lock .ui-icon{width:26px;height:26px;vertical-align:middle} .creedseq__pause .ui-icon{width:18px;height:18px;vertical-align:middle} .cp-done-badge .ui-icon{width:14px;height:14px;vertical-align:-.1em} /* ---------- doctrine flow ---------- */ .flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;justify-content:center;margin-top:10px} .flow .step{flex:1;min-width:150px;text-align:center;padding:18px 14px;position:relative} .flow .step .k{font-family:'Sora';font-weight:700;color:var(--ice);font-size:1.05rem} .flow .step .d{color:var(--mute);font-size:.85rem;margin-top:6px} .flow .arr{display:flex;align-items:center;color:var(--blue2);font-size:1.4rem} @media(max-width:680px){.flow .arr{transform:rotate(90deg)}} /* ---------- manifesto ---------- */ .manifesto{background:radial-gradient(80% 90% at 50% 0,rgba(47,107,255,.10),transparent 70%)} .creed{max-width:780px;margin:0 auto;text-align:center} .creed p{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.5;color:var(--ice);font-weight:500;margin:18px 0} .creed .lead{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-bottom:8px} .creed .end{font-family:'Sora';font-weight:900;font-size:clamp(1.4rem,3.2vw,2.2rem);margin-top:26px;text-transform:uppercase} /* ---------- transformation ---------- */ .tform{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;max-width:920px;margin:0 auto} @media(max-width:680px){.tform{grid-template-columns:1fr}} .tcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .tcol.from{border-color:rgba(255,46,60,.3)} .tcol.to{border-color:rgba(91,155,255,.4);box-shadow:0 0 0 1px rgba(91,155,255,.15),0 18px 44px rgba(91,155,255,.10)} .tcol .lab{font-family:'Sora';font-size:12px;letter-spacing:.14em;font-weight:700} .tcol.from .lab{color:var(--energy)}.tcol.to .lab{color:var(--cyan)} .tcol ul{list-style:none;margin-top:12px}.tcol li{padding:6px 0;color:var(--soft);font-size:.96rem;border-bottom:1px solid var(--line)} .tform .mid{font-size:2rem;color:var(--blue2);text-align:center} /* ---------- tiers ---------- */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} @media(max-width:980px){.tiers{grid-template-columns:1fr 1fr}} @media(max-width:560px){.tiers{grid-template-columns:1fr}} .tier{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:26px 22px;display:flex;flex-direction:column;position:relative;transition:.25s} .tier:hover{transform:translateY(-5px);border-color:var(--line2)} .tier.feat{border:1px solid var(--cyan);box-shadow:0 0 0 1px rgba(91,155,255,.3),0 26px 60px rgba(91,155,255,.16);background:linear-gradient(180deg,rgba(18,30,55,.9),var(--panel))} .tier .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101f;font-family:'Space Grotesk';font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 14px;border-radius:20px;text-transform:uppercase;white-space:nowrap} .tier .tn{font-family:'Sora';font-weight:700;font-size:1.15rem;letter-spacing:.04em} .tier .price{font-family:'Space Grotesk';font-weight:700;font-size:2.1rem;margin:8px 0 2px;line-height:1.15} /* The caption always sits on its own line. Inline it stranded itself mid-phrase ("Small room" + "deeper access") once the label wrapped. */ .tier .price small{display:block;font-size:.85rem;color:var(--mute);font-weight:500;margin-top:4px;line-height:1.3} /* Word labels are not numeric prices and must not wear the price type scale. */ .tier .price.is-label{font-size:1.4rem;letter-spacing:.01em} .tier .desc{color:var(--soft);font-size:.9rem;min-height:38px} .tier ul{list-style:none;margin:16px 0 20px;flex:1} .tier li{padding:7px 0;color:var(--soft);font-size:.92rem;display:flex;gap:9px;align-items:flex-start} .tier li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background-color:rgba(91,155,255,.16);border:1px solid var(--cyan);background-image:url("img/icons/check.png");background-size:11px;background-repeat:no-repeat;background-position:center} /* ---------- provider ladder ---------- */ .ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:760px){.ladder{grid-template-columns:1fr}} .rung{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:14px;padding:20px} .rung .pn{font-family:'Sora';font-weight:700;font-size:1.05rem} .rung .meta{color:var(--mute);font-size:.82rem;margin:3px 0 10px} .rung p{color:var(--soft);font-size:.92rem} /* ---------- founder ---------- */ .founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center} @media(max-width:820px){.founder{grid-template-columns:1fr}} .fphoto{aspect-ratio:4/5;border-radius:20px;border:1px solid var(--line2);background: radial-gradient(60% 50% at 50% 30%,rgba(47,107,255,.25),transparent 70%),linear-gradient(180deg,var(--panel2),var(--bg2)); display:grid;place-items:center;position:relative;overflow:hidden} .fphoto .ph{font-family:'Sora';font-weight:900;font-size:4rem;color:rgba(120,160,255,.18)} .fphoto .tagph{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--mute);font-family:'Space Grotesk';letter-spacing:.1em;text-transform:uppercase} .founder h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:12px 0} .founder .quote{font-family:'Space Grotesk';font-weight:600;font-size:1.25rem;color:var(--ice);border-left:3px solid var(--cyan);padding-left:16px;margin:18px 0} /* ---------- cta band ---------- */ .band{background:linear-gradient(135deg,rgba(47,107,255,.16),rgba(91,155,255,.08));border:1px solid var(--line2);border-radius:24px;padding:54px 32px;text-align:center;position:relative;overflow:hidden} .band h2{font-size:clamp(1.9rem,4.4vw,3rem)} .band .form{display:flex;gap:10px;max-width:480px;margin:24px auto 0;flex-wrap:wrap} .band input{flex:1;min-width:220px;background:rgba(5,6,10,.6);border:1px solid var(--line2);border-radius:13px;padding:14px 16px;color:var(--ink);font:15px Inter;outline:none} .band input:focus{border-color:var(--cyan)} /* ---------- rallying marquee ---------- */ .cries{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;white-space:nowrap;background:rgba(10,13,22,.5)} .cries .track{display:inline-flex;gap:38px;animation:slide 38s linear infinite;font-family:'Sora';font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em} .cries .track span{color:var(--soft)}.cries .track b{color:var(--cyan)} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--bg2)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px} @media(max-width:680px){.fgrid{grid-template-columns:1fr}} footer h4,footer .fh{font-family:'Space Grotesk';font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:12px} footer a{display:block;color:var(--soft);padding:4px 0;font-size:.92rem}footer a:hover{color:var(--ink)} .disc{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;line-height:1.7;max-width:840px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .privacy-consent{position:fixed;left:50%;bottom:20px;z-index:120;width:min(900px,calc(100vw - 28px));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 22px;border:1px solid rgba(91,155,255,.58);border-radius:18px;background:linear-gradient(150deg,rgba(13,18,31,.98),rgba(5,6,10,.98));box-shadow:0 24px 70px rgba(0,0,0,.68),0 0 34px rgba(47,107,255,.16);backdrop-filter:blur(18px)} .privacy-consent[hidden]{display:none} .privacy-consent-copy{max-width:650px} .privacy-consent-copy strong{display:block;color:var(--ice);font:800 1rem/1.25 'Sora',sans-serif;margin-bottom:5px} .privacy-consent-copy p{margin:0;color:var(--soft);font-size:.83rem;line-height:1.55} .privacy-consent-copy a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px} .privacy-consent-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:none} .privacy-consent-actions .btn{white-space:nowrap;padding:10px 14px;font-size:.79rem} .billing-status,.checkout-return{margin:12px 0;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:rgba(91,155,255,.07);color:var(--soft);font-size:.84rem;line-height:1.5} .billing-status:empty{display:none} .billing-status.is-pending,.checkout-return.is-pending{color:var(--ice);border-color:rgba(91,155,255,.46)} .billing-status.is-success,.checkout-return.is-success{color:var(--cyan);border-color:rgba(53,216,255,.44);background:rgba(53,216,255,.07)} .billing-status.is-error,.checkout-return.is-cancel{color:#ffd0bd;border-color:rgba(255,138,74,.5);background:rgba(255,138,74,.08)} .checkout-return{width:min(1180px,calc(100% - 40px));margin:18px auto 0} .privacy-settings-button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer} .privacy-settings-button:hover,.privacy-settings-button:focus-visible{color:var(--ice);text-decoration:underline;text-underline-offset:3px} @media(max-width:760px){.privacy-consent{align-items:stretch;flex-direction:column;gap:14px;bottom:12px;padding:18px}.privacy-consent-actions{justify-content:stretch}.privacy-consent-actions .btn{flex:1}} /* ===== FAQ (accordion, AEO-friendly) ===== */ .faqlist{display:flex;flex-direction:column;gap:12px;margin-top:30px} .faq-item{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:14px;padding:4px 20px;transition:border-color .2s} .faq-item[open]{border-color:var(--blue)} .faq-item summary{font-family:'Space Grotesk';font-weight:700;font-size:1.04rem;color:var(--ink);cursor:pointer;list-style:none;padding:16px 0;position:relative;padding-right:34px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--cyan);font-weight:400;transition:transform .2s} .faq-item[open] summary::after{content:"\2212"} .faq-item summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} .faq-a{color:var(--soft);font-size:1rem;line-height:1.65;padding:0 0 18px} /* ===== mobile hardening (added 2026-06-17) ===== */ html{overflow-x:hidden} section,.hero,.band,.cries,.manifesto{overflow-x:clip} @media(max-width:600px){ .flow{flex-direction:column;align-items:stretch;gap:4px} .flow .step{min-width:0;width:100%} .flow .arr{width:100%;justify-content:center;transform:rotate(90deg);padding:0;font-size:1.2rem} section{padding:64px 0} .band{padding:38px 20px} .hero{min-height:auto;padding:90px 0 60px} table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* ===== mobile menu (hamburger + dropdown) ===== */ /* D-1374 UX sweep: 42px was 2px under the 44px tap-target minimum already applied everywhere else this pass (Signal.OS footer links, Phase Advancement/Recovery Capacity option rows). This is the site's own primary mobile nav trigger, so it should not be the one exception. */ .navtoggle{display:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:11px;background:rgba(120,160,255,.07);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0} .navtoggle span{display:block;width:20px;height:2px;background:var(--ice);border-radius:2px;transition:.25s} .navtoggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle.x span:nth-child(2){opacity:0} .navtoggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobilemenu{display:none;flex-direction:column;gap:0;padding:10px 24px 22px;background:rgba(8,11,18,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .mobilemenu.open{display:flex} .mobilemenu a{font-family:'Space Grotesk';font-weight:600;font-size:17px;color:var(--soft);padding:14px 4px;border-bottom:1px solid var(--line)} .mobilemenu a:hover{color:var(--ink)} .mobilemenu a.btn{color:#04101f;margin-top:12px;justify-content:center;border-bottom:none} @media(max-width:1180px){ .navtoggle{display:flex} } @media(min-width:1181px){ .mobilemenu{display:none !important} } @media(max-width:1180px){ .mobilemenu{ position:fixed; top:68px; right:16px; left:auto; z-index:90; width:min(420px,calc(100vw - 32px)); max-height:calc(100svh - 84px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line2); border-radius:16px; box-shadow:0 24px 56px rgba(0,0,0,.58); } } /* ============================================================ MEGA-MENU NAV (ported from codex v2, re-themed to the live ELECTRIC BLUE/RED palette). Desktop = data-driven mega dropdowns; mobile = accordion drawers. Degrades to a flat link list with JS off (static-baked nav + noscript reveal). --navTint is an R,G,B triplet so we can build rgba() tints; themes map to the live blue (47,107,255) / red (255,46,60). ============================================================ */ .navitem{position:relative} .nav-theme-start{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:91,155,255} .nav-theme-learn{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:47,107,255} /* These three used to carry load red, which .mega-feature turns into the solid background of the "Best next click" button in every mega-menu, on all 47 pages. The contract at the top of this file reserves red for overload and urgent state ONLY, never an invitation, so the site's most repeated CTA was also its loudest contract breach. Section identity is carried by the .navnum digit and the panel tint, not by making the button an alarm. */ .nav-theme-academy{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:91,155,255} .nav-theme-community{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:91,155,255} .nav-theme-providers{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:91,155,255} .navmain,.navplain{height:40px;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--soft);font:700 14px 'Space Grotesk';padding:0 10px;cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none} .navmain:hover,.navmain:focus-visible,.navplain:hover,.navplain:focus-visible,.navplain.active{color:var(--ink);background:rgba(120,160,255,.06);border-color:var(--line)} /* MEMBERSHIP = the conversion we want -> make it crackle and pull the eye */ .navplain[href*="membership"]{color:#fff;font-weight:800;border-color:rgba(91,155,255,.55);background:linear-gradient(180deg,rgba(47,107,255,.20),rgba(47,107,255,.06));text-shadow:0 0 10px rgba(91,155,255,.6);overflow:hidden;position:relative;animation:memCharge 2.2s ease-in-out infinite} .navplain[href*="membership"]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);transform:translateX(-130%);animation:memSweep 3.4s ease-in-out infinite;pointer-events:none} .navplain[href*="membership"]:hover,.navplain[href*="membership"]:focus-visible{color:#fff;border-color:#ff5a64;background:linear-gradient(180deg,rgba(47,107,255,.22),rgba(255,46,60,.14));box-shadow:0 0 24px rgba(255,46,60,.6)} @keyframes memCharge{0%,100%{box-shadow:0 0 9px rgba(47,107,255,.4),inset 0 0 8px rgba(47,107,255,.14)}50%{box-shadow:0 0 22px rgba(91,155,255,.8),0 0 34px rgba(255,46,60,.3),inset 0 0 13px rgba(91,155,255,.24)}} @keyframes memSweep{0%,55%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}} .mobile-utility[href*="membership"]{border:1px solid rgba(91,155,255,.55);border-radius:10px;background:linear-gradient(180deg,rgba(47,107,255,.14),rgba(255,46,60,.07));color:#fff;font-weight:800;text-shadow:0 0 8px rgba(91,155,255,.5);box-shadow:0 0 16px rgba(47,107,255,.32)} @media(prefers-reduced-motion:reduce){.navplain[href*="membership"],.navplain[href*="membership"]::before{animation:none}.navplain[href*="membership"]{box-shadow:0 0 15px rgba(91,155,255,.5)}} /* lightning bolt + "Founding pricing" urgency flag on the Membership pill. has-flag stacks two tight lines, vertically centered, so the 40px pill keeps its height with zero layout shift; the bolt uses the shipped icon library. */ .navplain.has-flag{flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 13px;line-height:1} .np-row{display:inline-flex;align-items:center;gap:5px;line-height:1} .nav-bolt{display:inline-flex;width:11px;height:13px;color:#dbe8ff;position:relative;z-index:1} .nav-bolt img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 0 5px rgba(91,155,255,.85))} /* brand.js renders the bolt as an INLINE . Without this rule the path took the default black fill and read as a dark smudge on the dark pill. */ .nav-bolt svg{width:100%;height:100%;display:block;fill:#ffd23f; filter:drop-shadow(0 0 6px rgba(255,210,63,.9)) drop-shadow(0 0 12px rgba(255,163,26,.5))} .navplain[href*="membership"] .nav-bolt{animation:boltFlicker 2.6s steps(1,end) infinite} .nav-flag{font:800 8.5px/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#ff7a82;text-shadow:0 0 8px rgba(255,46,60,.6);position:relative;z-index:1} @keyframes boltFlicker{0%,46%,52%,71%,76%,100%{opacity:1}48%{opacity:.32}50%{opacity:1}73%{opacity:.5}} /* mobile: bolt inline with the label, flag trailing on the charged row */ .mobile-utility.has-flag{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .mobile-utility .np-row{display:inline-flex;align-items:center;gap:6px} .mobile-utility[href*="membership"] .nav-bolt{animation:boltFlicker 2.6s steps(1,end) infinite} @media(prefers-reduced-motion:reduce){.navplain[href*="membership"] .nav-bolt,.mobile-utility[href*="membership"] .nav-bolt{animation:none}} /* ============ VIEWER-STATE GATING (set by brand.js applyState) ============ */ /* declarative hide: any element that does not match the viewer state */ .gate-hide{display:none!important} /* signed-in members: calm the Membership conversion CTA (no flash, no founding flag) and drop the Join button */ .tw-member .navplain[href*="membership"],.tw-member .mobile-utility[href*="membership"]{animation:none;color:var(--soft);font-weight:700;border-color:transparent;background:transparent;text-shadow:none;box-shadow:none} .tw-member .navplain[href*="membership"]::before{display:none} .tw-member .navplain[href*="membership"]:hover,.tw-member .navplain[href*="membership"]:focus-visible,.tw-member .mobile-utility[href*="membership"]:hover{color:var(--ink);background:rgba(120,160,255,.06);border-color:var(--line);box-shadow:none} .tw-member .nav-flag,.tw-member .nav-bolt{display:none} .tw-member .joinbtn,.tw-member .mobilemenu .mobile-actions .btn-primary{display:none} .navitem.open .navmain,.navitem:hover .navmain,.navitem:focus-within .navmain{color:var(--ink);background:rgba(var(--navTint),.12);border-color:rgba(var(--navTint),.42);box-shadow:0 0 0 1px rgba(var(--navTint),.12),0 12px 30px rgba(var(--navTint),.12)} .navnum{font-family:'Sora';font-size:10px;letter-spacing:.04em;color:var(--navAccent);opacity:.95} .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.75;transition:.18s} .navitem.open .chev,.navitem:hover .chev,.navitem:focus-within .chev{transform:rotate(225deg) translate(-1px,-1px)} .mega{position:fixed;top:81px;left:50%;right:auto;width:min(780px,calc(100vw - 40px));max-height:calc(100svh - 97px);display:grid;grid-template-columns:250px 1fr;gap:14px;background:linear-gradient(145deg,rgba(27,27,33,.98),rgba(12,13,18,.99));border:1px solid rgba(var(--navTint),.38);border-radius:18px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 0 1px rgba(var(--navTint),.10),0 0 46px rgba(var(--navTint),.13);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(9px) scale(.985);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1);z-index:80;overflow-y:auto;overscroll-behavior:contain} .mega::before{content:"";position:absolute;top:-22px;left:0;right:0;height:24px} .mega::after{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:linear-gradient(90deg,var(--navAccent),transparent);opacity:.9} .mega-glow{position:absolute;right:0;bottom:0;width:min(360px,48%);height:min(260px,88%);background:radial-gradient(circle,rgba(var(--navTint),.24),transparent 70%);filter:blur(12px);pointer-events:none;animation:navGlow 4.5s ease-in-out infinite} .mega-left,.mega-center,.mega-right{left:50%;right:auto;transform:translateX(-50%) translateY(8px)} .navitem.open .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .mega-intro{display:flex;flex-direction:column;gap:8px;position:relative;padding:14px;border:1px solid rgba(var(--navTint),.22);border-radius:14px;background:linear-gradient(150deg,rgba(var(--navTint),.13),rgba(120,160,255,.04));min-height:100%} .mega-k{font-family:'Space Grotesk';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navAccent);font-weight:800} .mega-intro>a:not(.mega-feature){font-family:'Sora';font-weight:800;color:var(--ink);font-size:1.25rem;line-height:1.05;text-decoration:none} .mega-intro p{color:var(--mute);font-size:.86rem;line-height:1.45;max-width:56ch} .mega-feature{margin-top:auto;display:block;border-radius:13px;padding:13px;background:linear-gradient(135deg,var(--navAccent),var(--navAccent2));color:#04101f;box-shadow:0 12px 32px rgba(var(--navTint),.24);transition:.18s;text-decoration:none} .mega-feature:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(var(--navTint),.34)} .mega-feature span{display:block;font-family:'Space Grotesk';font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.74} .mega-feature b{display:block;font-family:'Sora';font-size:.96rem;line-height:1.18;margin-top:3px} .mega-feature small{display:block;font-family:'Inter';font-weight:600;font-size:.74rem;line-height:1.3;margin-top:5px;opacity:.82} .mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .mega-link{display:block;border:1px solid transparent;border-radius:12px;padding:10px 11px;background:rgba(120,160,255,.035);transition:.16s;position:relative;overflow:hidden;text-decoration:none} .mega-link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--navAccent);opacity:.28} .mega-link:hover,.mega-link:focus-visible,.mega-link.active{border-color:rgba(var(--navTint),.36);background:rgba(var(--navTint),.10);transform:translateY(-1px)} .mega-link:hover::before,.mega-link.active::before{opacity:1} .mega-link span{display:block;color:var(--ice);font-family:'Space Grotesk';font-weight:700;font-size:.9rem;line-height:1.2} .mega-link small{display:block;color:var(--mute);font-family:'Inter';font-weight:500;font-size:.76rem;line-height:1.35;margin-top:3px} .navitem.open .mega-link{animation:menuRise .26s both} .navitem.open .mega-link:nth-child(2){animation-delay:.025s} .navitem.open .mega-link:nth-child(3){animation-delay:.05s} .navitem.open .mega-link:nth-child(4){animation-delay:.075s} .navitem.open .mega-link:nth-child(5){animation-delay:.1s} .navitem.open .mega-link:nth-child(6){animation-delay:.125s} .navitem.open .mega-link:nth-child(n+7){animation-delay:.15s} @keyframes menuRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes navGlow{0%,100%{transform:translate(0,0) scale(1);opacity:.65}50%{transform:translate(-24px,-10px) scale(1.08);opacity:1}} /* honor reduced-motion: no glow drift, no link cascade */ @media(prefers-reduced-motion:reduce){ .mega-glow{animation:none} .navitem.open .mega-link{animation:none} .mega{transition:opacity .12s ease} } /* wider mega flips to a single column on small laptops so it never clips */ @media(max-width:980px){.mega{grid-template-columns:1fr;width:min(420px,calc(100vw - 32px))}.mega-grid{grid-template-columns:1fr}} /* ---- mobile mega drawers (richer slide-out) ---- */ html.nav-open,body.nav-open{overflow:hidden} body.nav-open #nerve{display:none} .mobile-start{display:grid;gap:10px;margin-bottom:4px} .mobile-primary{display:block;border:1px solid rgba(47,107,255,.32);border-radius:14px;padding:16px 15px;background:linear-gradient(135deg,rgba(47,107,255,.18),rgba(31,79,208,.10));box-shadow:0 14px 38px rgba(47,107,255,.10);text-decoration:none} .mobile-primary span{display:block;font-family:'Space Grotesk';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:800;margin-bottom:4px} .mobile-primary b{display:block;font-family:'Sora';font-size:1.15rem;line-height:1.12;color:var(--ink)} .mobile-primary small{display:block;color:var(--soft);font-size:.82rem;line-height:1.35;margin-top:4px} .mobile-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .mobile-quick a{border:1px solid var(--line);border-radius:12px;padding:11px;background:rgba(255,255,255,.035);text-decoration:none} .mobile-quick b{display:block;font-family:'Space Grotesk';font-size:.9rem;color:var(--ice)} .mobile-quick small{display:block;color:var(--mute);font-size:.72rem;margin-top:2px} .mobile-label{font-family:'Space Grotesk';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:800;margin:8px 2px 2px} .mobile-section{border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.035);padding:0;box-shadow:none;overflow:visible} .mobile-drawer.current{border-color:rgba(var(--navTint),.35)} .mobile-head{width:100%;min-height:58px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;border:0;background:transparent;color:var(--ice);padding:0 13px;cursor:pointer;text-align:left;border-radius:12px} .mobile-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(var(--navTint),.14);color:var(--navAccent);font-family:'Sora';font-weight:800;font-size:11px} .mobile-copy b{display:block;font-family:'Sora';font-weight:800;font-size:1rem;line-height:1.12} .mobile-count{display:grid;place-items:center;min-width:28px;height:28px;border:1px solid rgba(var(--navTint),.24);border-radius:999px;color:var(--navAccent);font-family:'Space Grotesk';font-size:11px;font-weight:800;background:rgba(5,6,10,.22)} .mobile-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.72;transition:.2s} .mobile-head:hover,.mobile-head:focus-visible{outline:none;background:rgba(var(--navTint),.08)} .mobile-drawer.open .mobile-caret{transform:rotate(225deg)} .mobile-drawer-panel[hidden]{display:none!important} .mobile-drawer-panel{display:grid;gap:8px;padding:4px 13px 13px;border-top:1px solid rgba(255,255,255,.07)} .mobile-drawer-panel p{color:var(--mute);font-size:.82rem;line-height:1.4;margin:2px 0 0} .mobile-feature{display:block;padding:12px;border-radius:11px;border:1px solid rgba(var(--navTint),.28);background:rgba(var(--navTint),.10);color:var(--ice)!important;font-family:'Sora'!important;font-weight:800!important;text-decoration:none} .mobile-feature b{display:block;font-family:'Space Grotesk';font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navAccent);margin-bottom:3px} .mobile-feature small{color:var(--soft)!important;font-weight:600!important} .mobile-links{display:grid;gap:1px} .mobilemenu a:not(.btn){font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--soft);padding:9px 8px;border-radius:9px} .mobilemenu a:not(.btn):hover{color:var(--ink);background:rgba(var(--navTint,47,107,255),.10)} .mobilemenu a small{display:block;color:var(--mute);font-family:'Inter';font-weight:500;font-size:.74rem;line-height:1.3;margin-top:2px} .mobile-actions{--navTint:47,107,255;display:grid;gap:6px;padding:8px;margin-top:2px} .mobile-utility{border:1px solid var(--line);background:rgba(120,160,255,.04)} body.nav-open .ally-fab,body.nav-open .ally-panel{opacity:0;pointer-events:none;transform:scale(.94)} @media(max-width:420px){.mobilemenu{padding-left:16px;padding-right:16px}.mobile-primary{padding:14px}.mobile-quick a{padding:10px}} /* ===== the cascade chain (signature diagram) ===== */ .chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;max-width:900px;margin:6px auto 0} .chain .link{font-family:'Space Grotesk';font-weight:600;font-size:.95rem;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:10px 17px;color:var(--soft)} .chain .link.hot{border-color:rgba(91,155,255,.5);color:var(--ice);box-shadow:0 0 0 1px rgba(91,155,255,.18)} /* The end of the cascade is the useful DESTINATION (where real clinical questions belong), not an alarm. Baseline green = resolved/actionable per the color contract. */ .chain .link.end{background:linear-gradient(135deg,var(--baseline),#7cf0b8);color:#05271a;border:none;font-weight:700} .chain i{color:var(--blue2);font-style:normal;font-size:1.05rem} /* tighten nav for the fuller link set before any action can be clipped */ @media(max-width:1320px){.nav .wrap{padding-left:16px;padding-right:16px}.navlinks{gap:8px}.navmain,.navplain{font-size:13px;padding-left:8px;padding-right:8px}.navplain.has-flag{padding-left:9px;padding-right:9px}.navlinks .joinbtn{padding:10px 16px;font-size:13px}} @media(max-width:1120px){.navlinks{gap:2px}.navmain,.navplain{font-size:12px;padding-left:5px;padding-right:5px}.navnum{display:none}.navplain.has-flag{padding-left:6px;padding-right:6px}.navlinks .joinbtn{padding:8px 12px;font-size:12px}} /* ===== full-viewport heroes (fill the screen on landing) ===== */ .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero{ min-height:calc(100svh - 66px)!important; display:flex;flex-direction:column;justify-content:center; } @media(max-width:700px){ .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero{min-height:calc(100svh - 58px)!important;padding-top:84px;padding-bottom:48px} } /* forum landing hero */ .fhero-band{min-height:calc(100svh - 66px);display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:90px 0 60px} /* ===== ALLY · the doctrine companion (AI assistant widget) ===== */ .ally-fab{position:fixed;right:22px;bottom:22px;z-index:120;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 12px 34px rgba(47,107,255,.45),inset 0 1px 0 rgba(255,255,255,.4);display:grid;place-items:center;transition:.2s} .ally-fab:hover{transform:translateY(-3px) scale(1.04)} .ally-fab .ally-fab-icon{width:29px;height:29px;object-fit:contain} .ally-fab .ping{position:absolute;inset:0;border-radius:50%;animation:allyping 2.6s infinite;pointer-events:none} @keyframes allyping{0%{box-shadow:0 0 0 0 rgba(47,107,255,.45)}70%{box-shadow:0 0 0 17px rgba(47,107,255,0)}100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}} .ally-panel{position:fixed;right:22px;bottom:96px;z-index:121;width:384px;max-width:calc(100vw - 32px);height:566px;max-height:calc(100dvh - 130px);background:var(--panel);border:1px solid var(--line2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden} .ally-panel.open{display:flex;animation:allyup .25s ease} @keyframes allyup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .ally-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(47,107,255,.08),transparent)} .ally-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-family:'Sora';font-weight:800;color:#04130d;flex:none} .ally-head .nm{font-family:'Sora';font-weight:700;font-size:1.02rem;line-height:1.1} .ally-head .st{font-size:.74rem;color:var(--cyan);display:flex;align-items:center;gap:5px} .ally-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .ally-head .x{margin-left:auto;background:rgba(120,160,255,.06);border:1px solid var(--line);border-radius:8px;color:var(--soft);font:700 .76rem/1 'Space Grotesk';cursor:pointer;padding:8px 10px} .ally-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px} .ally-msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:.93rem;line-height:1.5} .ally-msg.bot{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--ink)} .ally-msg.me{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04130d;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500} .ally-msg a{color:var(--cyan);font-weight:600} .ally-msg b{color:var(--ice)} .ally-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .ally-chip{font-family:'Space Grotesk';font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--soft);cursor:pointer;transition:.15s;text-align:left} .ally-chip:hover{border-color:var(--cyan);color:var(--ink)} .ally-typing{display:flex;gap:4px;padding:13px 15px;align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px} .ally-typing span{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:allyblink 1.2s infinite} .ally-typing span:nth-child(2){animation-delay:.2s}.ally-typing span:nth-child(3){animation-delay:.4s} @keyframes allyblink{0%,60%,100%{opacity:.3}30%{opacity:1}} .ally-foot{border-top:1px solid var(--line);padding:12px 14px;background:var(--panel)} .ally-inp{display:flex;gap:8px} .ally-inp input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--ink);font-size:.92rem;outline:none} .ally-inp input:focus{border-color:var(--cyan)} .ally-inp button{background:linear-gradient(135deg,var(--blue),var(--cyan));border:none;border-radius:12px;padding:0 16px;cursor:pointer;color:#04130d;font-weight:700;font-family:'Space Grotesk'} .ally-disc{font-size:.68rem;color:var(--mute);text-align:center;margin-top:9px;line-height:1.45} @media(max-width:520px){.ally-panel{right:10px;left:10px;width:auto;bottom:72px;height:calc(100dvh - 98px)}.ally-fab{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:48px;height:48px}.ally-fab .ally-fab-icon{width:23px;height:23px} /* D-1374 UX sweep: on providers.html at common mobile heights the in-flow .scarcity line (compliance disclosure text, "credential checks are not running yet") lands at the exact viewport row the fixed Ally FAB always occupies, so its last word rendered under the button. Reserving the FAB's real footprint (48px + 10px right offset + a small gap) as right padding keeps every wrapped line clear of that zone regardless of where the hero happens to end on a given device height, without touching the FAB itself or any other in-flow content. */ .hero .scarcity{padding-right:74px}} /* library cards still in progress */ .acard.soon{opacity:.62;cursor:default;pointer-events:none} .acard.soon .read{color:var(--mute)} .acard.soon .badge-cat::after{content:" · soon";color:var(--mute);font-weight:500} .card.soon{opacity:.62;cursor:default;pointer-events:none} /* ============ HERO STAGE: uniform headline + ambient + authority + cue ============ */ /* UNIFORM hero headline across every hero (fixes the size/case inconsistency) */ .hero h1,.mhero h1,.dhero h1,.qhero h1,.fhero h1,.phero h1,.lib-hero h1,.page-hero h1,.m-hero h1,.fhero-band h1{ font-family:'Sora',sans-serif!important;font-weight:800!important; font-size:clamp(2.5rem,6vw,5rem)!important;line-height:.98!important; letter-spacing:-.01em!important;text-transform:uppercase!important;margin:10px auto 0!important;max-width:16ch} /* content above the ambient layers */ .hero .wrap,.mhero .wrap,.dhero .wrap,.qhero .wrap,.fhero .wrap,.phero .wrap,.lib-hero .wrap,.page-hero .wrap,.m-hero .wrap,.fhero-band .wrap{position:relative;z-index:3} .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero,.fhero-band{position:relative;overflow:hidden} /* subtle aurora (neural canvas is already the main bg) */ .hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;animation:auroraFloat 24s ease-in-out infinite} .hero-aurora i:nth-child(1){width:42vw;height:42vw;left:-8vw;top:-12vw;background:radial-gradient(circle,rgba(47,107,255,.30),transparent 70%)} .hero-aurora i:nth-child(2){width:36vw;height:36vw;right:-8vw;bottom:-10vw;background:radial-gradient(circle,rgba(91,155,255,.26),transparent 70%);animation-delay:-8s;animation-duration:30s} .hero-aurora i:nth-child(3){width:26vw;height:26vw;left:44%;top:36%;background:radial-gradient(circle,rgba(255,46,60,.18),transparent 70%);animation-delay:-15s;animation-duration:36s} @keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7%,-6%) scale(1.12)}66%{transform:translate(-6%,6%) scale(.93)}} @media(prefers-reduced-motion:reduce){.hero-aurora i{animation:none}} /* authority stat strip */ .hero-stats{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:32px;min-height:64px;align-items:center} /* On the full-viewport inner heroes the stats are injected by JS after paint. Reserve their footprint up front so injection causes zero layout shift (CLS). */ .lib-hero .wrap,.page-hero .wrap,.dhero .wrap,.qhero .wrap,.mhero .wrap,.phero .wrap,.fhero .wrap,.m-hero .wrap{padding-bottom:96px} .lib-hero .wrap .hero-stats,.page-hero .wrap .hero-stats,.dhero .wrap .hero-stats,.qhero .wrap .hero-stats,.mhero .wrap .hero-stats,.phero .wrap .hero-stats,.fhero .wrap .hero-stats,.m-hero .wrap .hero-stats{position:absolute;left:0;right:0;bottom:34px;margin-top:0} .hero-stat{text-align:center;min-width:96px} .hero-stat b{display:block;font-family:'Sora';font-weight:800;font-size:1.5rem;background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .hero-stat span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-top:5px;display:block} /* scroll cue Was position:absolute, bottom:24px, assuming a ~10px gap above .hero-stats. The cue's real rendered height (a text label stacked above its icon) is taller than that gap, so on any hero whose content leaves the stats row close to the bottom of the hero box, the two collide -- confirmed live on account.html and discover.html, patched there page-locally first. Static/ in-flow instead, same technique, now canonical here so no further hero variant needs its own copy of this fix. */ .hero-cue{position:static;left:auto;bottom:auto;transform:none;width:max-content;margin:14px auto 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--mute);font-family:'Space Grotesk';font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none} .hero-cue .hero-cue-icon{width:20px;height:20px;animation:cueBob 2s ease-in-out infinite} @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} @media(prefers-reduced-motion:reduce){.hero-cue .hero-cue-icon{animation:none}} @media(max-width:600px){.hero-stats{gap:18px;margin-top:24px}.hero-stat b{font-size:1.28rem}.hero h1,.mhero h1,.dhero h1,.qhero h1,.fhero h1,.phero h1,.lib-hero h1,.page-hero h1,.m-hero h1,.fhero-band h1{font-size:clamp(2rem,8vw,3.2rem)!important}.hero-cue{bottom:14px}} /* ===== footer (rebuilt: organized, useful, properly spaced) ===== */ #footer footer{border-top:1px solid var(--line);margin-top:46px;padding:54px 0 30px;background:linear-gradient(180deg,transparent,rgba(47,107,255,.03))} .fgrid{grid-template-columns:1.7fr 1fr 1fr 1fr !important;gap:36px} @media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr !important}} @media(max-width:520px){.fgrid{grid-template-columns:1fr !important}} .ftag{color:var(--soft);margin:12px 0 16px;max-width:36ch;font-size:.92rem} .fjoin{display:flex;gap:8px;max-width:330px;flex-wrap:wrap} .fjoin input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:10px 13px;color:var(--ink);font-size:.9rem;outline:none} .fjoin input:focus{border-color:var(--cyan)} .fjoin .btn{padding:10px 18px;font-size:14px} .join .lead-consent{flex:0 0 100%;display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:start;margin:4px 0 0;text-align:left;color:var(--soft);font-size:12px;line-height:1.45} .join .lead-consent input[type=checkbox],.band .lead-consent input[type=checkbox],.fjoin .lead-consent input[type=checkbox]{appearance:auto;flex:none;width:18px;height:18px;min-width:18px;margin:1px 0 0;padding:0;border:0;border-radius:3px;accent-color:var(--cyan);background:transparent} .join .lead-consent-copy{display:block} .join .lead-consent-help{display:block;margin-top:3px;color:var(--mute);font-size:11px} .join .lead-policy,.join .lead-scope,.join .lead-nojs{flex:0 0 100%;margin:0;color:var(--mute);font-size:11px;line-height:1.45;text-align:left} .join .lead-policy{color:var(--soft)} .join .lead-policy a{display:inline;padding:0;color:var(--cyan);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .join .lead-status{flex:0 0 100%;margin:3px 0 0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;color:var(--soft);background:rgba(91,155,255,.06);font-size:12px;line-height:1.45;text-align:left} .join .lead-status:empty{display:none} .join .lead-status.pending{color:var(--ice);border-color:rgba(91,155,255,.4)} .join .lead-status.success{color:var(--cyan);border-color:rgba(53,216,255,.42);background:rgba(53,216,255,.07)} .join .lead-status.error{color:#ffd0bd;border-color:rgba(255,138,74,.52);background:rgba(255,138,74,.08)} .join[aria-busy="true"] button[type=submit]{cursor:wait} .join[aria-busy="true"] input{opacity:.78} footer h4,footer .fh{color:var(--ice);font-size:13px;letter-spacing:.06em;margin-bottom:10px} footer a{display:block;color:var(--soft);padding:5px 0;font-size:.92rem;transition:.15s} footer a:hover{color:var(--cyan)} .fbottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)} .fbottom .disc{color:var(--mute);font-size:12.5px;line-height:1.7;max-width:900px;margin:0} .fmeta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;color:var(--mute);font-size:.82rem} .fmini{display:flex;flex-wrap:wrap;gap:18px} .fmini a{display:inline;padding:0;color:var(--mute)} .fmini a:hover{color:var(--cyan)} /* ===== durable keyboard focus ===== */ html body :focus-visible{outline:3px solid #b7f6ff!important;outline-offset:4px!important;box-shadow:0 0 0 7px rgba(47,107,255,.48),0 0 24px rgba(53,216,255,.42)!important} html body input:focus-visible,html body textarea:focus-visible,html body select:focus-visible{border-color:#b7f6ff!important} @media(forced-colors:active){html body :focus-visible{outline:3px solid Highlight!important;box-shadow:none!important}} /* ============================================================ BRAND EMBLEM TREATMENTS · the chrome figure-in-ring logo. The master PNG now carries REAL transparency (transparent background, opaque dark figure body, glowing ring + arcs), so the emblem renders directly as a normal PNG. No blend-mode, no black-keying, no luminance/radial mask - those would punch the figure's solid body back out. A soft drop-shadow glow is the only treatment. ============================================================ */ /* HERO: large subtle watermark behind the headline */ .hero-watermark{ position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); width:min(820px,124vw);max-width:none;height:auto;z-index:0; opacity:.22;pointer-events:none; filter:saturate(1.08); } /* HERO: crisp glowing emblem above the wordmark (dual electric glow: blue core + red halo) */ .hero-emblem{ width:clamp(140px,17vw,200px);height:auto;margin:0 auto 10px; display:block;position:relative;z-index:2; filter:drop-shadow(0 0 26px rgba(47,107,255,.50)) drop-shadow(0 0 54px rgba(255,46,60,.22)); animation:emblemPulse 5.5s ease-in-out infinite; } /* full-mark: the complete lockup (rings + wordmark + taglines baked in) stands alone as the hero image, no separate HTML wordmark/eyebrow duplicating it, so it runs much larger. */ .hero-emblem.full-mark{ width:clamp(280px,46vw,640px); margin:0 auto 14px; } /* Keep the complete mark prominent on short desktop screens while putting the first real actions inside the initial viewport. The self-report remains just below the fold instead of forcing every primary action below it. */ @media(min-width:701px) and (max-height:1000px){ .hero{justify-content:flex-start;padding-top:28px;padding-bottom:64px} .hero-emblem.full-mark{width:clamp(320px,33vw,440px);margin-bottom:8px} .hero h1{font-size:clamp(2.5rem,4.2vw,3.35rem)!important;line-height:1!important;margin-top:6px!important} .hero .sub{max-width:820px;margin-top:12px;font-size:1rem;line-height:1.5} .hero .cta-row{margin-top:18px} } @keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(47,107,255,.44)) drop-shadow(0 0 48px rgba(255,46,60,.18))}50%{filter:drop-shadow(0 0 34px rgba(91,155,255,.60)) drop-shadow(0 0 66px rgba(255,46,60,.30))}} @media(prefers-reduced-motion:reduce){.hero-emblem{animation:none}} @media(max-width:600px){.hero-watermark{opacity:.18;top:40%;width:140vw}.hero-emblem{margin-bottom:4px}} /* NAV: make the mark READ on the dark bar - a subtle glow only */ .brand .mark{ filter:drop-shadow(0 0 7px rgba(47,107,255,.40)); } /* FOOTER: proper brand lockup (emblem reads + glows) */ #footer .fbrand .brand .mark,#footer .fbrand .mark{ width:34px;height:34px; filter:drop-shadow(0 0 9px rgba(47,107,255,.42)); } #footer .fbrand .brand{gap:12px} /* AUTH pages (signin/account): emblem at the top */ .auth-emblem,.ashell .mark,.mhead-emblem{ filter:drop-shadow(0 0 18px rgba(47,107,255,.45)) drop-shadow(0 0 38px rgba(255,46,60,.22)); object-fit:contain; } .ashell .mark img{width:100%;height:100%} /* ============================================================ ELECTRICITY / LIGHTNING FX · electric blue + red, GPU-cheap. All effects animate transform/opacity/filter only (no layout), cause zero layout shift, and are fully disabled under prefers-reduced-motion. Tasteful: a few high-impact moments. ============================================================ */ /* ---- 1. HERO EMBLEM FLANKING ARCS (blue left, red right) ---- Pure CSS pseudo-elements on .hero-emblem so NO markup changes. They sit BEHIND the emblem (z-index:2 on the img above) and flank it, never covering the wordmark below. Flicker via opacity + a slight filter pulse to read like a crackling energy arc. */ .hero-emblem{ --arc-w:clamp(54px,7vw,96px); --arc-h:clamp(150px,19vw,230px); } /* full-mark already has its own full-width waveform art baked in - the flanking arc FX would double up on it */ .hero-emblem.full-mark::before,.hero-emblem.full-mark::after{ content:none; } .hero-emblem::before,.hero-emblem::after{ content:"";position:absolute;top:50%;width:var(--arc-w);height:var(--arc-h); transform:translateY(-50%);z-index:-1;pointer-events:none;border-radius:50%; background: radial-gradient(60% 90% at 100% 50%,rgba(47,107,255,.55),transparent 70%), radial-gradient(40% 70% at 100% 50%,rgba(91,155,255,.65),transparent 72%); -webkit-mask:radial-gradient(120% 86% at 130% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); mask:radial-gradient(120% 86% at 130% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); filter:blur(.6px) drop-shadow(0 0 8px rgba(47,107,255,.7)); opacity:.0;animation:arcCrackleL 3.1s steps(1,end) infinite; } .hero-emblem::before{ right:calc(100% - 8px); transform:translateY(-50%) scaleX(-1); } .hero-emblem::after{ left:calc(100% - 8px); background: radial-gradient(60% 90% at 0 50%,rgba(255,46,60,.55),transparent 70%), radial-gradient(40% 70% at 0 50%,rgba(255,90,100,.65),transparent 72%); -webkit-mask:radial-gradient(120% 86% at -30% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); mask:radial-gradient(120% 86% at -30% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); filter:blur(.6px) drop-shadow(0 0 8px rgba(255,46,60,.7)); animation:arcCrackleR 2.7s steps(1,end) infinite; } /* crackle = irregular flicker (opacity jumps) + faint scale jitter */ @keyframes arcCrackleL{ 0%,7%{opacity:.18;transform:translateY(-50%) scaleX(-1) scaleY(1)} 9%{opacity:.85;transform:translateY(-50%) scaleX(-1) scaleY(1.04)} 11%{opacity:.32}14%{opacity:.9;transform:translateY(-50%) scaleX(-1) scaleY(.97)} 16%{opacity:.5}40%{opacity:.22}43%{opacity:.78;transform:translateY(-50%) scaleX(-1) scaleY(1.03)} 46%,100%{opacity:.28;transform:translateY(-50%) scaleX(-1) scaleY(1)} } @keyframes arcCrackleR{ 0%,5%{opacity:.2}8%{opacity:.82;transform:translateY(-50%) scaleY(1.04)} 10%{opacity:.34}30%{opacity:.24}33%{opacity:.86;transform:translateY(-50%) scaleY(.97)} 36%{opacity:.46}60%{opacity:.2}63%{opacity:.8;transform:translateY(-50%) scaleY(1.03)} 66%,100%{opacity:.3;transform:translateY(-50%) scaleY(1)} } /* ---- 2. PRIMARY BUTTONS: charged glow + hover crackle ---- Idle: soft animated blue glow (box-shadow pulse). Hover/focus: intensify + a quick red/blue spark via a pseudo-element ring. */ .btn-primary{position:relative;isolation:isolate;animation:btnCharge 3.4s ease-in-out infinite} @keyframes btnCharge{ 0%,100%{box-shadow:0 10px 30px rgba(47,107,255,.30),0 0 0 0 rgba(91,155,255,0),inset 0 1px 0 rgba(255,255,255,.4)} 50%{box-shadow:0 12px 34px rgba(47,107,255,.42),0 0 18px 1px rgba(91,155,255,.28),inset 0 1px 0 rgba(255,255,255,.45)} } .btn-primary::after{ content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;pointer-events:none; background:linear-gradient(120deg,rgba(91,155,255,.0) 30%,rgba(91,155,255,.9) 48%,rgba(255,46,60,.9) 56%,rgba(255,46,60,0) 72%); opacity:0;transition:opacity .18s ease;filter:blur(3px); } .btn-primary:hover,.btn-primary:focus-visible{animation:none;box-shadow:0 16px 44px rgba(47,107,255,.5),0 0 24px 2px rgba(91,155,255,.45),inset 0 1px 0 rgba(255,255,255,.5)} .btn-primary:hover::after,.btn-primary:focus-visible::after{opacity:1;animation:btnSpark .5s ease-out} @keyframes btnSpark{0%{opacity:0;transform:translateX(-14%)}30%{opacity:1}100%{opacity:.55;transform:translateX(0)}} /* ---- 3. SECTION ACCENT: electric current under the eyebrow ---- A thin blue->red gradient line that "charges" across. Applied ONLY to .eyebrow inside section headers (sparing, high-impact). */ .sec-head .eyebrow,.hero .eyebrow{position:relative;display:inline-block;padding-bottom:9px} .sec-head .eyebrow::after,.hero .eyebrow::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px; background:linear-gradient(90deg,transparent,var(--blue) 18%,var(--blue2) 42%,var(--energy) 70%,transparent); background-size:240% 100%;animation:currentRun 3.6s linear infinite; box-shadow:0 0 10px rgba(47,107,255,.55); } @keyframes currentRun{0%{background-position:120% 0}100%{background-position:-120% 0}} /* ---- 4. HERO HEADLINE: subtle periodic electric shimmer ---- A travelling light sweep across the chrome wordmark + a gentle glow pulse. Uses background-position only (cheap). */ .hero-logo.chrome{ background:linear-gradient(110deg,var(--chrome1) 0%,var(--chrome2) 26%,#7fb0ff 42%,#fff 50%,#5b9bff 58%,var(--chrome3) 74%,var(--chrome4) 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:wordmarkShimmer 7s ease-in-out infinite; } @keyframes wordmarkShimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}} /* ---- 5. ELECTRIC TOP-BORDER on the CTA band (charges across) ---- */ .band{position:relative} .band::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--blue) 20%,var(--blue2) 45%,var(--energy) 72%,transparent); background-size:240% 100%;animation:currentRun 4.2s linear infinite; box-shadow:0 0 12px rgba(47,107,255,.5); } /* ---- ONE QUIET READING KEY INSTEAD OF REPEATED WARNING PANELS ---- */ .reading-key{margin:22px 0;color:var(--mute);font-size:.84rem;line-height:1.55} .reading-key a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px} .reading-key a:hover,.reading-key a:focus-visible{color:var(--ice);border-color:var(--cyan)} /* ---- GLOBAL reduced-motion kill switch for all electric FX ---- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .hero-emblem::before,.hero-emblem::after{animation:none;opacity:.3} .btn-primary{animation:none} .btn-primary::after{display:none} .sec-head .eyebrow::after,.hero .eyebrow::after,.band::before{animation:none} .hero-logo.chrome{animation:none;background-position:0 0} } /* ===== OPTION 3 HERO · built to the approved reference geometry ===== Reference reading, left to right: copy column on the left sitting DIRECTLY on the field (no card), the clean figure-in-ring seal large and centred, then the green baseline travelling right to a labelled terminus with the receipts panel beneath it. Field is full bleed, edge to edge, at full strength. Asset note: the seal is emblem-seal.png, cut from emblem-hero.png -- the properly-keyed lockup that is live on production thewayin.me (verified byte-identical to the live copy). Cropped above the wordmark and inside the waveform wings, bottom-feathered, squared to 1000x1000. Do NOT use emblem-watermark.png: it was luminance-keyed with ZERO fully-opaque pixels, so the signal mesh showed straight through the figure's legs, stomach, and the gap between his head and the ring. Do not use emblem-hero.png whole either: it carries the wordmark and both taglines burned in, which puts three competing wordmarks on one screen. */ .hero.o3{--baseline:#2fe08a;--baseline-glow:rgba(47,224,138,.65); position:relative;overflow:hidden;min-height:100vh;display:block;padding:0;text-align:left} /* full-bleed signal field. Height is capped to the STAGE, not the whole hero section: the self-check sits inside .hero.o3 below the fold, and an inset:0 field would run the mesh straight down behind it. Bottom mask lands the composition on the fold instead of letting it trail off. */ .o3-field{position:absolute;top:0;left:0;right:0;height:min(100vh,100%);z-index:0;pointer-events:none; background:radial-gradient(140% 100% at 50% 45%,#0a0c11,#050609); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 99%); mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 99%); opacity:1} /* The composition is now DRAWN (signal-field.js), not a bitmap. The old 1672x941 raster upscaled and went soft past ~1700px wide, and its baked-in convergence point could not follow the real emblem. Canvas is sharp at any DPR and converges on the measured emblem centre. */ .o3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} @keyframes o3Drift{from{transform:scale(1.05) translate3d(-.6%,0,0)} to{transform:scale(1.09) translate3d(.6%,-.8%,0)}} /* readability WITHOUT a card: a soft left-edge vignette, exactly like the reference, where the copy sits over the darker part of the mesh. */ .o3-tint{position:absolute;top:0;left:0;right:0;height:min(100vh,100%);z-index:1;pointer-events:none;background: linear-gradient(90deg,rgba(4,5,8,.42) 0%,rgba(4,5,8,.3) 24%,rgba(4,5,8,.1) 40%,transparent 54%), linear-gradient(180deg,rgba(4,5,8,.34),transparent 20%,transparent 78%,rgba(4,5,8,.66))} /* three zones on one row, matching the reference proportions */ .o3-stage{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,34%) minmax(0,30%) minmax(0,36%); align-items:center;gap:0;min-height:100vh; max-width:1560px;margin:0 auto;padding:96px clamp(20px,4vw,64px) 40px} /* ---------- LEFT: copy ---------- */ .o3-copy{position:relative;max-width:520px} .o3-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px; font-family:'Space Grotesk';font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase} .o3-kicker-a{color:#fff} .o3-kicker-bar{width:1px;height:13px;background:rgba(255,255,255,.35)} .o3-kicker-b{color:var(--baseline)} .hero.o3 .o3-h1{font-family:'Sora';font-weight:800;text-transform:uppercase; font-size:clamp(2.7rem,4.6vw,4.4rem);line-height:.98;letter-spacing:-.005em;margin:0;color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.85),0 0 60px rgba(0,0,0,.6)} .o3-hook{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.02rem,1.25vw,1.22rem); line-height:1.45;color:#eef2f8;margin:22px 0 0;max-width:460px; text-shadow:0 2px 16px rgba(0,0,0,.9)} .o3-hook em{font-style:normal;color:#ff6a73;white-space:nowrap} .o3-hook em::before{content:'\201C'}.o3-hook em::after{content:'\201D'} .o3-sub{color:#c3cbd6;font-size:1rem;line-height:1.62;margin:16px 0 0;max-width:430px; text-shadow:0 2px 14px rgba(0,0,0,.9)} /* stacked buttons, as in the reference */ .o3-actions{display:flex;flex-direction:column;gap:12px;margin-top:30px;max-width:330px} .hero.o3 .o3-cta{width:100%;justify-content:center;padding:15px 22px;font-size:14px;letter-spacing:.04em} .o3-minor{display:inline-block;margin-top:18px;color:var(--blue2);font-family:'Space Grotesk'; font-weight:600;font-size:.9rem;text-decoration:none;text-shadow:0 2px 12px rgba(0,0,0,.9)} .o3-minor:hover{color:#fff} .o3-fine{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14); color:#8d95a1;font-size:.8rem;letter-spacing:.02em;max-width:330px} /* ---------- CENTRE: the seal ---------- */ .o3-seal{display:flex;align-items:center;justify-content:center;position:relative} .o3-seal-img{position:relative;z-index:1;width:min(126%,660px);height:auto; filter:drop-shadow(0 0 60px rgba(47,107,255,.45)) drop-shadow(0 0 120px rgba(255,46,60,.22)); animation:o3Breathe 8s ease-in-out infinite} /* The animated light layer, drawn by signal-field.js and sitting ON the seal. Additive drawing only, so it adds glow to the ring and the figure and can never hide the artwork. Absolutely positioned so it takes no layout space. */ .o3-seal-fx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); z-index:2;pointer-events:none} @keyframes o3Breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} /* ---------- RIGHT: the resolve, then the receipts ---------- */ .o3-right{position:relative;align-self:center;display:flex;flex-direction:column;justify-content:center; height:100%;padding-left:8px} .o3-line{position:absolute;top:calc(50% - 96px);left:-6%;right:6px;height:2px; background:linear-gradient(90deg,transparent,var(--baseline) 22%,var(--baseline)); box-shadow:0 0 18px var(--baseline-glow),0 0 46px rgba(47,224,138,.3); transform-origin:left center;animation:o3draw 1.5s cubic-bezier(.2,.8,.2,1) .4s backwards} .o3-line::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%; transform:translate(50%,-50%);background:var(--baseline); box-shadow:0 0 14px var(--baseline),0 0 36px var(--baseline);animation:o3Pulse 2.8s ease-in-out infinite} .o3-line-label{position:absolute;right:14px;top:-26px;font-family:'Space Grotesk';font-size:11px; font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--baseline); text-shadow:0 0 14px rgba(47,224,138,.55)} @keyframes o3Pulse{0%,100%{opacity:1}50%{opacity:.6}} @keyframes o3draw{from{transform:scaleX(0)}to{transform:scaleX(1)}} .o3-receipts{margin-top:132px;width:100%; background:linear-gradient(180deg,rgba(9,11,15,.9),rgba(7,9,12,.82)); border:1px solid rgba(120,140,165,.26);border-radius:16px;padding:20px 22px 8px; backdrop-filter:blur(8px);box-shadow:0 26px 70px rgba(0,0,0,.6)} .o3-rtitle{font-family:'Space Grotesk';font-size:11.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--baseline);margin:0 0 8px} .o3-rows{margin:0} .o3-row{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:13px 0;border-top:1px solid rgba(255,255,255,.08)} .o3-row:first-child{border-top:0} .o3-row dt{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-size:11.5px; font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#9aa4b2} .o3-ricon{width:17px;height:17px;border-radius:50%;flex:0 0 17px; border:1.5px solid rgba(154,164,178,.75);position:relative} .o3-ricon::after{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(154,164,178,.6)} .o3-row dd{margin:0;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:.95rem;color:#e8edf4;text-align:right} /* below-fold container keeps the self-check out of the hero composition. No longer needs bottom clearance for .hero-cue -- that was reserved space for the old absolutely positioned cue, which is in normal flow now and sits right after this container on its own margin instead. */ .o3-belowfold{position:relative;z-index:2} @media(max-width:1180px){ .o3-stage{grid-template-columns:minmax(0,40%) minmax(0,32%) minmax(0,28%);padding-top:88px} .o3-seal-img{width:min(120%,440px)} .o3-receipts{margin-top:104px;padding:16px 16px 4px} .o3-row dd{font-size:.88rem} } @media(max-width:900px){ .hero.o3{min-height:auto} .o3-stage{grid-template-columns:1fr;min-height:auto;gap:34px;padding:104px 22px 44px;text-align:center} .o3-copy{max-width:640px;margin:0 auto} .o3-kicker{justify-content:center} .o3-actions{margin-left:auto;margin-right:auto;max-width:420px} .o3-fine{margin-left:auto;margin-right:auto} .o3-seal{order:-1} .o3-seal-img{width:min(74%,340px)} .o3-line{position:relative;top:auto;left:0;right:0;margin:0 0 26px} .o3-line-label{right:0;top:-24px} .o3-receipts{margin-top:0} .o3-tint{background:linear-gradient(180deg,rgba(4,5,8,.72),rgba(4,5,8,.55) 40%,rgba(4,5,8,.86))} } @media(prefers-reduced-motion:reduce){ .o3-field,.o3-seal-img,.o3-line,.o3-line::after{animation:none} } /* ===== SIGNAL TO BASELINE · THE MOTION GRAMMAR ===== Signature moment 2. Noise (red + blue signal) resolves into a stable green baseline, and that resolve is the site's shared language for understanding, saving, recovery, and progress. Paired with signal.js. Every rule here animates opacity/transform only, and every one is disabled under prefers-reduced-motion further down. */ /* -- understanding: a block settles the first time it is actually read -- */ [data-s2b="resolve"]{position:relative} [data-s2b="resolve"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; border-radius:2px;opacity:0;transform:scaleX(.25);transform-origin:left center;pointer-events:none; background:linear-gradient(90deg,var(--energy),var(--blue) 45%,var(--baseline)); transition:opacity .18s ease, transform .62s cubic-bezier(.2,.8,.2,1), filter .62s ease} [data-s2b="resolve"].s2b-resolving::after{opacity:1;transform:scaleX(1);filter:saturate(1.15)} [data-s2b="resolve"].s2b-settled::after{opacity:.55;transform:scaleX(1); background:linear-gradient(90deg,transparent,var(--baseline));filter:none} /* -- progress: a real value running from noise toward baseline -- */ [data-s2b="progress"]{position:relative;display:block;height:8px;border-radius:999px; background:var(--line);overflow:hidden} [data-s2b="progress"] .s2b-fill{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--energy),var(--blue) 55%,var(--baseline)); transition:width .5s cubic-bezier(.2,.8,.2,1),background .5s ease} [data-s2b="progress"].is-baseline .s2b-fill{background:linear-gradient(90deg,var(--baseline),#7cf0b8)} [data-s2b="progress"].s2b-instant .s2b-fill{transition:none} /* -- saving / recovery: an outcome resolves to a settled state. Colour is never alone here; signal.js writes the label text too. -- */ [data-s2b="state"]{transition:border-color .2s ease, background-color .2s ease, color .2s ease} [data-s2b="state"].s2b-resolved{border-color:rgba(47,224,138,.5);color:var(--baseline)} [data-s2b="state"].s2b-failed{border-color:rgba(255,46,60,.5);color:var(--energy2)} /* -- reading: a live value that re-resolves each time the user changes it. The sweep runs noise -> baseline across the block, then clears. -- */ [data-s2b="reading"]{position:relative;overflow:hidden} [data-s2b="reading"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%; opacity:0;pointer-events:none;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,46,60,.10) 20%,rgba(47,107,255,.12) 50%,rgba(47,224,138,.14) 80%,transparent)} [data-s2b="reading"].s2b-reading::before{animation:s2bSweep .48s cubic-bezier(.2,.8,.2,1) 1} @keyframes s2bSweep{0%{opacity:0;transform:translateX(-100%)}30%{opacity:1}100%{opacity:0;transform:translateX(100%)}} /* -- continuity: the reading baseline. Input-driven, so it does not spend the one-continuous-ambient-effect budget. -- */ .s2b-read{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none; background:transparent} .s2b-read i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center; background:linear-gradient(90deg,var(--energy),var(--blue) 40%,var(--baseline)); transition:background .5s ease} .s2b-read.is-baseline i{background:linear-gradient(90deg,var(--baseline),#7cf0b8)} @media(prefers-reduced-motion:reduce){ /* Content appears immediately and nothing animates. */ [data-s2b="resolve"]::after{transition:none;opacity:.5;transform:scaleX(1); background:linear-gradient(90deg,transparent,var(--baseline))} [data-s2b="progress"] .s2b-fill,[data-s2b="state"],.s2b-read i{transition:none} .s2b-read{display:none} } /* ===== OPTION 3 INTERIOR PAGES ===== Interior pages carry the same signal-to-baseline signature as Home at reduced intensity: they should read as the same product without repeating the full front-door treatment. Centered layout is preserved, unlike Home's split band. */ .o3-interior{--baseline:#2fe08a;--baseline-glow:rgba(47,224,138,.5);position:relative;overflow:hidden} .o3-interior .o3-field{opacity:.55; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 88%); mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 88%)} .o3-interior::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.2) 45%,rgba(10,10,12,.72)), radial-gradient(46% 55% at 12% 40%,rgba(255,46,60,.06),transparent 66%), radial-gradient(50% 58% at 84% 52%,rgba(47,224,138,.07),transparent 68%)} /* The interior baseline: the resolve line, and the counterpart to .o3-line in the home hero. This BASE rule went missing when the home hero was rebuilt to the approved reference (which renamed its own element to .o3-line), leaving only the .o3-interior positional override below. The result was 32 pages rendering an unstyled div whose label text, the bare word "Baseline", showed as stray grey copy above each headline. Do not delete this without checking `grep -l o3-baseline *.html` first. */ .o3-baseline{position:absolute;z-index:2;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--baseline) 20%,var(--baseline)); box-shadow:0 0 16px var(--baseline-glow),0 0 40px rgba(47,224,138,.28); transform-origin:left center;animation:o3draw 1.5s cubic-bezier(.2,.8,.2,1) .35s backwards} .o3-baseline::after{content:"";position:absolute;right:0;top:50%;width:10px;height:10px; border-radius:50%;transform:translate(50%,-50%);background:var(--baseline); box-shadow:0 0 12px var(--baseline),0 0 30px var(--baseline); animation:o3Pulse 2.8s ease-in-out infinite} .o3-baseline-label{position:absolute;right:12px;top:-24px;font-family:'Space Grotesk'; font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--baseline);text-shadow:0 0 12px rgba(47,224,138,.5)} @media(prefers-reduced-motion:reduce){ .o3-baseline,.o3-baseline::after{animation:none} } .o3-interior .o3-baseline{top:auto;bottom:14%;left:58%;right:0;opacity:.8} /* On the home hero the label names the terminus of the resolve and is placed deliberately. On the 32 interior pages the line is positioned relative to a hero whose content differs per page, so the label kept landing on copy (the 404 numeral, and the dek on how-to-read-this-site at mobile width). The line alone carries the meaning here, and the whole block is aria-hidden already, so dropping the label costs nothing and removes the collision class. */ .o3-interior .o3-baseline-label{display:none} .o3-interior .wrap{position:relative;z-index:2} @media(max-width:900px){.o3-interior .o3-baseline{bottom:7%;left:40%}} /* ===== doctrine flow: stack earlier (added 2026-08-04) ===== The five .flow steps now carry Merv's full step descriptions, which are roughly twice the length of the copy the original layout was tuned for. Measured at 768px before this rule: four cards squeezed to 153px wide and 357px tall, with the fifth orphaned onto its own 705px row, which breaks the left-to-right read of the diagram. The existing column fallback only started at 600px, leaving 601-900px broken. Raising the stack point to 900px (a breakpoint already used in this file) keeps the five-across row on desktop, where it measures 5 x 200px at equal 248px height, and gives every narrower viewport the same vertical read mobile already had. */ @media(max-width:900px){ .flow{flex-direction:column;align-items:stretch;gap:4px} .flow .step{min-width:0;width:100%} .flow .arr{width:100%;justify-content:center;transform:rotate(90deg);padding:0;font-size:1.2rem} } /* ===== "Signal.OS asks different questions" (added 2026-08-04) ===== Merv supplied these as a lead-in plus five questions. They shipped as a single centred run-on paragraph, which reads as prose and loses the enumeration he wrote. Same words, his structure. Tokens only, no new colours. */ .askq{max-width:760px;margin:30px auto 0;text-align:center} .askq-lead{font-family:'Space Grotesk';font-weight:700;font-size:1.22rem;color:var(--ice);margin:0 0 16px} .askq-list{list-style:none;padding:0;margin:0;display:grid;gap:9px} .askq-list li{font-family:'Space Grotesk';font-weight:600;font-size:1.02rem;color:var(--soft); background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blue2); border-radius:12px;padding:12px 18px;text-align:left;transition:.2s} .askq-list li:hover{border-color:var(--line2);border-left-color:var(--cyan);color:var(--ice)} .askq-list li:last-child{border-left-color:var(--cyan)} @media(max-width:560px){ .askq-lead{font-size:1.1rem} .askq-list li{font-size:.96rem;padding:11px 14px} } /* ===== the defining line (added 2026-08-04) ===== Merv's sharpest statement of the central idea. It belongs to the section that teaches communication, carried with emphasis there. It is not a site tagline and does not displace the hero. Set larger than body copy and smaller than a heading, so it reads as the sentence the section is built around. */ .defining-line{font-family:'Space Grotesk';font-weight:700; font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.35;color:var(--ice); max-width:640px;margin:22px auto 0;padding-top:20px; border-top:1px solid var(--line);text-align:center} @media(max-width:560px){.defining-line{font-size:1.15rem;margin-top:18px;padding-top:16px}} /* Equation strip. Merv's brand equation, rendered as three beats. Used on the doctrine-carrying pages so the equation reads the same everywhere. Canonical wording lives in manifesto.html; keep all copies identical. */ /* Stacked by default, one row only when all three beats genuinely fit. Wrapping is DISABLED on purpose: at mid widths the three beats total ~987px, so flex-wrap put two on one line and orphaned the third, which reads as a broken sentence rather than an equation. Either one clean row or a clean vertical stack, never 2+1. */ .eqstrip{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px;margin:0 auto;max-width:1000px;text-align:center} .eqstrip span{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.05rem,2.3vw,1.5rem);letter-spacing:-.01em;line-height:1.25} .eqstrip i{font-style:normal;color:var(--mute);font-size:1.1em;line-height:1;opacity:.8;transform:rotate(90deg);margin:2px 0} @media(min-width:1120px){.eqstrip{flex-direction:row;gap:18px}.eqstrip i{transform:none;margin:0}}