/* ==========================================================================
   Wandervend — concept 02 design system
   Structure borrowed from Quicken; palette carried over from concept 01.
   One typeface (General Sans). No serif, no italic — impact comes from
   weight, scale and tight tracking.
   Authored at a 1440px reference width.

   ACCENT BUDGET — maroon appears in exactly seven places:
     1. nav contact button
     2. hero eyebrow pill
     3. one word in the h1
     4. primary buttons
     5. the stepper band (tint) and its active tab
     6. the active offer card
     7. the contact band (full flood)
   ========================================================================== */

:root {
  --maroon: #98022C;
  --maroon-hover: #7D0224;
  --maroon-active: #61021C;
  --maroon-tint: #ECD9D0;
  /* Reinstated from Sam's original palette (old --color-surface).
     Replaces the blush tint wherever it covered a large area. */
  --cream: #F7EFE4;
  --cream-line: #E8DCCB;

  --page: #FFFFFF;
  --surf: #F7F7F5;
  --line: #E4E4DF;
  --ink: #1A1A18;
  --muted: #6E6E68;
  --faint: #9C9C95;

  --body: 'General Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-pill: 999px;
  --r-card: 20px;
  --r-img: 12px;

  --shell: 1200px;
}

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

body {
  /* Fluid. The deck embeds these pages at a fixed 1440 reference width, but a
     real browser needs the body to fill the viewport and the shell to centre
     inside it — otherwise the page sits hard against the left edge. */
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
.shell {
  width: 100%;
  max-width: calc(var(--shell) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- Type ----------------------------------------------------------------
   One face. Personality comes from weight and tracking, not a second family. */

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: 76px; line-height: 0.98; letter-spacing: -0.042em; }
h2 { font-size: 48px; }
h3 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.3; font-weight: 600; }

/* The accent word. No italic in this concept — colour does the work. */
.hi { color: var(--maroon); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint);
}

.lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.small { font-size: 15px; line-height: 1.6; color: var(--muted); }

.headblock { display: grid; grid-template-columns: 46% 1fr 36%; align-items: end; margin-bottom: 56px; }
.headblock > .headblock__note { grid-column: 3; }
.headblock--center { text-align: center; margin-bottom: 56px; }
.headblock--center .lead { margin-inline: auto; }

/* --- Controls ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 54px; padding: 0 28px;
  border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; white-space: nowrap;
  text-decoration: none;   /* buttons are <a> now that the nav links work */
}
.btn--primary { background: var(--maroon); color: #fff; }          /* accent slot */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--sm { height: 46px; padding: 0 22px; font-size: 14.5px; }
.btn--wide { width: 100%; justify-content: center; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--cream); color: var(--maroon-active);           /* accent slot */
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--maroon); }

/* --- Image placeholders -------------------------------------------------- */

.ph {
  position: relative;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-img);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; overflow: hidden;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(26,26,24,.028) 0 1px, transparent 1px 11px);
}
.ph__icon { width: 26px; height: 26px; stroke: var(--faint); position: relative; }
.ph__cap {
  position: relative;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.07em; line-height: 1.55; color: var(--faint);
  text-transform: uppercase; max-width: 30ch;
}
.ph--sq { aspect-ratio: 1; border-radius: 10px; }

/* --- Nav ----------------------------------------------------------------- */

.nav { height: 80px; border-bottom: 1px solid var(--line); background: var(--page); }
.nav__in { display: flex; align-items: center; height: 80px; }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__brand img { width: 152px; }
.nav__links { display: flex; gap: 30px; margin-left: 56px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; }
.nav__links a.is-here { color: var(--ink); }
.nav__cta { margin-left: auto; }

/* --- Hero -----------------------------------------------------------------
   Type only. No photography — the offer cards carry the composition. */

.hero { padding-top: 118px; padding-bottom: 196px; }
.hero h1 { margin: 26px 0 24px; max-width: 17ch; }
.hero .lead { max-width: 52ch; }
.hero__actions { display: flex; gap: 12px; margin-top: 38px; }

/* --- Offer cards ----------------------------------------------------------
   Break into the bottom of the hero. Wandervend has exactly two offerings,
   which is why this Quicken pattern fits so cleanly. */

.offers { margin-top: -132px; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.offer {
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 32px 28px 30px;
  box-shadow: 0 22px 50px -20px rgba(26,26,24,.16);
  display: flex; flex-direction: column;
}
/* All three rest equal — that is Sam's "three clear paths", and a card that
   is permanently maroon reads as already-hovered once hover also goes maroon.
   Dropping the static accent also hands back the slot the nav underline
   borrowed, so the budget is seven again. */
.offer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.offer__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.offer__anchor { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.offer h3 { font-size: 24px; font-weight: 700; letter-spacing: -.028em; margin-bottom: 10px; }
.offer p { font-size: 15px; color: var(--muted); line-height: 1.58; }
.offer ul { list-style: none; display: grid; gap: 11px; margin: 22px 0 26px; }
.offer li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; }
.offer li svg { width: 15px; height: 15px; margin-top: 5px; stroke: var(--faint); }
.offer__actions { margin-top: auto; display: flex; gap: 10px; }

/* --- Card interaction ------------------------------------------------------
   The whole card is the target, not just the button. The button's ::after is
   stretched over the card, so there is still exactly one link per card — a
   card-wide <a> wrapping a button <a> would be invalid and unusable with a
   screen reader. */
.offer { position: relative; }
.offer__actions .btn::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-card);
}
.offer:focus-within { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* Scoped to real pointers. On a touch screen :hover latches after a tap and
   the card stays lit while you swipe the carousel. */
@media (hover: hover) {
  .offer {
    transition: transform .24s cubic-bezier(.2, .7, .3, 1),
                box-shadow .24s ease, border-color .18s ease;
  }
  .offer:hover {
    border-color: var(--maroon);
    transform: translateY(-5px) scale(1.006);
    box-shadow: 0 30px 56px -26px rgba(26, 26, 24, .28);
  }
  .offer:hover .offer__label { color: var(--maroon); }
  .offer:hover li svg { stroke: var(--maroon); }
  .offer:hover .btn--ghost {
    background: var(--maroon); border-color: var(--maroon); color: #fff;
  }
  .offer .offer__label, .offer li svg, .offer .btn {
    transition: color .18s ease, stroke .18s ease, background-color .18s ease,
                border-color .18s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer, .offer:hover { transition: border-color .18s ease; transform: none; }
}

/* --- Wayfinding ------------------------------------------------------------
   The eighth maroon. The budget is seven and this deliberately spends one
   more: once the site is multi-page, "which room am I in" is worth an accent,
   and a 2px rule under one nav item is the smallest possible way to say it. */

.nav__links a { position: relative; }
.nav__links a.is-here { color: var(--ink); font-weight: 600; }
.nav__links a.is-here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -21px;
  height: 2px; background: var(--maroon);
}

/* --- Sections ------------------------------------------------------------ */

.sec { padding-block: 112px; }
.sec--tight { padding-block: 84px; }
.sec--surf { background: var(--surf); }
.rule-top { border-top: 1px solid var(--line); }

/* --- Positioning strip (Sam's verbatim copy) -----------------------------
   Shares one continuous cream field with the stepper below, so the page runs
   white → cream → white. On white with hairline borders this was the only
   band on the page carrying no card, image or colour, and it vanished at a
   squint — the central positioning statement was the least visible thing on
   the page. */

.strip { background: var(--cream); }
/* The cream now starts where the section starts, so the offer cards need
   their own clearance — otherwise their rounded corners and shadows sit
   exactly on the colour boundary. The old .sec--tight padding did this. */
#herowrap { padding-bottom: 96px; }
.strip__in {
  /* Aligned to the shell. The old full-bleed 64px gutter started this text
     ~56px left of every other section. */
  width: 100%; max-width: calc(var(--shell) + 48px); margin-inline: auto;
  padding-inline: 24px;
  display: grid; grid-template-columns: 7fr 5fr;
}
.strip__col { padding-block: 88px; }
.strip h2 { font-size: 34px; margin: 0 0 34px; }
.strip ul { list-style: none; }

/* The claim. No tick marks: the three offer cards immediately above already
   use them, and repeating the mechanic made this read as two more cards that
   had lost their boxes. Hairline rules and larger type instead — the section
   states positions, it is not a checklist. */
.strip__col--is { padding-right: 80px; }
.strip__col--is li {
  font-size: 19px; line-height: 1.45; padding: 18px 0;
  border-top: 1px solid var(--cream-line);
}
.strip__col--is li:first-child { border-top: 0; padding-top: 0; }
.strip__col--is li:last-child { padding-bottom: 0; }

/* The counter. Narrower and smaller, but at full ink strength — these
   refusals are the sharpest copy on the page and the old muted grey read as
   disabled rather than deliberate. Crosses survive only here, so the glyph
   now carries exactly one meaning. Ink, not maroon: spending an accent slot
   here would put the page at eight. */
.strip__col--not { padding-left: 80px; border-left: 1px solid var(--cream-line); }
/* Loose. Three refusals, three separate beats — and it closes most of the
   height gap against the taller column, so the divider isn't left running
   down an empty half. */
.strip__col--not ul { display: grid; gap: 34px; }
.strip__col--not li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 17px; line-height: 1.5; align-items: start;
  text-wrap: balance;   /* stops "we guide the / model" orphaning */
}
.strip__col--not li svg {
  width: 16px; height: 16px; margin-top: 4px; stroke: var(--ink); opacity: .45;
}

/* A rule inside one cream field, not a boundary between two sections. */
#positioning + .stepper { border-top: 1px solid var(--cream-line); }

/* --- Stepper band ---------------------------------------------------------
   Quicken floods this section in full brand colour. Maroon is too heavy for
   that at this size, so it runs on the tint instead. */

.stepper { background: var(--cream); padding-block: 104px; }
.stepper .eyebrow { color: var(--muted); }
.stepper h2 { max-width: 22ch; margin: 14px 0 0; }
.stepper__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; margin-bottom: 46px; }
.stepper__head p { font-size: 17px; color: var(--muted); line-height: 1.6; padding-bottom: 6px; }

.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--cream-line); padding-bottom: 18px; margin-bottom: 40px; }
.tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); opacity: .5;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill);
}
.tab[aria-selected='true'] { background: var(--maroon); color: #fff; opacity: 1; }
.tab__n { font-family: var(--mono); font-size: 11px; margin-right: 9px; opacity: .7; }

.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.panel h3 { font-size: 32px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 14px; }
.panel p { font-size: 16.5px; color: var(--muted); line-height: 1.62; }
.panel ul { list-style: none; display: grid; gap: 11px; margin-top: 24px; }
.panel li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink); }
.panel li svg { width: 15px; height: 15px; margin-top: 5px; stroke: var(--faint); }
.panel .ph { height: 320px; background: rgba(255,255,255,.6); border-color: var(--cream-line); }
.panel .ph__cap { color: var(--muted); }
.panel .ph__icon { stroke: var(--muted); }

/* --- Audience cards -------------------------------------------------------
   Both audiences permanently visible. This is the fix for the concept-01
   toggle, which hid half the pitch. */

.aud { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aud__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 40px 36px; display: flex; flex-direction: column; }
.aud__card--b { background: var(--surf); border-color: transparent; }
.aud__who { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.aud__card h3 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 14px 0 12px; }
.aud__card > p { font-size: 16.5px; color: var(--muted); line-height: 1.6; }
.aud__list { list-style: none; display: grid; gap: 14px; margin: 28px 0 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.aud__card--b .aud__list { border-top-color: #E0E0DA; }
.aud__list li { display: grid; grid-template-columns: 20px 1fr; gap: 13px; font-size: 15.5px; line-height: 1.5; }
.aud__list li svg { width: 16px; height: 16px; margin-top: 4px; stroke: var(--faint); }
.aud__card .btn { margin-top: auto; }

/* --- Category grid --------------------------------------------------------
   Static, not a marquee. A scrolling row is ISO Meet's signature and belongs
   to concept 01; it also reads as a smear when frozen in a PDF. A calm grid
   answers "can I vend my thing?" better in this format. */

.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 18px; }
.cat .ph { aspect-ratio: 1; border-radius: 10px; }
/* The hairline is for the pale products. Two of the twelve — the white travel
   adaptor and the toiletry bottles — are lighter than the cream they sit on,
   so without an edge their tiles look like holes next to ten dark objects. */
.cat img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cream-line);
}
.cat span { display: block; margin-top: 11px; font-size: 14px; color: var(--muted); text-align: center; }

/* The "and what doesn't" line — Sam's own is/isn't register, not a borrow. */
.cats__not {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: 48px; padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 16.5px; color: var(--muted);
}
.cats__not svg { width: 17px; height: 17px; stroke: var(--faint); flex: none; }
.cats__not strong { color: var(--ink); font-weight: 600; }

/* --- Machines ------------------------------------------------------------ */

.mach__in { display: grid; grid-template-columns: .92fr 1fr; gap: 72px; align-items: center; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 40px; }
.spec h4 { font-size: 15.5px; font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.spec p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* --- Partners ------------------------------------------------------------ */

.partners { border-block: 1px solid var(--line); padding-block: 54px; }
.partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.partners__cell { border: 1px solid var(--line); border-radius: var(--r-card); height: 96px; display: flex; align-items: center; justify-content: center; }
.partners__cell img { max-height: 34px; width: auto; opacity: .62; filter: grayscale(1); }

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 880px; margin-inline: auto; }
.faq__row { border-top: 1px solid var(--line); padding: 26px 0; display: grid; grid-template-columns: 1fr 22px; gap: 24px; align-items: start; }
.faq__row:last-child { border-bottom: 1px solid var(--line); }
.faq__q, .faq__btn { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.faq__a { font-size: 15.5px; color: var(--muted); margin-top: 12px; max-width: 62ch; }
.faq__pm { width: 20px; height: 20px; stroke: var(--faint); margin-top: 3px; transition: transform .2s ease; }

/* Collapsing is applied by script, so the answers ship visible: if site.js
   fails, the page is a readable Q&A rather than unanswerable questions. */
.faq__btn {
  display: block; width: 100%; text-align: left; padding: 0;
  border: 0; background: none; font-family: var(--body); color: var(--ink);
  cursor: pointer;
}
.faq__btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 4px; border-radius: 3px; }
/* Awaiting an answer from Sam — see HANDOVER. Deliberately reads as pending
   rather than broken, and drops out on its own once the answer lands. */
.faq__row--pending { grid-template-columns: 1fr auto; }
.faq__row--pending .faq__q { color: var(--muted); font-weight: 500; }
.faq__soon {
  justify-self: end; white-space: nowrap; margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

.faq__wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows .24s ease, opacity .18s ease;
}
.faq__wrap > * { min-height: 0; }        /* the row the 0fr/1fr actually acts on */
/* The answer carries no spacing of its own. Padding or margin on it becomes
   the grid track's intrinsic minimum — min-height:0 zeroes the content box,
   not the padding — so a closed row kept 12px of dead space. The gap lives on
   the wrapper, outside the track that animates. */
.faq__row--js .faq__a { margin-top: 0; padding-top: 0; }
.faq__row--js .faq__wrap { padding-top: 0; transition: grid-template-rows .24s ease, opacity .18s ease, padding-top .24s ease; }
.faq__row--js.is-open .faq__wrap { padding-top: 12px; }
.faq__row--js.is-open .faq__wrap { grid-template-rows: 1fr; opacity: 1; }
.faq__row--js.is-open .faq__pm { transform: rotate(45deg); }

/* --- Contact band -------------------------------------------------------- */

.contact { background: var(--maroon); color: #fff; padding-block: 104px; }   /* accent slot */
.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; }
.contact h2 { margin: 18px 0 20px; }
.contact .eyebrow { color: rgba(255,255,255,.58); }
.contact__lead { font-size: 18px; color: rgba(255,255,255,.8); max-width: 40ch; line-height: 1.6; }
.contact__details { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); display: grid; gap: 20px; }
.contact__detail .eyebrow { display: block; margin-bottom: 6px; }
.contact__detail p { font-size: 16.5px; }

.form { background: #fff; border-radius: var(--r-card); padding: 34px; color: var(--ink); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
/* Real inputs. These were divs with the placeholder baked in as text — fine
   for a screenshot, useless as a form, and this is the page's whole job. */
/* Exclude the radios: they are visually hidden inside .seg, and a blanket
   width:100% on them blew the page out to 2484px. */
.field input:not([type="radio"]), .field textarea {
  width: 100%; height: 50px; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0 18px;
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--page); -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: auto; border-radius: 14px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(152, 2, 44, .12);
}
.field input:user-invalid { border-color: #B3261E; }
.field--full { grid-column: 1 / -1; }
fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.field legend { padding: 0; }

/* Segmented control, now real radios. The label is the whole hit area and the
   input itself is hidden — a 44px target either way. */
.seg { display: flex; gap: 4px; padding: 5px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-pill); }
.seg label { flex: 1; position: relative; }
/* Clipped rather than just transparent, and the label is now a containing
   block so it cannot escape the control. */
.seg input {
  position: absolute; width: 1px; height: 1px; inset: 0;
  opacity: 0; pointer-events: none; clip-path: inset(50%);
}
.seg label span {
  display: flex; align-items: center; justify-content: center;
  height: 44px; margin: 0; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.seg input:checked + span { background: var(--page); color: var(--ink); box-shadow: 0 1px 3px rgba(26,26,24,.09); }
.seg input:focus-visible + span { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* Courses hand-off page */
.handoff { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.handoff h2 { font-size: 30px; margin-bottom: 22px; }
.handoff__list { list-style: none; display: grid; gap: 15px; }
.handoff__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.5; align-items: start; }
.handoff__list li svg { width: 17px; height: 17px; margin-top: 4px; stroke: var(--ink); opacity: .5; }
.handoff__note {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52ch;
}

/* --- Footer -------------------------------------------------------------- */

.foot { padding-top: 76px; padding-bottom: 34px; }
.foot__in { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; }
.foot__brand img { width: 168px; margin-bottom: 20px; }
.foot__brand p { font-size: 15px; color: var(--muted); max-width: 34ch; }
.foot__col .eyebrow { display: block; margin-bottom: 18px; }
.foot__col ul { list-style: none; display: grid; gap: 11px; }
.foot__col a { font-size: 15px; color: var(--muted); text-decoration: none; }
.foot__meta { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; letter-spacing: .045em; color: var(--faint); }

/* --- Accessibility floor ------------------------------------------------- */

:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Inner-page components
   Built from concept 02's own language — card lists and tab panels — rather
   than repeating concept 01's alternating image rows.
   ========================================================================== */

.phead { padding-top: 92px; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
.phead__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: end; }
.phead h1 { font-size: 62px; margin: 22px 0 0; }
.phead .lead { padding-bottom: 8px; }

/* Four-step index — a compact companion to the tab stepper */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { border-top: 2px solid var(--ink); padding-top: 20px; }
.step-card__n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); }
.step-card h3 { font-size: 20px; margin: 10px 0 8px; }
.step-card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Test timeline — four columns, no progress-bar graphic */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.tl__col { border-top: 1px solid var(--line); padding-top: 22px; }
.tl__wk { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.tl h3 { font-size: 20px; margin: 10px 0 9px; }
.tl p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Sample sell-through report */
.report { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--page); }
.report__bar { padding: 15px 24px; border-bottom: 1px solid var(--line); background: var(--surf);
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.report__body { padding: 32px 34px 36px; }
.report__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.kpi__v { font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.kpi__l { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
/* Sell-through table.
   Concept 01 used a standalone bar chart; a chart is its component, not this
   concept's. Concept 02 speaks in tables and big figures, so the readout is a
   ranked table with the bar carried inside the row. */
.rpt { width: 100%; border-collapse: collapse; }
.rpt th {
  text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.rpt td { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.rpt td:first-child { font-weight: 600; }
.rpt .num { font-variant-numeric: tabular-nums; width: 84px; color: var(--muted); }
.rpt .bar { width: 46%; padding-left: 28px; }
.rpt .bar i { display: block; height: 8px; border-radius: 4px; background: var(--maroon-tint); }
.rpt .bar i.hi { background: var(--maroon); }
.rpt tr.out td { color: var(--faint); }
.rpt tr.out td:first-child { font-weight: 500; }
.rpt tr:last-child td { border-bottom: 0; }

/* Specification table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.tbl th { font-weight: 600; width: 38%; }
.tbl td { color: var(--muted); }
.tbl tr:first-child th, .tbl tr:first-child td { border-top: 1px solid var(--line); }

/* Two-up comparison — the Quicken plan-card treatment */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 36px 34px; display: flex; flex-direction: column; }
.compare__card .ph { height: 176px; margin-bottom: 28px; }
.compare__card h3 { font-size: 26px; font-weight: 700; letter-spacing: -.028em; margin-bottom: 10px; }
.compare__card > p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.compare__card ul { list-style: none; display: grid; gap: 11px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.compare__card li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15px; color: var(--muted); }
.compare__card li svg { width: 15px; height: 15px; margin-top: 4px; stroke: var(--faint); }

/* Contact page */
.cpage { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; }
.cpage__aside { display: grid; gap: 30px; }
.infoblock { border-top: 1px solid var(--line); padding-top: 22px; }
.infoblock .eyebrow { display: block; margin-bottom: 9px; }
.infoblock p { font-size: 16px; color: var(--muted); }
.infoblock strong { color: var(--ink); font-weight: 600; }

.xlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin-inline: auto; }
.xlink { border: 1px solid var(--line); border-radius: var(--r-card); padding: 30px; }
.xlink h3 { font-size: 21px; margin-bottom: 8px; }
.xlink p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.xlink__go { display: inline-block; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--maroon); text-decoration: none; }
.xlink__go:hover { text-decoration: underline; }

/* Sibling paths at the foot of a path page. Flat variant of the home cards:
   no overlap, no bullets, no active state — they are an exit, not the pitch. */
/* Two cards, not three — they were landing in slots 1 and 2 of the home grid
   and sitting off to the left. Width matches a home card exactly: the 1200
   shell over three columns with an 18px gap gives 388, so two of them plus
   one gap is 794. */
.offers--flat {
  margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 794px; margin-inline: auto;
}
.offers--flat .offer { box-shadow: none; border: 1px solid var(--line); }
.offers--flat .offer h3 { margin-bottom: 0; }
.offers--flat .offer__actions { margin-top: 22px; }

/* ==========================================================================
   Mobile — 900px down. Media queries only; the desktop layout above is
   untouched. Tested to 360px.
   The nav breakpoint matches the client's existing site so the pattern is
   already familiar to them.
   ========================================================================== */

.nav__burger { display: none; }

@media (max-width: 900px) {
  .offers { grid-template-columns: 1fr; }
  /* The desktop pages are authored at a fixed 1440 reference width. Release
     that first or nothing below it can reflow. */
  .shell { padding-inline: 20px; }

  h1 { font-size: 40px; letter-spacing: -0.032em; }
  h2 { font-size: 29px; letter-spacing: -0.028em; }
  h3 { font-size: 19px; }
  .lead { font-size: 17px; }

  .sec { padding-block: 64px; }
  .sec--tight { padding-block: 52px; }

  .headblock,
  .headblock--center { display: block; text-align: left; margin-bottom: 34px; }
  .headblock--center .lead { margin-inline: 0; }
  .headblock__note { margin-top: 16px; }

  /* Nav — collapses to a hamburger. The contact button stays visible; it is
     the only action that matters on a phone. */
  .nav { height: 66px; }
  .nav__in { height: 66px; }
  /* The mark stays on mobile. It was hidden for space, but it is the logo —
     dropping it leaves the wordmark carrying the brand alone, and it is the
     one element shared with the favicon and the app icon. The lockup scales
     down instead: at 360 the bar has ~44px of slack, so a 30px mark plus a
     10px gap would leave 4px. 24 and 8 against a 104px wordmark fits with
     room to spare. */
  .nav__brand { gap: 8px; }
  .nav__brand img { width: 104px; }
  .nav__brand svg { display: block; width: 24px; height: 24px; flex: none; }
  .nav__burger { margin-left: 8px; }

  /* Small phones: at 320 the lockup lands flush against the Contact button.
     The wordmark gives up the width rather than the mark, which has a floor
     below which it stops reading as a machine. */
  @media (max-width: 380px) {
    .nav__brand img { width: 88px; }
    .nav__cta .btn { padding: 0 13px; }
  }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; margin-left: 10px;
    border: 1px solid var(--line); border-radius: 10px; background: transparent;
    align-items: center; cursor: pointer;
  }
  .nav__burger span {
    display: block; width: 16px; height: 1.5px; background: var(--ink);
    transition: transform .22s ease, opacity .15s ease;
  }
  /* Bars fold into a cross. The two outer bars translate onto the centre
     line first, then rotate, so they cross at the middle rather than
     pivoting around their own offset positions. */
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* The menu panel. Fixed rather than absolute so it is measured against the
     viewport, not a header that scrolls away underneath it. */
  .nav.is-open { position: relative; z-index: 60; }
  .nav__links {
    display: flex; position: fixed; inset: 66px 0 auto 0;
    flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 20px;
    background: var(--page); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgba(26, 26, 24, .35);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .16s ease, visibility .2s;
    visibility: hidden; z-index: 60; max-height: calc(100dvh - 66px);
    overflow-y: auto;
  }
  .nav.is-open .nav__links {
    transform: none; opacity: 1; pointer-events: auto; visibility: visible;
  }
  .nav__links a {
    padding: 15px 2px; font-size: 17px; border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a.is-here { color: var(--maroon); }
  /* The desktop underline is positioned against the header; in a stacked
     panel it would float loose, so the active item is coloured instead. */
  .nav__links a.is-here::after { content: none; }

  /* Hero — the cards stop overlapping and simply follow the headline. */
  .hero { padding-top: 52px; padding-bottom: 40px; }
  .hero h1 { margin: 20px 0 16px; max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; }
  .hero__actions .btn { justify-content: center; }

  /* The three paths swipe sideways instead of stacking. Stacked, they were
     three tall cards before the visitor reached anything else — the single
     biggest cause of the endless scroll on a phone. Cards sit at 84% so the
     next one is always visibly cut off at the edge, which is the affordance;
     no dots or arrows needed. */
  .offers, .offers--flat {
    display: flex; grid-template-columns: none; margin-top: 0; gap: 14px;
    max-width: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* Break the shell padding so a card can reach the screen edge, then put
       it back as scroll padding or the first card starts flush. */
    margin-inline: -20px; padding: 4px 20px 14px;
    scrollbar-width: none;
  }
  .offers::-webkit-scrollbar, .offers--flat::-webkit-scrollbar { display: none; }
  .offer {
    flex: 0 0 84%; scroll-snap-align: center;
    padding: 28px 24px; box-shadow: 0 12px 30px -18px rgba(26,26,24,.16);
  }
  .offers--flat .offer { flex-basis: 78%; }
  .offer h3 { font-size: 24px; }
  .offer__top { flex-direction: column; gap: 4px; align-items: flex-start; }
  .offer__actions .btn { width: 100%; justify-content: center; }

  @media (prefers-reduced-motion: no-preference) {
    .offers, .offers--flat { scroll-behavior: smooth; }
  }

  /* Courses hand-off — stacks; two columns squeeze the text past its longest
     word and overflow the page below about 340px. */
  .handoff { grid-template-columns: 1fr; gap: 34px; }
  .handoff h2 { font-size: 25px; margin-bottom: 18px; }
  .handoff__list li { font-size: 15.5px; }

  /* Positioning strip */
  #herowrap { padding-bottom: 48px; }
  .strip__col--not ul { gap: 24px; }
  .strip__in { grid-template-columns: 1fr; padding-inline: 20px; }
  .strip__col { padding-block: 52px; }
  .strip h2 { font-size: 26px; margin: 0 0 24px; }
  .strip__col--is { padding-right: 0; }
  .strip__col--is li { font-size: 17px; padding: 15px 0; }
  .strip__col--not {
    padding-left: 0; padding-top: 46px;
    border-left: 0; border-top: 1px solid var(--cream-line);
  }

  /* Stepper — tabs scroll sideways, panel stacks */
  .stepper { padding-block: 56px; }
  .stepper__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .stepper__head p { font-size: 15.5px; padding-bottom: 0; }
  .tabs {
    gap: 6px; padding-bottom: 14px; margin-bottom: 28px;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  }
  .tab { flex: none; height: 40px; padding: 0 16px; font-size: 14.5px; }
  .panel { grid-template-columns: 1fr; gap: 28px; }
  .panel h3 { font-size: 24px; }
  .panel .ph { height: 200px; }

  /* Audience cards — both stack in full. Neither pitch is ever hidden, which
     is the whole reason this concept avoids a toggle. */
  .aud { grid-template-columns: 1fr; gap: 16px; }
  .aud__card { padding: 30px 24px; }
  .aud__card h3 { font-size: 25px; }

  .cats { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
  .cats__not { margin-top: 32px; padding-top: 22px; font-size: 15px; align-items: flex-start; text-align: left; }

  .mach__in { grid-template-columns: 1fr; gap: 32px; }
  .specs { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }

  .partners__grid { grid-template-columns: 1fr 1fr; }
  .partners__cell { height: 76px; }

  .faq__q { font-size: 16.5px; }

  /* Contact */
  .contact { padding-block: 64px; }
  .contact__in { grid-template-columns: 1fr; gap: 34px; }
  .contact h2 { font-size: 32px; }
  .form { padding: 24px 20px; }
  .form__grid { grid-template-columns: 1fr; }
  /* Both options fit side by side at 390 — stacking them reads as two
     separate buttons rather than one choice. */
  .seg button { padding: 0 8px; font-size: 13.5px; }

  .foot { padding-top: 52px; }
  .foot__in { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__meta { flex-direction: column; gap: 8px; margin-top: 40px; }

  /* Inner pages */
  .phead { padding-top: 52px; padding-bottom: 44px; }
  .phead__in { grid-template-columns: 1fr; gap: 20px; }
  .phead h1 { font-size: 38px; }
  .phead .lead { padding-bottom: 0; }

  .steps-grid { grid-template-columns: 1fr; gap: 24px; }
  .tl { grid-template-columns: 1fr; gap: 24px; }

  .report__body { padding: 22px 18px 26px; }
  .report__kpis { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .kpi__v { font-size: 30px; }
  /* The share bar is the first thing to go — the ranking still reads.
     Its header has to go with it or the columns misalign. */
  .rpt .bar, .rpt th:nth-child(4) { display: none; }
  .rpt th:nth-child(3), .rpt td:nth-child(3) { display: none; }
  .rpt td, .rpt th { font-size: 14px; }

  .tbl th, .tbl td { font-size: 14.5px; padding: 14px 0; }
  .tbl th { width: 45%; }

  .compare { grid-template-columns: 1fr; gap: 16px; }
  .compare__card { padding: 28px 24px; }

  .cpage { grid-template-columns: 1fr; gap: 40px; }
  .xlinks { grid-template-columns: 1fr; }
}

/* Narrowest phones still in real use. */
@media (max-width: 400px) {
  h1 { font-size: 35px; }
  .cats { grid-template-columns: repeat(2, 1fr); }
}

/* Three-up card row. A class, not an inline style — inline grid columns
   cannot be overridden by a media query, which is how two inner pages ended
   up overflowing at 360px. */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; gap: 16px; } }