/* The landing page: design 06 ("form first") from the 2026-10-04 design round,
   in the pre-seed deck's branding. One screen, no scroll, one waitlist form.
   Fonts are the deck's own variable woff2 files (Latin subset), self-hosted
   because the CSP is font-src 'self'. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url("/assets/fonts/SourceSans3-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("/assets/fonts/RobotoMono-latin.woff2") format("woff2")}

:root{
  --ink:#1a1a1a; --muted:#6b6b6b; --faint:#9a9a9a; --line:#e6e6e2; --surface:#f4f4f0; --paper:#fff;
  --lime:#d2f065; --gut:clamp(16px,5vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:"Source Sans 3",Arial,system-ui,sans-serif;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-weight:300;letter-spacing:.04em;text-transform:uppercase}
img{display:block}
a{color:inherit}
h1,h2{text-wrap:balance}

/* One screen wherever the content fits (every desktop, laptop and tablet
   measured), and a scroll rather than a clipped form where it does not: a
   short phone with its browser toolbars showing is ~390x660, and with
   overflow hidden the Join button was simply cut off there. min-height, not
   height, is what lets the page grow past one screen only when it must. */
.page{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(20px,4vh,56px) var(--gut)}
/* "Work Theory" in the deck's own type (Source Sans 3, regular, as on the
   title slide), with its W centred on the W inside the mark.
   Measured: the mark's W fills the lower half of the square, so its centre is
   3/4 of the way down (--mark / 4 above the bottom edge). Source Sans 3's W is
   .656em tall. With line-height 1 the baseline sits .2em above the line box's
   bottom, so pulling the box down by .2em puts the baseline on the mark's
   bottom edge, and lifting it by (--mark/4 - .328em) puts the cap's centre on
   the mark W's centre: margin-bottom = --mark/4 - .528em. */
.brand{--mark:32px;display:flex;align-items:flex-end;gap:12px;font-size:20px;font-weight:400}
.brand .wm{line-height:1;margin-bottom:calc(var(--mark) / 4 - .528em)}
.mark{width:var(--mark);height:var(--mark);border-radius:7px}
.foot{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.copied{font-size:14px;color:var(--muted)}

.mid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,480px);gap:clamp(32px,6vw,120px);align-items:center}
h1{font-weight:400;font-size:clamp(44px,4.4vw,68px);line-height:1.08}
/* Two sentences. From 1180px up, where both fit whole (measured), each gets a
   line of its own and never wraps. Below that they run on as one paragraph. */
.sub{margin-top:20px;font-size:clamp(17px,1.4vw,22px);color:var(--muted);line-height:1.4}
@media (min-width:1180px){.sub span{display:block;white-space:nowrap}}
/* the deck's highlight, in the mark's lime */
mark{background:var(--lime);color:var(--ink);padding:0 .2em;border-radius:4px;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.panel{background:var(--paper);border-radius:28px;padding:clamp(24px,3.4vh,40px)}
.panel .mono{font-size:13px;color:var(--muted)}
.panel h2{margin:8px 0 20px;font-weight:400;font-size:28px}
label{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px}
.f{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1px solid #d6d6d0;border-radius:12px;background:var(--paper);color:var(--ink);outline:none;appearance:none}
.f:focus{border-color:var(--ink)}
.trade{border:0;margin:14px 0 0;padding:0;min-width:0}
.trade legend{font-size:14px;color:var(--muted);padding:0;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0}
.chips label{margin:0;font-size:15px;color:var(--ink);border:1px solid #d6d6d0;border-radius:999px;padding:8px 14px;cursor:pointer}
.chips input:checked+label{background:var(--lime);border-color:var(--lime)}
.chips input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.go{margin-top:22px;width:100%;font:inherit;font-size:18px;font-weight:600;padding:14px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer}
.go:hover{opacity:.88}
.go[disabled]{opacity:.6;cursor:wait}
.wl-note{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted)}
.wl-err{display:none;margin-top:12px;font-size:14px;line-height:1.45;color:#a3261c}
.wl-err.on{display:block}
.wl-done{display:none;font-size:18px;line-height:1.4}
form.sent .fields{display:none}
form.sent .wl-done{display:block}
/* honeypot: off-screen, not display:none, so naive bots still fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:820px){
  .mid{grid-template-columns:1fr;gap:36px}
  .sub{margin-top:12px;font-size:17px;line-height:1.35}
  h1{font-size:clamp(36px,10vw,52px)}
  .panel{padding:20px}
  .panel h2{display:none}
  .panel .mono{margin-bottom:4px}
  label{margin:10px 0 4px}
  .trade{margin-top:10px}
  .trade legend{margin-bottom:4px}
  .f{padding:10px 12px}
  .chips label{padding:6px 12px;font-size:14px}
  .go{margin-top:16px}
  .page{padding-top:16px;padding-bottom:16px;gap:20px}
}
/* Short phones (an SE is 375x667): keep the bigger headline and the gap above
   the form, and take the room out of the form's own spacing instead. */
@media (max-width:820px) and (max-height:700px){
  label{margin:8px 0 3px}
  .trade{margin-top:8px}
  .go{margin-top:12px}
  .wl-note{margin-top:8px}
}
@media (max-width:820px) and (max-height:660px){
  .mid{gap:26px}
  .panel .mono{display:none}
}