/* ============================================================
   Teyks — marketing site stylesheet
   Palette and surface language descend from
   docs/design/app-experience/entry.html (paper/ink/clay/calm/indigo),
   pushed harder here: warm gradient bands, a self-hosted display serif,
   and inline character illustration through the whole page.
   No framework, no build step, no JS, no third-party requests.
   The display face is served from ./fonts/ so the page still renders
   offline, straight off the filesystem, exactly as before.
   ============================================================ */

/* Fraunces — SIL OFL 1.1, see fonts/OFL.txt.
   Subset: latin + punctuation. Axes: wght 400–800 variable;
   opsz/SOFT/WONK pinned at the display cut. 31 KB, one request. */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-var-subset.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* surfaces */
  --paper:#F4F0E8;
  --card:#FBF9F3;
  --card-2:#F2ECE0;
  --line:#E5DDCD;
  --line-2:#D8CFBC;

  /* ink */
  --ink:#221F19;
  --ink-2:#5B5448;
  --ink-3:#8B8375;
  /* entry.html's --ink-3 is a mockup tone and lands at 3.1:1 on paper — below
     AA for the 11px mono kickers and the footer. This is its accessible twin,
     used wherever ink-3 would carry actual small text. */
  --ink-3a:#6B6453;

  /* accents */
  --clay:#B0603A;
  --clay-2:#9A5231;
  --clay-soft:#F6E0CE;
  --calm:#4E6B5A;
  --calm-2:#3D5548;
  --calm-soft:#DDE6DE;
  --ind:#5A5183;
  --ind-2:#443C68;
  --ind-soft:#E7E1F0;

  /* the warm end — new in this pass; carries the "joy" moments */
  --sun:#E3A02F;
  --sun-2:#C9871C;
  --sun-soft:#FBEBCB;
  --rose:#C2685F;
  --rose-soft:#F7DED9;
  --teal:#3E7A78;

  /* skin + hair, so every illustration draws from one cast, not ad-hoc hexes */
  --sk-1:#F2CCA6;
  --sk-2:#E3AC7C;
  --sk-3:#C68A55;
  --sk-4:#A5693C;
  --sk-5:#7E4B29;
  --hair-1:#20190F;
  --hair-2:#3A2418;
  --hair-3:#5B3A22;
  --hair-4:#8C6239;
  --hair-5:#A9A29A;

  /* the "pending" language, borrowed from entry.html's draft markers */
  --draft:#8A6017;
  --draft-line:#CBA76E;
  --draft-bg:#FBF2D9;

  /* dark band */
  --night:#211E18;
  --night-ink:#F3EEE4;
  --night-ink-2:#C6BCA9;
  --night-line:rgba(255,255,255,.11);

  --display:'Fraunces',Georgia,'Iowan Old Style','Times New Roman',serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background-color:var(--paper)}

/* ---------- motion (decorative only — never a state change) ---------- */
@keyframes noteFloat{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-15px) rotate(5deg)}
}
@keyframes dotPulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.55; transform:scale(.82)}
}
@keyframes sway{
  0%,100%{transform:rotate(-1.6deg)}
  50%{transform:rotate(1.6deg)}
}
@keyframes ripple{
  0%{opacity:.55; transform:scale(.86)}
  70%{opacity:0; transform:scale(1.22)}
  100%{opacity:0; transform:scale(1.22)}
}
@media (prefers-reduced-motion: reduce){
  .note, .pill .dot, .sway, .ripple{animation:none !important}
  .ripple{opacity:.28}
}

/* Column layout so a short page (the three status pages) still pushes its
   footer to the bottom and the paper wash covers the whole viewport. */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(900px 520px at 94% 2%, rgba(227,160,47,.13) 0%, rgba(227,160,47,0) 62%),
    radial-gradient(760px 480px at 2% 34%, rgba(90,81,131,.09) 0%, rgba(90,81,131,0) 60%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
svg{display:block}
a{color:var(--ind)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ind); outline-offset:3px; border-radius:4px}

/* ---------- layout ---------- */
main{flex:1 0 auto}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.measure{max-width:640px}
.measure-wide{max-width:760px}

/* ---------- type ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font:700 11px/1 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3a);
  margin:0 0 14px;
}
.kicker::before{
  content:"";
  width:22px; height:2px; border-radius:2px;
  background:currentColor; opacity:.55;
  flex:none;
}
h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px, 5.2vw, 54px);
  line-height:1.08;
  letter-spacing:-.021em;
  text-wrap:pretty;
  margin:0 0 18px;
  max-width:15ch;
}
h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(26px, 3.7vw, 37px);
  line-height:1.15;
  letter-spacing:-.016em;
  text-wrap:pretty;
  margin:0 0 16px;
  max-width:20ch;
}
h3{
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:700;
  line-height:1.35;
  margin:0 0 6px;
}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.lede{font-size:19px; line-height:1.55; color:var(--ink-2); text-wrap:pretty; margin:0 0 26px}
.small{font-size:14.5px; color:var(--ink-2)}

/* A hand-drawn highlight under a phrase in the headline. Text unchanged —
   the span only carries the mark. */
.hl{
  background-image:linear-gradient(180deg,
    rgba(227,160,47,0) 0%, rgba(227,160,47,.26) 30%, rgba(227,160,47,.48) 100%);
  background-repeat:no-repeat;
  background-position:0 94%;
  background-size:100% .24em;
  padding-bottom:.04em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- section rhythm ---------- */
section{padding:78px 0}
section.band{padding:82px 0 86px; margin:0}

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:30;
  background:rgba(247,243,235,.88);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:12px; padding-bottom:12px;
}
.wordmark{display:inline-flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:var(--ink)}
/* The mark is inline SVG, not a raster badge: no border-radius, and the
   colour comes from the clay token through currentColor on its paths. */
.wordmark svg{width:30px; height:30px; flex:none; color:var(--clay)}
.wordmark span{
  font-family:var(--display); font-size:23px; font-weight:700;
  letter-spacing:-.014em; line-height:1;
}
.navlink{
  display:inline-flex; align-items:center;
  min-height:42px; padding:0 16px;
  border:1px solid var(--line-2); border-radius:22px;
  background:var(--card);
  font:650 14px var(--sans);
  color:var(--ink-2);
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.navlink:hover{color:var(--ink); background:#fff; border-color:var(--clay)}

/* ============================================================
   HERO
   ============================================================ */
section.hero{
  position:relative;
  overflow:hidden;
  padding:74px 0 84px;
  background:
    radial-gradient(760px 520px at 82% 8%,  rgba(227,160,47,.30) 0%, rgba(227,160,47,0) 62%),
    radial-gradient(620px 460px at 4% 88%,  rgba(90,81,131,.13)  0%, rgba(90,81,131,0)  58%),
    radial-gradient(900px 620px at 55% -20%, rgba(176,96,58,.16) 0%, rgba(176,96,58,0)  64%),
    linear-gradient(180deg,#FCF7EC 0%, #F5EFE2 62%, var(--paper) 100%);
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(280px, 430px);
  align-items:center;
  gap:30px;
}
.hero-copy{min-width:0}
.hero .lede{max-width:34ch}
.pill{
  display:inline-flex; align-items:center; gap:9px;
  font:650 11.5px/1 var(--mono);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:8px 14px;
  margin:0 0 24px;
  box-shadow:0 1px 2px rgba(72,44,26,.05);
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--clay); flex:none; animation:dotPulse 2.6s ease-in-out infinite}
.hero h1{margin-bottom:22px; max-width:16ch}
.hero-art{position:relative}
.hero-art svg{width:100%; height:auto; overflow:visible}
.note{transform-box:fill-box; transform-origin:center; animation:noteFloat 4.8s ease-in-out infinite}
.note-b{animation-delay:1.1s}
.note-c{animation-delay:2.3s}
.note-d{animation-delay:3.1s}
.sway{transform-box:fill-box; transform-origin:50% 92%; animation:sway 5.4s ease-in-out infinite}
.ripple{transform-box:fill-box; transform-origin:center; animation:ripple 3.4s ease-out infinite}
.ripple-b{animation-delay:1.15s}
.ripple-c{animation-delay:2.3s}

/* ============================================================
   CAST STRIP — the faces, right under the fold
   ============================================================ */
.cast{
  padding:0;
  background:linear-gradient(180deg, var(--paper) 0%, #F1E7D6 34%, #EFE3CE 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-2);
  overflow:hidden;
}
.cast .wrap{padding-top:34px; padding-bottom:34px}
.cast-row{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px, 2.4vw, 26px);
}
.cast-face{
  flex:0 1 132px;
  max-width:132px;
  border-radius:50%;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 2px 4px rgba(72,44,26,.10), 0 16px 30px -20px rgba(72,44,26,.55);
  border:3px solid rgba(255,255,255,.85);
}
.cast-face svg{width:100%; height:auto}
/* the outer two step down on mid screens, then drop on phones —
   five circles at phone width would each be thumbnail-sized */
.cast-face:nth-child(1),.cast-face:nth-child(5){flex-basis:106px; max-width:106px; margin-top:14px}
.cast-face:nth-child(3){flex-basis:150px; max-width:150px; margin-top:-8px}
@media (max-width:700px){
  .cast-face:nth-child(1),.cast-face:nth-child(5){display:none}
}

/* ============================================================
   SPLIT — illustration beside prose (used twice)
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:44px;
}
.split.art-first > .split-art{order:-1}
.split-art svg{width:100%; height:auto}
.split-copy{min-width:0}
@media (max-width:840px){
  .split{grid-template-columns:1fr; gap:28px}
  .split.art-first > .split-art{order:0}
}

/* ---------- "the real problem" ---------- */
#the-real-problem{
  background:linear-gradient(180deg,#EFE3CE 0%, var(--paper) 26%, var(--paper) 100%);
}
.panel-art{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--card);
  box-shadow:0 2px 3px rgba(72,44,26,.06), 0 24px 46px -34px rgba(72,44,26,.6);
}
.panel-art svg{width:100%; height:auto}

/* ============================================================
   WHAT YOU GET
   ============================================================ */
.facts{
  list-style:none; margin:0 0 16px; padding:6px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 2px 3px rgba(72,44,26,.05), 0 22px 44px -34px rgba(72,44,26,.55);
}
.facts li{
  display:flex; align-items:center; gap:15px;
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:15.5px;
  line-height:1.5;
}
.facts li:first-child{border-top:none}
.fact-ic{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none;
  border-radius:13px;
}
.fact-ic svg{width:20px; height:20px}
.facts li:nth-child(1) .fact-ic{background:var(--clay-soft); color:var(--clay-2)}
.facts li:nth-child(2) .fact-ic{background:var(--calm-soft); color:var(--calm-2)}
.facts li:nth-child(3) .fact-ic{background:var(--ind-soft); color:var(--ind-2)}
.facts li:nth-child(4) .fact-ic{background:var(--sun-soft); color:#8A6017}
.facts li:nth-child(5) .fact-ic{background:var(--rose-soft); color:#96453C}
.note-bar{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--card-2);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:16px 18px;
  font-size:15.5px;
  color:var(--ink-2);
}
.note-bar b{color:var(--ink); font-weight:650}
.note-bar svg{width:22px; height:22px; flex:none; color:var(--clay); margin-top:1px}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
#how-it-works{
  background:linear-gradient(180deg, var(--paper) 0%, #F7F1E4 100%);
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  counter-reset:step;
}
.steps li{
  counter-increment:step;
  position:relative;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink-2);
  box-shadow:0 2px 3px rgba(72,44,26,.05), 0 22px 40px -32px rgba(72,44,26,.6);
}
.step-art{display:block; width:100%; height:auto}
.steps li > h3, .steps li > p{padding:0 20px}
.steps li > h3{color:var(--ink); font-size:16.5px; margin-top:18px}
.steps li > p{margin:0; padding-bottom:22px}
.steps li::before{
  content:counter(step);
  position:absolute; left:16px; top:16px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  font:700 14px var(--sans);
  box-shadow:0 1px 2px rgba(72,44,26,.2);
}

/* ============================================================
   THE DARK BAND
   ============================================================ */
.band.night{
  position:relative;
  overflow:hidden;
  background-color:var(--night);
  background-image:
    radial-gradient(720px 420px at 86% -18%, rgba(90,81,131,.50) 0%, rgba(90,81,131,0) 64%),
    radial-gradient(620px 420px at 6% 106%, rgba(176,96,58,.34) 0%, rgba(176,96,58,0) 62%);
  color:var(--night-ink-2);
}
.band.night .wrap{position:relative; z-index:1}
.band.night .kicker{color:#B6A98F}
.band.night h2{color:var(--night-ink); max-width:22ch}
.night-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,272px);
  align-items:start;
  gap:40px;
}
.night-art svg{width:100%; height:auto}
@media (max-width:860px){
  .night-grid{grid-template-columns:1fr; gap:22px}
  .night-art{max-width:250px; margin:4px auto 0}
}
.limits{list-style:none; margin:0; padding:0; display:grid; gap:0}
.limits li{
  display:flex; align-items:flex-start; gap:15px;
  padding:17px 0;
  border-top:1px solid var(--night-line);
  font-size:15.5px;
  line-height:1.55;
}
.limits li:first-child{border-top:none; padding-top:4px}
.limits li b{
  display:block;
  color:var(--night-ink);
  font-family:var(--sans);
  font-weight:650;
  font-size:16px;
  margin-bottom:4px;
}
.limit-ic{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  border-radius:12px;
  margin-top:1px;
}
.limit-ic svg{width:19px; height:19px}
.limits li:nth-child(1) .limit-ic{background:rgba(176,96,58,.24); color:#E3A57C}
.limits li:nth-child(2) .limit-ic{background:rgba(90,81,131,.30); color:#B6ACDE}
.limits li:nth-child(3) .limit-ic{background:rgba(227,160,47,.24); color:#F0C674}
.limits li:nth-child(4) .limit-ic{background:rgba(78,107,90,.30); color:#9FC2AC}
.limits li:nth-child(5) .limit-ic{background:rgba(194,104,95,.26); color:#E5A199}

/* ============================================================
   CONSENT
   ============================================================ */
#before-anything-is-recorded{padding-top:78px; padding-bottom:26px}
.consent{
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  align-items:center;
  gap:26px;
  background:linear-gradient(140deg,#E6EFE7 0%, var(--calm-soft) 58%, #D3E1D6 100%);
  border:1px solid rgba(78,107,90,.45);
  border-radius:24px;
  padding:28px 32px;
  box-shadow:0 2px 3px rgba(28,48,38,.06), 0 26px 46px -36px rgba(28,48,38,.75);
}
.consent .kicker{color:var(--calm-2)}
.consent h2{margin-bottom:12px; color:var(--ink); max-width:24ch}
.consent p{color:#39493F; font-size:15.5px}
.consent-art svg{width:100%; height:auto}
@media (max-width:680px){
  .consent{grid-template-columns:1fr; gap:6px; padding:24px 22px}
  .consent-art{max-width:170px}
}

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
#who-its-for{
  padding-top:26px;
  padding-bottom:38px;
}

/* ============================================================
   FAQ — plain <details>/<summary>, no JS
   ============================================================ */
.faq-list{
  display:grid; gap:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 26px;
  box-shadow:0 2px 3px rgba(72,44,26,.05), 0 22px 44px -34px rgba(72,44,26,.55);
}
.faq-list details{
  border-top:1px solid var(--line);
  padding:18px 0;
}
.faq-list details:first-child{border-top:none}
.faq-list summary{
  cursor:pointer;
  font:650 16px var(--sans);
  color:var(--ink);
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  font:400 22px var(--serif);
  color:var(--ink-3a);
  flex:none;
  line-height:1;
}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin:10px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-2)}
.who-band{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:36px 36px 0;
  background:
    radial-gradient(520px 300px at 88% 12%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg,#F7DFC0 0%, #F2CFA6 52%, #EFC08E 100%);
  border:1px solid rgba(176,96,58,.34);
  box-shadow:0 2px 3px rgba(72,44,26,.07), 0 26px 50px -38px rgba(72,44,26,.8);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  align-items:end;
  gap:24px;
}
.who-band .kicker{color:#8A4B27}
.who-band h2{color:#3A2415; max-width:16ch}
.who{color:#5A3A22; font-size:17px; padding-bottom:36px; max-width:36ch}
.who-art{align-self:end}
.who-art svg{width:100%; height:auto; display:block}
@media (max-width:800px){
  .who-band{grid-template-columns:1fr; padding:28px 24px 0; gap:4px}
  .who{padding-bottom:8px}
  .who-art{max-width:330px; margin:0 auto}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 26px;
  border-radius:16px; border:1px solid transparent;
  font:650 15.5px var(--sans);
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn svg{width:18px; height:18px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.clay{background:var(--clay); color:#fff; box-shadow:0 1px 2px rgba(72,44,26,.2), 0 14px 26px -14px rgba(120,60,30,.85)}
.btn.clay:hover{background:var(--clay-2); color:#fff; box-shadow:0 1px 2px rgba(72,44,26,.22), 0 18px 30px -14px rgba(120,60,30,.9)}
.btn.calm{background:var(--calm); color:#fff; box-shadow:0 1px 2px rgba(28,48,38,.18), 0 14px 26px -14px rgba(30,70,52,.8)}
.btn.calm:hover{background:var(--calm-2); color:#fff}
.btn.soft{background:var(--card); color:var(--ink); border-color:var(--line-2)}
.btn.soft:hover{background:#fff; color:var(--ink); border-color:var(--clay)}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:0}
.cta-note{margin:10px 0 0}

/* ============================================================
   CLOSING / CONTACT
   ============================================================ */
#talk{padding-top:34px; padding-bottom:88px}
.closing{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(560px 340px at 96% 84%, rgba(78,107,90,.20) 0%, rgba(78,107,90,0) 62%),
    linear-gradient(160deg,#FDFBF5 0%, var(--card) 46%, #F1ECDF 100%);
  border:1px solid var(--line-2);
  border-radius:26px;
  padding:36px 36px 38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,262px);
  align-items:center;
  gap:26px;
  box-shadow:0 2px 3px rgba(72,44,26,.06), 0 28px 54px -40px rgba(72,44,26,.85);
}
.closing p{color:var(--ink-2); max-width:44ch; font-size:16.5px}
.closing h2{max-width:20ch}
.closing-art svg{width:100%; height:auto}
@media (max-width:760px){
  .closing{grid-template-columns:1fr; gap:10px}
  .closing-art{max-width:220px; margin:6px auto 0; order:-1}
}

/* ---------- the interest form ---------- */
.signup-form{margin-top:22px; max-width:440px}
.signup-form .field-row{display:flex; gap:12px}
.signup-form label{display:block; margin-bottom:12px}
.signup-form .field-row label{flex:1 1 0; min-width:0}
.signup-form label span{display:block; font:600 13.5px var(--sans); color:var(--ink-2); margin-bottom:6px}
.signup-form label span .opt{font-weight:400; color:var(--ink-3a)}
.signup-form input,
.signup-form textarea{
  width:100%; box-sizing:border-box;
  font:15px var(--sans); color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:12px;
  padding:11px 13px;
}
.signup-form input:focus,
.signup-form textarea:focus{outline:2px solid var(--ind); outline-offset:1px; border-color:var(--ind)}
.signup-form textarea{resize:vertical; min-height:44px}
.signup-form .hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.signup-form .form-status{margin:12px 0 0; font-size:14px; color:var(--ink-2); min-height:1.2em}
.talk-alt{margin-top:16px; font-size:14.5px; color:var(--ink-3a)}
@media (max-width:480px){
  .signup-form .field-row{flex-direction:column; gap:0}
}

/* ============================================================
   LEGAL STATUS PAGES
   ============================================================ */
.legal{padding:64px 0 72px}
.legal .panel{
  background:linear-gradient(160deg,#FDFBF5 0%, var(--card) 60%, #F1ECDF 100%);
  border:1px solid var(--line-2);
  border-radius:24px;
  padding:36px 38px 38px;
  box-shadow:0 2px 3px rgba(72,44,26,.06), 0 26px 50px -38px rgba(72,44,26,.8);
}
.legal .measure{max-width:620px}
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font:700 11px/1 var(--mono);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--draft);
  background:var(--draft-bg);
  border:1px dashed var(--draft-line);
  border-radius:20px;
  padding:7px 12px;
  margin:0 0 22px;
}
.legal-ic{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:14px;
  background:var(--draft-bg);
  border:1px solid var(--draft-line);
  color:var(--draft);
  margin:0 0 18px;
}
.legal-ic svg{width:22px; height:22px}
.legal h1{font-size:clamp(31px, 4.6vw, 44px); margin-bottom:20px; max-width:none}
.legal p{color:var(--ink-2); font-size:16.5px; line-height:1.6; margin-bottom:18px}
.legal p.first{color:var(--ink); font-size:18.5px}
.backlink{
  display:inline-flex; align-items:center;
  min-height:44px;
  margin-top:10px;
  font:650 15px var(--sans);
  color:var(--ind);
  text-decoration:none;
}
.backlink:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--paper) 0%, #EDE5D6 100%);
  padding:36px 0 46px;
  font-size:14px;
  color:var(--ink-3a);
}
footer.site .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 28px;
}
.foot-links{display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; margin:0}
.foot-links a{
  color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center;
  min-height:42px; /* tap target on a phone */
}
.foot-links a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.foot-links .sep{color:var(--line-2)}
.foot-left{display:flex; flex-direction:column; gap:4px}
.foot-left .mark{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.014em; color:var(--ink-2)}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:10px}
  .hero-art{order:-1; max-width:400px; margin:0 auto 6px; width:100%}
  .hero h1, .hero .lede{max-width:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:56px 0}
  section.hero{padding:40px 0 54px}
  section.band{padding:56px 0 60px}
  #before-anything-is-recorded{padding-top:56px; padding-bottom:22px}
  #who-its-for{padding-top:22px; padding-bottom:26px}
  #talk{padding-top:24px; padding-bottom:64px}
  .cast .wrap{padding-top:26px; padding-bottom:26px}
  .lede{font-size:17.5px; margin-bottom:24px}
  .closing{padding:26px 22px 28px; border-radius:20px}
  .who-band{border-radius:20px}
  .legal .panel{padding:26px 22px 28px; border-radius:20px}
  .cta-row .btn{width:100%}
  footer.site .wrap{flex-direction:column; align-items:flex-start}
  h1,h2{max-width:none}
  .split{gap:24px}
}