/* ==========================================================================
   GembaSnap — landing variant engine

   One stylesheet, shared by every variant. Nothing here branches on variant:
   copy and imagery come from variants.json, layout is identical across all of
   them so the A/B test measures the copy rather than the design.

   Each generated page inlines a critical subset (build/critical-landing.css)
   covering the header and hero; this sheet is a superset and loads async.

   Font subset is 400/600/700 + Condensed 600/700 — no 500, which this design
   never uses. That is 15KB of the per-page budget bought back.
   ========================================================================== */

:root {
  --navy: #1b4a5e;
  --navy-deep: #143845;
  --navy-ink: #26313a;
  --orange: #e8833a;
  --orange-pressed: #dd7527;

  --page: #f7f5f1;
  --stone: #eae7e1;
  --surface: #ffffff;
  --border: #e4e0d8;

  --text: #4a463e;
  --text-muted: #6e6a60;
  --text-soft: #8a8478;
  --text-faint: #9a948a;

  --on-navy: #f7f5f1;
  --on-navy-muted: #c6d2d8;
  --on-navy-faint: #7fa0ae;

  --ink: #23211c;
  --max: 1040px;
  --radius: 12px;

  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
  /* The wordmark only — never body copy. See the Oswald @font-face below. */
  --font-wordmark: "Oswald", var(--font-display);
}

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

/* Oswald, self-hosted like everything else — no Google Fonts request. Subset
   to the 14 glyphs the wordmark uses, which is why it is 1.8KB rather than
   40KB, and why it must never be applied to anything but "GembaSnap". */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/oswald-600-wordmark.woff2") format("woff2");
  unicode-range: U+41-42, U+45, U+47, U+4d-4e, U+50, U+53, U+61-62, U+65, U+6d-6e, U+70;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--navy-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.u-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;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* The mark carries its own shape and colour — no plate behind it. Height is
   set and width follows the 96x92 source so it can never letterbox. */
.logo__mark {
  flex-shrink: 0;
  width: auto;
  height: 30px;
}

.logo__name {
  font-size: 21px;
  letter-spacing: 0.005em;
}

/* --------------------------------------------------------------------------
   Wordmark — "Gemba" navy, "Snap" orange, Oswald. Used at two sizes: the
   masthead here, and the "powered by" credit on the proof page (demo.css).
   Keep the two in step.
   -------------------------------------------------------------------------- */

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  white-space: nowrap;
}

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

.wordmark__snap {
  color: var(--orange);
}

/* White on orange, matching the hero and reserve CTAs. That measures 2.7:1,
   under what AA asks for text this size — a trade the rest of the site already
   makes, so the buttons at least look like one family.
   Sized generously so the whole thing is a comfortable tap target. */
.masthead__cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.masthead__cta:hover {
  background: var(--orange-pressed);
  color: #fff;
}

.masthead__cta:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--navy);
  color: var(--on-navy);
  /* Mobile values are deliberately tight: every pixel between the masthead and
     the CTA decides whether the CTA lands above the fold on a 640-670px
     screen, which is most phones in portrait. Desktop restores at 760px. */
  padding: 26px 0 32px;
}

.hero__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-navy-muted);
  text-wrap: pretty;
}

.hero__visual {
  width: 100%;
  min-width: 0;
  max-width: 440px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 54px;
  padding: 16px 26px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.hero__cta:hover {
  background: var(--orange-pressed);
  color: #fff;
}

.hero__cta:active {
  transform: translateY(1px);
}

.hero__caption {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-navy-faint);
}

/* Hero slider — same component as /demo, restyled for a dark surface. */

.compare {
  --pos: 40%;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-deep);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.compare__frame {
  position: absolute;
  inset: 0;
}

.compare__frame--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.compare__chip {
  position: absolute;
  top: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare__chip--before {
  left: 10px;
  background: rgba(24, 22, 18, 0.72);
  color: #f0ede6;
}

.compare__chip--after {
  right: 10px;
  background: rgba(232, 131, 58, 0.92);
  color: #fff;
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-1.5px);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  touch-action: none;
}

/* Hero SMS mock */

.sms {
  max-width: 340px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sms__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #ece9e3;
  background: #faf9f6;
}

.sms__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
}

.sms__from {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy-ink);
}

.sms__thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 18px;
}

.sms__time {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-faint);
}

.sms__bubble {
  align-self: flex-start;
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 18px 18px 18px 5px;
  background: #e9e7e2;
  color: var(--navy-ink);
  font-size: 14px;
  line-height: 1.45;
}

.sms__card {
  align-self: flex-start;
  max-width: 85%;
  overflow: hidden;
  border-radius: 18px 18px 18px 5px;
  background: #e9e7e2;
}

.sms__card img {
  width: 100%;
  /* height:auto is load-bearing — without it the height attribute stays
     definite and aspect-ratio is ignored. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sms__meta {
  padding: 9px 13px 11px;
}

.sms__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-ink);
}

.sms__url {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px;
}

.steps__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  margin-top: 22px;
}

.step {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.step__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbeadb;
}

.step__text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-ink);
}

/* --------------------------------------------------------------------------
   Embedded proof page

   The phone frame holds a real, build-time render of the /demo markup at 390px,
   scaled down. pointer-events are off and a link overlay covers it, so the
   whole phone behaves as one tap target to the live demo.
   -------------------------------------------------------------------------- */

.receives {
  background: var(--stone);
  padding: 40px 20px 48px;
}

.receives__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: var(--max);
  margin: 0 auto;
}

.receives__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--navy);
}

.phone {
  position: relative;
  width: 300px;
  padding: 12px;
  border-radius: 40px;
  background: #16222a;
  box-shadow: 0 20px 48px rgba(22, 34, 42, 0.35);
}

.phone__screen {
  position: relative;
  width: 276px;
  height: 570px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--page);
}

/* The proof page renders at its native 390px then scales to the 276px screen.
   276 / 390 = 0.7077. */
.phone__content {
  width: 390px;
  transform: scale(0.7077);
  transform-origin: top left;
  pointer-events: none;
}

.phone__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 40px;
}

/* Hover hint, centred over the screen. Hover-capable pointers only: on a touch
   device there is no hover to reveal it, and :hover would latch on after the
   tap that is already navigating away. */
@media (hover: hover) {
  .phone__link::after {
    content: "Click to see Demo";
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--ink);
    color: #f2efe9;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .phone__link:hover::after,
  .phone__link:focus-visible::after {
    opacity: 1;
  }
}

.receives__hint {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

/* The phone itself is the primary target; this is the same destination spelled
   out for anyone who does not read a picture of a phone as clickable. */
.receives__link {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.receives__link:hover,
.receives__link:focus-visible {
  color: var(--orange);
}

/* The proof page's own styles, scoped to the phone. `.compare` above is
   deliberately NOT re-declared — it is the same component as the hero slider,
   just static here. Everything else is namespaced so it cannot leak into the
   landing page's layout.

   These values mirror demo.css deliberately: this mockup is the promise and
   /demo is what the tradesperson gets when they tap it, so the two must be the
   same page. Change one, change the other. */

/* The screen is 276x570 at 0.7077 scale, so the content renders into a
   390x805 viewport — a phone showing the proof page full screen. Pinning the
   shell to that exact height means the mockup is laid out by the same
   fit-to-viewport rules as /demo rather than approximating them.
   570 / 0.7077 = 805.4 */
.phone__content .shell {
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 805.4px;
  background: var(--page);
}

.phone__content .site-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
}

.phone__content .site-header__mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--navy);
}

.phone__content .site-header__id {
  flex: 1;
  min-width: 0;
}

.phone__content .site-header__business {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--navy);
}

.phone__content .site-header__cred {
  margin: 2px 0 0;
  font-size: 12px;
  /* 600, not demo.css's 500: this stylesheet ships no 500 subset on purpose. */
  font-weight: 600;
  color: var(--text-soft);
}

.phone__content .site-header__status {
  flex-shrink: 0;
  text-align: right;
}

.phone__content .site-header__badge {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.phone__content .site-header__date {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

.phone__content .proof {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  min-height: 0;
  gap: 10px;
  padding: 14px 16px;
}

/* Only the photo flexes — see demo.css for why the floor sits on the section
   and min-height:0 sits on the photo. */
.phone__content .proof > * {
  flex-shrink: 0;
}

.phone__content .proof__compare {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: calc(31px + 170px);
}

.phone__content .compare-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.phone__content .compare {
  flex: 0 1 auto;
  min-height: 0;
  box-shadow: 0 8px 24px rgba(27, 42, 52, 0.22);
  background: var(--navy);
  cursor: default;
}

.phone__content .summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.phone__content .summary__headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-ink);
}

.phone__content .summary__check {
  flex-shrink: 0;
  transform: translateY(2px);
}

.phone__content .summary__meta {
  margin: 0;
  padding-left: 25px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-muted);
}

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

.phone__content .review__prompt {
  margin: 0;
  text-align: center;
  font-size: 15px;
  /* 600, not demo.css's 500 — see .site-header__cred above. */
  font-weight: 600;
  color: var(--text);
}

.phone__content .review__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--orange);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(232, 131, 58, 0.38);
}

/* baseline, not center — see demo.css. */
.phone__content .proof-footer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* Sizing only. Weight, family and the two-tone colour come from .wordmark —
   forcing 700 here would ask for a weight the subset does not ship and get a
   synthesized bold. Matches demo.css. */
.phone__content .proof-footer__brand {
  font-size: 13.5px;
  letter-spacing: 0.005em;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 20px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(27, 42, 52, 0.08);
}

.card__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.card__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--navy);
}

.card__unit {
  font-size: 14.5px;
  color: var(--text-muted);
}

/* "unlimited jobs" is the line that answers the objection every operator has
   about per-job pricing, so it carries an underline. Offset and thinned so it
   reads as typographic emphasis rather than the browser's default link rule —
   there is nothing to click here. */
.card__unlimited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.card__founding {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}

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

.reserve__field {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page);
  font-size: 16px;
}

.reserve__field:focus {
  border-color: var(--orange);
  background: var(--surface);
}

.reserve__button {
  min-height: 54px;
  padding: 15px 22px;
  border: none;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.reserve__button:hover {
  background: var(--orange-pressed);
}

.reserve__button:active {
  transform: translateY(1px);
}

.reserve__button[disabled] {
  opacity: 0.65;
  cursor: default;
}

.confirm {
  padding: 14px 16px;
  border: 1px solid #cfe3d5;
  border-radius: 10px;
  background: #eef6f0;
  color: #245c3a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.status {
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 500;
  color: #a8442c;
}

.updates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

.updates__button {
  padding: 0;
  border: none;
  background: none;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.updates__button:hover {
  color: var(--orange);
}

.updates__done {
  font-weight: 600;
  color: #245c3a;
}

/* --------------------------------------------------------------------------
   FAQ + footer
   -------------------------------------------------------------------------- */

.faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 20px 48px;
}

.faq__list {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.faq__q {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-ink);
}

.faq__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.foot {
  padding: 28px 20px 40px;
  border-top: 1px solid var(--border);
  background: var(--page);
}

.foot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: var(--max);
  margin: 0 auto;
  font-size: 13.5px;
  color: var(--text-soft);
  text-align: center;
}

.foot a {
  color: var(--navy);
}

.foot a:hover {
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   Desktop. One breakpoint, matching the Design export's 760px switch.
   -------------------------------------------------------------------------- */

@media (min-width: 760px) {
  .masthead {
    padding: 16px 20px;
  }

  .hero {
    padding: 56px 0 64px;
  }

  /* Grid rather than flex so the CTA can sit under the copy in column one
     while the visual spans both rows in column two. */
  .hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 36px;
    row-gap: 24px;
    align-items: center;
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    gap: 18px;
  }

  .hero__cta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    margin-top: 18px;
  }

  .hero__visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .steps__list {
    flex-direction: row;
  }

  .faq__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}