/* LoansForChristmas design prototype, round 3
   Direction: calm editorial finance with a restrained holiday accent.
   Shape rule: buttons and chips are pills, inputs and small boxes are 12px, panels are 16px, step art is round. */

/* ---------- Font: Archivo, self-hosted (one variable file, Latin set, width 75-100%, weight 300-900) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/archivo-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;
}

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff;
  --frost: #f2f5f4;
  --frost-2: #e5ebe9;
  --line: #d5dedb;
  --line-strong: #aab6b1;
  --ink: #0f1e19;
  --ink-2: #33433d;
  --muted: #56645f;
  --green: #0d3b2e;
  --green-2: #134b3b;
  --green-deep: #0a3127;
  --on-green: #ffffff;
  --on-green-soft: rgba(255, 255, 255, 0.76);
  --red: #c8102e;
  --red-dark: #a10c24;
  --red-tint: #fbeaed;
  --red-line: #f0b8c2;
  --success: #15803d;
  --success-tint: #eef6f1;
  --success-tint-2: #f1f8f3;
  --success-line: #b7dcc4;
  --field-line: #8a9792;
  --green-tint: #dcefe4;
  --green-tint-2: #f1f7f3;
  --green-mid: #2f9a5c;
  --glass-bg: #dfe7e4;
  --step-idle: #b9c6c1;
  --star: #f5b301;
  --frost-3: #f3f7f5;
  --frost-4: #e9eeec;
  --black: #000000;

  /* Button greens (evergreen primary and its light variant) */
  --btn-green-dark: #0b4a24;
  --btn-green-mid: #116632;
  --btn-green-top: #127238;
  --btn-green-light: #22a356;
  --btn-green-edge: #4cc67b;
  --btn-green-ring: #0f6a31;
  --btn-light-top: #e3efe9;
  --btn-light-edge: #c4dacf;
  --btn-light-ring: #a9c7b9;


  --radius-input: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(13, 59, 46, 0.06), 0 14px 34px -14px rgba(13, 59, 46, 0.2);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: 88px;

  --container: 1240px;
  --gutter: 20px;

  /* Archivo: condensed for headings, normal width for text */
  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display-stretch: 75%;
  --display-wght: 800;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

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

p {
  text-wrap: pretty;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent {
  color: var(--red);
}

.nowrap {
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-input);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Icons (SVG files used as masks) ---------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--question-mark { --icon: url('../icons/question-mark.svg'); }
.icon--star { --icon: url('../icons/star-fill.svg'); }
.icon--lock { --icon: url('../icons/lock-simple.svg'); }
.icon--bank { --icon: url('../icons/bank.svg'); }
.icon--wallet { --icon: url('../icons/wallet.svg'); }
.icon--currency { --icon: url('../icons/currency-circle-dollar.svg'); }
.icon--check-circle-fill { --icon: url('../icons/check-circle-fill.svg'); }
.icon--gift { --icon: url('../icons/gift.svg'); }
.icon--receipt { --icon: url('../icons/receipt.svg'); }
.icon--coins { --icon: url('../icons/coins.svg'); }
.icon--shield { --icon: url('../icons/shield-check.svg'); }
.icon--calendar-x { --icon: url('../icons/calendar-x.svg'); }
.icon--calendar-check { --icon: url('../icons/calendar-check.svg'); }
.icon--handshake { --icon: url('../icons/handshake.svg'); }
.icon--mail { --icon: url('../icons/envelope-simple.svg'); }
.icon--pin { --icon: url('../icons/map-pin.svg'); }
.icon--buildings { --icon: url('../icons/buildings.svg'); }

/* ---------- Display type ---------- */
.hero__title,
.section-title,
.merry__title,
.trust__title,
.band__title,
.faq__title,
.stat__value,
.request__currency,
.request__input,
.step__title,
.medal__num,
.stage-field__value {
  font-family: var(--font);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
}

.trust__title {
  font-size: calc(clamp(2.2rem, 1.55rem + 2.7vw, 3.75rem) * 1.12);
  line-height: 0.99;
  text-wrap: balance;
}

.section-title,
.band__title,
.faq__title {
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: 1;
  text-wrap: balance;
}

.section-title .accent,
.merry__title .accent,
.band__title .accent {
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 54px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

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

/* ---------- Primary button: holly green. It pulses twice when it first comes into view, and on
   hover, focus or tap a deeper evergreen fills it from the left. ---------- */
.btn--primary {
  --b: var(--success);
  --b-text: var(--white);
  --b-fill: var(--green);
  --b-fill-text: var(--white);
  --b-pulse: rgba(21, 128, 61, 0.45);
  position: relative;
  isolation: isolate;
  background: var(--b);
  color: var(--b-text);
  transition: color 0.3s ease, transform 0.12s ease;
}


/* On the evergreen band a green button disappears, so it is white there */
.trust .btn--primary {
  --b: var(--white);
  --b-text: var(--green);
  --b-fill: var(--green-tint);
  --b-fill-text: var(--green);
  --b-pulse: rgba(255, 255, 255, 0.5);
}


.btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The fill is clipped to the pill; the pulse ring sits outside it */
.btn__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.btn__fx::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--b-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.btn--primary:focus-visible,
.btn--primary:active {
  color: var(--b-fill-text);
}

.btn--primary:focus-visible .btn__fx::before,
.btn--primary:active .btn__fx::before {
  transform: scaleX(1);
}

@media (hover: hover) {
  .btn--primary:hover {
    color: var(--b-fill-text);
  }

  .btn--primary:hover .btn__fx::before {
    transform: scaleX(1);
  }
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.btn--primary.is-seen::after {
  animation: btn-pulse 1.5s ease-out 2;
}

/* The button's face (after the owner's Dribbble pick): a gradient stroke over an inverted gradient fill,
   a dark outer ring, a short soft shadow and a soft shadow under the label. */
:root .btn--primary {
  --b-fill: linear-gradient(180deg, var(--btn-green-dark) 0%, var(--btn-green-mid) 100%);
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, var(--btn-green-top) 0%, var(--btn-green-light) 100%) padding-box,
    linear-gradient(180deg, var(--btn-green-edge) 0%, var(--success) 100%) border-box;
  box-shadow: 0 0 0 2px var(--btn-green-ring), 0 4px 6px rgba(15, 106, 49, 0.28);
  text-shadow: 0 2px 4px rgba(15, 106, 49, 0.55);
  transition: color 0.3s ease, transform 0.1s ease;
}

:root .btn--primary:active {
  transform: translateY(1px);
}

:root .trust .btn--primary {
  --b-fill: var(--green-tint);
  background:
    linear-gradient(180deg, var(--btn-light-top) 0%, var(--white) 100%) padding-box,
    linear-gradient(180deg, var(--white) 0%, var(--btn-light-edge) 100%) border-box;
  box-shadow: 0 0 0 2px var(--btn-light-ring), 0 4px 6px rgba(0, 0, 0, 0.25);
  text-shadow: none;
}

@keyframes btn-pulse {
  from { box-shadow: 0 0 0 0 var(--b-pulse); }
  to { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after {
    animation: none !important;
  }

  .btn__fx::before {
    transition: none !important;
  }
}

/* ---------- Header (logo only) ---------- */
.site-header {
  padding-top: var(--space-4);
  background: var(--frost);
  text-align: center;
}

.site-header__logo {
  display: inline-block;
  border-radius: var(--radius-input);
}

.site-header__logo img {
  width: 200px;
  height: auto;
}

/* ---------- Hero (centered, like the reference) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: var(--space-5) 0 var(--space-8);
  background: var(--frost);
}

/* Faint white snowflakes behind the hero content (drawn by main.js) */
.hero__snow {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  max-width: 900px;
  text-align: center;
}

.hero__title {
  line-height: 0.98;
  color: var(--ink);
  text-wrap: balance;
}

.hero__title .accent {
  display: block;
}

.hero__title { font-size: clamp(2.375rem, 1.7rem + 2.9vw, 4.25rem); }

.hero__sub {
  position: relative;
  margin-top: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero__sub strong {
  font-weight: 700;
}

/* "97% approval rate": dark text; two uneven green strokes draw themselves under it, hold, fade and draw again */
.hero__sub .approval {
  position: relative;
  display: inline-block;
  color: var(--ink);
}

.hero__sub .approval::after {
  content: '';
  position: absolute;
  left: -0.05em;
  bottom: -0.3em;
  width: calc(100% + 0.1em);
  height: 0.36em;
  background: url('../images/hand-underline-green-animated.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__sub .approval::after {
    background-image: url('../images/hand-underline-green.svg');
  }
}

.tip__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  padding: 0;
  vertical-align: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-mid);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tip__btn::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.tip__btn:hover,
.tip__btn[aria-expanded="true"] {
  color: var(--success);
}

/* Anchored to the subline and centered under it, so it never runs off a phone screen */
.tip__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 50%;
  width: min(380px, 100%);
  padding: var(--space-4);
  transform: translateX(-50%);
  border-radius: var(--radius-panel);
  background: var(--green);
  color: var(--on-green);
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.tip__panel.is-placed {
  transform: none;
}

.tip__panel[hidden] {
  display: none;
}

/* Request form: sits on the page, no card, like the reference */
.request {
  max-width: 460px;
  margin: var(--space-6) auto 0;
  text-align: left;
  border-radius: var(--radius-panel);
}

.request:focus {
  outline: none;
}

.request__label {
  position: absolute;
  top: 8px;
  left: var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  pointer-events: none;
}

.request__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 64px;
  padding: 16px var(--space-4) 0;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--white);
  transition: box-shadow 0.15s ease;
}

.request__input-wrap:focus-within {
  box-shadow: 0 0 0 2px var(--success), 0 0 0 6px rgba(21, 128, 61, 0.18);
}

.request__input-wrap.is-invalid {
  box-shadow: 0 0 0 2px var(--red), 0 0 0 6px rgba(200, 16, 46, 0.14);
}

.request__currency {
  font-size: 1.75rem;
}

.request__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.request__error {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--red-dark);
  text-align: center;
}

.request__error:empty {
  margin-top: 0;
}

.request__help {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}

.request__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-5);
}

.chip {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: var(--green-tint-2);
}

.chip:active,
.chip.is-selected {
  background: var(--green-tint);
  color: var(--btn-green-dark);
}

.request__submit {
  display: flex;
  width: 100%;
}

.request__fine {
  margin-top: var(--space-5);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.request__fine p {
  text-wrap: balance;
}

.request__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.6875rem;
  color: var(--muted);
}

.request__secure .icon {
  font-size: 0.875rem;
  color: var(--green-2);
}

.request__disclosures {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin-inline: auto;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-underline-offset: 3px;
}

.request__disclosures:hover {
  color: var(--red-dark);
}

/* ---------- Snow globe section: text, globe, text ---------- */
.merry {
  position: relative;
  padding: calc(var(--section-y) * 0.7 - 10px) 0 calc(var(--section-y) * 1.3 + 10px);
  background: var(--white);
}

/* Snow piled along the bottom edge, fading into the next section's colour */
.merry::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(72px, 6.8vw, 130px);
  background:
    linear-gradient(to bottom, rgba(242, 245, 244, 0) 50%, var(--frost) 96%),
    url('../images/snow-drift.webp?v=l') center top / max(100%, 1100px) auto no-repeat;
  pointer-events: none;
}

.merry__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-areas:
    "title"
    "globe"
    "body";
}

.merry__grid > * {
  min-width: 0;
}

.merry__title {
  grid-area: title;
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: 1;
  color: var(--ink);
  text-wrap: balance;
}

/* Heading: light lead-ins ("A Little More", "A Lot"), heavy payoffs set 15% bigger */
.merry__title .mt {
  white-space: nowrap;
}

.merry__title .mt--lead {
  font-weight: 300;
}

.merry__title .mt--key {
  font-size: 1.15em;
  font-weight: 900;
}

.merry__body {
  grid-area: body;
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.merry__text {
  max-width: 24ch;
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
  line-height: 1.4;
  color: var(--ink-2);
}

/* Deposit notification over the globe, styled like an iPhone push notification:
   frosted glass, a rounded-square app icon, title with "now", and one line of body text */
.deposit {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(30% + 20px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(94%, 340px);
  padding: 11px 14px 11px 11px;
  border-radius: 22px;
  background: rgba(246, 246, 248, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.8);
  backdrop-filter: blur(8px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 32px -10px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}

.deposit__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--btn-green-light), var(--success));
  color: var(--white);
  font-size: 21px;
}

.deposit__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.deposit__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--black);
}

.deposit__time {
  flex: none;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: rgba(60, 60, 67, 0.6);
}

.deposit__sub {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}

/* With JS it grows out of the video, from inside the glass, once the globe is in view */
.js .deposit {
  opacity: 0;
  transform: translate(-50%, -48px) scale(0.72);
  transform-origin: 50% 0;
  transition: opacity 0.45s ease 0.4s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.08) 0.4s;
}

.js .deposit.is-in {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .deposit {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* The globe: a photographed snow globe with the video seated inside its glass.
   The same image is laid over the video again, masked to its glass rim and its base, so the
   video sits behind the glass edge and the ring. Positions are measured from each image. */
.globe {
  --globe-img: url('../images/snow-globe-walnut.webp');
  --globe-ratio: 900 / 1127;
  --glass-x: 4.6%;
  --glass-y: 3.67%;
  --glass-w: 87.02%;
  --rim: ellipse 45.56% 36.38% at 48.11% 38.42%;
  --base-line: 69.4%;
  grid-area: globe;
  position: relative;
  width: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: var(--globe-ratio);
}

.globe__body,
.globe__front {
  position: absolute;
  inset: 0;
  background: var(--globe-img) center / 100% 100% no-repeat;
  pointer-events: none;
}

.globe__front {
  z-index: 3;
  -webkit-mask:
    radial-gradient(var(--rim), transparent 93%, var(--black) 98.5%),
    linear-gradient(to bottom, transparent var(--base-line), var(--black) var(--base-line));
  mask:
    radial-gradient(var(--rim), transparent 93%, var(--black) 98.5%),
    linear-gradient(to bottom, transparent var(--base-line), var(--black) var(--base-line));
}

.globe__glass {
  position: absolute;
  z-index: 1;
  top: var(--glass-y);
  left: var(--glass-x);
  width: var(--glass-w);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-bg);
}

.globe__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.globe__lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.globe.has-lens .globe__lens {
  display: block;
}

/* The poster shows until the lens has drawn a real video frame */
.globe.lens-live .globe__video {
  opacity: 0;
}

.globe__snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.globe__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse 24% 14% at 30% 19%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
}

/* ---------- How it works: numbered tiles on a track ---------- */
.steps {
  padding: 0 0 var(--section-y);
  overflow-x: clip;
  background: var(--frost);
}

.steps__head {
  max-width: 720px;
}

.steps__lead {
  margin-top: var(--space-4);
  max-width: 48ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}

.steps__list {
  --win: 236px;
  --tile-h: calc(var(--win) * 0.84);
  --art-scale: 1;
  --span: var(--win);
  position: relative;
  display: grid;
  margin-top: 88px;
}

.step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-6);
  text-align: center;
}

/* Stacked (phones): a hand-drawn arrow points down to the next step */
.step + .step {
  margin-top: var(--space-5);
  padding-top: 104px;
}

.step + .step::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 40px;
  height: 76px;
  margin-left: -20px;
  background-color: var(--red);
  -webkit-mask: url('../images/arrow-chevrons-down.svg') center / contain no-repeat;
  mask: url('../images/arrow-chevrons-down.svg') center / contain no-repeat;
  transition: background-color 0.5s ease;
}

/* The arrows always show; with JS they stay grey until the step they point to is reached, then turn red */
.steps__list.is-armed .step:not(.is-current):not(.is-done)::before {
  background-color: var(--step-idle);
}

/* The top of a phone; the art sits on its screen and a fading line finishes the cut-off bottom */
.medal {
  --ph-x: 0%;
  --ph-y: 0%;
  position: relative;
  width: var(--win);
  height: var(--tile-h);
}

.medal__window {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 19%;
  overflow: hidden;
  isolation: isolate;
}

.medal__window::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 -40% 0;
  background: url('../images/phone-top.webp') top center / 100% auto no-repeat;
}

.medal::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* A 1px grey line under the phone that fades out at both ends, short enough to leave a gap to the next */
.medal::after {
  left: -14%;
  right: -14%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 30, 25, 0), rgba(15, 30, 25, 0.24) 32%, rgba(15, 30, 25, 0.24) 68%, rgba(15, 30, 25, 0));
}

/* The step number: a red circle before the title */
.medal__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color 0.3s ease;
}

.steps__list.is-armed .step:not(.is-current):not(.is-done) .medal__num {
  background: var(--ink);
}

.medal__art {
  position: relative;
  z-index: 1;
  transform: scale(var(--art-scale));
}

.step__body {
  max-width: 34ch;
}

.step__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.875rem;
  line-height: 1.05;
}

.step__text {
  margin-top: var(--space-3);
  color: var(--ink-2);
}

/* Step 1 art: the visitor's amount and a Send button that turns into Sent.
   Default (no JS, reduced motion) is the finished frame; nothing disappears. */
.stage-form {
  position: relative;
  display: grid;
  gap: 8px;
  width: 150px;
}

.stage-field {
  display: grid;
  gap: 1px;
  padding: 6px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  text-align: left;
}

.stage-field__label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--muted);
}

.stage-field__value {
  display: flex;
  align-items: center;
  min-height: 1.25em;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stage-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--red);
  opacity: 0;
}

.stage-btn,
.stage-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
}

.stage-btn {
  background: var(--green-2);
  color: var(--white);
  opacity: 0;
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.2s ease;
}

.stage-sent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  border: 1.5px solid var(--green-2);
  color: var(--green-2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.stage-sent .icon {
  font-size: 0.9375rem;
}

.stage-form.is-reset .stage-btn {
  opacity: 1;
}

.stage-form.is-reset .stage-sent {
  opacity: 0;
  transform: scale(0.9);
}

.stage-form.is-typing .stage-caret {
  opacity: 1;
  animation: caret-blink 0.9s steps(1) infinite;
}

.stage-form.is-pressed .stage-btn {
  transform: scale(0.94);
  background: var(--ink);
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Step 2 art: three offers stay on screen; a highlight checks each and picks one */
.match {
  display: grid;
  gap: 6px;
  width: 150px;
}

.match__row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--green-2);
  font-size: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.match__bar {
  display: block;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: var(--step-idle);
  transition: background-color 0.25s ease;
}

.match__check {
  margin-left: auto;
  color: var(--red);
  font-size: 1.125rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.match__row--pick,
.match__row.is-looking {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.match__row.is-looking {
  transform: translateX(4px);
}

.match__row--pick .match__bar {
  background: var(--green-2);
}

.match.is-reset .match__row--pick {
  border-color: var(--line);
  box-shadow: none;
}

.match.is-reset .match__row--pick .match__bar {
  background: var(--step-idle);
}

.match.is-reset .match__check {
  opacity: 0;
  transform: scale(0.4);
}

/* Step 3 art: money moves from the bank to the wallet */
.funds {
  display: flex;
  align-items: center;
  width: 170px;
}

.funds__end {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--green-2);
  font-size: 1.25rem;
}

.funds__end--wallet {
  border-color: var(--red);
  background: var(--red-tint);
  transition: border-color 0.25s ease 0.8s, background-color 0.25s ease 0.8s;
}

.funds__track {
  position: relative;
  flex: 1;
  height: 2px;
  margin: 0 6px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px);
}

.funds__coin {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(var(--travel, 44px));
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.3, 1), opacity 0.2s ease 0.8s;
}

.funds__check {
  position: absolute;
  top: -6px;
  right: -6px;
  color: var(--red);
  font-size: 1.125rem;
  transition: opacity 0.25s ease 0.9s, transform 0.25s ease 0.9s;
}

.funds.is-reset .funds__end--wallet,
.funds.is-reset .funds__coin,
.funds.is-reset .funds__check {
  transition: none;
}

.funds.is-reset .funds__end--wallet {
  border-color: var(--line);
  background: var(--white);
}

.funds.is-reset .funds__coin {
  opacity: 1;
  transform: translateX(0);
}

.funds.is-reset .funds__check {
  opacity: 0;
  transform: scale(0.4);
}

/* ---------- Trust: no year, numbers in boxes ---------- */
.trust {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: var(--green);
  color: var(--on-green);
}

.trust__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  mix-blend-mode: luminosity;
}

.trust::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(13, 59, 46, 0.96) 0%, rgba(13, 59, 46, 0.86) 45%, rgba(13, 59, 46, 0.6) 100%);
}

.trust :focus-visible {
  outline-color: var(--white);
}

.trust__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-7);
}

.trust__inner > * {
  min-width: 0;
}

.trust__title {
  color: var(--on-green);
}

.trust__title-strong {
  display: block;
  color: var(--on-green);
}

.people {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.people__faces {
  display: flex;
}

.people__faces img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--green);
  object-fit: cover;
}

.people__faces img + img {
  margin-left: -10px;
}

.people__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
  font-size: 1.0625rem;
}

.people__text {
  font-size: 0.9375rem;
  color: var(--on-green-soft);
}

.people__text strong {
  color: var(--on-green);
  font-weight: 700;
}

.people--light .people__faces img {
  border-color: var(--white);
}

.people--light .people__text {
  color: var(--ink-2);
}

.people--light .people__text strong {
  color: var(--ink);
}

.stats {
  display: grid;
  gap: var(--space-4);
}

/* Glass cards: a frosted, blurred panel with bright top and left edges */
.stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  /* A light blur: the fir branches are fine detail, so a stronger blur flattens them into a solid green */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 16px 8px rgba(255, 255, 255, 0.18);
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3));
}

.stat__value {
  display: flex;
  align-items: center;
  gap: 0.22em;
  font-size: calc(clamp(2.6rem, 2rem + 2.2vw, 4rem) * 1.12);
  line-height: 1;
  color: var(--on-green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* An icon before each number, in a soft mint so the number still leads */
.stat__icon {
  font-size: 0.95em;
  color: var(--white);
}

.stat__label {
  max-width: 26ch;
  font-size: 1rem;
  color: var(--on-green-soft);
}

.trust__cta {
  justify-self: start;
}

/* ---------- Cost examples: a list, like the reference ---------- */
.cost {
  padding: var(--section-y) 0;
  background: var(--white);
}

.cost__grid {
  display: grid;
  row-gap: var(--space-6);
  grid-template-areas:
    "title"
    "people"
    "text"
    "rates"
    "cta";
}

.cost__grid > * {
  min-width: 0;
}

.cost__copy {
  display: contents;
}

.cost__copy > .section-title { grid-area: title; }
.cost__copy > .people { grid-area: people; margin-top: 0; }
.cost__copy > .cost__text { grid-area: text; }

.cost__text {
  max-width: 44ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}

.cost__cta {
  grid-area: cta;
  justify-self: start;
}

.rates {
  grid-area: rates;
}

.rates__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.rate {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}

/* The selected example: a soft wash behind the row, a red ring on its badge, a red price pill */
.rate::before {
  content: '';
  position: absolute;
  inset: 6px -14px;
  z-index: -1;
  border-radius: 14px;
  background: var(--frost-3);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.rate.is-selected::before {
  opacity: 1;
}

.rate__badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-2);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9375rem;
  transition: box-shadow 0.35s ease;
}

.rate.is-selected .rate__badge {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--red);
}

.rate__title {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.rate__meta {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

.rate__pay {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.rate__pay strong {
  font-size: 1.125rem;
  font-weight: 800;
}

.rate__pay span {
  font-size: 0.8125rem;
  color: var(--muted);
  transition: color 0.35s ease;
}

.rate.is-selected .rate__pay {
  background: var(--red);
  color: var(--white);
}

.rate.is-selected .rate__pay span {
  color: rgba(255, 255, 255, 0.85);
}

/* Phones: the monthly payment drops under the loan details */
@media (max-width: 639px) {
  .merry__body,
  .band__content {
    justify-items: stretch;
  }

  .merry__body .btn,
  .band__content .btn,
  .trust__cta,
  .cost__cta {
    justify-self: stretch;
    width: 100%;
  }

  .rate {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5) 0;
  }

  .rate::before {
    inset: 6px -10px;
  }

  .rate__badge {
    width: 44px;
    height: 44px;
    font-size: 0.8125rem;
  }

  .rate__pay {
    grid-column: 2;
    justify-self: start;
    margin-left: calc(-1 * var(--space-3));
    text-align: left;
  }
}

.rates__fine {
  margin-top: var(--space-5);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Closing band ---------- */
/* The photo fills the left half of the section edge to edge; the copy sits on the right */
.band {
  overflow: hidden;
  background: var(--frost);
}

.band__inner {
  display: grid;
}

.band__media {
  margin: 0;
}

.band__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.band__content {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding: var(--space-7) var(--gutter);
}

.band__text {
  max-width: 52ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}

/* ---------- FAQ ---------- */
.faq {
  padding: var(--section-y) 0;
  background: var(--white);
}

.faq__grid {
  display: grid;
  gap: var(--space-7);
}

.faq__grid > * {
  min-width: 0;
}

/* A line drawing that draws itself once and stays. Below 900px it sits beside the heading. */
.faq__aside {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq__art {
  width: min(44%, 170px);
  margin: 0;
}

.faq__art img {
  width: 100%;
  height: auto;
}

.js .faq__art[data-faq-art] img {
  opacity: 0;
}

.js .faq__art.is-on img {
  opacity: 1;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.qa {
  border-bottom: 1px solid var(--line);
}

.qa__q {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-5) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.qa__q::-webkit-details-marker {
  display: none;
}

.qa__q:hover {
  color: var(--red-dark);
}

.qa__ico {
  font-size: 1.5rem;
  color: var(--green-2);
}

.qa[open] .qa__ico {
  color: var(--red);
}

.qa__toggle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
}

.qa__toggle::before,
.qa__toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.qa__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.qa[open] .qa__toggle {
  border-color: var(--ink);
}

.qa[open] .qa__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.qa__a {
  padding: 0 0 var(--space-5) calc(28px + var(--space-3));
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.qa__a a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: var(--section-y) 0 var(--space-7);
  background: var(--frost-4);
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.65;
}

.site-footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.site-footer__logo {
  width: 180px;
  height: auto;
}

.site-footer__address {
  margin-top: var(--space-4);
  font-style: normal;
}

.site-footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--ink);
  text-underline-offset: 3px;
}

.site-footer__legal {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-7);
}

.site-footer__legal strong {
  color: var(--ink);
}

.site-footer__links {
  line-height: 1.85;
}

.site-footer__links a {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  text-underline-offset: 2px;
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
  color: var(--red-dark);
}

.site-footer__copy {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Home page on phones ---------- */
@media (max-width: 639px) {
  .hero__sub {
    line-height: 1.9;
    text-wrap: wrap;
  }

  /* Keeps the green underline tight to "97% approval rate" despite the taller lines */
  .hero__sub .approval {
    line-height: 1.5;
  }

  /* Loan amount: label and "$ 2,000" centred in the box (the input sizes to the amount where supported) */
  .request__label {
    right: 0;
    left: 0;
    text-align: center;
  }

  .request__input-wrap {
    justify-content: center;
  }

  .request__input {
    flex: none;
    width: 5.6ch;
  }

  @supports (field-sizing: content) {
    .request__input {
      width: auto;
      min-width: 1ch;
      field-sizing: content;
    }
  }

  /* "A Little More Merry." and "A Lot Less Worry." on one line each */
  .merry__title {
    text-align: center;
  }

  .merry__title br {
    display: none;
  }

  .merry__body {
    justify-items: center;
  }

  .merry__text {
    text-align: center;
  }

  .section-title,
  .trust__title,
  .band__title,
  .faq__title {
    text-align: center;
  }

  .steps__list {
    --win: 190px;
    --art-scale: 0.8;
  }

  .step__title {
    font-size: 1.5rem;
  }

  .people__more {
    display: none;
  }

  /* FAQ: title on top, the drawing below it */
  .faq__aside {
    flex-direction: column;
    align-items: center;
  }

  .site-footer__brand,
  .site-footer__contact {
    text-align: center;
  }

  .site-footer__logo {
    margin-inline: auto;
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }

  .site-header {
    padding-top: var(--space-5);
  }

  .hero {
    padding: var(--space-7) 0 var(--space-9);
  }

  .request__input-wrap {
    height: 66px;
  }

  .request__submit {
    width: auto;
    min-width: 300px;
    margin-inline: auto;
  }

  .merry__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "globe title"
      "globe body";
    align-items: center;
    column-gap: var(--space-6);
  }

  .merry__title {
    align-self: end;
  }

  .merry__body {
    align-self: start;
  }

  .globe {
    width: min(100%, 400px);
  }

  /* Steps: three phones in a row, hand-drawn arrows across the gaps */
  .steps__list {
    --win: 152px;
    --art-scale: 0.7;
    --col-gap: var(--space-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .step + .step {
    margin-top: 0;
    padding-top: 0;
  }

  .step + .step::before {
    content: none;
  }

  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--tile-h) * 0.4 + var(--arrow-dy, 0px));
    left: calc(50% + var(--span) / 2 + 6px);
    width: calc(100% - var(--span) + var(--col-gap) - 12px);
    height: 40px;
    background-color: var(--red);
    -webkit-mask: url('../images/arrow-chevrons-across.svg') center / contain no-repeat;
    mask: url('../images/arrow-chevrons-across.svg') center / contain no-repeat;
    transition: background-color 0.5s ease;
  }

  .steps__list.is-armed .step:not(.is-done)::after {
    background-color: var(--step-idle);
  }



  .stats {
    grid-template-columns: repeat(3, calc((100% - 2 * var(--space-4)) / 3 - 20px));
    column-gap: calc(var(--space-4) + 20px);
  }

  /* A narrower photo gives the copy room, so the heading takes fewer lines and the band stays short */
  .band__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }

  /* The photo fills its column without setting the height; the copy decides how tall the band is */
  .band__media {
    position: relative;
    min-height: 100%;
  }

  .band__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* The copy's right edge lines up with the page container */
  .band__content {
    align-content: center;
    padding: var(--space-7) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-7) var(--space-7);
  }

  .site-footer__top {
    grid-template-columns: 1fr auto;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root {
    --gutter: 48px;
    --section-y: 136px;
  }

  .site-header__logo img {
    width: 250px;
  }

  .hero {
    padding-bottom: 128px;
  }

  .steps {
    padding: 0 0 var(--section-y);
  }

  .steps__list {
    --win: 200px;
    --art-scale: 0.9;
    --col-gap: var(--space-7);
  }


  .trust {
    padding: var(--section-y) 0;
  }

  .trust__inner {
    gap: var(--space-7);
  }

  .cost {
    padding: var(--section-y) 0;
  }

  .cost__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      ". rates"
      "title rates"
      "people rates"
      "text rates"
      "cta rates"
      ". rates";
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--space-9);
    row-gap: var(--space-6);
  }


  .faq {
    padding: var(--section-y) 0;
  }

  .faq__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: var(--space-8);
  }

  .faq__aside {
    position: sticky;
    top: var(--space-6);
    display: block;
    align-self: start;
  }

  .faq__art {
    width: auto;
    max-width: 320px;
    margin-top: var(--space-6);
  }

  .qa__q {
    font-size: 1.1875rem;
    min-height: 76px;
  }
}

/* Snow globe section on wide screens: text, globe, text */
@media (min-width: 1100px) {
  .merry {
    padding: calc(var(--section-y) * 0.7 - 10px) 0 calc(var(--section-y) * 1.3 + 10px);
  }

  .merry__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 400px) minmax(0, 0.9fr);
    grid-template-areas: "title globe body";
    align-items: center;
    column-gap: var(--space-7);
  }

  .merry__title {
    align-self: center;
    font-size: clamp(2.6rem, 0.8rem + 2.4vw, 3.4rem);
  }


  .merry__body {
    align-self: center;
  }

  .globe {
    width: 100%;
  }

  .steps__list {
    --win: 236px;
    --art-scale: 1;
  }
}

/* ---------- Inner pages: page header, prose, notices, forms ---------- */
.page-hero {
  padding: var(--space-5) 0 var(--space-8);
  background: var(--frost);
  text-align: center;
}

.page-hero__inner {
  max-width: 860px;
}

.page-hero__title {
  font-family: var(--font);
  font-size: clamp(2.375rem, 1.7rem + 2.9vw, 4rem);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  line-height: 0.98;
  color: var(--ink);
  text-wrap: balance;
}

.page-hero__title .accent {
  display: block;
}

.page-hero__lead {
  max-width: 62ch;
  margin: var(--space-5) auto 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.page-body {
  padding: var(--space-8) 0 var(--section-y);
  background: var(--white);
}

.prose {
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-8);
  font-family: var(--font);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  line-height: 1.05;
  color: var(--ink);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.prose h2 + p,
.prose h3 + p,
.prose h2 + ul,
.prose h3 + ul {
  margin-top: var(--space-3);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose li::marker {
  color: var(--red);
}

.prose a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--red-dark);
}

.prose strong {
  color: var(--ink);
}

/* A highlighted notice (used for key disclosures) */
.notice {
  padding: var(--space-5);
  border: 1px solid var(--success-line);
  border-radius: var(--radius-panel);
  background: var(--success-tint);
  color: var(--ink-2);
}

.notice--red {
  border-color: var(--red-line);
  background: var(--red-tint);
}

/* Tables (cost examples, data categories) scroll sideways on narrow screens */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.prose table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--frost);
  color: var(--ink);
  font-weight: 700;
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose caption {
  padding: var(--space-3) var(--space-4);
  caption-side: bottom;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: left;
}

/* Closing call to action on inner pages */
.page-cta {
  padding: var(--section-y) 0;
  background: var(--frost);
  text-align: center;
}

.page-cta__title {
  font-family: var(--font);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  line-height: 1;
  color: var(--ink);
  text-wrap: balance;
}

.page-cta__title .accent {
  display: block;
}

.page-cta__text {
  max-width: 48ch;
  margin: var(--space-4) auto var(--space-6);
  color: var(--ink-2);
}

/* Contact details on the contact page */
.contact-points {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.contact-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.contact-point .icon {
  margin-top: 2px;
  font-size: 1.375rem;
  color: var(--success);
}

.contact-point__label {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

/* Forms (contact, privacy choices) */
.form-card {
  max-width: 68ch;
  margin: var(--space-7) auto 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--white);
}

.form-card + .prose,
.prose + .form-card {
  margin-top: var(--space-8);
}

.form-card__title {
  font-family: var(--font);
  font-size: 1.75rem;
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  line-height: 1.05;
  color: var(--ink);
}

.form-card__lead {
  margin-top: var(--space-2);
  color: var(--muted);
}

.form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--muted);
}

.inp {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inp:focus {
  border-color: var(--success);
  outline: 3px solid transparent;
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.2);
}

textarea.inp {
  min-height: 160px;
  resize: vertical;
}

select.inp {
  appearance: none;
  background: var(--white) url('../icons/caret-down.svg') right 14px center / 16px no-repeat;
  padding-right: 44px;
}

.choice-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--success);
}

.choice:has(input:checked) {
  border-color: var(--success);
  background: var(--success-tint-2);
}

.form__submit {
  justify-self: start;
}

.inp[aria-invalid="true"] {
  border-color: var(--red);
}

.field__error {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--red-dark);
}

.page-hero__jump {
  margin-top: var(--space-3);
}

.form__note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}

.form__note a,
.page-hero__lead a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__note a:hover,
.page-hero__lead a:hover {
  color: var(--red-dark);
}

/* Required-field marker (UX.md 6) */
.field__req {
  margin-left: 2px;
  color: var(--red-dark);
}

/* Bots fill this in; people never see it */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-input);
}

.form-message h2,
.form-message h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.form-message ul {
  margin-top: var(--space-2);
  padding-left: 1.25em;
  list-style: disc;
}

.form-message--success {
  border: 1px solid var(--success-line);
  background: var(--success-tint);
}

.form-message--error {
  border: 1px solid var(--red-line);
  background: var(--red-tint);
}

/* 404 and the apply placeholder */
.not-found {
  padding: var(--space-5) 0 var(--section-y);
  background: var(--frost);
  text-align: center;
}

.not-found__code {
  font-family: var(--font);
  font-size: clamp(7rem, 4.5rem + 11vw, 12rem);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  line-height: 0.9;
  color: var(--red);
}

.not-found__photo {
  width: min(100%, 560px);
  height: auto;
  margin: var(--space-6) auto 0;
  aspect-ratio: 1200 / 896;
  object-fit: cover;
  border-radius: var(--radius-panel);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-6);
}

/* Apply Now placeholder: the logo and the title, centred on the screen */
.apply-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-6);
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-6) var(--gutter);
  background: var(--frost);
  text-align: center;
}

.apply-placeholder__logo {
  display: inline-block;
  border-radius: var(--radius-input);
}

.apply-placeholder__logo img {
  width: 280px;
  max-width: 100%;
  height: auto;
}

.apply-placeholder__title {
  font-family: var(--font);
  font-weight: var(--display-wght);
  font-stretch: var(--display-stretch);
  font-size: clamp(2.375rem, 1.7rem + 2.9vw, 4.25rem);
  line-height: 1;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .form-card {
    padding: var(--space-7) var(--space-7);
  }
}

/* Phones: tables become one card per row, each cell labelled with its column */
@media (max-width: 639px) {
  .form__submit {
    justify-self: stretch;
    width: 100%;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .prose table {
    display: block;
    min-width: 0;
  }

  .prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .prose tbody,
  .prose tr {
    display: block;
  }

  .prose caption {
    display: block;
    padding: 0 0 var(--space-3);
  }

  .prose tbody tr {
    margin-bottom: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-input);
  }

  .prose tbody th,
  .prose tbody td {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .prose tbody tr > :last-child {
    border-bottom: 0;
  }

  .prose tbody th {
    background: var(--frost);
  }

  .prose tbody [data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink);
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}