/* Page styles — join.html
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

:root{--paper:#faf9f6;--paper-2:#f2f0ea;--ink:#111110;--ink-soft:#3d3c38;--ink-mute:#6f6d66;--line:#dcd9d0;--disp:'Space Mono',ui-monospace,monospace;--body:'Manrope',sans-serif;--mono:'IBM Plex Mono',monospace;--max:1080px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.ffsym{height:.72em;width:auto;fill:currentColor;display:inline-block;vertical-align:baseline}
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--ink);border-bottom:1px solid #2e2d2a}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.logo-link .ffsym{height:15px}
.wordmark{font-family:'Space Mono',monospace;font-weight:700;font-size:16px;letter-spacing:-0.03em;text-transform:uppercase;color:var(--paper)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#c9c7bf}
.nav-links a:hover{color:var(--paper)}
.nav-links a.on{color:var(--paper);border-bottom:1.5px solid var(--paper)}
.nav-cta{border:1.5px solid var(--paper);padding:8px 16px;border-radius:2px;font-weight:600;color:var(--paper)!important}
@media(max-width:960px){.nav-links a:not(.nav-cta){display:none}}
/* Resting state only — hover, active and the transition list are the button
   system in site.css. */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:2px;border:1.5px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{color:var(--ink)}
header{min-height:70svh;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--max);margin:0 auto;padding:140px 24px 70px;width:100%}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px;display:flex;align-items:center;gap:11px}
.eyebrow .ffsym{color:var(--ink)}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.8vw,62px);line-height:1.06;letter-spacing:-0.024em;max-width:20ch}
h1 .turn{display:block}
.hero-sub{max-width:58ch;margin-top:26px;font-size:clamp(17px,2vw,19.5px);color:var(--ink-soft)}
.hero-sub strong{font-weight:700;color:var(--ink)}
.hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
section{padding:80px 0;border-top:1px solid var(--line)}
.ch-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;display:flex;align-items:center;gap:11px}
.ch-eyebrow .ffsym{color:var(--ink)}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.8vw,40px);line-height:1.12;letter-spacing:-0.02em;max-width:26ch;margin-bottom:20px}
.lede{font-size:clamp(16.5px,1.85vw,19px);color:var(--ink-soft);max-width:64ch}
.lede+.lede{margin-top:14px}
.lede strong{color:var(--ink);font-weight:700}
.pull{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-0.015em;border-left:1.5px solid var(--ink);padding-left:22px;margin:36px 0 0;max-width:36ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
@media(max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid4{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--paper-2);padding:26px 24px;border-radius:2px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:10px}
.card h3{font-family:var(--head);font-weight:600;font-size:17.5px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--ink-soft)}
.dark{background:var(--ink);color:var(--paper)}
.dark .ch-eyebrow{color:#9b9992}.dark .ch-eyebrow .ffsym{color:var(--paper)}
.dark h2{color:var(--paper)}.dark .lede{color:#c9c7bf}.dark .lede strong{color:var(--paper)}
.seats{margin-top:42px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seat{display:grid;grid-template-columns:250px 1fr;border-bottom:1px solid var(--line);background:var(--paper)}
.seat:last-child{border-bottom:none}
@media(max-width:820px){.seat{grid-template-columns:1fr}}
.seat .sn{padding:24px 24px;background:var(--paper-2)}
.seat .sn h3{font-family:var(--head);font-weight:600;font-size:17.5px}
.seat .sn .sk{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-top:5px}
.seat .sb{padding:24px 26px}
/* The description fills its cell. This line used to ask for 64ch and never got
   it: site.css:183 declares `.card p,.role p,.seat .sb p{max-width:52ch}` at
   the same specificity and loads after this file, so it won and the text ran
   to 52ch inside a ~778px column -- the wide right gutter reported in review.
   `.seats .seat .sb p` outranks it, so the cap actually applies now.

   Noted, not silently: with the cap off the measure is roughly 105 characters
   at 1440, well past the 45-75 that reads comfortably. It is what "full width
   of the box" means here, and justification plus hyphenate-limit-chars keeps
   the rag even, but the honest fix if it reads long is a wider .sn column
   rather than putting a cap back. */
.seats .seat .sb p{font-size:14.5px;color:var(--ink-soft);max-width:none}
footer{border-top:1px solid var(--line);padding:38px 0 50px}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .legal{font-family:var(--mono);font-size:12px;color:var(--ink-mute);max-width:62ch}
footer .logo-link{color:var(--ink)}footer .wordmark{color:var(--ink)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* The section closer under the two Founder-DNA cards. It was capped at 36ch
   inside a 1080px wrap, so roughly 60% of its row was empty and its 36px top
   margin read as a caption hanging off the card above rather than a statement
   closing the section. Wider measure, more air above; the left rule and the
   display face stay. Needs .pull.pull-closer rather than a bare .pull, because
   site.css:323 re-declares max-width on .pull and loads after this file. */
.pull.pull-closer{max-width:52ch;margin-top:64px}