/*
  &Truth — Version 8 (Figma canvas "Version 8 - 26th October").

  Every size, color, and offset below comes from the Figma frames. The frames are 1440px wide
  with 96px gutters (1248px content); grid tracks are written as `fr` values that sum to 1248, so
  they resolve to the exact Figma pixel widths at full size and scale on narrower screens. The
  frames are desktop only; the layout below 800px follows the same type scale, stacked.

  Colors are the "Color Palette — Website" tokens and type is the "Type Styles — Review" scale
  (Instrument Sans). Figma's "Auto" line height for Instrument Sans is its natural line height,
  (970 + 250) / 1000 = 1.22, rounded to whole pixels: 10→12, 12→15, 24→29, 32→39, 36→44.
*/

@font-face{font-family:'Instrument Sans';src:url('/static/fonts/instrument-sans.woff2?v=d22bca04a2') format('woff2');font-weight:400 700;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Sans';src:url('/static/fonts/instrument-sans-italic.woff2?v=29afa3ea52') format('woff2');font-weight:400 700;font-style:italic;font-display:block}
@font-face{font-family:'Work Sans';src:url('/static/fonts/work-sans.woff2?v=dcd1f23348') format('woff2');font-weight:400 600;font-style:normal;font-display:block}

:root{
  --page:#000000;
  --ink:#040213;
  --surface:#2E1461;
  --text:#FFFFFF;
  --detail:#EBEBEB;
  /* October 28: the cyan and turquoise accents became --blue; buttons and icons that were cyan are --border. */
  --blue:#0085F9;
  --pink:#FF2277;
  --border:#D9D9D9;
  --bio-text:#FCFCFC;
  --video:#090E17;
  --gutter:clamp(24px,6.6667vw,96px);
  --pad:max(var(--gutter),calc((100% - 1248px) / 2));
  color-scheme:dark;
  /* Figma LINE nodes take no space in auto layout, so dividers are drawn as zero-height
     backgrounds. 0.5px is one device pixel on 2x screens. */
  --hair:.5px;
  --w50:100%;
  --w25:50%;
}
@media (max-resolution:1.49dppx){:root{--hair:1px;--w50:50%;--w25:25%}}

*,*:before,*:after{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:109px}
body{margin:0;min-width:320px;background:var(--page);color:var(--text);font-family:'Instrument Sans',Arial,sans-serif;font-weight:400;font-size:16px;line-height:24px;letter-spacing:-.02em;font-synthesis:none;font-kerning:normal}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3{font-weight:400}
/* Verso wraps directive text in <p>; inside headings it must not add a box. */
:is(blockquote,.hero-lede,.mission-statement,.home-roundtable-lede,.page-lede,.article-dek,.proof-description,.proof-guests,.signup-copy)>p{display:contents}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:1px solid var(--blue);outline-offset:3px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:30;padding:8px 14px;background:var(--blue);color:var(--text)}
.skip-link:focus{top:12px}
/* The page glows overhang the frame's sides and run under the footer; Figma's frames clip them, and so does main. */
main{position:relative;z-index:0;isolation:isolate;overflow:clip}
.hairline{--line:color-mix(in srgb,var(--detail) var(--w50),transparent)}

/* Link underline on hover, as on Version 7. */
.nav-link:hover,.footer-col a:hover,.social:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid transparent;background:none;transition:background-color .2s,color .2s,border-color .2s}
/* Header "Sign Up" (Figma "Frame 24", 88 × 36, #0085F9 with white text). Hover inverts, as the Version 7 buttons do. */
.btn-fill{background:var(--blue);border-color:var(--blue);color:var(--text)}
.btn-fill:hover{background:transparent;color:var(--blue)}
/* Outline buttons: white on the home mission, #D9D9D9 on forms. */
.btn-outline{border-color:currentColor}
.btn-outline:hover{background:var(--blue);border-color:var(--blue);color:var(--text)}
.btn-submit{color:var(--border)}
.btn-submit:hover{background:var(--blue);border-color:var(--blue);color:var(--text)}
.btn-submit:disabled{opacity:.6;cursor:progress}

/* ---------------------------------------------------------------- Progressive blur
   Figma's progressive background blur ramps the radius linearly from 0 to --pb-max (CSS blur is
   half the Figma radius) along --pb-dir. Layer k is masked in from (k-1)/8 to k/8 and stays on, and
   each layer blurs what the layers below already blurred, so layer k's blur is
   --pb-max · √(2k−1) / 8: the stacked blurs then add up to --pb-max · k/8 at k/8. The fill goes on
   top, as in Figma. The layers are siblings: a filter or mask on .pblur would hide the backdrop. */
.pblur{position:absolute;inset:0;pointer-events:none}
.pblur>i,.pblur::after{position:absolute;inset:0}
.pblur::after{content:"";background:var(--pb-fill)}
.pblur>i{--a:calc((var(--k) - 1) / 8 * 100%);--b:calc(var(--k) / 8 * 100%);-webkit-backdrop-filter:blur(calc(var(--pb-max) * var(--s)));backdrop-filter:blur(calc(var(--pb-max) * var(--s)));-webkit-mask-image:linear-gradient(var(--pb-dir),transparent var(--a),#000 var(--b));mask-image:linear-gradient(var(--pb-dir),transparent var(--a),#000 var(--b))}
.pblur>i:nth-child(1){--k:1;--s:.125}.pblur>i:nth-child(2){--k:2;--s:.2165}.pblur>i:nth-child(3){--k:3;--s:.2795}.pblur>i:nth-child(4){--k:4;--s:.3307}
.pblur>i:nth-child(5){--k:5;--s:.375}.pblur>i:nth-child(6){--k:6;--s:.4146}.pblur>i:nth-child(7){--k:7;--s:.4507}.pblur>i:nth-child(8){--k:8;--s:.4841}

/* ---------------------------------------------------------------- Header (Figma "Header / Navigation", 1440 × 109) */
/* The header stays fixed at the top. Once the page scrolls (.is-scrolled, from v8.js), an 85% black → clear fade comes in
   under it so it reads over the content; at the top it is the Figma header. Anchors scroll to below it (scroll-padding-top). */
.site-header{position:fixed;z-index:10;top:0;left:0;right:0;height:109px;padding:25px var(--pad) 0;display:flex;align-items:flex-start}
.site-header:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0));opacity:0;transition:opacity .3s ease;pointer-events:none}
.site-header.is-scrolled:before{opacity:1}
/* Progressive background blur 30 at the top → 0 at the bottom, under a 20% black → clear fill. */
.header-blur{--pb-max:15px;--pb-dir:to top;--pb-fill:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));z-index:-1}
.brand{display:block;width:139.264px;color:var(--text)}
.brand .wordmark{width:139.264px;height:34.695px}
.site-nav{display:flex;align-items:center;gap:25px;height:36px;margin-left:auto}
/* Each link keeps its Figma text box width (centered), so the 25px gaps land exactly. */
.nav-link{flex:none;font-size:16px;line-height:24px;text-align:center;white-space:nowrap}
.nav-link:nth-child(1){width:61px}.nav-link:nth-child(2){width:40px}.nav-link:nth-child(3){width:71px}.nav-link:nth-child(4){width:33px}.nav-link:nth-child(5){width:56px}
.btn-signup{width:88px;height:36px;margin-left:25px;padding:0;font-size:16px;line-height:24px}

/* The Sign Up frame's header fade is 1% black, not 20%. */
body:has(.signup-page) .header-blur{--pb-fill:linear-gradient(rgba(0,0,0,.01),rgba(0,0,0,0))}

/* ---------------------------------------------------------------- Shared page intro (title left, lede at x 638) */
.page{position:relative}
.page-intro{display:grid;grid-template-columns:542fr 706fr;align-items:start;min-height:calc(188px + var(--ih,0px));padding:188px var(--pad) 0}
.page-title{grid-column:1;max-width:473px;font-size:45px;line-height:45px;letter-spacing:-.03em}
.page-lede{grid-column:2;max-width:706px;padding-top:var(--lede-y,0px);font-size:36px;line-height:44px;letter-spacing:-.02em}
/* 404: the title and lede in the page intro, with the home button under the lede. */
.not-found-page{min-height:calc(100vh - 480px)}
.not-found-body{grid-column:2}
.not-found-body .btn-mission{margin-top:42px}

/* ---------------------------------------------------------------- Home: hero (the full window) */
/* The artwork fills the window, with the copy at the bottom of the right column; it scrolls away with the page. */
.hero{position:relative;z-index:0;height:100vh;height:100svh;min-height:640px;display:grid;grid-template-columns:598fr 650fr;align-content:end;padding:0 var(--pad) max(112px,14vh);overflow:hidden;background:#000}
.hero-image{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.hero-copy{grid-column:2;display:flex;flex-direction:column;gap:25px;max-width:533px}
.hero-title{font-size:63px;line-height:63px;letter-spacing:0}
.hero-lede{max-width:475px;font-size:16px;line-height:24px}


/* ---------------------------------------------------------------- Home: page background */
/* Figma "Background / Mission Gradient" on the home frame (October 29): a mirrored radial gradient (#0085F9 at 50% → black)
   under the whole page. The hero and the video cover it; it shows behind the mission band and the sign-up section. */
body:has(.hero){background:var(--page) url('/static/v8/bg-home.svg?v=e9f466b61f') 0 0/100% 100% no-repeat}

/* ---------------------------------------------------------------- Home: mission (Figma "Frame 38", 1440 × 553) */
.home-mission{position:relative;z-index:0;display:grid;grid-template-columns:598fr 638fr 12fr;align-items:start;padding:61px var(--pad) 96px}
.home-mission-title{max-width:384px;font-size:70px;line-height:70px;letter-spacing:0}
.home-mission-main{grid-column:2}
.mission-statement{font-size:32px;line-height:39px;letter-spacing:-.02em}
/* Figma "Frame 27": 206 × 42 at x 692, white 1px stroke, 20px text. */
.home-mission-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:42px}
.btn-mission{width:206px;height:42px;margin:0;padding:0 16px;color:var(--text);font-size:20px;line-height:20px;letter-spacing:-.04em}

/* ---------------------------------------------------------------- Home: roundtable */
/* The title, the 16:9 panel across the page, then the text in the right column, as in "Our Mission". The guests'
   affiliations are numbered notes under the text, a size smaller and fully legible (October 29: they must be plainly
   visible). */
.home-roundtable{position:relative;display:grid;grid-template-columns:598fr 650fr;align-items:start;padding:61px var(--pad) 120px}
.home-roundtable .video-panel{grid-column:1/-1;margin-top:48px}
.home-roundtable-text{grid-column:2;margin-top:40px}
.home-roundtable-lede{color:var(--text);font-size:24px;line-height:32px;letter-spacing:-.01em}
.home-roundtable-lede .note-ref{margin-left:2px;font-size:14px;line-height:0;vertical-align:super;letter-spacing:0}
.home-roundtable-lede .note-ref a{color:var(--blue)}
.roundtable-notes{margin-top:24px;padding-top:16px;color:var(--detail);font-size:16px;line-height:24px;letter-spacing:0;list-style:none;counter-reset:note;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.roundtable-notes li{display:flex;align-items:baseline;gap:12px;counter-increment:note;scroll-margin-top:120px}
.roundtable-notes li+li{margin-top:6px}
.roundtable-notes li:before{content:counter(note);flex:none;width:12px;color:var(--blue)}
.roundtable-notes li:target{color:var(--text)}

/* Video panels link to YouTube; v8.js replaces the link with the player (.video-frame) on click. */
.video-link{position:absolute;z-index:2;inset:0}
.video-link:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.video-frame{position:absolute;z-index:3;inset:0;width:100%;height:100%;border:0;background:#000}

/* ---------------------------------------------------------------- Sign up section and form */
.signup{padding:24px calc(var(--pad) + 16px) 72px max(24px,calc(var(--pad) - 16px))}
.signup-title{font-size:50px;line-height:50px;letter-spacing:-.03em}
.signup-body{display:grid;grid-template-columns:416fr 203fr 629fr;align-items:start;margin-top:48px}
.signup-copy{grid-column:1;max-width:416px}
.signup-form{grid-column:3}

.form{display:flex;flex-direction:column;gap:16px}
.field{display:block;width:100%;height:55px;margin:0;padding:0 18px;border:1.25px solid var(--border);border-radius:0;background:transparent;color:var(--text);font-size:16px;line-height:24px;letter-spacing:-.02em;outline-offset:-1px;-webkit-appearance:none;appearance:none}
.field::placeholder{color:var(--text);opacity:1}
.field[aria-invalid="true"]{border-color:var(--pink)}
.field:focus-visible{outline:1px solid var(--blue)}
.btn-submit{align-self:flex-start;width:95px;height:36px;padding:0;font-size:16px;line-height:24px}
.form-status{display:none;font-size:16px;line-height:24px;color:var(--blue)}
.form-status.is-visible{display:block}
.form-privacy{max-width:420px;color:var(--detail);font-size:12px;line-height:18px;letter-spacing:0}
.form-privacy a,.legal-links a{text-decoration:underline;text-decoration-color:var(--text);text-underline-offset:3px;text-decoration-thickness:1px}
.form-privacy a:hover,.legal-links a:hover{color:var(--blue);text-decoration-color:currentColor}


/* Consent row (Figma "Checkbox Row"): 32px box, 12px gap, 10px SemiBold text. */
.consent{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:32px;cursor:pointer}
.consent-input{position:absolute;width:32px;height:32px;margin:0;opacity:0;cursor:pointer}
.checkbox{flex:none;width:32px;height:32px;border:1.25px solid var(--border)}
.consent-input:checked+.checkbox{background:linear-gradient(var(--border),var(--border)) center/14px 14px no-repeat}
.consent-input:focus-visible+.checkbox{outline:1px solid var(--blue);outline-offset:3px}
.consent-input[aria-invalid="true"]+.checkbox{border-color:var(--pink)}
.consent-text{max-width:299px;padding-top:4px;font-size:10px;line-height:12px;font-weight:600;letter-spacing:-.02em}

/* ---------------------------------------------------------------- Footer (Figma "Footer / Global", 1440 × 480) */
/* The footer covers the page glows that run past the end of main, as in the frames. */
.site-footer{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(0,423px) auto;grid-template-rows:307px auto;height:480px;padding:60px max(24px,calc(var(--pad) - 32px)) 0 max(24px,calc(var(--pad) - 16px));background:var(--page)}
.footer-mark{display:block;width:203.326px;color:var(--text)}
.footer-mark .wordmark{width:203.326px;height:50.655px}
.footer-statement{margin-top:15.345px;font-size:16px;line-height:24px}
.socials{display:flex;align-items:center;gap:25px;margin:63px 0 0 -1px}
.social{display:block;color:var(--text)}
.social .social-icon{width:33px;height:33px}
/* The sign-up link sits in the footer (KP feedback, October 27), its left edge on the pages' 542/706 content column at 1440. */
.footer-signup{margin:20px 63px 0 0}
.footer-signup-copy{font-size:16px;line-height:24px}
.btn-footer-signup{height:36px;margin-top:24px;padding:0 16px;color:var(--text);font-size:16px;line-height:24px}
body:has(.signup-page) .footer-signup{visibility:hidden}
.footer-nav{display:flex;gap:48.28px;margin:20px 32px 0 0}
.footer-col{width:117.36px}
.footer-heading{font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.02em}
.footer-col ul{margin-top:26px}
.footer-col li{font-size:16px;line-height:24px}
.footer-legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;padding-top:17px;--line:color-mix(in srgb,var(--text) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) 0 0/100% var(--hair) no-repeat}
.copyright{margin-left:-1px}

/* ---------------------------------------------------------------- Mission */
/* Figma "Background / Mission Gradient" (October 29): a mirrored radial gradient (#0085F9 at 50% → black) from y 1850,
   under a #2E1461 → transparent glow from the top right, drawn from their paint transforms. It covers the whole frame and
   stretches to the page; the black footer covers the bottom, as in the frame. */
body:has(.mission-page){background:var(--page) url('/static/v8/bg-mission.svg?v=898907bb5f') 0 0/100% 100% no-repeat}

/* The October 29 purple glows (Figma "Background / Mission Gradient", #2E1461 → transparent, frame y 0–4373) on Team,
   the article, and Sign Up. They stay at the top and scale with the page width, as in the frames, whose height they keep
   whether a bio is open or not; the footer covers what runs past main. */
body:has(.team-page){background:var(--page) url('/static/v8/bg-team.svg?v=409f702787') 0 0/100% auto no-repeat}
body:has(.article-page){background:var(--page) url('/static/v8/bg-article.svg?v=7fdf5c96a4') 0 0/100% auto no-repeat}
body:has(.signup-page){background:var(--page) url('/static/v8/bg-signup.svg?v=daddee8e49') 0 0/100% auto no-repeat}

/* "Rectangle 148" glows (1528 × 2214 at x −44): on Careers from y 182, and on the article at the bottom of its 2970px frame,
   where since October 29 it fades to transparent over the purple glow. They scale with the page width, like the design canvas; margin percentages are of the width. */
.careers-page:before,.article-page:before{content:"";position:absolute;z-index:-1;top:0;left:calc(-44 / 1440 * 100%);width:calc(1528 / 1440 * 100%);aspect-ratio:1528/2214;margin-top:calc(var(--glow-y) / 1440 * 100%);background:var(--glow) 0 0/100% 100% no-repeat;pointer-events:none}
.careers-page:before{--glow-y:182;--glow:url('/static/v8/glow-careers.svg?v=8a28b4ad2e')}
/* The article glow ends at the frame's bottom edge, 480px under the footer, so it stays at the bottom however long the article runs. */
.article-page:before{top:auto;bottom:0;margin:0 0 calc(-480 / 1440 * 100%);--glow:url('/static/v8/glow-article.svg?v=ed1638d520')}
/* A divider above "Our Mission", 40px over the title like the chapter dividers (KP feedback, October 27). */
.mission-page .page-intro{--ih:0px;--line:color-mix(in srgb,var(--detail) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) center 148px/calc(100% - 2 * var(--pad)) var(--hair) no-repeat}
.chapter{display:grid;grid-template-columns:542fr 706fr;align-items:start;margin:120px var(--pad) 0;padding-top:var(--pt);--line:color-mix(in srgb,var(--detail) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) 0 0/100% var(--hair) no-repeat}
.page-intro+.chapter{margin-top:0;background:none}
.chapter-title{max-width:calc(var(--tw) * 1px);font-size:36px;line-height:44px;letter-spacing:-.02em}
/* Sections are sized by their Figma text boxes. The first box is 22px shorter than its text (Figma
   clips the last line); the text stays visible here and overflows into the gap below. */
/* The frame's text height is a minimum: longer copy, or a narrower column, grows the chapter instead of running into the next. */
.chapter-text{grid-column:2;max-width:calc(var(--bw) * 1px);min-height:var(--h)}
.chapter-text>p+p,.chapter-text>p+div,.chapter-text>div+p{margin-top:24px}
/* The closing section sits 15px left of the others and has a fainter divider. */
.chapter-closing{grid-template-columns:527fr 721fr;--line:color-mix(in srgb,var(--text) var(--w25),transparent)}
.chapter-closing .chapter-text>.gap-desktop{margin-top:48px}
.chapter-closing em{font-style:italic}
/* Figma places these 76px below the closing text, at x 621. The links size to their labels with even gaps (KP feedback, October 27). */
.doc-actions{display:flex;flex-wrap:wrap;gap:16px 56px;margin-top:76px;padding:0 var(--pad) 0 calc(var(--pad) + (100% - 2 * var(--pad)) * 525 / 1248)}
.action-link{display:inline-flex;align-items:flex-start;gap:5px;height:25px;margin:0;padding:0;border:0;background:none;color:var(--text);font-size:16px;line-height:24px;white-space:nowrap}
.action-link .icon-arrow{flex:none;width:14.583px;height:16.666px;margin:4.688px 4.688px 0 5.729px;color:var(--pink)}
.action-link span{padding-top:5px}
.action-link:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mission-page{padding-bottom:97px}

/* ---------------------------------------------------------------- Team */
/* Banner (Figma "Team" and "Team (Alternate)" "Frame 34", 1440 × 536): the 1920 × 1080 "pathway-network" vectors
   (team-banner.svg, its top 536px) at their design size with the left edge on the content gutter (x 96 in the frame), so
   the title sits on black and the network's hub falls right of centre. Under the two gradient overlays. The grid starts
   40px below it. */
.team-banner{position:relative;z-index:0;min-height:536px;padding-top:189px;overflow:hidden;background:#000}
.team-banner:before,.team-banner:after{content:"";position:absolute;z-index:-1;inset:0}
.team-banner:before{left:var(--pad);width:1920px;background:url('/static/v8/team-banner.svg?v=528f7e5d87') left top/1920px 536px no-repeat}
/* Figma "Gradient Overlay (RightLeft)" (0, 0, 515 × 536), keeping the white title legible: black at the frame's left edge,
   clear at 515px. It is a mask in the network's own box, whose left edge is on the content gutter, so the frame's left edge
   is one gutter to its left (−96 at 1440) and the fade stays on the frame however wide the window. Past 1440 the network
   also fades out on the right over 294px, ending at x 1344, the frame's edge 96px past the grid, as at 1440; the fade starts
   off-screen at 1440 and slides in by 1734. Under it all, "Gradient Overlay (Updown)": black at the bottom edge, clear by
   20% up. */
.team-banner:before{--fade:max(1050px,2784px - 100vw);-webkit-mask-image:linear-gradient(90deg,transparent calc(-1 * var(--gutter)),#000 calc(515px - var(--gutter)),#000 var(--fade),transparent calc(var(--fade) + 294px));mask-image:linear-gradient(90deg,transparent calc(-1 * var(--gutter)),#000 calc(515px - var(--gutter)),#000 var(--fade),transparent calc(var(--fade) + 294px))}
.team-banner:after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 20%)}
.leaders{display:flex;flex-direction:column;gap:80px;margin-top:40px;padding:0 var(--pad) 160px}
.leader-row{display:grid;grid-template-columns:repeat(3,391.04fr);gap:37.44px}
.leader-card{position:relative;display:block;aspect-ratio:391.04/474.24;overflow:hidden;background:var(--border);color:var(--bio-text)}
.leader-photo{width:100%;height:100%;object-fit:cover}
/* Figma "bottom-fade-Blur": 125.84px, black 0 → 100% at 40%, progressive background blur 0 → 10.4. */
.leader-fade{--pb-max:5.2px;--pb-dir:to bottom;--pb-fill:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));inset:auto 0 0;height:calc(125.84 / 474.24 * 100%)}
.leader-meta{position:absolute;left:calc(20.8 / 391.04 * 100%);right:calc(20.8 / 391.04 * 100%);bottom:18.2px;display:flex;flex-direction:column}
.leader-name{font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.02em}
.leader-role{font-size:12px;line-height:15px;letter-spacing:0}
.leader-card:hover .leader-name,.leader-card[aria-expanded="true"] .leader-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Expanded bio (Figma "expanded-bio-strip"): padding 80/96, Work Sans; background --ink (#040213) per the October 28 team feedback. */
.bio-strip{display:none;margin:0 calc(-1 * var(--pad));padding:80px var(--pad);background:var(--ink);color:var(--bio-text)}
.bio-strip.is-open,.bio-strip:has(.bio-panel:target){display:block}
.bio-panel{display:none;gap:40px;align-items:flex-start}
.bio-panel.is-open,.bio-strip:not(.is-enhanced) .bio-panel:target{display:flex}
.bio-left{flex:none;display:flex;flex-direction:column;gap:12px;width:192px}
.bio-portrait{width:160px;height:192px;object-fit:cover}
.bio-identity{display:flex;flex-direction:column;gap:4px;font-family:'Work Sans',Arial,sans-serif;letter-spacing:0}
.bio-name{font-size:18px;line-height:22px}
.bio-role{font-size:12px;line-height:15px;text-transform:uppercase}
/* The Figma frame's two 441.6px bio columns, 20px apart, as one balanced multi-column box so both columns end at the same line. */
.bio-text{flex:0 1 903.2px;min-width:0;columns:2;column-gap:20px;orphans:1;widows:1;font-family:'Work Sans',Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}
.bio-text>*+*{margin-top:24px}
.bio-text strong{font-weight:600}
.bio-close,.video-dialog-close{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12.2px;width:92.8px;height:36px;margin:0 0 0 -20px;padding:0;border:0;background:none;color:var(--text);font-size:16px;line-height:24px}
:is(.bio-close,.video-dialog-close) .icon-close{width:11.313px;height:11.314px;color:var(--blue)}
:is(.bio-close,.video-dialog-close):hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* "Watch Interview" (no Figma element yet): the site's outline button at the bio's 16px, with The Proof's play mark in
   --blue, the bio strip's accent. It sits 12px under the role, like the rest of "bio-left". */
.bio-watch,.bio-read{align-self:flex-start;gap:10px;height:36px;padding:0 16px;color:var(--text);font-size:16px;line-height:24px}
.bio-watch .icon-play{width:10px;height:11.547px;color:var(--blue);transition:color .2s}
.bio-watch:hover .icon-play{color:var(--text)}
/* The interview pop-up: a 16:9 player up to the 1248px content width and short enough that it and Close fit the
   screen, over the bio strip's --ink. Close sits above the player's right edge, as it does in the bio. */
.video-dialog{width:min(1248px,calc(100vw - 2 * var(--gutter)),calc((100vh - 144px) * 16 / 9));max-width:none;max-height:none;padding:0;border:0;background:none;color:var(--text);overflow:visible}
.video-dialog::backdrop{background:rgba(4,2,19,.92)}
.video-dialog-box{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.video-dialog-close{margin:0}
.video-dialog-player{width:100%;aspect-ratio:16/9;background:var(--video)}
.video-dialog-player iframe{width:100%;height:100%;border:0}
html:has(.video-dialog[open]){overflow:hidden}

/* ---------------------------------------------------------------- The Proof */
/* Figma "Brand Gradient Background" (October 29): #0085F9 → transparent, so it fades into the black page. */
.proof-page{background:url('/static/v8/gradient-proof.svg?v=207d158883') center top/100% 3100px no-repeat}
/* Hero (Figma "Frame 33", 1440 × 536): image with its own left fade, then a bottom fade. The demos still start at y 551,
   so the page gradient shows in the 15px between.
   The art is drawn on the 1440 design canvas, never stretched: --u is one design px, 1px from 1440 up
   and shrinking with the content column (100cqw, the hero's content box) below it. proof-hero.jpg runs from design x −253.61 (the
   source image's left edge, clipped in Figma) to 1440; past its left edge it fades to the black
   page, which is also what the image's right half is. Its left 80% fade runs x 3.5 → 721. The image node sits at y −171. */
.proof-hero{--lede-y:7px;container-type:inline-size;position:relative;z-index:0;min-height:320px;padding-top:189px;overflow:hidden;background:linear-gradient(#000,#000) 0 0/100% 536px no-repeat}
.proof-hero:before,.proof-hero:after{--u:min(1px,100cqw / 1248);content:"";position:absolute;z-index:-1;pointer-events:none}
.proof-hero:before{top:0;right:calc(var(--pad) - 349.61 * var(--u));transform:scaleX(-1);width:calc(1693.61 * var(--u));aspect-ratio:1693.61/536;background:linear-gradient(90deg,rgba(0,0,0,.8) calc(257.11 / 1693.61 * 100%),rgba(0,0,0,0) calc(974.61 / 1693.61 * 100%)) left top/100% 100% no-repeat,url('/static/v8/proof-hero.jpg?v=0539ec2cbc') left top/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(150 / 1693.61 * 100%));mask-image:linear-gradient(90deg,transparent,#000 calc(150 / 1693.61 * 100%))}
/* Mirrored onto the right (October 29), so the lit strands sit away from the title. The hero is cut short under the title, so the art is clipped to it and fades to black over its lower 45%. */
.proof-hero:after{left:0;right:0;top:0;bottom:0;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 45%)}
.proof-section{padding:0 var(--pad)}
.proof-title{min-height:70px;font-size:50px;line-height:50px;letter-spacing:-.03em}
.proof-description{max-width:600px;min-height:110px;margin-top:20px;font-size:24px;line-height:29px;letter-spacing:0;color:var(--detail)}
.proof-demo-section .proof-description{max-width:none;min-height:0}
/* One smaller heading over the demo (October 29), and the section brought up under the title: the hero art keeps only
   its top, behind "The Proof", and fades out under the heading. */
.proof-heading{font-size:32px;line-height:39px;letter-spacing:-.02em}
.proof-demo-section .proof-demo{margin-top:24px}
/* The Figma row box is 486px, but its section clips at the 440px cards. */
.proof-video{position:relative;align-self:start;aspect-ratio:600/440;background:var(--video);box-shadow:inset 0 0 0 1px var(--text)}
.proof-video-label{position:absolute;left:24px;top:20px;color:var(--detail)}
/* Play marks are centred on the triangle's centroid. In Figma only Demo 1 is; Demo 2 and the
   roundtable are one icon width to the left. */
.proof-play{position:absolute;left:50%;top:50%;color:var(--detail)}
.proof-play .icon-play{width:27px;height:31.177px;margin:-15.588px 0 0 -9px}
.proof-guests{max-width:1160px;min-height:40px;margin-top:28px;color:var(--detail)}
.proof-demo,.proof-roundtable{display:block;margin-top:28px;aspect-ratio:1248/700}
.proof-demo .icon-play,.proof-roundtable .icon-play{width:36px;height:41.569px;margin:-20.785px 0 0 -12px}
/* The demo and the roundtable show their 16:9 YouTube previews, so the panels and the players that replace them are 16:9
   at every width. */
.video-panel{display:block;aspect-ratio:16/9;box-shadow:none}
/* Close under the lede and over the first chapter (October 29), so the page reads as text, video, text. */
.mission-video{margin:48px var(--pad) 0}
.mission-video+.chapter{margin-top:56px}
.proof-video-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* On the bright still, the play mark is a --blue square (the header Sign Up's fill) in the bottom-left corner, inset like
   the panel labels. The whole panel plays the video. */
.video-panel .proof-play{left:24px;top:auto;bottom:24px;display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--blue);color:var(--text);transition:background-color .2s,color .2s}
.video-panel .proof-play .icon-play{width:20px;height:23.094px;margin:0 0 0 4px}
.video-panel:hover .proof-play{background:var(--text);color:var(--blue)}
.proof-page{padding-bottom:74px}

/* ---------------------------------------------------------------- Blog */
/* Figma "Background / Blog Gradient" with the same Warp effect, rendered like the mission background.
   It is bottom-aligned with the frame's bottom edge (480px below the article, under the footer). */
/* "Blog" has no lede (October 28 feedback), so the gradient is flipped to put its glow behind the heading. The mask fades it in below the header and out above the footer, so neither meets it at a hard edge. */
.blog-page:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;background:url('/static/v8/gradient-blog.jpg?v=e5a7c8c61f') center bottom -480px/100% 2306.7px no-repeat;transform:scaleY(-1);-webkit-mask-image:linear-gradient(transparent 80px,#000 360px,#000 calc(100% - 360px),transparent calc(100% - 80px));mask-image:linear-gradient(transparent 80px,#000 360px,#000 calc(100% - 360px),transparent calc(100% - 80px))}
.blog-page .page-intro{--ih:160px}
.blog-page{padding-bottom:79px}
.post-meta{display:flex;gap:26px;font-size:16px;line-height:24px}
.meta-item{display:inline-flex;gap:8px;white-space:nowrap}
/* Figma text boxes: "+ " is 9px wide and the author item 86px. */
.meta-item:first-child{min-width:86px}
.plus{flex:none;width:9px;color:var(--pink)}
/* Blog posts: the Figma featured card's divider and 304/24/920 columns, with the summary (set like the article dek) in place of the image. */
.post-row{margin:0 var(--pad);padding:29px 0;--line:color-mix(in srgb,var(--detail) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) 0 0/100% var(--hair) no-repeat}
.post-row-link{display:grid;grid-template-columns:304fr 24fr 920fr}
.post-row-head{grid-column:1}
.post-row-title{font-size:36px;line-height:44px;letter-spacing:-.02em;transition:color .2s}
.post-row-head .post-meta{margin-top:21px}
.post-row-summary{grid-column:3;max-width:736px;font-size:32px;line-height:39px;letter-spacing:-.02em}
.post-row-link:hover .post-row-title{color:var(--blue)}
.post-row-link:hover .meta-author{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- Blog article */
.article-page{display:grid;grid-template-columns:473fr 54fr 639fr 82fr;align-items:start;padding:188px var(--pad) 115px}
.article-head{grid-column:1}
.article-title{font-size:45px;line-height:45px;letter-spacing:-.03em}
/* The dek and byline sit 5px right of the title (x 101). The dek string ends with a newline. */
.article-dek{max-width:468px;margin:91px 0 0 5px;padding-bottom:39px;font-size:32px;line-height:39px;letter-spacing:-.02em}
.article-head .post-meta{margin:6px 0 0 5px}
/* An article without a dek: the byline sits under the title. */
.article-title+.post-meta{margin-top:32px}
.article-head+.article-body .article-text:first-child{margin-top:4px}
/* Code, theorem statements, and display math (rendered by KaTeX at build time). */
.article-text code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em;letter-spacing:0}
.article-text pre{margin-left:0;margin-right:0;padding:20px 24px;overflow-x:auto;background:var(--video);border:var(--hair) solid color-mix(in srgb,var(--detail) var(--w25),transparent);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:21px;letter-spacing:0;white-space:pre;tab-size:4}
.article-theorem{padding-left:24px;border-left:2px solid var(--blue)}
.article-theorem>*+*{margin-top:16px}
.article-text .katex{font-size:1.1em}
.article-text .katex-display{margin:0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.article-head .plus{color:var(--blue)}
/* min-width:0 keeps a wide code block from widening the column; the block scrolls instead. */
.article-body{grid-column:3;min-width:0}
.article-image{width:calc(627 / 639 * 100%);height:auto;aspect-ratio:627/418;object-fit:cover;margin-top:4px}
.article-image+.article-text{margin-top:51px}
.article-text>*+*{margin-top:24px}
.article-text a,.note-list a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-text .note-ref{margin-left:1px;font-size:9px;line-height:0;vertical-align:super;letter-spacing:0}
.article-text .note-ref a{color:var(--blue);text-decoration:none}
.pull-quote{margin:48px 0;font-size:50px;line-height:50px;letter-spacing:-.03em}
.article-text ul{margin:24px 0;padding-left:22px;list-style:square}
.article-text li::marker{color:var(--blue)}
.article-text li+li{margin-top:12px}
.article-text .article-heading{margin:48px 0 24px;font-size:24px;line-height:29px;letter-spacing:0}
.article-text>.article-heading:first-child{margin-top:0}
.article-signoff{margin-top:48px}
.article-signoff>*+*{margin-top:24px}
.article-signoff+.article-text{margin-top:48px}
.article-notes{margin-top:48px}
.note-list{margin:0;padding-left:20px;font-size:12px;line-height:18px;letter-spacing:0;list-style:decimal;overflow-wrap:anywhere}
.note-list li+li{margin-top:8px}
.note-list li{scroll-margin-top:24px}
.note-list li:target{color:var(--blue)}
/* Download and share, in a row under the byline. */
.article-actions{display:flex;flex-wrap:wrap;gap:12px 40px;margin:20px 0 0 5px}
.article-actions .action-link{gap:8px}
.article-actions .action-link span{padding-top:.5px}

/* ---------------------------------------------------------------- Legal documents */
body:has(.legal-page){background:var(--page) url('/static/v8/bg-article.svg?v=7fdf5c96a4') 0 0/100% auto no-repeat}
.legal-page{padding:188px var(--pad) 112px}
.legal-title{font-size:45px;line-height:50.4px;letter-spacing:-.03em}
.legal-updated{margin-top:20px;color:var(--detail);font-size:14px;line-height:22px;letter-spacing:0}
.legal-related{margin-top:24px;font-size:16px;line-height:24px}
.legal-related a,.legal-copy a{text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
.legal-related a:hover,.legal-copy a:hover,.legal-toc a:hover{color:var(--blue);text-decoration:underline}
.legal-layout{display:grid;grid-template-columns:minmax(0,304fr) minmax(0,864fr);align-items:start;gap:clamp(32px,5.5556vw,80px);margin-top:64px}
.legal-toc{position:sticky;top:141px;max-height:calc(100vh - 173px);overflow-y:auto;font-size:13px;line-height:20px;letter-spacing:0}
.legal-toc ol{padding-left:24px;list-style:decimal}
.legal-toc li+li{margin-top:12px}
.legal-toc a{display:block;text-decoration:none;text-underline-offset:3px}
.legal-toc a:hover{text-decoration:underline}
.legal-copy{min-width:0;max-width:80ch;font-size:17px;line-height:28px;letter-spacing:0;overflow-wrap:anywhere}
.legal-copy>*+*{margin-top:24px}
.legal-copy h2{margin-top:56px;font-size:26px;line-height:34px;font-weight:600;letter-spacing:-.02em;scroll-margin-top:32px}
.legal-copy h3{margin-top:32px;font-size:20px;line-height:28px;font-weight:600}
.legal-copy ol,.legal-copy ul{padding-left:28px}
.legal-copy ol{list-style:lower-alpha}
.legal-copy ol>li::marker{content:"(" counter(list-item,lower-alpha) ") ";font-weight:700}
.legal-copy ul{list-style:disc}
.legal-copy li+li,.legal-copy li>ul{margin-top:16px}
.legal-copy li>p{margin:0}
.legal-copy li>p+p{margin-top:16px}

/* ---------------------------------------------------------------- Careers */
.careers-page .page-intro{--ih:427px}
.careers-intro{grid-column:2;max-width:706px;padding-top:9px}
.careers-intro .page-lede{padding-top:0}
.careers-copy{margin-top:61px;font-size:20px;line-height:20px;letter-spacing:-.04em}
.careers-copy p+p{margin-top:20px}
.role-list{padding:0 var(--pad)}
.careers-privacy{margin:12px 0 0;color:var(--detail);font-size:14px;font-style:italic;line-height:22px;letter-spacing:0}
.careers-privacy a{text-decoration:underline;text-decoration-color:var(--text);text-underline-offset:3px;text-decoration-thickness:1px}
.careers-privacy a:hover{color:var(--blue);text-decoration-color:currentColor}
.role{padding-top:29px}
.role-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:29px;--line:color-mix(in srgb,var(--detail) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) 0 0/100% var(--hair) no-repeat}
.role-title{max-width:780px;font-size:36px;line-height:44px;letter-spacing:-.02em}
.role-apply{flex:none;display:flex;align-items:center;gap:16px;width:80px;height:36px;margin-top:4px;padding:0;border:0;background:none;color:var(--text);font-size:16px;line-height:24px}
.role-apply .icon-plus{flex:none;width:14px;height:14px;color:var(--blue)}
.role-apply span{width:50px;text-align:right}
.role-apply:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.field-message{height:231px;padding-top:15px;padding-bottom:15px;resize:none}
/* Figma "Resume Upload Field": the prompt row sits 8px under the label, centred in a 667px group. */
.careers-page{padding-bottom:375px}
.careers-page,.article-page{position:relative;z-index:0}

/* ---------------------------------------------------------------- Sign up page */
/* Banner (Figma "Frame 632", 1440 × 642): the "pathway-network" vectors cut to the frame (signup-banner.svg), with the
   title centred vertically (padding 137). The art is drawn at its design size, never magnified, centered on the frame, so
   below 1440 it is cropped at both sides and above it stays on the grid. The art is cut at the frame's right edge, 96px past
   the grid, so past 1440, where that edge shows, it fades out to the edge over twice the window's excess width, up to 294px
   (by 1587); at 1440 and below the fade has no width. */
.signup-hero{position:relative;z-index:0;height:642px;padding:272.5px var(--pad) 0;overflow:hidden;background:#000}
.signup-hero:before{content:"";position:absolute;z-index:-1;inset:0;--fade:min(294px,max(0px,2 * (100vw - 1440px)));background:url('/static/v8/signup-banner.svg?v=c0fb49294b') center top/1440px 642px no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 calc(50% + 720px - var(--fade)),transparent calc(50% + 720px));mask-image:linear-gradient(90deg,#000 calc(50% + 720px - var(--fade)),transparent calc(50% + 720px))}
.signup-hero-title{font-size:75.6px;line-height:87.3px;letter-spacing:0}
/* The copy lines up with the "Sign Up" title (KP feedback, October 27); the narrower middle track keeps the form where it was. */
.signup-page .signup{padding-top:48px;padding-left:var(--pad)}
.signup-page .signup-body{grid-template-columns:416fr 187fr 629fr;margin-top:0}

/* ---------------------------------------------------------------- Narrower desktops */
@media (max-width:1100px) and (min-width:801px){
  .site-nav{gap:18px}
  .btn-signup{margin-left:18px}
  .hero-title{font-size:50.4px;line-height:50.4px}
  .home-mission-title{font-size:56px;line-height:56px}
  .pull-quote{font-size:40px;line-height:40px}
  /* The footer sign-up is too narrow between the logo and the links here, so it takes its own row. */
  .site-footer{grid-template-columns:1fr auto;grid-template-rows:auto auto auto;height:auto;padding-bottom:56px}
  .footer-signup{grid-column:1/-1;grid-row:2;max-width:416px;margin:40px 0 56px}
}

/* ---------------------------------------------------------------- Mobile menu (hidden on desktop) */
.menu-toggle,.mobile-menu,.label-mobile,.br-mobile{display:none}

/* ---------------------------------------------------------------- Mobile
   The Figma "Home mobile — Navigation concealed / expanded" frames (390 wide, 24px gutters): an 80px black header with a
   menu button that opens the page links in flow, below it. The other pages have no mobile frames; they use the same
   header, footer, sign-up section, and type scale (headings 38/44, ledes 22/30, body 16/24). */
@media (max-width:800px){
  /* The Proof's art shows design x 0 … 720 (the lit half) across the screen. */
  .proof-hero:before,.proof-hero:after{--u:calc((100cqw + 2 * var(--pad)) / 720)}
  .proof-hero:before{right:calc(-430 * var(--u))}
  :root{--gutter:24px}
  .br-desktop{display:none}
  .br-mobile{display:inline}

  /* Header (Figma "Navigation" / "Header", 390 × 80, black): logo 124 × 30.89 at 24, 24.56; "Sign up" 86 × 36 at y 22;
     the menu button 44 × 44 at y 18, 12px after it, 16px from the right edge. */
  html{scroll-padding-top:80px}
  .site-header{position:sticky;height:auto;flex-wrap:wrap;align-items:flex-start;padding:0 16px 0 var(--pad);background:var(--page)}
  .site-header:before{content:none}
  .header-blur,.site-nav,.label-desktop{display:none}
  .label-mobile{display:inline}
  .brand{width:124px;margin-top:24.56px}
  .brand .wordmark{width:124px;height:30.89px}
  .btn-signup{width:86px;height:36px;margin:22px 0 0 auto;padding:0}
  .menu-toggle{position:relative;display:block;flex:none;width:44px;height:44px;margin:18px 0 18px 12px;padding:0;border:0;background:none;color:var(--text)}
  .menu-lines i{position:absolute;left:10px;width:24px;height:1.5px;background:currentColor}
  .menu-lines i:nth-child(1){top:13.75px}.menu-lines i:nth-child(2){top:21.25px}.menu-lines i:nth-child(3){top:28.75px}
  .icon-menu-close{display:none;position:absolute;left:9px;top:9px;width:26px;height:26px}
  .menu-toggle[aria-expanded="true"] .menu-lines{display:none}
  .menu-toggle[aria-expanded="true"] .icon-menu-close{display:block}
  /* Expanded navigation (432 tall: padding 8/24/32, gap 24): five 64px links, 28px text, each with a 0.5px rule at 20%
     white along its bottom, then a 48px "Sign Up" bar (#0085F9, black label). */
  .mobile-menu{flex:0 0 calc(100% - var(--pad) + 16px);flex-direction:column;padding:8px 0 32px}
  .menu-toggle[aria-expanded="true"]~.mobile-menu{display:flex}
  /* Without JavaScript the menu can't open, so the links stay shown and the button is hidden. */
  html:not(.js) .mobile-menu{display:flex}
  html:not(.js) .menu-toggle{visibility:hidden}
  .mobile-link{display:flex;align-items:center;height:64px;font-size:28px;line-height:34px;letter-spacing:0;--line:color-mix(in srgb,rgba(255,255,255,.2) var(--w50),transparent);background:linear-gradient(var(--line),var(--line)) 0 100%/100% var(--hair) no-repeat}
  .mobile-signup{height:48px;margin-top:24px;background:var(--blue);border-color:var(--blue);color:var(--text);font-size:16px;line-height:24px}
  .mobile-signup:hover{background:transparent;color:var(--blue)}

  .page-intro{display:block;min-height:0;padding-top:56px}
  .page-title{font-size:34.2px;line-height:39.6px;letter-spacing:-.02em}
  .page-lede{margin-top:24px;padding-top:0;font-size:22px;line-height:30px}

  .legal-page{padding:56px var(--pad) 64px}
  .legal-title{font-size:34.2px;line-height:39.6px;letter-spacing:-.02em}
  .legal-layout{display:block;margin-top:40px}
  .legal-toc{position:static;max-height:none;overflow:visible;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--border)}
  .legal-copy{font-size:16px;line-height:26px}
  .legal-copy h2{margin-top:40px;font-size:23px;line-height:31px}

  /* Hero (the screen below the 80px header): the artwork is cropped around the beam's slanted bar, and the copy (gap 24)
     sits over its bottom on a black fade. */
  body:has(.hero){background:var(--page)}
  .hero{display:block;height:calc(100vh - 80px);height:calc(100svh - 80px);min-height:480px;padding:0}
  .hero-image{object-position:44% 30%}
  .hero:before{content:"";position:absolute;z-index:-1;inset:45% 0 0;background:linear-gradient(rgba(0,0,0,0),#000 70%);pointer-events:none}
  .hero-copy{position:absolute;left:0;right:0;bottom:64px;max-width:none;gap:24px;padding:0 var(--pad)}
  .hero-title{font-size:37.8px;line-height:40.5px;letter-spacing:-.02em}
  .hero-lede{max-width:none}
  /* "Our mission" (padding 32/24/64, gap 28). */
  .home-mission{display:block;padding:32px var(--pad) 64px}
  .home-mission:before{content:none}
  .home-mission-title{max-width:none;font-size:38px;line-height:44px;letter-spacing:-.02em}
  .mission-statement{margin-top:28px;font-size:22px;line-height:30px}
  .home-mission-actions{margin-top:28px}
  /* The roundtable, like "Our mission": title, panel (gap 24), then the text and its notes. */
  .home-roundtable{display:block;padding:32px var(--pad) 64px}
  .home-roundtable .video-panel{margin-top:24px}
  .home-roundtable-text{margin-top:24px}
  .home-roundtable-lede{font-size:20px;line-height:27px}
  .home-roundtable-lede .note-ref{font-size:12px}
  .roundtable-notes{margin-top:20px;padding-top:14px;font-size:15px;line-height:22px}
  .mission-video{margin:32px var(--pad) 0}
  .mission-video+.chapter{margin-top:40px}
  .btn-mission{width:204px;height:44px;margin:0}


  /* Sign up (padding 56/24/56, gap 24): fields 55px, a 24px checkbox with 12px regular consent text (line 17), and a
     96 × 44 button. */
  .signup{margin-top:0;padding:56px var(--pad)}
  .signup-title{padding-left:0;font-size:38px;line-height:44px;letter-spacing:-.03em}
  .signup-body{display:block;margin-top:24px}
  .signup-form{margin-top:24px}
  .consent{gap:12px;min-height:24px}
  .consent-input,.checkbox{width:24px;height:24px}
  .consent-text{max-width:none;padding-top:0;font-size:12px;line-height:17px;font-weight:400;letter-spacing:0}
  .btn-submit{width:96px;height:44px}

  /* Footer (padding 24/24/40, gap 32): logo 174 wide, 28px social marks 24px apart, two 159px link columns, and the legal
     block under a 0.5px rule at 20% white. */
  .site-footer{display:flex;flex-direction:column;gap:32px;height:auto;padding:24px var(--pad) 40px}
  .footer-mark,.footer-mark .wordmark{width:174px;height:43.34px}
  .footer-statement{margin-top:16px}
  .socials{gap:24px;margin:32px 0 0}
  .social .social-icon{width:28px;height:28px}
  .footer-signup{margin:0}
  .btn-footer-signup{height:44px}
  body:has(.signup-page) .footer-signup{display:none}
  .footer-nav{gap:24px;margin:0}
  .footer-col{width:auto;flex:1 1 0}
  .footer-col ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
  .footer-legal{flex-direction:column;gap:16px;padding-top:24px;--line:color-mix(in srgb,rgba(255,255,255,.2) var(--w50),transparent)}
  .copyright{margin-left:0;font-size:13px;line-height:20px;letter-spacing:0}
  .legal-links{font-size:13px;line-height:16px;letter-spacing:0}

  .chapter,.chapter-closing{display:block;margin-top:56px;padding-top:24px}
  .page-intro+.chapter{margin-top:48px}
  .mission-page .page-intro{background-position:center 32px}
  .chapter-title{max-width:none;font-size:28px;line-height:34px}
  .chapter-text{max-width:none;height:auto;margin-top:24px}
  .doc-actions{flex-wrap:wrap;gap:16px 32px;margin-top:48px;padding:0 var(--pad)}
  .mission-page{padding-bottom:64px}

  /* Team: the banner, then one card per row. Each bio opens directly under its card: v8.js numbers the cards (--i) and
     moves the open strip's order to just after the tapped card; without JavaScript a strip follows its row's last card. */
  .team-banner{min-height:240px;padding:56px var(--pad)}
  .team-banner:before{left:0;width:auto;background-position:center top;background-size:cover;-webkit-mask-image:none;mask-image:none}
  .team-banner:after{background:linear-gradient(90deg,#000,rgba(0,0,0,0)) left top/515px 100% no-repeat,linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 20%)}
  .leaders{gap:24px;margin-top:24px;padding-bottom:64px}
  .leader-row{display:contents}
  .leader-card{order:calc(var(--i, 0) * 2)}
  .bio-strip{order:var(--strip-order)}
  .leaders>:nth-child(2){--strip-order:5}.leaders>:nth-child(4){--strip-order:11}.leaders>:nth-child(6){--strip-order:17}
  .bio-strip{padding:40px var(--pad)}
  .bio-panel.is-open,.bio-strip:not(.is-enhanced) .bio-panel:target{flex-direction:column;gap:24px}
  .bio-text{flex:none;columns:auto}
  .bio-close{order:-1;align-self:flex-end;margin:0}

  .proof-hero{min-height:240px;padding-top:56px;background-size:auto,auto,cover;background-position:0 0,0 0,30% 0}
  .proof-title{min-height:0;font-size:38px;line-height:44px}
  .proof-heading{font-size:22px;line-height:28px}
  .proof-description{min-height:0;margin-top:16px;font-size:20px;line-height:24px}
  .proof-guests{min-height:0;margin-top:16px}
  .proof-demo{margin-top:24px}
  .video-panel .proof-play{left:12px;bottom:12px;width:44px;height:44px}
  .video-panel .proof-play .icon-play{width:14px;height:16.166px;margin-left:3px}
  .proof-page{padding-bottom:64px}

  /* The whole blog gradient spans the page, from its dark top edge, so no hard edge cuts across the posts. */
  .blog-page:before{background-position:center bottom;background-size:100% 100%;-webkit-mask-image:linear-gradient(transparent,#000 320px,#000 calc(100% - 320px),transparent);mask-image:linear-gradient(transparent,#000 320px,#000 calc(100% - 320px),transparent)}
  .blog-page .page-intro{min-height:0}
  .post-row-title{font-size:28px;line-height:34px}
  .post-row{margin-top:24px}
  .post-row:first-of-type{margin-top:48px}
  .post-row-link{display:flex;flex-direction:column;gap:16px}
  .post-row-summary{font-size:20px;line-height:24px}
  .blog-page{padding-bottom:64px}

  .article-page{display:block;padding:56px var(--pad) 64px}
  .article-title{font-size:34.2px;line-height:39.6px}
  .article-dek{margin:24px 0 0;padding-bottom:0;font-size:22px;line-height:30px}
  .article-head .post-meta{margin:16px 0 0}
  .article-actions{gap:12px 28px;margin:16px 0 32px}
  .article-image{width:100%;margin-top:32px}
  .article-image+.article-text{margin-top:32px}
  .pull-quote{margin:32px 0;font-size:32px;line-height:34px}
  .article-theorem{padding-left:16px}
  .article-theorem .katex-display{font-size:.9em}
  .article-text pre{padding:16px;font-size:13px;line-height:20px}

  .careers-page .page-intro{min-height:0}
  .careers-intro{margin-top:24px;padding-top:0}
  .careers-copy{margin-top:32px;font-size:18px;line-height:22px}
  .role-list{margin-top:24px}
  .role-title{font-size:26px;line-height:32px}
  .careers-page{padding-bottom:64px}

  /* Sign Up banner: the art's right side (where it is) behind a 42px title. */
  .signup-hero{height:280px;padding:56px var(--pad) 0}
  .signup-hero:before{background-position:right top;background-size:auto 100%;-webkit-mask-image:none;mask-image:none}
  .signup-hero-title{font-size:37.8px;line-height:40.5px;letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.post-row-title,.site-header:before{transition:none}}