/* =============================================================================
   BETWAY TOWCESTER RACECOURSE - LEISURE SURVEY
   =============================================================================
   Mobile first. One question per screen.

   ---------------------------------------------------------------------------
   EDIT THESE FIRST - brand colours, fonts and sizing all live in :root below.
   Everything else in this file reads from those variables.
   ---------------------------------------------------------------------------

   Design notes, taken from towcester-racecourse.co.uk:

   The brand is strictly monochrome. The live site uses pure black and pure
   white and essentially no other colour - buttons are either solid white with
   black text or solid black with white text. Corners are barely rounded
   (2-4px), not pills. Display headings are uppercase with open letter-spacing.
   Body copy is Figtree at 18px.

   This file follows that. There is no accent colour, on purpose. Selection is
   shown with weight and a filled tick rather than with colour, which is what
   makes a monochrome palette work.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   FONT - Figtree, the body font used on the main site.

   Self-hosted rather than loaded from Google Fonts: it keeps the site fully
   first-party with no external requests, which is the same reason the
   analytics tags were removed. One 20KB variable file covers weights 400-800.

   HeadingNow, the display face on the main site, is a licensed font and is not
   included. Figtree at 700/800 with uppercase and letter-spacing stands in for
   it. If you licence HeadingNow for web use, add its @font-face here and
   change --font-display below - nothing else needs to change.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;          /* variable range in a single file */
  font-display: swap;
  src: url('/assets/fonts/figtree-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

:root {

  /* --- BRAND COLOURS -------------------------------------------------------
     Monochrome, matching the live site. Pure black is also the exact
     background of the supplied logo PNGs, so they sit seamlessly.
     ---------------------------------------------------------------------- */
  --brand-black:        #000000;
  --brand-white:        #FFFFFF;

  /* --- WELCOME HERO IMAGE ---------------------------------------------------
     The photograph behind the welcome screen. Swap the filename to change it.
     It is a CSS background on purpose: it cannot block first paint and cannot
     shift the layout, so the survey is usable before the photo arrives.

     It is heavily darkened by the gradient in `body::before` below, which is
     what keeps the white lockup readable over a bright sky. If you swap in a
     darker or busier image, check that gradient still holds up.
     ---------------------------------------------------------------------- */
  --hero-image: url('/assets/TowcesterRacecourse-27.jpg');

  /* --- SURFACES ------------------------------------------------------------ */
  --surface-page:       var(--brand-black);
  --surface-card:       var(--brand-white);
  --surface-raised:     #121212;   /* prize panel, just off the page black */
  --border-subtle:      rgba(255, 255, 255, 0.22);
  --border-strong:      rgba(255, 255, 255, 0.45);   /* 4.4:1 - AA for UI edges */

  /* --- TEXT ---------------------------------------------------------------- */
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: #A6A6A6;   /* 8.1:1 on black */
  --text-on-card:       #000000;
  --text-on-card-muted: #4A4A4A;

  /* --- FONTS ---------------------------------------------------------------- */
  --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Uppercase + tracking is the brand's display signature. Used on short
     labels only - never on question text, which has to stay easy to read. */
  --track-label: 0.16em;
  --track-display: 0.01em;

  /* --- SIZING AND RHYTHM ---------------------------------------------------- */
  --content-max: 33rem;
  --radius-card: 4px;            /* the site sits at 2-4px, not pills */
  --radius-btn: 4px;
  --tap-min: 3.5rem;             /* 56px minimum thumb target */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* --- MOTION --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-screen: 280ms;
  --dur-tap: 140ms;
}

/* =============================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 1.0625rem;          /* 17px, closer to the site's 18px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* A barely-there wash so the black is not completely flat. Fixed so it
     never repaints as screens change. */
  background-image: radial-gradient(
    120% 60% at 50% 0%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0) 62%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* -----------------------------------------------------------------------------
   WELCOME HERO

   A darkened band of photography behind the top of the welcome screen, fading
   into the page black. This is the main site's visual language - dark imagery
   with white type over it.

   It lives on `body::before` rather than inside the screen, because `.screen`
   carries a transform, and a transformed ancestor becomes the containing block
   for fixed positioning. Attaching it to the body keeps it genuinely fixed to
   the viewport and full-bleed, and keeps it entirely out of the layout.

   The gradient sits in the same background shorthand, above the photo. At its
   lightest it is 70% black, so even the brightest part of the sky drops to
   roughly #30353A - white type over it stays above 10:1.
   -------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 26rem;
  z-index: -1;      /* behind the app, in front of the page background */
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);

  /* Taller and lighter than a plain scrim so the gateway actually reads.
     The overlay opens up where the lockup sits and closes down before the
     body copy starts - see the measured contrast figures in the README.
     If you swap --hero-image for a brighter photograph, re-check the top
     two stops: they are what keep the white lockup legible against sky. */
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.52) 40%,
      rgba(0, 0, 0, 0.78) 68%,
      rgba(0, 0, 0, 0.94) 86%,
      #000000 100%
    ),
    var(--hero-image);
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
}

/* Only on the welcome screen. app.js toggles this class. */
body.is-welcome::before { opacity: 1; }

/* Note: .app deliberately has NO z-index. Giving it one would create a
   stacking context, which isolates blending - and the logo relies on
   mix-blend-mode: screen to drop the black background out of the supplied
   PNGs. Same reason .screen no longer carries a resting transform. */

/* The `hidden` attribute must always win. Without this, any rule that sets a
   display value - such as `.app__nav { display: flex }` - outranks the
   browser's built-in `[hidden] { display: none }`, and the element stays on
   screen with the attribute set. */
[hidden] { display: none !important; }

h1, h2, p, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--brand-white);
  color: var(--brand-black);
  font-weight: 700;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top var(--dur-tap) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* Focus ring. White on a black page, so it reads at any size. */
:focus-visible {
  outline: 3px solid var(--brand-white);
  outline-offset: 3px;
  border-radius: 2px;
}
[tabindex="-1"]:focus { outline: none; }

/* =============================================================================
   SHARED TYPE TREATMENTS
   ========================================================================== */

/* Small uppercase label - the brand's signature. Eyebrows, flags, counters. */
.label-mark {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* =============================================================================
   APP SHELL
   ========================================================================== */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.app__header {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-3) 0;
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
}

.app__logo {
  /* The supplied PNGs have a solid black background rather than transparency.
     `screen` blending drops that black out. Harmless if you later supply
     transparent PNGs or SVGs. */
  mix-blend-mode: screen;
  width: 11.25rem;
  height: auto;
  aspect-ratio: 1195 / 265;   /* reserves space - no layout shift */
  margin: 0 auto;
}

.app__main {
  flex: 1 1 auto;
  display: flex;
  padding: var(--space-4) var(--space-3) var(--space-3);
}

.screen-host {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =============================================================================
   PROGRESS
   ========================================================================== */

.progress {
  max-width: var(--content-max);
  margin: var(--space-4) auto 0;
}

.progress__track {
  height: 2px;                 /* a hairline, in keeping with the brand */
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: var(--brand-white);
  transition: width var(--dur-screen) var(--ease-out);
}

.progress__label {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* =============================================================================
   SCREEN TRANSITIONS
   ========================================================================== */

/* No resting transform and no will-change, on purpose. Either one would make
   .screen a stacking context, which isolates blending and would leave the
   logo's black PNG background showing as a rectangle over the hero photo.
   Transforms are applied only on the entering classes below, so the resting
   state stays free of a stacking context. */
.screen {
  opacity: 1;
  transition:
    opacity var(--dur-screen) var(--ease-out),
    transform var(--dur-screen) var(--ease-out);
}

.screen.is-entering      { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
.screen.is-entering-back { opacity: 0; transform: translate3d(0, -1.25rem, 0); }

/* =============================================================================
   QUESTION LAYOUT
   ========================================================================== */

.q__head { margin-bottom: var(--space-4); }

.q__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  margin-bottom: var(--space-2);
  opacity: 0.7;
}

/* Sentence case, not uppercase. The brand shouts in its headlines, but a
   survey question has to be effortless to read or people drop out. */
.q__title {
  font-family: var(--font-display);
  font-size: 1.4375rem;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--brand-white);
  text-wrap: balance;
}

.q__help {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
}

.q__counter {
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  min-height: 1.25rem;   /* reserved so the list never jumps */
}

.q__optional {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-on-dark-muted);
}

.q__body { display: flex; flex-direction: column; gap: var(--space-2); }

/* =============================================================================
   ANSWER OPTIONS

   White cards on black. Selection is signalled with a filled tick, a heavier
   label and a black inner rule - no colour. The inner rule sits inside the
   card so it never merges with the black page behind it.
   ========================================================================== */

.options { gap: 0.5rem; }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  color: var(--text-on-card);
  border: 0;
  border-radius: var(--radius-card);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.35;
  transition:
    transform var(--dur-tap) var(--ease-out),
    box-shadow var(--dur-tap) var(--ease-out),
    opacity var(--dur-tap) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* The real input stays in the DOM for keyboard and screen-reader support,
   it is just visually replaced by the card. */
.option__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

.option__label { flex: 1 1 auto; }

.option__mark {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid #B4B4B4;
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition:
    border-color var(--dur-tap) var(--ease-out),
    background-color var(--dur-tap) var(--ease-out);
}
.option__mark--box { border-radius: 2px; }

/* Tick drawn in CSS - no extra image request. */
.option__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.45rem;
  height: 0.25rem;
  border-left: 2.5px solid var(--brand-white);
  border-bottom: 2.5px solid var(--brand-white);
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: opacity var(--dur-tap) var(--ease-out),
              transform var(--dur-tap) var(--ease-out);
}

.option.is-selected {
  box-shadow: inset 0 0 0 2px var(--brand-black);
}
.option.is-selected .option__label { font-weight: 700; }
.option.is-selected .option__mark {
  border-color: var(--brand-black);
  background: var(--brand-black);
}
.option.is-selected .option__mark::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

/* Capped multi-select: genuinely disabled, and it looks it. */
.option.is-disabled { opacity: 0.38; cursor: not-allowed; }

/* Focus ring sits on the card, since the input itself is hidden. */
.option:focus-within {
  outline: 3px solid var(--brand-white);
  outline-offset: 3px;
}

@media (hover: hover) {
  .option:not(.is-disabled):hover { box-shadow: inset 0 0 0 2px #9A9A9A; }
  .option.is-selected:hover { box-shadow: inset 0 0 0 2px var(--brand-black); }
}
.option:not(.is-disabled):active { transform: scale(0.985); }

/* =============================================================================
   TEXT FIELDS
   ========================================================================== */

.field {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  color: var(--text-on-card);
  border: 0;
  box-shadow: inset 0 0 0 2px transparent;
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: 1rem;   /* 16px minimum, or iOS zooms the page on focus */
  line-height: 1.45;
  resize: vertical;
  transition: box-shadow var(--dur-tap) var(--ease-out);
}
.field::placeholder { color: #767676; }
.field:focus { box-shadow: inset 0 0 0 2px var(--brand-black); }
.field[aria-invalid='true'] { box-shadow: inset 0 0 0 2px #B00020; }

.field__error {
  margin-top: var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: #FF9E9E;   /* 8.5:1 on black - the one place colour earns its keep */
}

.field__nudge {
  margin: calc(var(--space-1) * -1) 0 var(--space-2) 2.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-white);
}

/* =============================================================================
   PRIZE PANEL - welcome, prize and thank-you screens
   ========================================================================== */

.prize-card {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: left;
}

.prize-card--lead { margin-top: 0; }

.prize-card__flag {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  opacity: 0.7;
}

.prize-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--brand-white);
  margin-bottom: var(--space-1);
}

.prize-card__text {
  font-size: 0.9375rem;
  color: var(--text-on-dark);
}

/* Closing date and terms link - present but quiet. */
.prize-card__terms {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

/* =============================================================================
   WELCOME SCREEN
   ========================================================================== */

.screen--welcome { text-align: center; }

.welcome__logo {
  width: min(12.5rem, 54%);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-3);
  mix-blend-mode: screen;
}

.welcome__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--brand-white);
  text-wrap: balance;
}

.welcome__body {
  margin-top: var(--space-3);
  font-size: 1rem;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.welcome__meta {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* Kiosk mode only - see FIELD RESEARCH in js/config.js.
   A quiet setup check for the researcher, not a feature for the respondent,
   so it is outlined rather than filled: legible at a glance when you are
   looking for it, and easy to ignore when you are not. */
.kiosk-flag {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  display: inline-block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* Heritage nod, echoing the rule-flanked mark in the lockup. */
.est-mark {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--text-on-dark-muted);
}
.est-mark::before,
.est-mark::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--border-subtle);
}

/* =============================================================================
   STATEMENT (the reveal screen)
   ========================================================================== */

.screen--statement { text-align: center; padding: var(--space-5) 0; }

.statement__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  opacity: 0.7;
  margin-bottom: var(--space-3);
}

/* The one place uppercase display type is used, matching the site's hero. */
.statement__headline {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.14;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--brand-white);
  text-wrap: balance;
}

.statement__body {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.statement__rule {
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--space-5) auto 0;
  background: var(--brand-white);
}

/* =============================================================================
   PRIZE FORM
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: var(--space-3); }

.form__row { display: flex; flex-direction: column; gap: var(--space-1); }

.form__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
}

.form__hint {
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--text-on-dark-muted);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.check:focus-within { outline: 3px solid var(--brand-white); outline-offset: 2px; }

.check__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

.check__mark {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  border: 2px solid var(--border-strong);
  border-radius: 2px;
  background: transparent;
  position: relative;
  transition: border-color var(--dur-tap) var(--ease-out),
              background-color var(--dur-tap) var(--ease-out);
}
.check__mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  width: 0.45rem; height: 0.25rem;
  border-left: 2.5px solid var(--brand-black);
  border-bottom: 2.5px solid var(--brand-black);
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: opacity var(--dur-tap) var(--ease-out),
              transform var(--dur-tap) var(--ease-out);
}
.check__input:checked ~ .check__mark {
  border-color: var(--brand-white);
  background: var(--brand-white);
}
.check__input:checked ~ .check__mark::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

.check__label { font-size: 0.9375rem; line-height: 1.4; }

.privacy {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}

/* =============================================================================
   INSIGHTS PANEL OPT-IN

   A third consent, and it has to look like one. Separated from the prize draw
   and the marketing opt-in by a rule and its own label, so nobody can mistake
   ticking this for entering the draw, or the other way round.
   ========================================================================== */

.panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.panel__flag {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  opacity: 0.7;
}

.panel__intro {
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-on-dark);
  text-wrap: pretty;
}

/* Shown instead of the email field when the draw address can be reused. */
.panel__reuse {
  margin: var(--space-1) 0 var(--space-3) 2.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-white);
}

/* Revealed only once the box is ticked. Indented to sit under the checkbox
   label, so it reads as belonging to it. */
.panel__reveal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-3) 2.125rem;
}

.panel__note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}
.privacy__link {
  color: var(--brand-white);
  text-underline-offset: 3px;
}

/* =============================================================================
   THANK YOU
   ========================================================================== */

.screen--thanks { text-align: center; padding: var(--space-4) 0; }

.thanks__tick {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--brand-white);
  color: var(--brand-black);
  display: grid;
  place-items: center;
}
.thanks__tick svg { width: 1.625rem; height: 1.625rem; }

.thanks__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--brand-white);
}

.thanks__body {
  margin-top: var(--space-2);
  font-size: 1.0625rem;
  color: var(--text-on-dark);
  text-wrap: pretty;
}
.thanks__body--muted { color: var(--text-on-dark-muted); font-size: 0.9375rem; }

/* "Somewhere to go next" block, below the draw line. */
.thanks__more {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.thanks__more-text {
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.thanks__logo {
  width: min(7rem, 32%);
  aspect-ratio: 1 / 1;
  margin: var(--space-4) auto 0;
  mix-blend-mode: screen;
  opacity: 0.75;
}

/* =============================================================================
   BUTTONS AND FOOTER NAV

   The site's button language: solid white with black text, or solid black
   with white text. Square-ish corners, generous padding.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;   /* .btn is also used on <a> - see the thank-you screen */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-tap) var(--ease-out),
              background-color var(--dur-tap) var(--ease-out),
              opacity var(--dur-tap) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--brand-white);
  color: var(--brand-black);   /* 21:1 */
}
@media (hover: hover) {
  .btn--primary:hover { background: #E2E2E2; }
}

.btn--ghost {
  background: transparent;
  color: var(--text-on-dark-muted);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
@media (hover: hover) {
  .btn--ghost:hover { color: var(--brand-white); }
}
.btn--ghost:disabled { opacity: 0.3; cursor: default; }
.btn--ghost:disabled:active { transform: none; }

.btn--block { width: 100%; }
.btn--lg { min-height: 3.75rem; font-size: 1.0625rem; margin-top: var(--space-4); }

.btn__icon { width: 1.125rem; height: 1.125rem; }

.app__nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--content-max) + var(--space-3) * 2);
  margin: 0 auto;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(
    to top,
    var(--brand-black) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* The primary action gets the space - it is what most people will tap.
   Labels are kept short enough to sit on one line at 375px; nowrap makes a
   too-long label obvious in testing rather than silently reflowing the bar. */
.app__nav .btn--primary {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 68%;
  white-space: nowrap;
}

/* =============================================================================
   LONG-FORM DOCUMENT PAGES (terms and conditions)
   ========================================================================== */

.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.doc__logo {
  width: 10rem;
  aspect-ratio: 1195 / 265;
  margin: 0 auto var(--space-5);
  mix-blend-mode: screen;
}

.doc__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.doc__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--brand-white);
}

.doc__meta {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--text-on-dark-muted);
}

.doc__rule {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-5) 0;
  border: 0;
}

.doc h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand-white);
  margin: var(--space-5) 0 var(--space-2);
}

.doc p, .doc li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #D6D6D6;   /* 14.8:1 - comfortable for long reading */
}

.doc p + p { margin-top: var(--space-2); }

.doc ul { margin: var(--space-2) 0 0; padding-left: 1.25rem; }
.doc li + li { margin-top: var(--space-1); }

.doc a { color: var(--brand-white); text-underline-offset: 3px; }

.doc__placeholder {
  color: var(--brand-white);
  background: rgba(255, 255, 255, 0.14);
  padding: 0 0.25rem;
  border-radius: 2px;
  font-weight: 600;
}

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-5);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-white);
  text-underline-offset: 3px;
}

/* =============================================================================
   LARGER SCREENS
   ========================================================================== */

@media (min-width: 40rem) {
  :root { --space-4: 1.75rem; }

  .app__header { padding-top: var(--space-4); }
  .app__logo { width: 13rem; }
  .app__main { padding: var(--space-5) var(--space-4) var(--space-4); }

  .q__title { font-size: 1.75rem; }
  .welcome__title { font-size: 2rem; }
  .statement__headline { font-size: 2.375rem; }
  .thanks__title { font-size: 2.5rem; }
  .doc__title { font-size: 2.25rem; }

  .option { padding: var(--space-3); font-size: 1.0625rem; }
}

@media (min-width: 64rem) {
  .app__main { align-items: center; }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .screen.is-entering,
  .screen.is-entering-back { opacity: 1; transform: none; }
}

/* =============================================================================
   HIGH CONTRAST / FORCED COLOURS
   ========================================================================== */

@media (forced-colors: active) {
  .option { border: 1px solid ButtonBorder; }
  .option.is-selected { border: 2px solid Highlight; }
  .option__mark, .check__mark { border-color: ButtonBorder; }
  .progress__fill { background: Highlight; }
}