/* Focused Marketing Systems
   Plain CSS, no build step. Fonts are self-hosted in /fonts (both SIL OFL).
   Brand fonts weren't supplied, so these are the closest free matches:
     Figtree    -> headings and body (light geometric sans)
     Montserrat -> wordmark and small labels (wide, tracked-out caps)
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-variable.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Design tokens
   ------------------------------------------------------------------ */
:root {
  /* Brand palette */
  --ivory: #f4f1ea;
  --ink: #111314;
  --blue: #2f4f86;
  --slate: #687280;
  --stone: #c9c4bc;

  /* Stone is too light for text on ivory, so secondary text is ink softened toward ivory. */
  --ink-soft: color-mix(in srgb, var(--ink) 72%, var(--ivory));

  /* Light tint of stone for alternating section backgrounds */
  --ivory-deep: color-mix(in srgb, var(--stone) 20%, var(--ivory));

  /* Semantic colors. Dark sections (.section--ink, .section--blue, footer)
     override these, so components only need to reference the semantic names. */
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --rule: color-mix(in srgb, var(--stone) 55%, transparent);
  --focus: var(--blue);

  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max-width: 80rem;
  --header-height: 5rem;
  --section-space: clamp(4.5rem, 9vw, 8rem);

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

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

a {
  color: inherit;
}

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

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--ivory);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* Buttons
   ------------------------------------------------------------------ */
.button {
  display: inline-block;
  padding: 1.05rem 2rem;
  background: var(--blue);
  color: var(--ivory);
  border: 1px solid var(--blue);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.button--small {
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
}

/* Header and navigation (mobile first)
   The mobile menu is a CSS-only checkbox toggle, so the site needs no JavaScript.
   ------------------------------------------------------------------ */
/* Pinned to the top on every screen size. It needs its own background since
   the page scrolls underneath it; scroll-padding keeps in-page anchors from
   landing behind it. On short screens an open mobile menu scrolls inside the
   header rather than being cut off. */
html {
  scroll-padding-top: 6rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  min-height: var(--header-height);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}

/* Wordmark: the logo lockup (crosshair, FOCUSED over MARKETING SYSTEMS) */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark__logo {
  display: block;
  height: 3.5rem;
  width: auto;
}

/* Menu toggle (visible below the desktop breakpoint) */
.nav-toggle-input {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  right: calc(var(--gutter) - 0.75rem);
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.75rem;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.5rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -7px;
}

.nav-toggle__bars::after {
  top: 7px;
}

.nav-toggle-input:focus-visible + .nav-toggle {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars {
  background: transparent;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  display: none;
  flex-basis: 100%;
  padding-block: 1.5rem 0.5rem;
}

.nav-toggle-input:checked ~ .site-nav {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.site-nav__list a {
  display: block;
  padding-block: 0.6rem;
  font-size: 1.125rem;
  text-decoration: none;
}

.site-nav__list a:hover {
  color: var(--blue);
}

/* "How We Help" group: on phones and tablets the three offers sit indented
   under the label; on desktop they drop down (see the desktop block). */
.nav-dropdown__label {
  display: block;
  padding-block: 0.6rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: default;
}

.nav-dropdown__menu {
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}

/* Hero
   ------------------------------------------------------------------ */
.hero {
  padding-block: clamp(4rem, 11vw, 9.5rem) clamp(4.5rem, 12vw, 10rem);
}

.hero__heading {
  max-width: 15em;
  font-size: clamp(2.5rem, 7.2vw, 5.25rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 38rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--fg);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.hero__note {
  max-width: 22rem;
  color: var(--fg);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Brand hero, after the brand board's "01 -- Hero" tile: on desktop the
   mountain photograph fills the right of the section, warm ivory backdrop
   behind the copy on the left, thin uppercase headline. On phones the
   photo is left out (and never downloaded) and the section is just the
   copy on the ivory ground. Every sales page uses it. */
.hero--brand {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  display: flex;
  flex-direction: column;
  background: #f1ebe2;
  color: var(--ink);
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero--brand .hero__eyebrow {
  max-width: 40rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* A label kept to one line: it never wraps, and on narrow phones the type
   and tracking shrink with the viewport so it still fits the gutter. */
.hero--brand .hero__eyebrow.hero__eyebrow--one-line {
  max-width: none;
  white-space: nowrap;
  font-size: min(0.8125rem, 3.35vw);
  letter-spacing: min(0.14em, 0.3vw);
}

.hero__heading--display {
  max-width: none;
  font-size: clamp(2.1rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.hero__heading--long {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
}

.hero--brand .hero__lede {
  max-width: 32rem;
  color: var(--ink);
}

.hero--brand .hero__note {
  color: var(--ink-soft);
}

/* The jump link wraps as a unit, so it never splits across lines. */
.hero__note a {
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .hero--brand {
    flex-direction: row;
    align-items: center;
    min-height: clamp(34rem, 46vw, 46rem);
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
  }

  .hero--brand .hero__content {
    width: 100%;
  }

  /* Copy stays inside the ivory backdrop, left of the photo, as on the tile. */
  .hero--brand .hero__eyebrow {
    max-width: 19rem;
  }

  .hero--brand .hero__heading--display {
    max-width: 7.1em;
  }

  .hero--brand .hero__lede {
    max-width: 21rem;
  }

  .hero--brand .hero__note {
    max-width: 15rem;
  }

  /* Longer copy (Blueprint page): a wider column, still short of the photo. */
  .hero--wide-copy .hero__eyebrow {
    max-width: 24rem;
  }

  .hero--wide-copy .hero__heading--display {
    max-width: 11em;
  }

  .hero--wide-copy .hero__lede {
    max-width: 26rem;
  }

  .hero--wide-copy .hero__note {
    max-width: 18rem;
  }

  /* Desktop only. A CSS background (not an <img>) so phones never
     download it: a background inside a non-matching media query isn't
     fetched. Right-aligned so the hiker (about 78% across the photo)
     stays in view; the left edge dissolves into the backdrop colour. */
  .hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 68vw;
    background-image: url("../images/hero-focus.jpg");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
    mask-image: linear-gradient(to right, transparent 0, #000 24%);
    pointer-events: none;
  }

  .hero--brand .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Placeholders: content still to be supplied. Remove the class once filled in. */
.placeholder {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--stone);
  border-radius: 2px;
  color: var(--fg-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Small tracked-caps label. Used as a kicker above the hero heading and as
   sub-headings inside a section (e.g. "Who It's For"). Defaults to blue
   for light backgrounds; dark sections switch it to the section's fg color. */
.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--blue);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section--ink .eyebrow,
.section--blue .eyebrow {
  color: var(--fg);
}

.hero__note a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Sections
   ------------------------------------------------------------------ */
.section {
  padding-block: var(--section-space);
}

.section--tint {
  background: var(--ivory-deep);
}

/* Dark sections swap the semantic colors; buttons invert to stay readable. */
.section--ink,
.section--blue,
.site-footer {
  --fg: var(--ivory);
  --fg-soft: color-mix(in srgb, var(--ivory) 78%, transparent);
  --rule: color-mix(in srgb, var(--stone) 40%, transparent);
  --focus: var(--ivory);
  color: var(--fg);
}

.section--ink,
.site-footer {
  background: var(--ink);
}

.section--blue {
  background: var(--blue);
}

.section--ink .button,
.section--blue .button,
.site-footer .button {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.section--blue .button {
  color: var(--blue);
}

.section--ink .button:hover,
.section--blue .button:hover,
.site-footer .button:hover {
  background: transparent;
  color: var(--ivory);
}

.section__heading {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section__heading--wide {
  max-width: 20em;
}

.section__action {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.section__action--center {
  text-align: center;
}

.prose {
  max-width: 38rem;
}

.prose p {
  color: var(--fg-soft);
  font-size: 1.1875rem;
  line-height: 1.65;
  /* Keep a single word from sitting alone on a paragraph's last line */
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1.25rem;
}

.prose .prose__emphasis {
  color: var(--fg);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
}

/* Phones: the light weight loses presence at this size, so the line gets a
   medium weight and a short rule above it instead of a bigger size. */
@media (max-width: 39.99rem) {
  .prose .prose__emphasis {
    font-weight: 500;
  }

  .prose .prose__emphasis::before {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.5rem auto 1.1rem;
    background: var(--blue);
  }

  /* Steel blue is too dark to show on the dark sections. */
  .section--ink .prose__emphasis::before,
  .section--blue .prose__emphasis::before {
    background: var(--stone);
  }
}

.prose .placeholder {
  font-size: 0.9375rem;
}

.cta .prose {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* A short list inside prose copy, e.g. the Problem section's list of
   questions. Blue tick marks instead of default bullets. */
.prose ul {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.prose li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--fg-soft);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.prose li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.75rem;
  height: 2px;
  background: var(--blue);
}

.prose ul + p {
  margin-top: 1.25rem;
}

/* Space a prose block off from a heading it directly follows outside a
   .split layout (inside .split the grid gap already handles it). */
.prose--top {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Named sub-block inside a full-width section, e.g. "Who It's For" /
   "What You Get" / "Investment" inside the Offer Breakdown section. */
.block {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.block:first-child {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Customer-journey grid: 9 stages, 3 rows of 3, sized like the home page's
   .offer cards (same padding scale) rather than the site's larger .tile
   component. Blue background, bold ivory label -- a plain grid of
   boxes instead of the arrow/chevron treatment tried earlier. */
.journey-grid {
  display: grid;
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: 0;
  list-style: none;
}

.journey-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--blue);
  border-radius: 2px;
  text-align: center;
}

.journey-grid span {
  color: var(--ivory);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 56rem) {
  .journey-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Investment card: price, timeline, ownership line, CTA. Deliberately
   prominent -- a bigger card with larger type, not a quiet aside, so the
   price doesn't read as something to downplay. */
/* Blue fill, same as the hero -- the price is the thing to notice
   here, not something to set quietly against a neutral background. */
.investment {
  max-width: 32rem;
  margin: 1.5rem auto 0;
  /* Side padding tightens on phones so the button label fits on one line. */
  padding: clamp(2.4rem, 4.8vw, 3.3rem) clamp(1.25rem, 4.8vw, 3.3rem);
  background: var(--blue);
  color: var(--ivory);
  text-align: center;
}

/* Qualified with .investment (not just the bare class) so this outranks
   ".investment p" below -- that's a class+element selector, more specific
   than a single class, and would otherwise silently win and hold this at
   the paragraph's 1.125rem instead. */
.investment .investment__amount {
  font-size: 4.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.investment p {
  margin-top: 0.5rem;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
  font-size: 1.125rem;
}

/* Narrower side padding on phones so the button label stays on one
   line inside the card. */
.investment .button {
  margin-top: 1.75rem;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  background: var(--ivory);
  color: var(--blue);
  border-color: var(--ivory);
}

.investment .button:hover {
  background: transparent;
  color: var(--ivory);
}

/* This section ends with a small, centered, already-boxed card, so the
   standard section-bottom padding on top of that reads as extra dead air
   before the next heading -- trimmed so the gap matches the rhythm
   between other sections instead of feeling wider than the rest. */
#blueprint-details,
#implementation-details,
#strategic-support-details {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Centered section layout (Marketing Blueprint page). A section heading
   plus a narrow column of body copy, centered on the page rather than run
   as two side-by-side columns. Short lines read as centered prose; a list
   inside one switches back to left-aligned, since a centered bullet list
   isn't scannable. */
.stack-center {
  max-width: 42rem;
  margin-inline: auto;
}

.section__heading--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow--center {
  text-align: center;
}

/* Investment's label is deliberately louder than the other two eyebrows
   in this section -- the price shouldn't read as the part being played
   down. */
.eyebrow--loud {
  font-size: 0.975rem;
}

.prose--center {
  text-align: center;
}

.prose--center ul {
  margin-inline: auto;
  text-align: left;
}

/* Boxed cards: bordered tiles that break a list up the way the home page's
   offer cards do. Colors are hardcoded rather than using the --fg/--fg-soft
   semantic tokens, so a tile reads the same whether it sits on ivory, tint,
   ink, or blue — it's always a light card, never inverted. */
.tile-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.tile {
  padding: clamp(1.8rem, 3.6vw, 2.4rem);
  background: var(--ivory);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--stone) 45%, var(--ivory));
  border-radius: 2px;
  text-align: left;
  transition: border-color 0.2s ease;
}

.tile:hover {
  border-color: var(--blue);
}

.tile__number {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--blue);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}

/* Bold text inside a tile is blue rather than ink, so it reads as an
   accent, not just a heavier weight. */
.tile h3 {
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}

.tile p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}

.tile > :first-child {
  margin-top: 0;
}

/* Transformation section's "from / to" cards. Selectors are qualified with
   .tile (not just the bare modifier class) so they outrank ".tile p" --
   otherwise that more-specific element+class selector silently wins and
   these colors/sizes never actually apply. */
.tile .tile__from {
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.tile .tile__to {
  margin-top: 0.375rem;
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 500;
}

.tile__to::before {
  content: "→ ";
}

/* A tile whose only content is one short line, e.g. the Problem section's
   list of questions -- full-strength blue instead of the muted
   description color, since here it's the whole point of the tile, not a
   caption. */
.tile .tile__question {
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 40rem) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Five tiles: rows of 3 then 2, with the second row centred under the
   first (like the Olympic rings, without the overlap) instead of leaving
   a gap where a sixth tile would be. Six equal tracks, every tile two wide;
   tiles 4 and 5 start on tracks 2 and 4. On the two-column layout between
   the breakpoints the odd fifth tile is centred on its own row. */
@media (min-width: 40rem) and (max-width: 55.99rem) {
  .tile-grid--5 > .tile:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.625rem);
  }
}

@media (min-width: 56rem) {
  .tile-grid--5 {
    grid-template-columns: repeat(6, 1fr);
  }

  .tile-grid--5 > .tile {
    grid-column: span 2;
  }

  .tile-grid--5 > .tile:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .tile-grid--5 > .tile:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (min-width: 56rem) {
  .tile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* About page founder section: photo above the story on phones; on
   desktop the photo sits beside the story and stays in view while the
   (long, left-aligned) story scrolls past. */
.founder {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 42rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.founder__photo {
  margin: 0;
}

.founder__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

@media (min-width: 56rem) {
  .founder {
    grid-template-columns: 22rem minmax(0, 38rem);
    align-items: start;
    max-width: none;
    justify-content: center;
  }

  .founder__photo {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }
}

/* Tiles marked up as an ordered list (the nine parts on How It Works). */
.tile-list {
  padding: 0;
  list-style: none;
}

/* How It Works: one offer card closing each stage, centered on the text
   column. The whole card links to the offer page (via .offer__name a). */
.stage-offer {
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align: left;
}

.stage-offer__link {
  margin-top: 1.25rem;
  color: var(--blue);
  font-weight: 500;
}

/* A pair of tiles sitting between centered prose: capped so it lines up
   with the text column instead of stretching across the page. */
.tile-grid--2 {
  max-width: 48rem;
  margin-inline: auto;
}

/* Centered CTA band: heading, short copy, price line, and button all
   centered as a block (used on the Blueprint page only; the shared .cta
   base styles stay left-aligned for the home page's own CTA section). */
.cta--center {
  text-align: center;
}

.cta--center .section__heading {
  margin-inline: auto;
}

.cta--center .prose {
  margin-inline: auto;
}

/* Bold headings. Opt-in modifiers -- the base .hero__heading/
   .section__heading stay light-weight unless one of these is added, so
   applying them here never silently changes an element that doesn't
   carry the class. Sized a step smaller than the light originals: bold
   characters are wider, and the goal is headings that wrap to at most
   two lines, so the extra weight is offset by a smaller scale rather
   than left to fight the layout at the same size. */
.hero__heading--bold {
  font-size: clamp(1.75rem, 6.4vw, 4.5rem);
  font-weight: 600;
}

.section__heading--bold {
  font-size: clamp(1.5rem, 3.2vw, 2.625rem);
  font-weight: 600;
}

/* Escapes .stack-center's 42rem cap for a heading that needs more room to
   wrap to two lines instead of three; pulled out of .stack-center so it
   isn't limited to the same narrow column as the prose below it. */
.section__heading--roomy {
  max-width: 50rem;
}

/* A heading long enough to miss the two-line target on a narrow phone,
   even though it fits fine at the shared --bold size everywhere else
   (including desktop, where width is roomier or --roomy already covers
   it). Independent of --roomy: a heading can need this without needing
   extra desktop width, or vice versa. */
@media (max-width: 26.5625rem) {
  .section__heading--tight-mobile {
    font-size: 1.1875rem;
  }
}

/* FAQ accordion. Native <details>/<summary>, so it needs no JavaScript. */
.faq {
  max-width: 44rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--blue);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 1.75rem;
  color: var(--fg-soft);
  max-width: 42rem;
}

.faq-item__action {
  margin-top: -1rem;
}

/* Offers */
.offers {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.2s ease;
}

.offer:hover,
.offer:focus-within {
  border-color: var(--blue);
}

.offer__name {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
}

.offer__name a {
  text-decoration: none;
}

/* Stretch the title link over the whole card */
.offer__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.offer__text {
  margin-top: 1rem;
  color: var(--fg-soft);
}

/* Benefits */
.benefits {
  display: grid;
  gap: 0 3rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.benefits li {
  position: relative;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  /* Split a wrapped item evenly so no word sits alone on line two */
  text-wrap: balance;
}

.benefits li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--blue);
}

/* Process steps */
.steps {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  counter-reset: step;
  list-style: none;
}

.step {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 1.25rem;
  color: var(--blue);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
}

.step__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

.step p {
  margin-top: 0.5rem;
  color: var(--fg-soft);
}

/* Blue numbers disappear on the dark band, so they take the light text color. */
.section--ink .step::before {
  color: var(--fg);
}

/* A link under a step (How It Works page): the offer that delivers it. */
.step p + p {
  margin-top: 0.75rem;
}

.step__link {
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.steps__note {
  max-width: 40rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-left: 1.25rem;
  border-left: 2px solid var(--blue);
  color: var(--fg-soft);
  font-size: 1.0625rem;
}

/* Footer
   ------------------------------------------------------------------ */
.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5rem) 3rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.site-footer__nav {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer__nav ul,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.site-footer__nav a:hover,
.site-footer__legal a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-soft);
  font-size: 0.9375rem;
}

.site-footer__copyright {
  margin-top: 1.5rem;
  color: var(--fg-soft);
  font-size: 0.875rem;
}

/* Wider screens
   ------------------------------------------------------------------ */
@media (min-width: 40rem) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .offers {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 64rem) {
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop navigation
   ------------------------------------------------------------------ */
@media (min-width: 68.75rem) {
  .site-header {
    overflow: visible;
  }

  .nav-toggle-input,
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    flex-basis: auto;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    gap: 2rem;
    margin: 0;
  }

  .site-nav__list a {
    padding-block: 0.25rem;
    font-size: 0.9375rem;
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown__label {
    padding-block: 0.25rem;
    font-size: 0.9375rem;
    font-weight: inherit;
    cursor: pointer;
  }

  .nav-dropdown__label::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin: 0 0 0.2em 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    display: none;
    min-width: 15rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    background: var(--ivory);
    border: 1px solid var(--rule);
    border-left-width: 1px;
    box-shadow: 0 8px 24px rgb(23 23 23 / 0.08);
  }

  /* Invisible bridge so the menu doesn't close crossing the gap */
  .nav-dropdown__menu::before {
    content: "";
    position: absolute;
    inset: -0.75rem 0 auto;
    height: 0.75rem;
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    display: block;
  }

  .nav-dropdown__menu a {
    padding: 0.6rem 1rem;
  }
}

/* Legal pages (Privacy Policy): long-form prose with small section headings. */
.legal h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}

.legal strong {
  color: var(--fg);
  font-weight: 600;
}

.legal .placeholder {
  margin-top: 1.25rem;
}

.legal h2 + ul {
  margin-top: 0;
}

.legal .prose a {
  color: var(--blue);
}