/* West Coast Fencing Academy, Austin — free trial landing page.
   Built from docs/design/2026-09-11-hero-form-directions-r3/design_handoff_free_trial_page/README.md
   Every value in the handoff's token tables has a custom property below. */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted. Archivo is the variable face (wdth axis); Barlow ships as
   three static weights. Subsets and file names follow the Google Fonts
   latin / latin-ext split the files were downloaded from. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/barlow-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/barlow-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Colour. Contrast figures are the handoff's measured pairs. */
  --navy: #141e32;
  --near-white: #f8fdfd;
  --slate: #4d5665;
  --pale-blue: #c6dae0;
  --gray: #8f8f8f;
  --gold: #e2c07d;
  --input-fill: #1b2740;

  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 30, 50, 0.86) 0%,
    rgba(20, 30, 50, 0.8) 40%,
    rgba(20, 30, 50, 0.95) 100%
  );
  --selected-fill: rgba(248, 253, 253, 0.1);
  --full-fill: rgba(143, 143, 143, 0.16);
  --banner-fill: rgba(248, 253, 253, 0.08);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --wdth-wide: "wdth" 118;
  --wdth-lockup: "wdth" 115;

  --type-h1: 46px;
  --type-h1-lh: 1.02;
  --type-h2: 32px;
  --type-h2-lh: 1.05;
  --type-h2-closing: 40px;
  --type-h2-coach: 30px;
  --type-h3-sm: 18px;
  --type-h3: 19px;
  --type-h3-lg: 20px;
  --type-h3-lh: 1.3;
  --type-lead: 19px;
  --type-lead-lh: 1.5;
  --type-body: 17px;
  --type-body-lh: 1.55;
  --type-body-sm: 16px;
  --type-body-sm-lh: 1.5;
  --type-label: 15px;
  --type-label-sm: 14px; /* the floor anywhere on the page */
  --type-stat: 34px;
  --type-stat-md: 30px;
  --type-stat-sm: 26px;

  /* Spacing, radius, focus */
  --pad-x: 22px;
  --section-y: 64px;
  --gap-card: 20px;
  --gap-card-lg: 28px;
  --content-max: 1180px;
  --content-max-narrow: 860px;
  --radius-pill: 50px;
  --radius-input: 8px;
  --radius-tag: 4px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-offset-input: 2px;
  --target-min: 44px;
  --control-h: 52px;
  --control-h-lg: 56px;
  --button-h: 60px;

  /* Rules and borders. No shadows anywhere on this page. */
  --rule-navy: 2px;
  --rule-navy-strong: 3px;
  --rule-hair: 1.5px;
  --diagonal-h: 64px;
  --diagonal-h-lg: 70px;
}

/* ---------------------------------------------------------------- reset */

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

/* Several blocks below set an explicit display, which would otherwise beat the
   browser's default styling for the hidden attribute. The form toggles whole
   blocks with it, so make it win everywhere. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--near-white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure,
blockquote,
fieldset,
legend {
  margin: 0;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- focus ring */

:focus-visible {
  outline: var(--focus-width) solid var(--navy);
  outline-offset: var(--focus-offset);
}

.on-navy :focus-visible {
  outline-color: var(--gold);
}

/* ------------------------------------------------------------ skip link */

.skip-link {
  position: absolute;
  left: var(--pad-x);
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 18px;
  background: var(--near-white);
  color: var(--navy);
  border: var(--rule-navy) solid var(--navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ----------------------------------------------------------- structure */

.section {
  padding: var(--section-y) var(--pad-x);
}

.section--tight-top {
  padding-top: 0;
}

.section--navy {
  background: var(--navy);
  color: var(--near-white);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

.wrap--narrow {
  max-width: var(--content-max-narrow);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.stack--wide {
  gap: 34px;
}

.stack--tight {
  gap: 16px;
}

/* Every multi-column block is one auto-fit grid, so 320px collapses to one
   column with no media query. min() keeps the track from exceeding the
   container at 320px, which is what would otherwise force a sideways scroll. */
.grid {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
}

.rule-top {
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 40px;
}

/* One 1.5px gold hairline per navy section, never as text. */
.hair-gold {
  border-top: var(--rule-hair) solid var(--gold);
  padding-top: 18px;
}

/* The blade diagonal: a band of near-white cut across the top of a navy
   section. The only use of the motif, and it never crosses text. */
.diagonal {
  height: var(--diagonal-h);
  background: var(--near-white);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.diagonal--lg {
  height: var(--diagonal-h-lg);
}

/* -------------------------------------------------------------- type */

.h1 {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-h1);
  line-height: var(--type-h1-lh);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  text-wrap: balance;
}

.h2--closing {
  font-size: var(--type-h2-closing);
  line-height: var(--type-h1-lh);
}

.h2--coach {
  font-size: var(--type-h2-coach);
  line-height: 1.08;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
}

.h3--sm {
  font-size: var(--type-h3-sm);
}

.h3--lg {
  font-size: var(--type-h3-lg);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  text-wrap: pretty;
}

.body {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
}

.body-sm {
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-lh);
}

.stat {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-stat);
  line-height: 1.1;
}

.stat--md {
  font-size: var(--type-stat-md);
}

.stat--sm {
  font-size: var(--type-stat-sm);
}

.muted {
  color: var(--slate);
}

.on-navy .muted {
  color: var(--pale-blue);
}

.measure {
  max-width: 520px;
}

.measure--sm {
  max-width: 440px;
}

/* --------------------------------------------------------- components */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--button-h);
  padding: 0 26px;
  border: 4px solid var(--near-white);
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--near-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--slate);
}

.btn[disabled],
.btn[aria-busy="true"] {
  background: var(--pale-blue);
  border-color: var(--pale-blue);
  color: var(--slate);
  cursor: not-allowed;
}

.btn__arrow {
  flex: none;
}

.btn__spinner {
  flex: none;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--control-h);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.pill--on-navy {
  border: var(--rule-hair) solid var(--pale-blue);
  color: var(--near-white);
}

.pill--on-navy:hover {
  background: var(--slate);
}

.pill--on-light {
  border: var(--rule-navy) solid var(--navy);
  color: var(--navy);
}

.pill--on-light:hover {
  background: var(--navy);
  color: var(--near-white);
}

.link {
  color: var(--navy);
}

.link:hover {
  color: var(--slate);
}

.on-navy .link {
  color: var(--near-white);
}

.on-navy .link:hover {
  color: var(--pale-blue);
}

/* A link that has to stay a 44px target even though its text is one line. */
.target {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--target-min);
}

/* ------------------------------------------------------------- rating */

.rating {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--target-min);
  padding: 8px 0;
  text-decoration: none;
}

.rating__score {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-stat-sm);
  color: var(--near-white);
}

.rating__lines {
  display: flex;
  flex-direction: column;
}

.rating__count {
  font-size: var(--type-body);
  color: var(--near-white);
  text-decoration: underline;
}

.rating__date {
  font-size: var(--type-label);
  color: var(--pale-blue);
}


/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--near-white);
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.hero__inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 620px;
  padding: 20px var(--pad-x) 44px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The supplied logo is #0043BC artwork inside its own white ring on a
   transparent field (measured 2026-09-11: 34.9% of pixels transparent), so it
   reads on navy unaided and needs no near-white disc behind it. */
.brand__mark {
  flex: none;
  width: 52px;
  height: 52px;
}

.brand__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-lockup);
  font-weight: 700;
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--near-white);
}

.brand__place {
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.hero__content {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 660px;
}

/* ------------------------------------------------------------- cards */

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 16px;
}

.pitch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  border: var(--rule-navy) solid var(--navy);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--slate {
  border: var(--rule-hair) solid var(--slate);
  max-width: 640px;
}

.day {
  border: var(--rule-hair) solid var(--gray);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
}

.day--trial {
  border: var(--rule-navy-strong) solid var(--navy);
}

.day__name {
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.day--trial .day__name {
  color: var(--navy);
}

.day__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3-sm);
  color: var(--navy);
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--type-body);
  color: var(--slate);
}

.price-list b {
  color: var(--navy);
  font-weight: 500;
}

.quote {
  margin: 0;
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quote blockquote {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--navy);
}

.quote figcaption {
  font-size: var(--type-body-sm);
  color: var(--slate);
}

.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: var(--rule-hair) solid var(--gray);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item:last-child {
  border-bottom: var(--rule-hair) solid var(--gray);
}

.photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.photo--coach {
  object-position: 50% 22%;
}

.photo--lesson {
  object-position: 50% 40%;
}

/* -------------------------------------------------------- booking form */

.book__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--pad-x) var(--section-y);
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

/* One column: the form first, the closing copy after it, so a parent who taps
   "Book my free class" lands on the first field. Two columns: the mockup's
   arrangement, copy left and form right. The pitch column holds no focusable
   element, so this visual swap cannot put the tab order out of step with the
   visual order. The breakpoint is where the grid itself flips: two 320px
   tracks plus a 36px gap need 676px of container, which is a 720px viewport
   once the 22px gutters are taken off. */
.book__pitch {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
}

.book__box {
  order: 1;
  border: var(--rule-hair) solid var(--pale-blue);
  scroll-margin-top: 16px;
}

@media (min-width: 720px) {
  .book__pitch {
    order: 1;
  }

  .book__box {
    order: 2;
  }
}

.form {
  background: var(--navy);
  padding: 26px var(--pad-x) 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__title {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: 28px;
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  color: var(--near-white);
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field__label {
  font-family: var(--font-display);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--near-white);
}

.field__optional {
  font-weight: 400;
  color: var(--pale-blue);
}

.field__help {
  font-size: var(--type-label);
  color: var(--pale-blue);
}

.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 14px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-input);
  background: var(--input-fill);
  color: var(--near-white);
  font-family: var(--font-body);
  font-size: var(--type-body);
}

textarea.input {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: var(--control-h-lg);
}

.input::placeholder {
  color: var(--pale-blue);
}

.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--type-body-sm);
  line-height: 1.4;
  color: var(--near-white);
}

.field__error svg {
  flex: none;
  margin-top: 2px;
}


.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.field-row > .field:first-child {
  flex: 3 1 180px;
  min-width: 0;
}

.field-row > .field:last-child {
  flex: 1 1 90px;
  min-width: 0;
}

/* Slot picker. A full class stays visible and disabled — never hidden, and
   never struck through. */
.slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--control-h-lg);
  padding: 10px 14px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.slot__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot__when {
  font-size: var(--type-body);
  color: var(--near-white);
}

.slot__group {
  font-size: var(--type-label);
  color: var(--pale-blue);
}

.slot__tag {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.slot.is-selected {
  border-width: var(--rule-navy-strong);
  border-color: var(--near-white);
  background: var(--selected-fill);
}

.slot.is-selected .slot__tag {
  color: var(--near-white);
}

.slot.is-full {
  border-color: var(--gray);
  background: var(--full-fill);
  opacity: 0.75;
  cursor: not-allowed;
}

.slot.is-focus {
  outline: var(--focus-width) solid var(--gold);
  outline-offset: var(--focus-offset-input);
}

/* Bot check box */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--target-min);
  cursor: pointer;
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--near-white);
}

.choice__box {
  flex: none;
  width: 26px;
  height: 26px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-tag);
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice input:checked + .choice__box {
  background: var(--near-white);
}

.choice__tick {
  display: none;
}

.choice input:checked + .choice__box .choice__tick {
  display: block;
}

.choice.is-focus .choice__box {
  outline: var(--focus-width) solid var(--gold);
  outline-offset: var(--focus-offset-input);
}

.form__submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form__submit .btn {
  align-self: stretch;
  min-height: var(--control-h-lg);
  padding: 0 24px;
}

.form__footnote {
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--pale-blue);
  text-align: center;
}

/* Banner: 1.5px near-white border, 5px gold left edge. */
.banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: var(--rule-hair) solid var(--near-white);
  border-left: 5px solid var(--gold);
  padding: 14px 16px;
  background: var(--banner-fill);
}


.banner svg {
  flex: none;
  margin-top: 2px;
}

.banner__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body-sm);
  color: var(--near-white);
}

.banner__text {
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--near-white);
}

.banner .pill {
  min-height: var(--target-min);
  padding: 0 20px;
  font-size: var(--type-body-sm);
}

/* Success panel */
.done {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: var(--rule-hair) solid var(--pale-blue);
  padding: 22px 20px;
}


.done__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.done__title {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--near-white);
}

.done__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--type-body);
  line-height: var(--type-body-sm-lh);
  color: var(--near-white);
}

.done__when {
  font-family: var(--font-display);
  font-weight: 600;
}


/* ------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy);
  color: var(--pale-blue);
  border-top: var(--rule-hair) solid var(--slate);
  padding: 36px var(--pad-x) 48px;
}

.site-footer .wrap {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  font-size: var(--type-body-sm);
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn__spinner {
    animation-duration: 2.4s;
  }
}