/* ============================================================
   Tech & Skills Council — site styles
   Palette: deep maroon #8C1D40 · gold #FFC627 · black · white
   Type: Archivo (display)
         Arial/Helvetica stack (body)
   ============================================================ */

:root{
  --ground:#0E0709;
  --ground-2:#150C11;
  --surface:#1C1017;
  --surface-2:#25141D;
  --line:#3A212C;
  --line-soft:#2A1721;

  --maroon:#8C1D40;
  --maroon-lift:#B32651;
  --gold:#FFC627;
  --gold-dim:#C99A1E;

  --text:#F7F2F4;
  --muted:#BCA6AE;
  --muted-dim:#8C767F;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:Arial,Helvetica,'Liberation Sans',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --nav-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden}

img,svg{max-width:100%}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 800 rather than 900 — Archivo Black reads as a shout at display sizes; the
   semibold cut keeps the same authority with a calmer, more formal colour. */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.028em;text-wrap:balance;text-transform:uppercase}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:120;background:var(--maroon);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
#loader .mark{width:132px;height:132px}
#loader .bar{opacity:0;animation:barIn .32s ease forwards}
#loader .bar:nth-of-type(1){animation-delay:.30s}
#loader .bar:nth-of-type(2){animation-delay:.46s}
#loader .bar:nth-of-type(3){animation-delay:.62s}
#loader .bracket{stroke-dasharray:120;stroke-dashoffset:120;animation:draw .55s cubic-bezier(.7,0,.3,1) forwards}
#loader .bracket:nth-of-type(2){animation-delay:.1s}
#loader .word{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(19px,3.4vw,26px);letter-spacing:.16em;color:#fff;
  opacity:0;animation:fadeUp .5s ease .82s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes barIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#loader.done{transform:translateY(-100%);transition:transform .7s cubic-bezier(.76,0,.24,1)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(14,7,9,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.nav-logo{display:flex;align-items:center;gap:11px;color:var(--text)}
.nav-logo svg{width:30px;height:30px}
.nav-logo span{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:-.01em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.nav-links a:hover{color:var(--gold)}
/* `.nav-links a` (0,2,0) outranks `.btn` (0,1,0), so without this the nav CTA
   renders muted-pink on gold — about 1.9:1, unreadable. Restate at equal reach. */
.nav-links a.btn{color:#111}
.nav-links a.btn:hover{color:var(--gold)}
.nav-links a.btn.ghost{color:var(--gold)}
.nav-links a.btn.ghost:hover{color:#111}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 20px;border:2px solid var(--gold);color:#111;background:var(--gold);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:transparent;color:var(--gold);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#111}
.btn.big{font-size:16px;padding:16px 30px}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}
/* At phone widths the wordmark wrapped to two lines and crowded the CTA. */
@media(max-width:520px){
  .nav .wrap{padding:0 16px;gap:12px}
  .nav-logo span{font-size:13px;line-height:1.15;max-width:11ch}
  .nav-logo svg{width:26px;height:26px}
  .nav-links .btn{padding:10px 14px;font-size:12px;white-space:nowrap}
}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:56px 0 54px;
  background:
    radial-gradient(105% 120% at 88% -18%,rgba(140,29,64,.50) 0%,rgba(140,29,64,0) 62%),
    var(--ground);
  border-bottom:1px solid var(--line);
}
/* A single hairline rule anchoring the hero to the page — quiet, not loud. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(255,198,39,.28) 22%,rgba(255,198,39,0) 62%);
}
.hero .wrap{display:flex;flex-direction:column;gap:0}

.hero-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);padding-bottom:22px;margin-bottom:30px;
  border-bottom:1px solid var(--line);
}

.hero-tag{display:flex;flex-wrap:wrap;gap:9px}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--line);color:var(--muted);
}
.tag.solid{background:var(--maroon);border-color:var(--maroon);color:#fff}
.tag.gold{border-color:rgba(255,198,39,.55);color:var(--gold)}

h1.hero-title{
  font-size:clamp(44px,8.4vw,104px);line-height:.94;letter-spacing:-.035em;
  font-weight:800;
}
h1.hero-title .gold{color:var(--gold);display:block}

.hero-motto{
  display:flex;align-items:center;gap:18px;
  margin-top:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}
.hero-motto::before{
  content:"";width:56px;height:1px;background:var(--gold);flex:0 0 auto;
}

.hero-lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.7;max-width:62ch;color:var(--muted);margin-top:26px}
.hero-lede b{font-weight:400;color:var(--gold)}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.hero-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted-dim)}

/* Institutional meta strip — the formal register of a programme masthead. */
.hero-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 34px;margin:46px 0 0;padding-top:26px;border-top:1px solid var(--line);
}
.hero-meta>div{padding:10px 0}
.hero-meta dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-dim);margin-bottom:7px;
}
.hero-meta dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
@media(max-width:640px){
  .hero{padding:72px 0 60px}
  .hero-meta{gap:0 20px;margin-top:36px}
}

/* ---------- ticker ---------- */
/* Restrained: a hairline band in the council's own surface colour rather than
   a solid gold shout, so the masthead above it stays the loudest thing. */
.ticker{
  background:var(--ground-2);color:var(--muted);overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 52s linear infinite}
.ticker span{
  font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 20px;white-space:nowrap;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- sections ---------- */
section{padding:78px 0;border-bottom:1px solid var(--line-soft)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:70ch}
.sec-head h2{font-size:clamp(30px,5vw,52px);line-height:.98}
.sec-head p{color:var(--muted);font-size:17px}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--surface);padding:28px;display:flex;flex-direction:column;gap:11px;transition:background .2s ease}
.cell:hover{background:var(--surface-2)}
.cell h3{font-size:19px}
.cell p{color:var(--muted);font-size:15px}
.cell .num{font-family:var(--display);font-weight:900;font-size:15px;color:var(--gold)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
ul.ticks li{position:relative;padding-left:30px;font-size:16px}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:13px;
  border:2px solid var(--gold);
}
ul.ticks li b{font-weight:400;color:var(--gold)}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--surface);padding:22px 24px;min-width:0}
.stat .k{
  font-family:var(--display);font-weight:900;font-size:34px;color:var(--gold);line-height:1;
  /* Long values must never be hyphen-broken mid-word ("Septem / 2026"). */
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.stat .v{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* A stat whose value is prose-length (a full date) takes the whole row and
   steps down to a size that fits it on one or two clean lines at any width. */
.stat.stat-wide{grid-column:1/-1}
.stat .k-date{
  font-size:clamp(23px,3.2vw,34px);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;
}

.fineprint{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.55;color:var(--muted-dim);max-width:56ch;
}

/* timeline */
.beats{display:flex;flex-direction:column;border:1px solid var(--line)}
.beat{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.beat:last-child{border-bottom:none}
.beat .t{
  font-family:var(--mono);font-size:12.5px;color:var(--gold);padding:22px 20px;
  border-right:1px solid var(--line-soft);letter-spacing:.06em;
}
.beat .c{padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.beat h4{font-size:17px}
.beat p{color:var(--muted);font-size:15px}
@media(max-width:640px){.beat{grid-template-columns:88px 1fr}.beat .t{padding:16px 12px;font-size:11.5px}}

/* faq */
details{border:1px solid var(--line);background:var(--surface);margin-bottom:10px}
details[open]{background:var(--surface-2)}
summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:var(--display);font-weight:800;font-size:16.5px;text-transform:uppercase;letter-spacing:-.01em;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 22px 20px;color:var(--muted);font-size:15.5px;max-width:74ch}

/* cta band */
.band{
  background:var(--maroon);
  background-image:linear-gradient(105deg,var(--maroon) 0%,#6E1633 100%);
  padding:64px 0;border-bottom:none;
}
.band .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(30px,5.4vw,56px);line-height:.95;color:#fff}
.band h2 span{color:var(--gold);display:block}
.band p{color:#F2DDE4;max-width:46ch;margin-top:12px}

/* footer */
footer{padding:52px 0 66px;background:var(--ground-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.f-col{display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--muted)}
.f-col h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim);margin:0 0 4px}
.f-col a{color:var(--muted)}
.f-col a:hover{color:var(--gold)}
.f-legal{width:100%;border-top:1px solid var(--line-soft);padding-top:20px;font-size:12.5px;color:var(--muted-dim);max-width:78ch}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- forms (enrol page) ---------- */
.form-wrap{max-width:720px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
/* Field captions only. Scoped to direct children so it never reaches labels
   nested inside a field — radio cards, checkbox lines — which are body copy,
   not captions, and were previously being rendered as spaced-out capitals. */
.field>label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Text-entry controls only. Radios and checkboxes must be excluded: they are
   native-sized controls, and width:100% makes each one span the whole field,
   which collapsed the radio-card text to zero width. */
.field input:not([type="radio"]):not([type="checkbox"]),.field select,.field textarea{
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:var(--body);font-size:16px;padding:13px 14px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field .hint{font-size:13px;color:var(--muted-dim)}
.field.invalid input,.field.invalid select{border-color:#E5484D}
.field .err{font-size:13px;color:#FF8A8E;display:none}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.checkline{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.checkline input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--gold)}
.checkline label{font-family:var(--body);font-size:15px;letter-spacing:normal;text-transform:none;
  line-height:1.5;color:var(--muted);cursor:pointer}
.form-status{margin-top:18px;padding:16px 18px;border:1px solid var(--line);background:var(--surface);font-size:15px;display:none}
.form-status.show{display:block}
.form-status.ok{border-color:var(--gold);color:var(--text)}
.form-status.bad{border-color:#E5484D;color:#FFC9CB}

/* ============================================================
   Added sections
   ============================================================ */

/* calendar */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cal .m{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.cal .m .mo{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cal .m p{font-size:14.5px;color:var(--muted)}
.cal .m.flag{background:var(--surface-2);border-left:3px solid var(--gold)}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.yr{border-top:4px solid var(--maroon-lift);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.yr h3{font-size:20px}
.yr .tag-y{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.yr ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:14.5px;color:var(--muted)}
.yr ul li::marker{color:var(--maroon-lift)}

/* badging */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.bd{background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:10px}
.bd .pill{
  align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--gold);color:var(--gold);
}
.bd .pill.solid{background:var(--gold);color:#111;border-color:var(--gold)}
.bd h4{font-size:17px}
.bd p{margin:0;font-size:14.5px;color:var(--muted)}

/* posters */
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.poster{display:flex;flex-direction:column;gap:12px}
.poster img{
  width:100%;height:auto;display:block;border:1px solid var(--line);
  background:#fff;transition:transform .25s ease;
}
.poster a:hover img{transform:translateY(-3px)}
.poster .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.poster .cap h4{font-size:16px;text-transform:uppercase}
.poster .cap span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted-dim);text-transform:uppercase}

/* two-door CTA */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.door{background:var(--surface);padding:32px;display:flex;flex-direction:column;gap:14px;transition:background .2s ease}
.door:hover{background:var(--surface-2)}
.door .eyebrow{color:var(--gold)}
.door h3{font-size:26px}
.door p{margin:0;color:var(--muted);font-size:15.5px;flex-grow:1}
.door .btn{align-self:flex-start;margin-top:6px}

/* form extras */
.form-intro{max-width:66ch;color:var(--muted);font-size:16px;margin-bottom:30px}
fieldset{border:1px solid var(--line);background:var(--surface);padding:24px;margin:0 0 24px;display:block}
legend{
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding:0 10px;
}
.field textarea{resize:vertical;min-height:96px;font-family:var(--body)}
.counter{font-family:var(--mono);font-size:11px;color:var(--muted-dim);text-align:right}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}

/* A radio card is a <label> inside .field, so it inherits the small mono
   uppercase letter-spaced treatment meant for field captions. Left alone that
   renders sentence-length card copy as spaced-out capitals that overflow the
   card. Everything the caption rule sets is reset here explicitly. */
.field .radio-card{
  border:1px solid var(--line);padding:13px 15px;display:flex;gap:11px;align-items:flex-start;
  font-family:var(--body);font-size:14.5px;letter-spacing:normal;text-transform:none;
  line-height:1.45;color:var(--muted);cursor:pointer;min-width:0;
  transition:border-color .15s ease,background .15s ease;
}
.field .radio-card:hover{border-color:var(--maroon-lift)}
.field .radio-card input{width:17px;height:17px;margin-top:2px;accent-color:var(--gold);flex:0 0 auto}
.field .radio-card>span{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.field .radio-card b{
  display:block;font-family:var(--body);font-size:15px;letter-spacing:normal;
  text-transform:none;color:var(--text);font-weight:600;margin-bottom:3px;
}
.field .radio-card.checked{border-color:var(--gold);background:var(--surface-2)}
.field .radio-card:focus-within{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
.req{color:var(--gold)}

/* ============================================================
   Responsive hardening — 11 September 2026
   Audited across 320 → 1920px on all four pages.
   ============================================================ */

/* ------------------------------------------------------------
   1. Auto-fit grids must never demand more width than they have
   ------------------------------------------------------------
   `minmax(300px, 1fr)` is a *hard floor*: below 300px of available
   space the column still claims 300px and the whole grid pushes past
   the viewport. At 320px the wrap leaves 268px, so every grid with a
   floor above that overflowed the page — the two-door CTA was doing it
   by 32px. `min(<floor>, 100%)` keeps the intended multi-column
   behaviour on wide screens and lets the column collapse gracefully
   instead of overflowing on narrow ones. */
.grid-3     {grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.doors      {grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.posters    {grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cal        {grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.road       {grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.badges     {grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.radio-grid {grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.stat-row   {grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.hero-meta  {grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}

/* ------------------------------------------------------------
   2. Touch targets
   ------------------------------------------------------------
   Checkboxes and radios rendered at 17–18px — under half the 44px
   touch guideline, and these gate consent and team choice, so a missed
   tap costs a submission. Enlarged on coarse pointers only, so mouse
   users keep the tighter visual. */
@media (pointer: coarse){
  .field input[type="checkbox"],
  .field input[type="radio"],
  .checkline input,
  .field .radio-card input{width:22px;height:22px;margin-top:0}
  .checkline{align-items:center;gap:13px}
  .field .radio-card{padding:15px}
  /* give every standalone link a real target without changing the type */
  footer .f-col a,
  main p > a{display:inline-block;padding-block:7px}
  .poster .cap a{display:inline-block;padding-block:10px}
  .nav-logo{padding-block:8px}
}

/* ------------------------------------------------------------
   3. Small-screen legibility
   ------------------------------------------------------------
   The mono label styles bottomed out at 10.5–11px. Uppercase mono at
   that size is the first thing to become unreadable on a phone held at
   arm's length, and these carry real information (the date note, the
   hero tags, section eyebrows). */
@media (max-width:520px){
  .hero-kicker{font-size:12px;letter-spacing:.16em}
  .eyebrow    {font-size:12px;letter-spacing:.16em}
  .hero-note  {font-size:12.5px}
  .tag        {font-size:11.5px;letter-spacing:.1em}
  .stat .v    {font-size:11.5px;letter-spacing:.1em}
  .hero-meta dt{font-size:11px;letter-spacing:.14em}
  .f-legal    {font-size:13px}
  .fineprint  {font-size:14px}
  .field .hint{font-size:13.5px}
}

/* ------------------------------------------------------------
   4. Nav fits at 320px
   ------------------------------------------------------------
   The wordmark plus a long CTA ("Register for Launch Day" on the
   council page) could not both fit and pushed the page sideways.
   Below 420px the mark alone carries the brand — a standard mobile
   masthead — and the CTA keeps its full, unambiguous label. */
@media (max-width:420px){
  .nav-logo span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .nav .wrap{padding:0 14px;gap:10px}
  .nav-links .btn{font-size:11.5px;padding:10px 13px;letter-spacing:.03em}
}

/* ------------------------------------------------------------
   5. Section rhythm on phones
   ------------------------------------------------------------
   78px of section padding is a lot of dead scrolling on a 640px-tall
   screen, and the 26px wrap gutter is wider than it needs to be. */
@media (max-width:520px){
  section{padding:52px 0}
  .wrap{padding:0 18px}
  .cell{padding:22px}
  .door{padding:24px}
  .stat{padding:18px 20px}
  .btn.big{font-size:15px;padding:14px 22px;width:100%;justify-content:center}
  .hero-cta{gap:11px}
  .hero-cta .btn.big{width:100%}
}

/* ------------------------------------------------------------
   6. Respect the notch / rounded corners on modern phones
   ------------------------------------------------------------ */
@supports (padding: max(0px)){
  .wrap{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  @media (min-width:521px){
    .wrap{
      padding-left:max(26px, env(safe-area-inset-left));
      padding-right:max(26px, env(safe-area-inset-right));
    }
  }
}

/* ============================================================
   Google sign-in gate (launch / council forms)
   ============================================================ */
.auth-gate{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  background:var(--surface);
  padding:26px 26px 28px;
  margin-bottom:30px;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  max-width:720px;
}
.auth-gate h3{font-size:21px;margin:0}
.auth-gate p{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:62ch;margin:0}
.auth-gate p b{color:var(--text);font-weight:400}
.auth-gate .btn{margin-top:6px}
.auth-gate .btn svg{flex:0 0 auto}
.auth-eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-dim);
}
.auth-eyebrow.ok{color:var(--gold)}
.auth-eyebrow.bad{color:#FF8A8E}
.auth-note{font-size:13px!important;color:var(--muted-dim)!important}

/* A locked identity field should read as settled, not as broken. */
.field input.is-locked{
  background:var(--ground-2);
  color:var(--muted);
  cursor:default;
}
.field input.is-locked:focus{border-color:var(--line)}

@media(max-width:520px){
  .auth-gate{padding:22px 20px}
  .auth-gate .btn{width:100%;justify-content:center}
}

/* ============================================================
   Legal pages (privacy, terms)
   ============================================================ */
.legal{max-width:74ch}
.legal h2{font-size:clamp(22px,3.2vw,29px);margin:44px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px;margin:26px 0 8px;text-transform:none;letter-spacing:-.01em}
.legal p{color:var(--muted);font-size:16.5px;line-height:1.68;margin-bottom:15px}
.legal p b,.legal li b{color:var(--text);font-weight:400}
.legal ul{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.legal li{color:var(--muted);font-size:16.5px;line-height:1.6}
.legal li::marker{color:var(--gold)}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .updated{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-dim);border-top:1px solid var(--line);padding-top:16px;margin-top:44px;
}
.legal .callout{
  border-left:3px solid var(--gold);background:var(--surface);
  padding:18px 20px;margin:0 0 24px;
}
.legal .callout p{margin:0;color:var(--text);font-size:16px}


/* ---------- hero: the date and the action come first ---------- */
.hero-date{
  margin-top:22px;display:inline-block;align-self:flex-start;
  font-family:var(--mono);font-size:14px;letter-spacing:.02em;
  color:var(--text);background:rgba(255,198,39,.10);
  border:1px solid rgba(255,198,39,.34);border-left:3px solid var(--gold);
  padding:9px 14px;border-radius:0 6px 6px 0;
}
.hero-kicker{padding-bottom:14px;margin-bottom:18px}
.hero-motto{margin-top:16px}
.hero-lede{margin-top:18px;max-width:46ch}
.hero-cta{margin-top:26px}
@media(max-width:560px){
  h1.hero-title{font-size:clamp(40px,11vw,58px)}
  .hero-date{font-size:13px;padding:8px 12px}
  .hero-lede{font-size:16px;margin-top:14px}
}