/* Homepage (SKILL.md section 4 order): hero and flight here; Join the Patriot Club, Latest,
   Become a member, About, The store, Fuel the fight and Where to watch and follow in sections.css. */

/* Photo scrims shared by the hero and the flight stage, so the stage can mount
   over the hero without a visible change (the hero still is the flight's first
   frame). Gradients here are photo scrims only. */
:root {
  --flight-pos: 50% 42%;
  /* Deep enough that the gold word clears 4.5:1 over the lit shop window (measured on the 1440 and 390 captures). */
  --scrim-flight: linear-gradient(90deg, rgba(22,16,11,.88) 0%, rgba(22,16,11,.84) 35%, rgba(22,16,11,.78) 52%, rgba(22,16,11,.4) 70%, transparent 86%);
  --scrim-flight-m: linear-gradient(180deg, transparent 22%, rgba(22,16,11,.55) 52%, rgba(22,16,11,.88) 100%);
  /* The finale's band scrim: dark only under its low caption, so the three mannequins stay lit. */
  --scrim-flight-band: linear-gradient(0deg, rgba(22,16,11,.9) 0%, rgba(22,16,11,.74) 14%, rgba(22,16,11,.3) 27%, transparent 40%);
  /* The lounge's open scrim: dark only under the caption (bottom-left), so the coin shelves
     and the framed map above it stay lit. Caption contrast over it measured 2026-09-29: title >= 6.4:1, body >= 13:1 against the brightest 5% of the backdrop at 1440 and 1280. */
  --scrim-flight-open: linear-gradient(0deg, rgba(22,16,11,.86) 0%, rgba(22,16,11,.7) 20%, rgba(22,16,11,.3) 40%, transparent 56%),
    linear-gradient(90deg, rgba(22,16,11,.55) 0%, rgba(22,16,11,.32) 26%, transparent 46%);
}

/* Hero: full-bleed still, headline top-left, one gold word. */
.hero {
  position: relative;
  height: 100svh;
  background: var(--bg-deep);
  overflow: clip;
  display: grid;
  align-content: start;
}
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--flight-pos);
}
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero::before { background: var(--scrim-flight); }
.hero::after { background: var(--scrim-bottom); }
.hero__copy {
  position: relative; z-index: 2; /* above the flight stage (z 1) in scrub mode */
  width: 100%;
  padding-top: max(22vh, calc(var(--nav-h) + var(--s-8)));
  padding-bottom: var(--s-9);
}
.hero__copy .display-1 { color: var(--ink); }
.hero__copy .gold { font-style: normal; color: var(--gold); }
/* "America First." / "As Always." (fourth review): two short lines, the second in gold. */
.hero__title { max-width: 14ch; }
/* The main call to action (fourth review): one clean email form, the label above, the field and the
   gold button on one line (stacked on phones), large enough to read at a glance. */
.hero__form { margin-top: clamp(28px, 4vh, 48px); max-width: 640px; }
.hero__label { display: block; font: 400 18px/1.45 var(--font-body); color: var(--ink-85); }
.hero__control { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.hero__input {
  flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 var(--s-4);
  background: rgba(22,16,11,.55); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-0);
  font: 400 18px/1 var(--font-body);
}
.hero__input::placeholder { color: var(--muted); }
.hero__input:focus-visible { outline: none; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.hero__input[aria-invalid="true"] { border-color: var(--gold); }
.hero__submit { flex: none; min-height: 56px; padding: 0 var(--s-6); font-size: 16px; }
.hero__status { min-height: 1.5em; margin-top: var(--s-3); color: var(--ink-85); }

/* "Scroll down" (fourth review: the audience is mostly 55+, tell them what to do). Bottom centre of the
   hero, and of the flight stage in scrub mode (flight.js). A slow 4px bob, only with motion allowed. */
.scroll-cue {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 3;
  translate: -50% 0;
  display: grid; justify-items: center; gap: 6px;
  color: var(--ink-85); pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.scroll-cue__label { font: 500 13px/1 var(--font-body); letter-spacing: 0.04em; }
.scroll-cue__arrow {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line-strong); border-radius: 50%;
}
.scroll-cue.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .scroll-cue__arrow { animation: cue-bob 2.2s var(--ease-out) infinite; }
  @keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
}

/* The site's one authored moment on the static hero: each line is revealed
   through a clip-path mask with a 12px rise (SKILL.md 6: line-mask reveal;
   SplitText is not used, see README). 1100ms + 100ms stagger = 1.2s, the cap.
   Opt-in under no-preference; the footer toggle (html.motion-paused) keeps it still. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .hero__copy > * {
    animation: hero-reveal var(--t-reveal) var(--ease-out) both;
  }
  html:not(.motion-paused) .hero__copy > :nth-child(2) { animation-delay: 50ms; }
  html:not(.motion-paused) .hero__copy > :nth-child(3) { animation-delay: 100ms; }
  @keyframes hero-reveal {
    from { opacity: 0; clip-path: inset(100% 0 -0.3em 0); translate: 0 12px; }
    to { opacity: 1; clip-path: inset(-0.3em 0 -0.3em 0); translate: 0 0; }
  }
}

/* Flight (section 12). The section is the scroll distance; the stage sticks and
   holds the engine's layers (absolute inside it, see below). flight.js hides the section when the
   media is not there yet.
   In scrub mode the section starts where the hero starts (margin-top -100svh):
   the stage's first frame is the hero still, so the hero is frame one of the
   flight rather than a second copy of it, and the hero copy fades over the
   first part of leg 1 (flight.js, opacity only).
   The scrub geometry is reserved from the first paint, before any script has run (engine report
   2026-10-01, #6: the section used to grow by 7740 px when the flight mounted at load, and a reader
   who had scrolled on by then was carried 6840 px past the flight by Chrome's scroll anchoring, or
   saw the content under them swap in Safari). Until flight.js mounts the stage the section keeps
   the same margin and the same height the mounted flight will have: 15.6 = 1 + the leg sum in
   flight.json (1.81 + 2.93 + 1.97 + 7.16 + 0.5; flight.js sets the exact px once the config is in),
   transparent over the hero's screen so the hero and its form stay visible and usable, deep below
   it, and inert. The reservation is skipped where the static stack will render (reduced motion,
   the footer toggle; flight.js adds .flight--static at once for Firefox, Save-Data and ?motion=off).
   overflow-anchor: none keeps scroll anchoring from ever picking a node inside the flight. */
.flight { position: relative; min-height: 100vh; background: var(--bg-deep); overflow-anchor: none; }
.flight--scrub { margin-top: -100svh; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .flight:not(.flight--static):not(.flight--scrub) {
    margin-top: -100svh;
    height: calc(15.37 * 100vh);
    background: linear-gradient(to bottom, transparent 100svh, var(--bg-deep) 100svh);
    pointer-events: none;
  }
}
/* An upright phone runs every leg on its phone pacing (flight.json scroll_m): 12.8 = 1 + 1.36 + 2.7 + 1.65 + 5.57 + 0.52. */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) and (orientation: portrait) {
  html:not(.motion-paused) .flight:not(.flight--static):not(.flight--scrub) { height: calc(12.8 * 100vh); }
}
.flight-stage {
  position: sticky; top: 0;
  height: 100vh;
  height: 100dvh; /* iOS: the visible height, so Safari's toolbar never covers the captions, buttons or cue */
  contain: paint;
  background: var(--bg-deep);
  z-index: 0;
}
/* The engine's layers are position: fixed (scrub-engine.js injectCSS), relying on
   contain: paint above to make this sticky box their containing block. WebKit
   (Safari, and every browser on iOS) paints composited fixed layers inside a stuck
   sticky box offset by the scroll distance, so the video and stills slid out of the
   clipped stage after the first screen and the flight went blank on iPhones.
   Absolute within the stage is the same box everywhere, and WebKit keeps it in place. */
.flight-stage :is(.sw-sky, .sw-scrollbar, .sw-topbar, .sw-stage, .sw-copylayer, .sw-route, .sw-hint) { position: absolute; }
.flight-stage.sw-root {
  --sw-bg: var(--bg-deep);
  --sw-ink: var(--ink);
  --sw-ink-soft: var(--ink-85);
  --sw-accent: var(--gold);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
  color: var(--ink);
  font-family: var(--font-body);
}
/* The page's img/video reset would otherwise win over the engine's layered cover rule. */
.flight-stage .sw-scene__still, .flight-stage .sw-scene__video { width: 100%; height: 100%; max-width: none; object-position: var(--flight-pos); }
/* Layers stay unpromoted until they animate (plan section 7). */
.flight-stage .sw-scene { will-change: auto; }
.flight-stage .sw-scene.has-clip .sw-scene__still { will-change: auto; }
/* A clip fades in over its still once its first frame has painted (engine patch 13: .has-clip), so
   a leg that lands while the visitor is already inside it never pops from the still to the video;
   the still stays underneath until that fade is over (the engine hides it on .has-clip). */
.flight-stage .sw-scene__video { opacity: 0; transition: opacity 500ms var(--ease-out); }
.flight-stage .sw-scene.has-clip .sw-scene__video { opacity: 1; }
.flight-stage .sw-scene.has-clip .sw-scene__still { opacity: 0; transition: opacity 0s 600ms; }
.flight-stage .sw-copy { will-change: auto; }
/* The same scrims as the hero, over the whole stage. */
.flight-stage .sw-copylayer::before { inset: 0; width: 100%; height: 100%; background: var(--scrim-bottom), var(--scrim-flight); }
/* The lounge (client 2026-09-29: "the Patriot Club lounge didn't show much"): its detail,
   the coin shelves and the framed map, sits in the left half where the caption scrim is
   deepest. While it is on screen (flight.js sets data-scrim="open" from flight.json
   open_scrim) the stage cross-fades to the open scrim; gradients don't interpolate, so the
   two sit on separate layers. Desktop only: the phone scrim is a bottom band already. */
/* The finale's span names the band scrim (flight.js sets data-scrim="band" from flight.json
   open_scrim), on every width; the layer keeps its gradient (data-scrim-layer) while it fades. */
.flight-stage .sw-copylayer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
.flight-stage[data-scrim-layer="band"] .sw-copylayer::after { background: var(--scrim-flight-band); }
.flight-stage[data-scrim="band"] .sw-copylayer::before { opacity: 0; }
.flight-stage[data-scrim="band"] .sw-copylayer::after { opacity: 1; }
@media (min-width: 901px) {
  .flight-stage .sw-copylayer::before { transition: opacity 900ms var(--ease-out); }
  .flight-stage .sw-copylayer::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--scrim-flight-open);
    opacity: 0; transition: opacity 900ms var(--ease-out);
  }
  .flight-stage[data-scrim="open"] .sw-copylayer::before { opacity: 0; }
  .flight-stage[data-scrim="open"] .sw-copylayer::after { opacity: 1; }
}
/* Engine chrome the brief forbids: eyebrow, tags, dots, top bar, progress bar,
   particles, wheel icon, and the centred scroll hint (the hero carries the cue).
   The engine's "01 / 05" is rebuilt by flight.js as the scene index below. */
.sw-scrollbar, .sw-topbar, .sw-route, .sw-copy__num, .sw-copy__eyebrow, .sw-copy__tags,
.sw-hint, .sw-sky__grad, .sw-sky__glow, .sw-particles { display: none; }
/* Hidden engine chrome must not pull Manrope 600 down the wire. */
.flight-stage :is(.sw-route__label, .sw-copy__tags li, .sw-brand__name, .sw-topcta, .sw-nav__item) { font-weight: 400; }
.flight-stage .sw-btn { font-weight: 500; } /* the leg link's class before flight.js renames it */

/* Flight captions (client decision 2026-09-29, third review: "more premium, more
   visually appealing"). Bottom-left on the page's left edge, ~12vh above the
   bottom, over the stage scrims. Index (13px tabular, muted, 40px hairline),
   title (Newsreader, 44-88px, 1.02, -0.025em, balanced, ~11ch), body (Manrope
   18/1.55, 34ch, cream 85%), and on the last scene one text link.
   The engine switches .is-on (engine patch 7); flight.js runs the line-mask
   entrance and this transition is the 250ms exit (and the fallback entrance). */
.flight-stage .sw-copy {
  left: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  right: auto; top: auto; bottom: 12vh;
  transform: none;
  width: min(50vw, 680px);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.flight-stage .sw-copy.is-on { opacity: 1; }
.flight-index {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  font: 500 13px/1 var(--font-body); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.flight-index__rule { display: block; width: 40px; height: 1px; background: var(--line-strong); }
.flight-title,
.flight-stage .sw-copy__title {
  margin: 0;
  font: 400 clamp(44px, 5.6vw, 88px) / 1.02 var(--font-display);
  letter-spacing: -0.025em;
  max-width: 15ch; /* "Where The Magic / Happens." on two lines (fifth review) */
  color: var(--ink); text-shadow: none; text-wrap: balance;
}
.flight-body,
.flight-stage .sw-copy__body {
  margin-top: var(--s-5);
  font: 400 18px / 1.55 var(--font-body); letter-spacing: 0.005em;
  color: var(--ink-85); max-width: 34ch; text-shadow: none;
  text-wrap: balance; /* one to three short lines: no word left alone on the last */
}
/* Every screen has one clear action (fourth review: "I want every screen to have an actual purpose"):
   a gold button under the caption. The studio's shows the latest episode above it. */
.flight-stage .sw-copy__cta { margin-top: var(--s-5); gap: var(--s-4); }
.flight-title .gold { font-style: normal; color: var(--gold); }
.flight-cta.button-primary { min-height: 52px; padding: 0 var(--s-6); font-size: 16px; }
.flight-latest {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-4); align-items: center;
  margin-top: var(--s-5); max-width: 440px;
}
.flight-latest img { width: 136px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.flight-latest__label { display: block; color: var(--muted); }
.flight-latest__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--s-1); color: var(--ink); font: 400 17px/1.35 var(--font-body);
}
.flight-stage .scroll-cue { position: absolute; z-index: 25; } /* above the engine caption layer (z 20) */
@media (max-width: 860px) {
  .flight-stage .sw-copy {
    left: var(--gutter); right: var(--gutter); width: auto;
    bottom: calc(max(84px, 11svh) + env(safe-area-inset-bottom)); /* clears the scroll cue */
  }
  .flight-latest { grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
  .flight-latest img { width: 104px; }
  .flight-latest__title { font-size: 15px; }
  .flight-cta.button-primary { width: 100%; }
  .flight-index { margin-bottom: var(--s-4); }
  .flight-body, .flight-stage .sw-copy__body { margin-top: var(--s-4); font-size: 17px; }
}
/* The finale (caption: "band" in flight.json): the three mannequins fill the frame, so the
   caption drops to a low band under the table. Desktop: index and title on the left, body and
   button on the right, the scroll cue between them. Phones: the same stack as the other scenes,
   set smaller so it stays under the prints as the crop pans. */
@media (min-width: 861px) {
  :is(.flight-stage .sw-copy.flight-copy--band, .flight-still--band .flight-still__inner) {
    display: grid;
    grid-template-columns: auto minmax(0, 34ch);
    grid-template-areas: "index body" "title body" "title cta";
    justify-content: space-between; align-items: end;
    column-gap: var(--s-8);
  }
  .flight-stage .sw-copy.flight-copy--band {
    right: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
    width: auto;
  }
  :is(.flight-copy--band, .flight-still--band) .flight-index { grid-area: index; }
  :is(.flight-copy--band, .flight-still--band) .flight-title { grid-area: title; }
  :is(.flight-copy--band, .flight-still--band) .flight-body { grid-area: body; margin-top: 0; }
  :is(.flight-copy--band, .flight-still--band) .sw-copy__cta { grid-area: cta; margin-top: var(--s-4); }
}
@media (max-width: 860px) {
  .flight-stage .flight-copy--band .flight-index { margin-bottom: var(--s-3); }
  .flight-stage .flight-copy--band .flight-title { font-size: clamp(32px, 8.6vw, 40px); }
  .flight-stage .flight-copy--band .flight-body { margin-top: var(--s-3); font-size: 15px; line-height: 1.45; }
  .flight-stage .flight-copy--band .sw-copy__cta { margin-top: var(--s-4); }
  .flight-stage .flight-copy--band .flight-cta.button-primary { min-height: 48px; }
}
/* Narrow screens: the still's lit window sits under the top-left, so the copy
   drops to the pavement where the bottom scrim carries it. Still left-aligned. */
@media (max-width: 900px) {
  .hero { align-content: end; }
  .hero__copy { padding-top: calc(var(--nav-h-mobile) + var(--s-8)); padding-bottom: var(--s-8); }
  .hero::before { background: var(--scrim-hero); }
  .hero::after { background: var(--scrim-flight-m); }
  .flight-stage .sw-copylayer::before { background: var(--scrim-flight-m), var(--scrim-hero); }
  :root { --scrim-flight-band: linear-gradient(0deg, rgba(22,16,11,.92) 0%, rgba(22,16,11,.84) 24%, rgba(22,16,11,.5) 33%, rgba(22,16,11,.16) 41%, transparent 48%); }
}

/* Phones held upright (v35, 2026-10-09: on mobile "the video is really zoomed in", "looks dull"). A tall screen can
   only fill itself from a wide picture by enlarging its middle third (31 % of the frame at 9:16), under a scrim that
   darkens the lower half for the caption. Now the picture pulls back into a box at the top as the reader leaves the
   hero, and the caption sits under it on the page's own dark ground: the box shows 45-56 % of the frame (square
   phone clips, scripts/encode-flight.sh), nothing in it is darkened, and the clips carry 44 % fewer pixels.
   --box-p (flight.js: 0 on the hero, 1 by the end of leg 1, which has no caption) drives the box's height and fades the
   scrims with it, so the hero is still frame one, full screen, exactly as before. The box keeps one size from
   there on (flight.js fitBox), and each room's caption stays under it for the whole room (flight.json
   copy_window_m), so the picture never resizes and the ground under it is never empty. Landscape keeps the full stage. */
@media (max-width: 860px) and (orientation: portrait) {
  /* One size for the whole flight (flight.js fitBox sets it in px; this is the same sum before it has measured). */
  .flight-stage { --flight-box: min(calc(100svh - 232px), 130vw); }
  /* A weighted sum, not 100dvh - (100dvh - box) * p: Chromium resolves that form to 0 at p = 1 exactly. */
  .flight-stage .sw-stage { bottom: auto; height: calc(var(--flight-box) * var(--box-p, 0) + 100dvh * (1 - var(--box-p, 0))); }
  /* The picture's lower edge melts into the ground, so a tall caption can run up over it. */
  .flight-stage .sw-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 130; pointer-events: none;
    background: linear-gradient(to top, var(--bg-deep) 0%, rgba(22,16,11,.5) 46%, transparent 100%);
    opacity: var(--box-p, 0);
  }
  .flight-stage .sw-copylayer::before,
  .flight-stage[data-scrim="band"] .sw-copylayer::after { opacity: calc(1 - var(--box-p, 0)); transition: none; }
  /* The caption starts under the picture; one too tall for that hangs from the foot of the screen (flight.js place). */
  .flight-stage .sw-copy { top: calc(var(--flight-box) + 20px); bottom: auto; }
  .flight-stage .sw-copy.flight-copy--low { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* With a caption and its button on screen the scroll cue steps aside (it shows through leg 1, which has none). */
  .flight-stage .scroll-cue { transition: opacity 250ms var(--ease-out); }
  .flight-stage[data-cap] .scroll-cue { opacity: 0; pointer-events: none; }
  /* At the very top the hero's still stays in front of leg 1's clip: at full screen it is the sharper picture. */
  .flight-stage[data-attop] .sw-scene.has-clip .sw-scene__still { opacity: 1; transition: none; }
  .flight-stage[data-attop] .sw-scene.has-clip .sw-scene__video { opacity: 0; transition: none; }
}
/* A short upright screen (an iPhone SE, a phone with its toolbars out): the caption's type steps down so the title,
   the line under it and the button stay clear of the picture box. */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 620px) {
  .flight-stage .sw-copy .flight-title, .flight-stage .sw-copy__title { font-size: 34px; }
  .flight-stage .sw-copy .flight-body, .flight-stage .sw-copy__body { margin-top: var(--s-3); font-size: 15px; line-height: 1.45; }
  .flight-stage .sw-copy__cta { margin-top: var(--s-4); }
  .flight-stage .sw-copy .flight-index { margin-bottom: var(--s-3); }
  .flight-stage .sw-copy .flight-cta.button-primary { min-height: 46px; }
  .flight-stage .sw-copy .flight-latest { margin-top: var(--s-3); }
}

/* Reduced motion / motion paused: stills two to five in flow with their copy
   (the hero already shows the first frame). */
.flight--static { min-height: 0; }
.flight-still { position: relative; background: var(--bg-deep); }
.flight-still img { width: 100%; aspect-ratio: 1800 / 1005; object-fit: cover; object-position: var(--flight-pos); max-height: 100svh; }
/* The caption sits on its own photo scrim: espresso from the bottom and from the
   left, so the 44-88px title reads over the brightest still (the studio lamps). */
.flight-still__copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-9) 0 var(--s-8);
  background: linear-gradient(180deg, rgba(22,16,11,0) 30%, rgba(22,16,11,.8) 100%), var(--scrim-hero);
}
.flight-still__inner { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.flight-still__copy .flight-cta { margin-top: var(--s-4); }
@media (max-width: 760px) {
  .flight-still img { aspect-ratio: 4 / 5; }
  .flight-still__copy { padding-top: var(--s-8); padding-bottom: var(--s-7); }
}

/* Everything below the flight (Join the Patriot Club, Latest, Become a member, About, The
   Patriot Store, Fuel the fight, Where to watch and follow) is styled in sections.css,
   linked after this file (2026-10-06). Two rules stay here because the hero and the flight
   share them. */

/* SplitText line masks (motion.js and the flight captions in flight.js): room for descenders
   inside the clip while a heading reveals; the negative margin keeps the flow where it was. */
.reveal-line-mask { padding-bottom: 0.15em; margin-bottom: -0.15em; }

/* Phones: the hero form stacks, the button full width. */
@media (max-width: 600px) {
  .hero__control { flex-direction: column; align-items: stretch; }
  .hero__submit { width: 100%; }
}