/* ── VIOBE — shared stylesheet for the multi-page site ─────────────────────── */ /* Brand fonts (Sora / Manrope / JetBrains Mono) are linked from each page's . To go fully offline/self-hosted later: drop the .woff2 into ./fonts/ and add @font-face rules here pointing at them (see fonts/README.txt). */ :root{ --bg:#07080a; --card:#0d0f14; --card-2:#11141a; --ink:#F8F9FC; --t2:#C2C6D0; --t3:#8E939E; --t4:#5C606A; --line:rgba(255,255,255,0.07); --line-2:rgba(255,255,255,0.13); --hair:rgba(255,255,255,0.045); --blue:#78A7E3; --blue-2:#A6C6F0; --blue-hair:rgba(120,167,227,0.20); --glow:rgba(120,167,227,0.12); --plat:#BCC0CA; --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --gutter:clamp(24px,5vw,92px); --maxw:1380px; --sp:clamp(104px,11vw,172px); --fs-xs:0.8rem; --fs-sm:0.9rem; --fs-body:1rem; --fs-md:1.08rem; --fs-lg:1.18rem; --fs-xl:1.34rem; --fs-2xl:1.78rem; --fs-3xl:2.24rem; --fs-4xl:2.78rem; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{background:var(--bg);color:var(--t2);font-family:var(--sans);font-size:var(--fs-body);line-height:1.72;font-weight:400;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;overflow-x:hidden} a{color:inherit;text-decoration:none} ::selection{background:rgba(120,167,227,0.28);color:#fff} :focus-visible{outline:1.5px solid var(--blue);outline-offset:4px;border-radius:3px} img{max-width:100%;display:block} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#080a0e;padding:12px 20px;border-radius:0 0 10px 0;font-family:var(--mono);font-size:11px;letter-spacing:0.1em} .skip:focus{left:0} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"";display:inline-flex;width:15px;height:5px;background:radial-gradient(circle 2.5px at 2.5px 2.5px,var(--blue) 99%,transparent),radial-gradient(circle 2.5px at 12.5px 2.5px,var(--blue) 99%,transparent);background-repeat:no-repeat} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* cross-document page transition (Chrome/Edge/Safari) — degrades to instant nav elsewhere */ @view-transition{ navigation:auto; } @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){ animation:vt-out .26s ease both; } ::view-transition-new(root){ animation:vt-in .40s cubic-bezier(.19,1,.22,1) both; } @keyframes vt-out{ to{opacity:0;transform:translateY(-6px)} } @keyframes vt-in{ from{opacity:0;transform:translateY(12px)} } } /* reveal on scroll — progressive enhancement */ html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)} html.js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1 !important;transform:none !important;transition:none} } .announce{border-bottom:1px solid var(--hair);background:rgba(120,167,227,0.04)} .announce .wrap{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;flex-wrap:wrap} .announce p{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t2)} .announce a{color:var(--blue-2);border-bottom:1px solid var(--blue-hair);padding-bottom:1px} nav.site{position:sticky;top:0;z-index:50;background:rgba(7,8,10,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} nav.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:24px} .brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)} .brand .wm{letter-spacing:0.42em;padding-left:0.42em} .logo-mark{flex:none;width:38px;height:28px;object-fit:contain;object-position:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.62))} /* chrome — metallic text treatment echoing the faceted mark */ .chrome{ background:linear-gradient(176deg,#FFFFFF 0%,#FFFFFF 46%,#E3E8F0 72%,#FFFFFF 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .chrome{color:#F2F4F8;-webkit-text-fill-color:#F2F4F8} } /* hairline that reads like a milled edge */ .edge{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 18%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.16) 82%,transparent)} .navlinks{display:flex;align-items:center;gap:34px} .navlinks a{font-size:13px;color:var(--t2);font-weight:500;position:relative;padding:4px 0;transition:color .3s} .navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--blue);transition:width .35s cubic-bezier(.19,1,.22,1)} .navlinks a:hover{color:var(--ink)} .navlinks a:hover::after{width:100%} .navlinks a[aria-current="page"]{color:var(--ink)} .navlinks a[aria-current="page"]::after{width:100%} .btn{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:7px;transition:transform .35s,background .35s,border-color .35s,color .35s;cursor:pointer;border:1px solid transparent;white-space:nowrap} .btn-primary{background:linear-gradient(180deg,#FFFFFF,#E7EAF0);color:#080a0e;position:relative;overflow:hidden; box-shadow:0 12px 30px -12px rgba(190,214,248,.45),0 1px 0 rgba(255,255,255,.9) inset} /* a light sweeps across the button on hover */ .btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transition:transform .75s cubic-bezier(.19,1,.22,1)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(190,214,248,.6),0 1px 0 rgba(255,255,255,.9) inset} .btn-primary:hover::after{transform:translateX(120%)} @media (prefers-reduced-motion:reduce){ .btn-primary::after{display:none} } .btn-ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,0.015)} .btn-ghost:hover{border-color:var(--blue-hair);background:rgba(120,167,227,0.06);transform:translateY(-2px)} .btn .arr{transition:transform .35s} .btn:hover .arr{transform:translateX(4px)} /* page intro (each page fades up on load) */ .pagehead{animation:pageIn .6s cubic-bezier(.19,1,.22,1)} @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .pagehead{animation:none} } header.hero{position:relative;padding-top:clamp(64px,10vw,132px);padding-bottom:clamp(72px,11vw,140px);overflow:hidden} /* an aurora of light behind the hero — the page should feel lit, not printed */ header.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:0;pointer-events:none; background: radial-gradient(46% 40% at 68% 18%,rgba(120,167,227,.20),transparent 62%), radial-gradient(38% 34% at 88% 46%,rgba(154,124,214,.12),transparent 64%), radial-gradient(50% 44% at 12% 72%,rgba(120,167,227,.10),transparent 66%); filter:blur(18px)} html.js header.hero::before{animation:aurora 18s ease-in-out infinite alternate} @keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.06)}100%{transform:translate3d(1.5%,-1%,0) scale(1.02)}} @media (prefers-reduced-motion:reduce){ html.js header.hero::before{animation:none} } /* faint precision grid — engineered, not empty */ header.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:78px 78px; -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 25%,transparent 78%); mask-image:radial-gradient(72% 62% at 50% 42%,#000 25%,transparent 78%)} .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(58% 48% at 72% 6%,var(--glow),transparent 70%),radial-gradient(70% 60% at 8% 92%,rgba(166,170,182,0.045),transparent 65%)} html.js .hero-glow{animation:breathe 11s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr 0.88fr;gap:clamp(40px,6vw,96px);align-items:center} .hero-copy .eyebrow{margin-bottom:34px} h1{font-family:var(--display);font-weight:300;font-size:var(--fs-4xl);line-height:1.12;letter-spacing:0;color:#FCFDFF;text-wrap:balance} /* emphasis must read BRIGHTER than the rest — a light metallic sheen, never a grey wash */ h1 b{font-weight:600;color:#FFFFFF; background:linear-gradient(176deg,#FFFFFF 0%,#FFFFFF 46%,#E3E8F0 72%,#FFFFFF 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ h1 b{-webkit-text-fill-color:#FFFFFF;color:#FFFFFF} } h1 .lo{color:#8F95A2;font-weight:300} .hero-copy p.lede{margin-top:28px;font-size:1.08rem;line-height:1.72;color:#C2C6D0;max-width:48ch;font-weight:400;letter-spacing:0} .hero-copy .cta-row{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .hero-copy .fineprint{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;line-height:2.2;color:var(--t3);text-transform:uppercase} .pair{position:relative;display:flex;flex-direction:column;gap:20px;width:100%;max-width:560px;margin-inline:auto} /* a soft spotlight pooling behind the two introductions */ .pair::before{content:"";position:absolute;inset:-22% -16%;z-index:-1;pointer-events:none; background:radial-gradient(50% 44% at 50% 46%,rgba(120,167,227,.16),transparent 70%);filter:blur(10px)} html.js .pair{animation:floatPair 9s ease-in-out infinite} @keyframes floatPair{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){ html.js .pair{animation:none} } .intro-card{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden; background:linear-gradient(158deg,rgba(30,36,48,.92) 0%,rgba(14,17,24,.94) 46%,rgba(9,11,16,.96) 100%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); display:flex;align-items:center;gap:20px;padding:22px 24px; box-shadow:0 34px 70px -40px rgba(0,0,0,.95),0 1px 0 0 rgba(255,255,255,.07) inset; transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .5s,box-shadow .5s} /* a specular highlight running along the top edge — the "lit glass" cue */ .intro-card::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(190,214,248,.55),transparent)} .intro-card:hover{transform:translateY(-4px);border-color:rgba(120,167,227,.30); box-shadow:0 44px 90px -44px rgba(0,0,0,.95),0 0 0 1px rgba(120,167,227,.10),0 1px 0 0 rgba(255,255,255,.10) inset} html.js .intro-card{opacity:0;transform:translateY(18px) scale(.98);animation:cardIn 1.2s cubic-bezier(.19,1,.22,1) forwards} html.js .intro-card:nth-child(1){animation-delay:2.4s} html.js .intro-card:nth-child(2){animation-delay:2.8s} @keyframes cardIn{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ html.js .intro-card{animation:none;opacity:1;transform:none} } .portrait{width:82px;height:100px;border-radius:18px;flex:none;position:relative;overflow:hidden; box-shadow:0 14px 30px -18px rgba(0,0,0,.9)} .portrait::after{content:"";position:absolute;inset:0;border-radius:18px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 42%)} .p-a{background:radial-gradient(120% 110% at 28% 12%,rgba(140,182,236,.52),rgba(38,52,76,.72) 44%,rgba(9,12,19,.98) 82%)} .p-b{background:radial-gradient(120% 110% at 28% 12%,rgba(196,201,214,.44),rgba(48,52,64,.70) 44%,rgba(9,11,16,.98) 82%)} .portrait span{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px; font-family:var(--display);font-weight:300;font-size:42px;color:rgba(255,255,255,.94); text-shadow:0 2px 18px rgba(0,0,0,.5)} .intro-info .rn{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--t3)} .intro-info .nm{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:0;color:#FBFCFE;margin-top:8px} .intro-info .role{font-size:var(--fs-sm);color:var(--t2);margin-top:5px} .intro-info .win{display:flex;align-items:center;gap:8px;margin-top:12px} .intro-info .win i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);position:relative} html.js .intro-info .win i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--blue);animation:ping 2.6s cubic-bezier(.19,1,.22,1) infinite} @keyframes ping{0%{transform:scale(.7);opacity:.85}70%{transform:scale(2.1);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ html.js .intro-info .win i::after{animation:none;opacity:0} } .intro-info .win em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t2)} .pair-label{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--t4);margin-top:10px} html.js .pair-label{opacity:0;animation:cardIn 1s 3.2s forwards} @media (prefers-reduced-motion:reduce){ html.js .pair-label{animation:none;opacity:1} } section{padding-block:var(--sp);position:relative} section:first-of-type{border-top:none} .divider{border-top:1px solid var(--hair)} .sec-head{max-width:800px} .sec-head .eyebrow{margin-bottom:34px} h2{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1.18;letter-spacing:0;color:#FAFBFE;text-wrap:balance} h2 b{font-weight:500} h1.ph{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1.18;letter-spacing:0;color:#FAFBFE;text-wrap:balance} h1.ph b{font-weight:500} .lede-2{font-size:var(--fs-lg);line-height:1.6;color:var(--t2);margin-top:28px;max-width:56ch} .pt{margin-top:44px;display:flex} .problem h1 span,.problem h2 span{color:var(--t3);font-weight:300} .problem-lines{margin-top:52px;display:flex;flex-direction:column;gap:6px;max-width:680px} .problem-lines p{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.55;color:var(--t2);letter-spacing:0} .problem-lines p.dim{color:var(--t4);margin-top:8px} .problem-close{margin-top:52px;font-size:var(--fs-body);line-height:1.75;color:var(--ink);max-width:52ch} .philosophy{text-align:center} .philosophy .eyebrow{margin-bottom:44px} .philosophy .big,.manifesto blockquote{font-family:var(--display);font-weight:300;font-size:var(--fs-3xl);line-height:1.16;letter-spacing:0;color:#FBFCFE;max-width:18ch;margin:0 auto;text-wrap:balance} .philosophy .big b{font-weight:500} .philosophy .big .em{color:var(--blue-2);font-weight:300} .steps{margin-top:76px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:24px;overflow:hidden} .step{background:var(--bg);padding:clamp(36px,4vw,60px);transition:background .5s} .step:hover{background:linear-gradient(160deg,rgba(24,30,41,.7),rgba(10,13,19,.9))} .step .no{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;color:var(--blue)} .step h3{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);letter-spacing:0;color:#FAFBFE;margin-top:26px;line-height:1.3} .step p{margin-top:18px;font-size:var(--fs-sm);line-height:1.72;color:var(--t2);max-width:44ch} .step p.q{margin-top:14px;color:var(--t3);font-style:italic} .diff{text-align:center;background:linear-gradient(180deg,transparent,rgba(120,167,227,0.03) 45%,transparent)} .diff .ask{margin-top:56px;display:flex;flex-direction:column;gap:24px;align-items:center} .diff .ask .q{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.42;color:var(--t3);letter-spacing:0;max-width:28ch} .diff .ask .a{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1.25;color:#FBFCFE;letter-spacing:0;max-width:23ch} .diff .stamp{margin-top:52px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3)} .diff .stamp b{color:var(--blue-2);font-weight:500} .compat-grid{margin-top:68px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:22px;overflow:hidden} .compat{background:var(--bg);padding:38px 30px;transition:background .5s} .compat:hover{background:linear-gradient(160deg,rgba(26,32,44,.88),rgba(12,15,21,.95));box-shadow:inset 0 1px 0 rgba(190,214,248,.18)} .compat .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.85;box-shadow:0 0 9px var(--blue)} .compat h3{font-family:var(--display);font-weight:500;font-size:var(--fs-md);color:#FAFBFE;margin-top:28px;line-height:1.3} .compat p{font-size:var(--fs-sm);line-height:1.65;color:var(--t3);margin-top:14px} .compat-note{margin-top:56px;max-width:46ch} .compat-note p{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.48;color:var(--t2);letter-spacing:0} .compat-note p b{color:#FAFBFE;font-weight:400} .ledger{margin-top:64px;border:1px solid var(--line);border-radius:24px;overflow:hidden} .ledger .row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)} .ledger .row:first-child{border-top:none} .ledger .head{background:var(--card)} .ledger .cell{padding:24px 30px;font-size:var(--fs-sm);display:flex;align-items:center;gap:12px} .ledger .cell.us{color:#FAFBFE;font-weight:500;border-left:1px solid var(--blue-hair);background:rgba(120,167,227,0.035)} .ledger .cell.them{color:var(--t3)} .ledger .head .cell{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;padding-block:20px} .ledger .head .them{color:var(--t4)} .ledger .head .us{color:var(--blue-2)} .ledger .cell.us::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 7px var(--blue)} .ledger-close{margin-top:44px;font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.42;color:var(--ink);letter-spacing:0} .ledger-close b{font-weight:500} .manifesto{padding-block:clamp(110px,16vw,220px);text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--hair)} .manifesto::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(46% 56% at 50% 44%,rgba(120,167,227,0.08),transparent 72%)} html.js .manifesto::before{animation:breathe 12s ease-in-out infinite} .manifesto .wrap{position:relative;z-index:1} .manifesto .rule{width:1px;height:52px;margin:0 auto 50px;background:linear-gradient(180deg,transparent,var(--blue-hair) 45%,var(--blue-hair) 55%,transparent)} .manifesto blockquote em{font-style:normal;color:var(--blue-2);font-weight:300} .manifesto .sub{margin-top:44px;font-family:var(--mono);font-size:11px;letter-spacing:0.19em;text-transform:uppercase;color:var(--t3);max-width:44ch;margin-inline:auto;line-height:2.2} .manifesto .twodot{display:flex;gap:10px;justify-content:center;margin-top:52px} .manifesto .twodot i{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)} .inbetween{background:linear-gradient(180deg,transparent,rgba(255,255,255,0.012),transparent)} .inbetween h2{max-width:22ch} .inbetween .quiet{color:var(--t3);font-weight:300} .cohort .headline{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:end} .cohort h2 b{color:var(--blue-2)} .cities{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:20px;overflow:hidden} .city{background:var(--bg);padding:28px 28px;display:flex;flex-direction:column;gap:12px;transition:background .4s;cursor:pointer;min-height:124px;justify-content:space-between} .city:hover{background:linear-gradient(160deg,rgba(26,32,44,.9),rgba(12,15,21,.95));box-shadow:inset 0 1px 0 rgba(190,214,248,.20)} .city .cn{font-family:var(--display);font-weight:400;font-size:var(--fs-md);color:#FAFBFE} .city .cs{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px} .city .cs i{width:4px;height:4px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue)} .city .cs.soon i{background:var(--t4);box-shadow:none} .city .cs.soon{color:var(--t4)} .exit{text-align:center;background:radial-gradient(60% 70% at 50% 0%,rgba(120,167,227,0.055),transparent 70%)} .exit .big{font-family:var(--display);font-weight:400;font-size:var(--fs-3xl);line-height:1.2;letter-spacing:0;color:#FFFFFF;max-width:21ch;margin:0 auto;text-wrap:balance} .exit p.body{margin:42px auto 0;max-width:58ch;color:#D8DCE5;font-size:clamp(1.02rem,.22vw + .98rem,1.12rem);font-weight:450;line-height:1.9;text-wrap:pretty} .exit p.body b{color:#FFFFFF;font-weight:600} .exit .stamp{margin-top:48px;font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--blue-2)} .members .sec-head{margin:0 auto;text-align:center} .members .sec-head .eyebrow{justify-content:center} .members .sec-head .lede-2{margin-inline:auto} .pricing-toolbar{margin-top:52px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px; border:1px solid rgba(120,167,227,.24);border-radius:8px; background:linear-gradient(145deg,rgba(16,30,50,.84),rgba(9,14,23,.96)); box-shadow:0 30px 70px -52px rgba(74,133,210,.9),0 1px 0 rgba(255,255,255,.04) inset} .pricing-kicker{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2)} .pricing-toolbar p{margin-top:7px;color:var(--t3);font-size:var(--fs-xs);line-height:1.55} .pricing-segment{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:3px;border:1px solid var(--blue-hair);border-radius:7px;background:rgba(0,0,0,.28);flex:none} .pricing-segment button{min-height:42px;padding:10px 17px;border:0;border-radius:5px;background:transparent;color:var(--t3); font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s} .pricing-segment button[aria-pressed="true"]{color:#07101c;background:linear-gradient(180deg,#edf5ff,#bcd7fb);box-shadow:0 8px 22px -12px rgba(120,167,227,.95)} .pricing-segment button:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px} .tiers{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .tier{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:42px 34px;display:flex;flex-direction:column;position:relative;overflow:hidden; background:linear-gradient(162deg,rgba(26,31,42,.86) 0%,rgba(13,16,22,.94) 52%,rgba(9,11,16,.96) 100%); box-shadow:0 30px 64px -44px rgba(0,0,0,.95),0 1px 0 0 rgba(255,255,255,.06) inset; transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .5s,box-shadow .5s} .tier::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(190,214,248,.42),transparent)} .tier:hover{transform:translateY(-7px);border-color:rgba(120,167,227,.26);box-shadow:0 46px 90px -46px rgba(0,0,0,.95),0 0 0 1px rgba(120,167,227,.10)} .tier.feat{border-color:rgba(120,167,227,.34); background:linear-gradient(162deg,rgba(38,54,80,.55) 0%,rgba(17,22,32,.95) 52%,rgba(10,13,19,.97) 100%); box-shadow:0 56px 110px -56px rgba(120,167,227,.5),0 1px 0 0 rgba(255,255,255,.10) inset} .tier.feat::before{background:linear-gradient(90deg,transparent,rgba(190,214,248,.85),transparent)} .tier .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t3)} .tier.feat .tag{color:var(--blue-2)} .tier .tname{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);letter-spacing:0;color:#FBFCFE;margin-top:20px;line-height:1.25} .tier .price{margin-top:24px;display:flex;align-items:baseline;gap:8px} .tier .price .amt{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);color:#FBFCFE;letter-spacing:0;line-height:1.05} .tier .price .per{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3)} .tier .price.bespoke .amt{font-size:var(--fs-lg)} .tier .tdesc{margin-top:18px;font-size:var(--fs-sm);line-height:1.65;color:var(--t2);min-height:46px} .cohort-prices{margin-top:28px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .cohort-price{padding:20px 0;display:grid;grid-template-columns:minmax(88px,.6fr) 1.4fr;align-items:center;gap:18px} .cohort-price+.cohort-price{border-top:1px solid var(--hair)} .cohort-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)} .cohort-price .price{margin:0;justify-content:flex-end;text-align:right;flex-wrap:wrap} .cohort-price .price .amt{font-size:clamp(1.58rem,3vw,2.35rem)} .cohort-price .price .per{max-width:16ch;line-height:1.45} .tier ul{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:15px;flex:1} .tier li{font-size:var(--fs-sm);line-height:1.55;color:var(--t2);padding-left:26px;position:relative} .tier li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--blue-hair);background:radial-gradient(circle 2px at center,var(--blue) 99%,transparent)} .tier li b{color:var(--ink);font-weight:600} .tier .btn{margin-top:34px;justify-content:center} .tier.feat .btn{background:var(--ink);color:#080a0e} .members .foot{margin-top:40px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4)} .honest-price{padding-block:clamp(72px,9vw,118px)} .honest-price .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(46px,8vw,116px);align-items:start} .honest-price h2{margin-top:28px;max-width:13ch;font-size:var(--fs-2xl);font-weight:400;line-height:1.16} .honest-copy{padding-top:5px;max-width:62ch} .honest-copy>p{font-size:var(--fs-md);line-height:1.72;color:var(--t2)} .honest-copy .honest-note{margin-top:22px;padding-top:22px;border-top:1px solid var(--blue-hair);font-size:var(--fs-sm);color:var(--blue-2)} .text-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .text-link span{color:var(--blue-2);transition:transform .25s}.text-link:hover span{transform:translateX(4px)} .safety h2{max-width:17ch} .safety-grid{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:22px;overflow:hidden} .safe{background:var(--bg);padding:40px 36px;display:flex;gap:20px} .safe .ic{width:36px;height:36px;flex:none;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--blue)} .safe h3{font-family:var(--display);font-weight:500;font-size:var(--fs-md);color:#FAFBFE;line-height:1.3} .safe p{margin-top:11px;font-size:var(--fs-sm);line-height:1.65;color:var(--t3);max-width:40ch} .voices{background:linear-gradient(180deg,transparent,rgba(255,255,255,0.012),transparent)} .voice-grid{margin-top:68px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .voice{border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:38px 34px;display:flex;flex-direction:column;position:relative;overflow:hidden; background:linear-gradient(162deg,rgba(24,29,40,.82),rgba(11,14,20,.94) 60%); box-shadow:0 28px 60px -44px rgba(0,0,0,.95),0 1px 0 0 rgba(255,255,255,.05) inset; transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .5s} .voice::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(190,214,248,.34),transparent)} .voice:hover{transform:translateY(-4px);border-color:rgba(120,167,227,.22)} .voice .qmark{font-family:var(--display);font-weight:300;font-size:2.8rem;line-height:0.6;color:var(--blue-hair)} .voice blockquote{margin-top:24px;font-family:var(--display);font-weight:300;font-size:var(--fs-lg);line-height:1.58;color:#EEF0F4;letter-spacing:0;flex:1} .voice .by{margin-top:30px;display:flex;align-items:center;gap:13px;border-top:1px solid var(--hair);padding-top:24px} .voice .by .mono-av{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(120% 120% at 30% 20%,rgba(120,167,227,0.3),rgba(12,14,20,.95) 70%);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:14px;color:var(--plat)} .voice .by .who{font-size:var(--fs-sm);color:var(--ink);font-weight:500} .voice .by .who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3);margin-top:4px} .jrn-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:22px;overflow:hidden} .jrn{background:var(--bg);padding:38px 32px;display:flex;flex-direction:column;gap:16px;transition:background .4s;cursor:pointer;min-height:220px} .jrn:hover{background:linear-gradient(160deg,rgba(26,32,44,.9),rgba(12,15,21,.95));box-shadow:inset 0 1px 0 rgba(190,214,248,.22)} .jrn .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--blue-2)} .jrn h3{font-family:var(--display);font-weight:400;font-size:var(--fs-md);line-height:1.38;letter-spacing:0;color:#FAFBFE;flex:1} .jrn .read{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3)} .faq-list{margin-top:60px;border-top:1px solid var(--line)} details{border-bottom:1px solid var(--line)} summary{list-style:none;cursor:pointer;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--display);font-weight:400;font-size:var(--fs-lg);line-height:1.42;color:#FAFBFE;letter-spacing:0;transition:color .3s} summary::-webkit-details-marker{display:none} summary:hover{color:var(--blue-2)} summary .pm{flex:none;width:22px;height:22px;position:relative} summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--t3);transition:transform .35s,background .35s;top:50%;left:50%} summary .pm::before{width:14px;height:1.5px;transform:translate(-50%,-50%)} summary .pm::after{width:1.5px;height:14px;transform:translate(-50%,-50%)} details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)} details[open] summary .pm::before{background:var(--blue)} details p{padding:0 0 32px;max-width:72ch;color:var(--t2);font-size:var(--fs-body);line-height:1.75} .final{text-align:center;position:relative;overflow:hidden} .final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 40%,var(--glow),transparent 70%);z-index:0} html.js .final::before{animation:breathe 10s ease-in-out infinite} .final .wrap{position:relative;z-index:1} .final .big{font-family:var(--display);font-weight:300;font-size:var(--fs-3xl);line-height:1.18;letter-spacing:0;color:#FBFCFE;max-width:20ch;margin:0 auto;text-wrap:balance} .final .big b{font-weight:500} .final .cta-row{margin-top:48px;display:flex;justify-content:center} .final .nums{margin-top:56px;display:flex;justify-content:center;gap:clamp(32px,5vw,80px);flex-wrap:wrap} .final .num{text-align:center} .final .num .n{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);color:#FBFCFE;letter-spacing:0;line-height:1.05} .final .num .l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3);margin-top:10px} footer.site{border-top:1px solid var(--line);padding-block:clamp(64px,8vw,100px) 44px} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:44px} .foot-brand .brand{padding-left:0;margin-bottom:22px} .foot-brand p{font-size:var(--fs-sm);color:var(--t3);max-width:34ch;line-height:1.65} .foot-brand .nums{margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);line-height:2.1} .foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--t3);margin-bottom:20px} .foot-col a{display:block;font-size:var(--fs-sm);color:var(--t2);padding:6px 0;transition:color .25s} .foot-col a:hover{color:var(--ink)} .foot-bottom{margin-top:60px;padding-top:26px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .foot-bottom p{font-family:var(--mono);font-size:10.5px;letter-spacing:0.09em;color:var(--t4);text-transform:uppercase} /* Legal, trust, and account-control pages. */ .legal-hero{padding-block:clamp(76px,10vw,132px) clamp(54px,7vw,88px);border-bottom:1px solid var(--hair)} .legal-hero .wrap{max-width:var(--maxw)} .legal-hero h1{max-width:15ch;margin-top:30px;font-size:var(--fs-3xl)} .legal-hero .legal-summary{max-width:64ch;margin-top:26px;color:var(--t2);font-size:var(--fs-lg);line-height:1.72} .legal-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)} .legal-meta span{padding:7px 10px;border:1px solid var(--line);border-radius:4px} .legal-area{padding-block:clamp(58px,8vw,108px)} .legal-layout{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(200px,270px) minmax(0,920px);gap:clamp(44px,7vw,104px);align-items:start} .legal-nav{position:sticky;top:112px;border-left:1px solid var(--blue-hair);padding-left:20px} .legal-nav h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)} .legal-nav a{display:block;padding:7px 0;font-size:var(--fs-sm);line-height:1.45;color:var(--t3);transition:color .25s} .legal-nav a:first-of-type{margin-top:16px} .legal-nav a:hover,.legal-nav a[aria-current="page"]{color:var(--ink)} .legal-copy{min-width:0} .legal-copy section{padding:0 0 54px;border-bottom:1px solid var(--hair);margin-bottom:54px} .legal-copy section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .legal-copy h2{font-size:var(--fs-xl);font-weight:400;letter-spacing:0;line-height:1.3} .legal-copy h3{margin-top:30px;color:var(--ink);font-family:var(--display);font-size:var(--fs-md);font-weight:500;line-height:1.45} .legal-copy p,.legal-copy li{font-size:var(--fs-body);line-height:1.78;color:var(--t2);max-width:74ch} .legal-copy p{margin-top:18px} .legal-copy ul,.legal-copy ol{margin:18px 0 0 1.15rem;display:flex;flex-direction:column;gap:11px} .legal-copy li::marker{color:var(--blue)} .legal-copy a{color:var(--blue-2);border-bottom:1px solid var(--blue-hair)} .legal-copy strong{color:var(--ink);font-weight:600} .legal-callout{margin:26px 0 4px;padding:22px 24px;border:1px solid var(--blue-hair);border-radius:6px;background:rgba(120,167,227,.045)} .legal-callout strong{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)} .legal-callout p{margin-top:10px} .legal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .legal-contact{padding:24px;border:1px solid var(--line);border-radius:6px;background:var(--card)} .legal-contact p:first-child{margin-top:0} @media (max-width:820px){ .legal-layout{grid-template-columns:1fr;gap:42px} .legal-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px} .legal-nav h2{grid-column:1/-1} } @media (max-width:520px){ .legal-nav{grid-template-columns:1fr} .legal-callout{padding:20px} } /* article reading layout (Dating Journal essays) */ .article-hero{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(28px,4vw,48px)} .article-hero .wrap{max-width:var(--maxw)} .article-cat{font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--blue-2)} .article-hero h1{max-width:20ch;font-family:var(--display);font-weight:300;font-size:var(--fs-3xl);line-height:1.15;letter-spacing:0;color:#FCFDFF;margin-top:26px;text-wrap:balance} .article-dek{font-size:var(--fs-lg);line-height:1.55;color:var(--t2);margin-top:26px;max-width:54ch} .article-meta{margin-top:32px;display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--t3)} .article-meta .d{width:3px;height:3px;border-radius:50%;background:var(--t4)} .article-body{padding-top:clamp(24px,3vw,44px);padding-bottom:var(--sp);border-top:1px solid var(--hair)} .article-body .wrap{max-width:var(--maxw)} .article-body h2{max-width:34ch;font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1.35;letter-spacing:0;color:#FAFBFE;margin-top:58px} .article-body section:first-child h2{margin-top:0} .article-body p{font-size:var(--fs-body);line-height:1.8;color:var(--t2);margin-top:22px;max-width:68ch} .article-body p b,.article-body p strong{color:var(--ink);font-weight:600} .article-body p em,.article-body .em{font-style:normal;color:var(--blue-2)} .pullquote{margin:64px 0 8px;max-width:44ch;padding-left:30px;border-left:2px solid var(--blue-hair);font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.45;letter-spacing:0;color:#EEF0F4;text-wrap:balance} .article-foot{margin-top:76px;padding-top:44px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .article-foot .back{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--t3)} .article-foot .back:hover{color:var(--ink)} /* Join: short, private lead capture with a calm editorial rhythm. */ .join-hero{min-height:min(780px,calc(100svh - 122px));display:flex;align-items:center;padding-block:clamp(82px,10vw,148px);overflow:hidden} .join-hero::before{content:"";position:absolute;inset:8% 0 auto 0;height:74%;pointer-events:none;background:radial-gradient(42% 54% at 66% 44%,rgba(120,167,227,.09),transparent 74%)} .join-layout{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.78fr);gap:clamp(72px,10vw,154px);align-items:center} .join-copy{max-width:610px} .join-copy h1{margin-top:32px;max-width:11ch} .join-lede{margin-top:30px;max-width:47ch;color:var(--t2);font-size:var(--fs-md);line-height:1.65} .join-principles{margin-top:56px;border-top:1px solid var(--line)} .join-principles>div{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--hair);align-items:center} .join-principles span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blue)} .join-principles p{font-size:var(--fs-sm);color:var(--t3)} .join-panel{border:1px solid var(--blue-hair);border-radius:8px;padding:clamp(28px,4vw,48px);background:linear-gradient(155deg,rgba(16,24,36,.92),rgba(8,11,16,.98) 62%);box-shadow:0 32px 90px -58px rgba(120,167,227,.7),inset 0 1px rgba(255,255,255,.05)} .join-panel-head{display:flex;align-items:center;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line)} .join-panel-head img{width:58px;height:42px;flex:none;object-fit:contain;object-position:center} .join-panel-head .eyebrow::before{display:none} .join-panel-head p{margin-top:5px;font-size:var(--fs-sm);color:var(--t3)} .join-form{margin-top:30px;display:grid;gap:22px} .field{position:relative} .field label{display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)} .field input{width:100%;height:54px;border:1px solid var(--line-2);border-radius:6px;background:rgba(0,0,0,.2);color:var(--ink);font:500 16px/1.2 var(--sans);padding:0 16px;outline:none;transition:border-color .25s,background .25s,box-shadow .25s} .field input::placeholder{color:var(--t4);font-weight:400} .field input:hover{border-color:rgba(120,167,227,.28)} .field input:focus{border-color:var(--blue);background:rgba(120,167,227,.035);box-shadow:0 0 0 3px rgba(120,167,227,.08)} .field input[aria-invalid="true"]{border-color:#D98D93} .field-hint,.field-error{margin-top:7px;min-height:16px;font-size:12px;line-height:1.35} .field-hint{color:var(--t4)} .field-error{color:#E7A3A8} .field:has(.field-error:not(:empty)) .field-hint{display:none} .join-submit{width:100%;min-height:54px;justify-content:space-between;margin-top:4px} .join-submit:disabled{cursor:wait;opacity:.62;transform:none;box-shadow:none} .join-consent{font-size:12px;line-height:1.55;color:var(--t4)} .join-consent a{color:var(--t2);border-bottom:1px solid var(--line-2)} .form-status{display:none;border:1px solid var(--blue-hair);border-radius:6px;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--blue-2);background:rgba(120,167,227,.05)} .form-status.is-visible{display:block} .form-status.is-error{color:#E7A3A8;border-color:rgba(217,141,147,.3);background:rgba(217,141,147,.05)} .join-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .join-cities{padding-block:clamp(86px,10vw,140px)} .join-cities-head{display:grid;grid-template-columns:.65fr 1fr 1.2fr;gap:clamp(28px,5vw,76px);align-items:start} .join-cities-head h2{font-size:var(--fs-xl);font-weight:400} .join-cities-head p{max-width:48ch;color:var(--t3);font-size:var(--fs-sm);line-height:1.7} .city-line{margin-top:58px;padding-block:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .city-line span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)} @media (max-width:920px){ .join-layout{grid-template-columns:1fr;gap:64px} .join-copy{max-width:660px} .join-panel{max-width:660px;width:100%} .join-cities-head{grid-template-columns:1fr 1fr}.join-cities-head p{grid-column:1/-1} } @media (max-width:620px){ .join-hero{align-items:flex-start;padding-block:68px 92px} .join-layout{gap:48px} .join-copy h1{margin-top:26px} .join-lede{margin-top:22px} .join-principles{margin-top:38px} .join-panel{padding:26px 20px} .join-panel-head img{width:50px;height:36px} .join-cities-head{grid-template-columns:1fr;gap:18px}.join-cities-head p{grid-column:auto} .city-line{grid-template-columns:repeat(2,1fr);margin-top:38px} } /* fine film-grain — premium matte tactility, site-wide */ body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.04;mix-blend-mode:overlay;background-size:140px 140px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* wide laptops & large monitors — let the layout breathe into the width */ @media (min-width:1700px){ :root{ --maxw:1600px } } @media (min-width:2100px){ :root{ --maxw:1720px } } @media (max-width:1000px){ .hero .wrap{grid-template-columns:1fr} .pair{max-width:440px} .compat-grid{grid-template-columns:repeat(2,1fr)} .cities{grid-template-columns:repeat(3,1fr)} .tiers,.voice-grid,.jrn-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .cohort .headline{grid-template-columns:1fr;gap:24px} .foot-top{grid-template-columns:1fr 1fr;gap:36px} .foot-brand{grid-column:1/-1} } @media (max-width:720px){ :root{--sp:clamp(76px,15vw,116px)} .nav-cta .btn-ghost{display:none} .steps,.compat-grid,.safety-grid{grid-template-columns:1fr} .cities{grid-template-columns:repeat(2,1fr)} .ledger .head{display:none} .ledger .cell{padding:18px 20px;font-size:14px} .foot-top{grid-template-columns:1fr} } /* ── Atlas: real equirectangular world map, cities at true coordinates ── */ .atlas-wrap{margin-top:72px;position:relative} .atlas-wrap::before{content:"";position:absolute;inset:-8% -4%;pointer-events:none; background:radial-gradient(46% 52% at 50% 48%,rgba(120,167,227,.11),transparent 70%);filter:blur(14px)} .atlas{position:relative;z-index:1;width:100%;height:auto;display:block} .atlas .land circle{fill:#39404F} .atlas .pins .pin{stroke:#07080a;stroke-width:1.6} .atlas .pins .pin.on{fill:#8FBAF0;filter:drop-shadow(0 0 7px rgba(120,167,227,.95))} .atlas .pins .pin.soon{fill:#6E7482} html.js .atlas .pins .pin.on{animation:pinPulse 3.2s ease-in-out infinite} .atlas .pins .pin.on:nth-of-type(2n){animation-delay:.7s} .atlas .pins .pin.on:nth-of-type(3n){animation-delay:1.4s} @keyframes pinPulse{0%,100%{opacity:1}50%{opacity:.55}} @media (prefers-reduced-motion:reduce){ html.js .atlas .pins .pin.on{animation:none} } .atlas-key{display:flex;gap:26px;justify-content:center;margin-top:26px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)} .atlas-key span{display:inline-flex;align-items:center;gap:9px} .atlas-key i{width:6px;height:6px;border-radius:50%} .atlas-key .k-on{background:#8FBAF0;box-shadow:0 0 7px rgba(120,167,227,.9)} .atlas-key .k-soon{background:#6E7482} @media (max-width:720px){ .atlas-wrap{margin-top:48px} .atlas-key{gap:18px} } /* ── Homepage highlights: the app's headline features, briefly ── */ .hl-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .hl{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:34px 30px 28px; border:1px solid rgba(255,255,255,.08);border-radius:22px; background:linear-gradient(162deg,rgba(24,29,40,.82),rgba(11,14,20,.94) 62%); box-shadow:0 26px 56px -44px rgba(0,0,0,.95),0 1px 0 0 rgba(255,255,255,.05) inset; transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .5s,box-shadow .5s} .hl::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(190,214,248,.34),transparent);opacity:0;transition:opacity .5s} .hl:hover{transform:translateY(-5px);border-color:rgba(120,167,227,.26); box-shadow:0 40px 78px -46px rgba(0,0,0,.95),0 0 0 1px rgba(120,167,227,.10)} .hl:hover::before{opacity:1} .hl-ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid var(--blue-hair);border-radius:12px;color:var(--blue-2); background:rgba(120,167,227,.07);transition:background .5s,border-color .5s} .hl-ic svg{width:20px;height:20px} .hl:hover .hl-ic{background:rgba(120,167,227,.14);border-color:rgba(120,167,227,.42)} .hl h3{margin-top:24px;font-family:var(--display);font-weight:500;font-size:var(--fs-md);letter-spacing:0;color:#FBFCFE;line-height:1.38} .hl p{margin-top:12px;font-size:var(--fs-sm);line-height:1.62;color:var(--t2);flex:1} .hl-go{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);transition:color .4s} .hl-go em{font-style:normal;display:inline-block;transition:transform .4s} .hl:hover .hl-go{color:var(--blue-2)} .hl:hover .hl-go em{transform:translateX(4px)} @media (max-width:1000px){ .hl-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .hl-grid{grid-template-columns:1fr;margin-top:44px} } /* ══ MOBILE ═══════════════════════════════════════════════════════════════ */ /* hamburger — only when JS can drive it; without JS the links stay visible */ .menu-toggle{display:none;width:46px;height:46px;flex:none;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:13px;background:rgba(255,255,255,.02); color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent} .menu-toggle span{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:background .25s} .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px; background:currentColor;transition:transform .3s cubic-bezier(.19,1,.22,1)} .menu-toggle span::before{top:-6px} .menu-toggle span::after{top:6px} html.nav-open .menu-toggle span{background:transparent} html.nav-open .menu-toggle span::before{transform:translateY(6px) rotate(45deg)} html.nav-open .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:900px){ html.js .menu-toggle{display:inline-flex} /* slide-down drawer */ html.js .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0; padding:6px var(--gutter) 22px;background:rgba(8,10,14,.975); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.9); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .32s ease,transform .32s cubic-bezier(.19,1,.22,1),visibility .32s} html.js.nav-open .navlinks{opacity:1;visibility:visible;transform:none} html.js .navlinks a{padding:17px 2px;border-bottom:1px solid var(--hair);font-size:1.06rem;min-height:52px;display:flex;align-items:center} html.js .navlinks a::after{display:none} html.js .navlinks a:last-child{border-bottom:none} /* no-JS fallback: wrap the links instead of hiding them */ html:not(.js) .navlinks{flex-wrap:wrap;gap:14px 20px;justify-content:center;padding:10px 0 4px} html:not(.js) nav.site .wrap{flex-wrap:wrap;padding-bottom:8px} } @media (max-width:720px){ :root{ --fs-xs:0.76rem; --fs-sm:0.86rem; --fs-body:0.96rem; --fs-md:1rem; --fs-lg:1.08rem; --fs-xl:1.2rem; --fs-2xl:1.52rem; --fs-3xl:1.86rem; --fs-4xl:2.1rem; } /* comfortable tap targets everywhere */ .btn{min-height:46px;padding:14px 22px} .hero-copy .cta-row .btn{flex:1 1 100%;justify-content:center} .foot-col a{padding:11px 0} .announce .wrap{min-height:auto;padding-block:10px} .announce p{line-height:1.7} /* nav trimming */ nav.site .wrap{min-height:66px;gap:12px} .brand{font-size:16px} .brand .wm{letter-spacing:.3em;padding-left:.3em} .logo-mark{width:30px;height:22px} .nav-cta .btn-primary{padding:12px 16px;font-size:10.5px} /* stacked reading columns */ .cohort .headline{grid-template-columns:1fr} .hero .wrap{gap:44px} .pair{max-width:100%} .intro-card{padding:18px 16px;gap:15px;border-radius:20px} .portrait{width:66px;height:82px;border-radius:15px} .portrait span{font-size:32px} .intro-info .nm{font-size:19px} /* atlas: larger pins so they stay tappable/legible when scaled down */ .atlas .pins .pin.on{r:7} .atlas .pins .pin.soon{r:5} .atlas-key{flex-wrap:wrap;row-gap:10px} /* legal + article */ .legal-nav{border-left:none;border-top:1px solid var(--blue-hair);padding-left:0;padding-top:22px} .article-body h2{margin-top:44px} .pullquote{margin:44px 0 8px;padding-left:20px} /* tables/ledger stack cleanly */ .ledger .row{grid-template-columns:1fr} .ledger .cell{padding:15px 18px} .ledger .cell.them{padding-bottom:4px;border-left:none} .ledger .cell.us{border-left:none;border-top:none} .pricing-toolbar{align-items:stretch;flex-direction:column} .pricing-segment{width:100%} .honest-price .wrap{grid-template-columns:1fr;gap:34px} .honest-price h2{max-width:16ch} } @media (max-width:420px){ nav.site .wrap{gap:10px} .brand{gap:8px} .nav-cta .btn-primary{padding:11px 13px;gap:6px;font-size:0} .nav-cta .btn-primary::before{content:"Apply";font-family:var(--mono);font-size:10.5px;letter-spacing:.14em} .nav-cta .btn-primary .arr{font-size:12px} .cities{grid-template-columns:1fr} .final .nums{gap:26px} .tier{padding:32px 24px} .cohort-price{grid-template-columns:1fr;gap:10px} .cohort-price .price{justify-content:flex-start;text-align:left} .hl{padding:28px 22px 24px} .legal-meta{gap:10px} }