/* Anmeldestrecke — Flow 0.
   Tokens verbatim from the MaM design system via projects/proof-layer-prototype/app.css:
   Fibonacci spacing --s-1..--s-9, Barlow Condensed, never italic, no emoji,
   motion 140/240/420ms. Only the primitives these pages use are carried over.

   Redesign 2026-09-21 (Ben): one centred column, text-centred hero, a form that reads as one
   card with clear rows. Form rules are untouched — the change is layout and type only.
   landing.css imports this file for the tokens and overrides what it needs. */

@font-face { font-family:"Barlow Condensed"; font-weight:400; font-display:swap; src:url("fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:500; font-display:swap; src:url("fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:600; font-display:swap; src:url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:700; font-display:swap; src:url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:800; font-display:swap; src:url("fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:900; font-display:swap; src:url("fonts/barlow-condensed-900.woff2") format("woff2"); }

:root{
  --ink:#060c0a; --paper:#faf5f0; --signal:#73fa7d; --care:#c3baff;
  --font:"Barlow Condensed","Oswald","Helvetica Neue",Arial,sans-serif;
  --t-display:clamp(36px,6vw,64px); --t-h2:clamp(26px,3.2vw,34px); --t-h3:21px;
  --t-body:18px; --t-meta:13px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:20px; --s-5:32px; --s-6:52px; --s-7:84px; --s-8:136px;
  --maxw:640px; --radius:22px; --radius-sm:10px;
  --ease:cubic-bezier(.2,0,0,1); --d-1:140ms; --d-2:240ms;
}
body[data-theme="signal"]{
  --bg:var(--ink); --fg:var(--paper); --muted:rgba(250,245,240,.62);
  --line:rgba(250,245,240,.16); --field:rgba(250,245,240,.06); --card:rgba(250,245,240,.04);
  --accent:var(--signal); --on-accent:var(--ink);
  --canvas:radial-gradient(1200px 700px at 30% 10%,rgba(115,250,125,.07),transparent 60%),
           radial-gradient(900px 600px at 85% 90%,rgba(195,186,255,.10),transparent 60%),var(--ink);
}
body[data-theme="basic"]{
  --bg:var(--paper); --fg:var(--ink); --muted:rgba(6,12,10,.62);
  --line:rgba(6,12,10,.14); --field:#fff; --card:rgba(255,255,255,.6);
  --accent:var(--signal); --on-accent:var(--ink); --canvas:var(--paper);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); background-attachment:fixed; color:var(--fg);
  font:var(--t-body)/1.5 var(--font); font-synthesis-weight:none;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
}
img{max-width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:9;background:var(--accent);color:var(--on-accent);padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-7)}

/* HERO — centred. The copy is the argument; the type carries it. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.mark{display:block;margin:0 auto var(--s-4);border-radius:var(--radius-sm)}
.display{font-size:var(--t-display);font-weight:900;line-height:1;letter-spacing:-.015em;margin:0 0 var(--s-4);text-wrap:balance}
.h2{font-size:var(--t-h2);font-weight:800;line-height:1.1;margin:0 0 var(--s-3);letter-spacing:-.01em}
.h2-quiet{font-size:var(--t-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-4)}
.h3{font-size:var(--t-h3);font-weight:600;margin:var(--s-5) 0 var(--s-2)}
.lede p{margin:0 0 var(--s-3);max-width:52ch}
.when{margin:var(--s-3) 0 0;font-weight:700;font-size:var(--t-h3);letter-spacing:.02em}

/* PROOF — sits above the ask. Gate law 8: proof-before-ask is geometry. */
.proof{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);text-align:center}
.figures{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-5) var(--s-6);margin:0;padding:0}
.figures li{display:flex;flex-direction:column;gap:var(--s-1);min-width:9ch;align-items:center}
.fig{font-size:clamp(36px,5vw,56px);font-weight:900;line-height:1}
.cap{font-size:var(--t-meta);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.proof-note{margin:var(--s-4) auto 0;color:var(--muted);max-width:48ch}

/* THE ASK — one card, rows top to bottom, one button. */
.ask{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);scroll-margin-top:var(--s-5);text-align:center}
.ask-lede{margin:0 0 var(--s-5);color:var(--muted)}
.form{display:flex;flex-direction:column;gap:var(--s-4);text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5) var(--s-4)}
/* THE TWO DECLARATIONS — asked, never inferred. A fieldset because they are one question each,
   and a legend because a radio group without one is unreadable to a screen reader. */
.q{border:0;border-radius:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.q legend{padding:0;margin:0 0 var(--s-2);font-weight:700;font-size:var(--t-h3);line-height:1.2}
.q-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.q .check{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s-3);background:var(--field);
  transition:border-color var(--d-1) var(--ease)}
.q .check:hover{border-color:var(--fg)}
.q .check:has(input:checked){border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.fields{display:flex;flex-direction:column;gap:var(--s-4)}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field-label{font-weight:700;font-size:var(--t-h3);line-height:1.2}
.opt{font-style:normal;font-weight:500;font-size:var(--t-meta);color:var(--muted);margin-left:var(--s-2)}
input[type=email],input[type=text]{font:inherit;color:var(--fg);background:var(--field);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:0 var(--s-3);min-height:52px;width:100%;
  transition:border-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
input[type=email]:hover,input[type=text]:hover{border-color:var(--fg)}
input[type=email]:focus,input[type=text]:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(115,250,125,.55)}
input[type=email]::placeholder,input[type=text]::placeholder{color:var(--muted);opacity:.7}
.help{font-size:var(--t-meta);color:var(--muted);margin:0}
/* Honeypot: off-canvas rather than display:none, so a bot that only checks the latter is
   still caught. People never see it; Tab never reaches it; screen readers skip the container. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.consents{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.check{display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--fg)}
.check em{display:block;font-style:normal;color:var(--muted);font-size:var(--t-meta)}
.cta{font:inherit;font-weight:800;font-size:var(--t-h3);min-height:56px;padding:0 var(--s-5);
  background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;cursor:pointer;
  transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(115,250,125,.35)}
.form .cta{width:100%}
.fineprint{font-size:var(--t-meta);color:var(--muted);margin:0}

.nowrap{white-space:nowrap}
.prose{max-width:66ch}
.prose ul{padding-left:var(--s-4)}
.prose li{margin-bottom:var(--s-2)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

.foot{max-width:var(--maxw);margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-6);
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-meta);
  display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center}

:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
  .cta:hover{transform:none;box-shadow:none}
}
@media (max-width:480px){
  .wrap{padding:var(--s-5) var(--s-4) var(--s-6)}
  .form{padding:var(--s-4) var(--s-3)}
  .q-opts{grid-template-columns:1fr}
}