/* ═══════════════════════════════════════════════════════════════
   Newbury Show 2026: post-show feedback
   Brand tokens match the visitor guide and the other 2026 builds:
   navy #0d1b3e, orange #e85d1c, Sink display, Lexend body.

   Mobile first. Most people arrive from an email or a Facebook post
   on their phone, so every tap target is at least 44px.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family:'Sink'; src:url('fonts/Sink.ttf') format('truetype'), url('fonts/Sink.otf') format('opentype'); font-weight:normal; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('fonts/Lexend-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('fonts/Lexend-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('fonts/Lexend-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('fonts/Lexend-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'MADE Outer Sans'; src:url('fonts/MadeOuterSans-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }

:root {
  --navy:         #0d1b3e;
  --navy-soft:    #24345c;
  --orange:       #e85d1c;
  --orange-hover: #c94d10;
  --orange-tint:  #fff4ed;
  --white:        #ffffff;
  --input-border: #d4d0c8;
  --text:         #3c4050;
  --text-muted:   #6f6f6f;
  --hint:         #8a8a8a;
  --error:        #c62f22;
  --rule:         #ece9e3;
  --tint:         #f7f5f1;
  --green:        #2e7d55;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
[hidden] { display:none !important; }

body {
  font-family:'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color:var(--navy);
  background-color:var(--navy);
  background-image:linear-gradient(rgba(10,20,50,0.72), rgba(10,20,50,0.72)), url('bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  padding:1rem 0.75rem 2.5rem;
  padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));
  line-height:1.6;
}

/* ─── Card ──────────────────────────────────────────────────── */
.card {
  background:var(--white);
  border-radius:20px;
  width:100%;
  max-width:600px;
  padding:1.6rem 1.25rem 1.4rem;
  align-self:flex-start;
}

/* ─── Header ────────────────────────────────────────────────── */
.head { text-align:center; margin-bottom:1.3rem; }
.logo-show { height:62px; width:auto; display:block; margin:0 auto 0.4rem; }
.kicker {
  font-size:0.66rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}

/* ─── Type ──────────────────────────────────────────────────── */
h1 {
  font-family:'Sink', 'Lexend', sans-serif;
  font-size:2.6rem;
  line-height:0.98;
  font-weight:normal;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:0.9rem;
  letter-spacing:-0.005em;
}
.lede {
  font-size:0.95rem;
  color:var(--text);
  text-align:center;
  font-weight:300;
  margin:0 auto 1.4rem;
  max-width:30rem;
}

/* ─── Intro facts, like the visitor guide's info tiles ─────── */
.facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.6rem;
  margin-bottom:1.4rem;
}
.fact {
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  border:1px solid var(--input-border);
  border-radius:14px;
  padding:0.8rem 0.8rem;
}
.fact svg {
  width:18px; height:18px; flex:none; margin-top:0.1rem;
  fill:none; stroke:var(--orange); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.fact-k {
  display:block;
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
}
.fact-v { display:block; font-size:0.84rem; font-weight:600; line-height:1.35; }

.resume-note {
  background:var(--tint);
  border-radius:12px;
  padding:0.8rem 1rem;
  font-size:0.85rem;
  text-align:center;
  margin-bottom:1rem;
  font-weight:300;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:inherit;
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:10px;
  padding:0.9rem 1.4rem;
  min-height:52px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background 0.15s, border-color 0.15s;
}
.btn-primary { background:var(--orange); color:var(--white); }
.btn-primary:hover:not(:disabled) { background:var(--orange-hover); }
.btn-primary:disabled { opacity:0.6; cursor:default; }
.btn-ghost { background:var(--white); color:var(--navy); border-color:var(--input-border); }
.btn-ghost:hover { border-color:var(--navy); }
.btn-block { width:100%; }
.btn-link {
  display:block;
  margin:0.9rem auto 0;
  background:none;
  border:0;
  font-family:inherit;
  font-size:0.8rem;
  color:var(--text-muted);
  text-decoration:underline;
  cursor:pointer;
  padding:0.4rem;
}

/* ─── Progress ──────────────────────────────────────────────── */
.progress { margin-bottom:1.3rem; }
.progress-meta {
  display:flex;
  justify-content:space-between;
  font-size:0.66rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange);
  margin-bottom:0.45rem;
}
.progress-meta span:last-child { color:var(--hint); font-weight:600; }
.progress-track { height:6px; background:var(--rule); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--orange); border-radius:99px; transition:width 0.35s ease; }

.page-title {
  font-family:'Sink', 'Lexend', sans-serif;
  font-weight:normal;
  font-size:1.9rem;
  line-height:1;
  text-transform:uppercase;
  padding-bottom:0.8rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--rule);
  outline:none;
}

/* ─── Questions ─────────────────────────────────────────────── */
.q { border:0; margin:0 0 1.7rem; min-width:0; }
.q[hidden] { display:none; }
.q.is-new { animation:reveal 0.3s ease; }
@keyframes reveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.q-label, .q > legend {
  display:block;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  margin-bottom:0.3rem;
  padding:0;
}
.q-hint { font-size:0.8rem; color:var(--hint); font-weight:300; margin-bottom:0.7rem; }
.q-label + .choices, .q-label + .scale, .q-label + .matrix,
.q-label + .nps, .q-label + input, .q-label + textarea { margin-top:0.55rem; }
.opt { font-weight:400; font-size:0.74rem; color:var(--hint); margin-left:0.25rem; }

/* Branch questions get a small orange rail so people can see it follows on. */
.q.branch { border-left:3px solid var(--orange); padding-left:0.9rem; margin-top:-0.6rem; }

/* Choices (radio and checkbox) */
.choices { display:grid; gap:0.45rem; }
@media (min-width:520px) { .choices.two-col { grid-template-columns:1fr 1fr; } }
.choice {
  display:flex;
  align-items:center;
  gap:0.7rem;
  border:1.5px solid var(--input-border);
  border-radius:11px;
  padding:0.7rem 0.85rem;
  font-size:0.9rem;
  line-height:1.35;
  cursor:pointer;
  min-height:50px;
  transition:border-color 0.12s, background 0.12s;
}
.choice input { width:20px; height:20px; accent-color:var(--orange); flex:none; margin:0; }
.choice:has(input:checked) { border-color:var(--navy); background:var(--tint); font-weight:600; }
.choice:has(input:disabled) { opacity:0.45; cursor:not-allowed; }
.choice:has(input:focus-visible) { outline:3px solid rgba(232,93,28,0.35); outline-offset:1px; }
.max-note { font-size:0.75rem; color:var(--orange); margin-top:0.4rem; font-weight:600; min-height:1.1em; }

/* Star scale: five tappable boxes with the word underneath */
.scale { display:grid; grid-template-columns:repeat(5, 1fr); gap:0.4rem; }
.scale label {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.15rem;
  border:1.5px solid var(--input-border);
  border-radius:11px;
  padding:0.55rem 0.1rem 0.45rem;
  cursor:pointer;
  font-size:0.66rem;
  color:var(--text-muted);
  text-align:center;
  line-height:1.2;
  min-height:62px;
}
.scale input { position:absolute; opacity:0; pointer-events:none; }
.scale svg { width:24px; height:24px; fill:none; stroke:var(--input-border); stroke-width:1.6; stroke-linejoin:round; }
.scale label.lit svg { fill:var(--orange); stroke:var(--orange); }
.scale label:has(input:checked) { border-color:var(--navy); background:var(--tint); color:var(--navy); font-weight:700; }
.scale label:has(input:focus-visible) { outline:3px solid rgba(232,93,28,0.35); outline-offset:1px; }

/* 0 to 10 */
.nps { display:grid; grid-template-columns:repeat(11, 1fr); gap:0.25rem; }
.nps label {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--input-border);
  border-radius:9px;
  min-height:46px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
}
.nps input { position:absolute; opacity:0; pointer-events:none; }
.nps label:has(input:checked) { background:var(--navy); border-color:var(--navy); color:var(--white); }
.nps label:has(input:focus-visible) { outline:3px solid rgba(232,93,28,0.35); outline-offset:1px; }
.nps-ends { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--hint); margin-top:0.35rem; }
@media (max-width:380px) {
  .nps { grid-template-columns:repeat(6, 1fr); }
}

/* Matrix: one row per item, a compact 1 to 5 under each */
.matrix { display:grid; gap:0.55rem; }
.mrow {
  border:1.5px solid var(--rule);
  border-radius:12px;
  padding:0.65rem 0.7rem 0.7rem;
}
.mrow.is-invalid { border-color:var(--error); }
.mrow-head { display:flex; justify-content:space-between; gap:0.5rem; align-items:baseline; margin-bottom:0.45rem; }
.mrow-label { font-size:0.88rem; font-weight:600; line-height:1.3; }
.mrow-word { font-size:0.72rem; color:var(--orange); font-weight:700; white-space:nowrap; }
.mrow-opts { display:grid; grid-template-columns:repeat(5, 1fr); gap:0.3rem; }
.mrow-opts.has-na { grid-template-columns:repeat(5, 1fr) 1.2fr; }
.mrow-opts label {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:44px;
  border:1.5px solid var(--input-border);
  border-radius:9px;
  font-size:0.88rem;
  font-weight:600;
  cursor:pointer;
}
.mrow-opts label.na { font-size:0.7rem; color:var(--text-muted); font-weight:500; }
.mrow-opts input { position:absolute; opacity:0; pointer-events:none; }
.mrow-opts label:has(input:checked) { background:var(--navy); border-color:var(--navy); color:var(--white); }
.mrow-opts label:has(input:focus-visible) { outline:3px solid rgba(232,93,28,0.35); outline-offset:1px; }
.matrix-key { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--hint); margin-bottom:0.2rem; padding:0 0.2rem; }

/* Text */
.q input[type="text"], .q input[type="email"], .q textarea, .draw input[type="text"], .draw input[type="email"] {
  width:100%;
  font-size:1rem; /* 16px minimum or iOS zooms on focus */
  font-family:inherit;
  color:var(--navy);
  padding:0.8rem 0.85rem;
  border:1.5px solid var(--input-border);
  border-radius:11px;
  background:var(--white);
  min-height:50px;
  -webkit-appearance:none;
  appearance:none;
}
.q textarea { min-height:96px; resize:vertical; line-height:1.5; }
.q input:focus, .q textarea:focus, .draw input:focus {
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(13,27,62,0.09);
}
/* Out-specifies the plain input rule. The press build shipped with invalid
   fields staying grey because a bare .error selector lost this fight. */
.q input.is-invalid, .q textarea.is-invalid, .draw input.is-invalid { border-color:var(--error); }
.q.is-invalid .choice, .q.is-invalid .scale label, .q.is-invalid .nps label { border-color:#e9b3ad; }

.error { font-size:0.8rem; color:var(--error); margin-top:0.4rem; font-weight:500; display:none; }
.error.show { display:block; }
.form-error { text-align:center; margin:0 0 0.8rem; }

/* ─── Prize draw ────────────────────────────────────────────── */
.draw {
  background:var(--orange-tint);
  border-radius:16px;
  padding:1.1rem 1rem 0.6rem;
  margin-bottom:1.5rem;
}
.draw-title {
  font-family:'Sink', 'Lexend', sans-serif;
  font-weight:normal;
  font-size:1.45rem;
  text-transform:uppercase;
  line-height:1;
  margin-bottom:0.4rem;
}
.draw-sub { font-size:0.85rem; font-weight:300; color:var(--text); margin-bottom:0.9rem; }
.check {
  display:flex;
  gap:0.7rem;
  align-items:flex-start;
  font-weight:300;
  font-size:0.86rem;
  line-height:1.5;
  margin-bottom:0.7rem;
  cursor:pointer;
  background:var(--white);
  border:1.5px solid var(--rule);
  border-radius:12px;
  padding:0.8rem;
}
.check input { width:22px; height:22px; accent-color:var(--orange); flex:none; margin-top:0.05rem; }
.check strong { font-weight:600; display:block; }
.check a { color:var(--navy); }
.check.is-invalid { border-color:var(--error); }
.draw-fields { margin:0.2rem 0 0.8rem; display:grid; gap:0.7rem; }
.draw-fields label.f { display:block; font-size:0.84rem; font-weight:600; margin-bottom:0.3rem; }
.draw-fields[hidden] { display:none; }

.legal { font-size:0.74rem; color:var(--hint); line-height:1.6; font-weight:300; margin-top:0.4rem; }
.legal a { color:var(--text-muted); }

/* ─── Nav ───────────────────────────────────────────────────── */
.nav { display:grid; grid-template-columns:1fr 2fr; gap:0.6rem; margin-top:0.4rem; }
.nav.first { grid-template-columns:1fr; }
.nav.first #backBtn { display:none; }

/* ─── Done ──────────────────────────────────────────────────── */
.tick {
  width:62px; height:62px;
  border-radius:50%;
  background:#e8f3ed;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
}
.tick svg { fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.note {
  border-left:3px solid var(--orange);
  background:var(--orange-tint);
  border-radius:0 12px 12px 0;
  padding:0.9rem 1rem;
  font-size:0.86rem;
  font-weight:300;
  color:#5c3a26;
  margin-bottom:1.2rem;
}
.note strong { display:block; font-weight:600; color:var(--navy); margin-bottom:0.15rem; }

/* ─── Footer ────────────────────────────────────────────────── */
.foot {
  border-top:1px solid var(--rule);
  margin-top:1.6rem;
  padding-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  font-size:0.68rem;
  color:#a8a8a8;
  line-height:1.5;
  text-align:center;
}
.foot a { color:#8e8e8e; }
.foot-credit { letter-spacing:0.09em; text-transform:uppercase; font-weight:600; }
.foot-credit a { text-decoration:none; font-weight:700; }

/* ─── Privacy sheet ─────────────────────────────────────────── */
.sheet {
  border:0;
  border-radius:18px;
  padding:1.5rem 1.3rem 1.2rem;
  max-width:480px;
  width:calc(100% - 2rem);
  margin:auto;
  color:var(--navy);
  font-family:inherit;
}
.sheet::backdrop { background:rgba(10,20,50,0.6); }
.sheet h2 { font-size:1.05rem; margin-bottom:0.7rem; }
.sheet p { font-size:0.86rem; font-weight:300; color:var(--text); margin-bottom:0.7rem; }
.sheet a { color:var(--navy); }

.hp { display:none; }

/* ─── Larger screens ────────────────────────────────────────── */
@media (min-width:640px) {
  body { padding:2.5rem 1rem 3rem; }
  .card { padding:2.4rem 2.6rem 2rem; border-radius:24px; }
  h1 { font-size:3.5rem; }
  .logo-show { height:76px; }
  .page-title { font-size:2.3rem; }
  .facts { gap:0.7rem; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}