/* Own Offer Funnel landing page, design v3.
   Two languages, one job each:
   - Swiss minimalism = STRUCTURE. A 12-column grid, wide (up to 1440px), flush-left type, a numbered rail
     on the left of every section with a short rule, hairline rules, big type, lots of air.
   - Neomorphism (the Console look) = SURFACE. The tool card, content cards, fit lists, buttons and photos are
     raised or inset on the page colour. Inset = chosen, recessed, or a control. Raised never sits inside raised,
     so the options inside the tool card are flat rows and the chosen one is inset.
   (v2 also had soft neobrutalism outlines and hard shadows; Harry dropped them on 2026-10-20 as adding little.)
   Palette from Console style tile v4: blue #1454D8 (you can act, or it is selected), off-black #222126,
   off-white #FBF7F4. Inter Tight Bold titles, Inter body. Light by default, dark follows the system. */

@font-face { font-family: "Inter Variable"; src: url(fonts/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight Variable"; src: url(fonts/inter-tight-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }

:root {
  --font-ui: "Inter Variable", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Inter Tight Variable", "Inter Fallback", system-ui, sans-serif;
  --r-card: 24px; --r-ctl: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 140ms;
  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --col-gap: clamp(16px, 2vw, 32px);
  /* One text measure for body copy: whole grid columns of the content column's 9, so every paragraph ends on the same column line. 7 of 9 on smaller desktops, 6 of 9 from 1280px up so lines stay near 70 characters. Percent resolves against .body. */
  --measure: calc(100% * 7 / 9 - var(--col-gap) * 2 / 9);
  --bg: #fbf7f4; --text: #222126; --muted: #5c5a61; --faint: #6d6b72; --line: rgba(34,33,38,.14);
  --ink: #222126;
  --blue: #1454d8; --blue-ink: #ffffff; --blue-text: #1454d8;
  --hl: #ffffff; --sh: rgba(34,33,38,.17); --hover: rgba(34,33,38,.03);
  --logo-light: 1; --logo-dark: 0; --knob-x: 0px;
  color-scheme: light;
}
/* Dark: the page is always light first, whatever the phone or computer is set to. Dark is only the visitor's own choice with the
   switch, which sets data-theme on <html> and is carried to the other pages of this site for the length of the visit (sessionStorage,
   gone when the tab closes). */
:root[data-theme="dark"] {
  --bg: #222126; --text: #fbf7f4; --muted: #bdb9bc; --faint: #9d999e; --line: rgba(251,247,244,.16);
  --ink: #fbf7f4;
  --blue-text: #86a6f9;
  --hl: rgba(255,255,255,.055); --sh: rgba(0,0,0,.55); --hover: rgba(255,255,255,.055);
  --logo-light: 0; --logo-dark: 1; --knob-x: 32px;
  color-scheme: dark;
}
:root {
  --raise: -7px -7px 16px var(--hl), 8px 8px 18px var(--sh);
  --raise-sm: -3px -3px 8px var(--hl), 4px 4px 10px var(--sh);
  --inset: inset 3px 3px 7px var(--sh), inset -3px -3px 7px var(--hl);
  --inset-sm: inset 2px 2px 5px var(--sh), inset -2px -2px 5px var(--hl);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
@media (min-width: 1100px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-text); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; margin: 0; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(42px, 6.4vw, 92px); letter-spacing: -0.05em; line-height: .96; }
h2 { font-size: clamp(34px, 5.4vw, 76px); letter-spacing: -0.05em; line-height: .98; }
h3 { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.025em; line-height: 1.15; }
p { margin: 0 0 1em; max-width: 64ch; }
:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.lede { font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--muted); letter-spacing: -0.01em; }
.muted { color: var(--muted); }

/* To-do markers: anything Harry still has to supply. Must be zero before launch (grep for "todo"). */
.todo { outline: 2px dashed var(--faint); outline-offset: 2px; border-radius: 6px; padding: 2px 6px; font-size: 14px; color: var(--muted); }

/* Top bar: the logo and the day/night switch. No navigation, no links, nothing that leaks the visitor.
   Both logos sit stacked; the theme variables fade one out and the other in. */
.top { padding-block: 20px 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo { position: relative; width: 68px; aspect-ratio: 758 / 775; flex: none; display: block; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s var(--ease); }
.logo-light { opacity: var(--logo-light); }
.logo-dark { opacity: var(--logo-dark); }

/* Day/night switch: an Apple-style switch in neomorphism. The track is inset, the knob is raised and slides across
   (a small spring on the way), and the sun and moon turn and fade into each other. The knob position, like the colours,
   comes from the theme variables, so it is right before any script runs. */
.theme { flex: none; display: grid; place-items: center; width: 76px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 99px; -webkit-tap-highlight-color: transparent; }
.theme-track { position: relative; display: block; width: 68px; height: 36px; border-radius: 99px; box-shadow: var(--inset); background: var(--bg); }
.theme-knob { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); box-shadow: var(--raise-sm); display: grid; place-items: center; color: var(--text); transform: translateX(var(--knob-x)); transition: transform .5s cubic-bezier(.3,1.35,.5,1); }
.theme:active .theme-knob { width: 34px; }
.theme:active .theme-knob { transform: translateX(var(--knob-x)); }
.theme[aria-checked="true"]:active .theme-knob { transform: translateX(calc(var(--knob-x) - 6px)); }
.theme .ico { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.theme .sun { opacity: var(--logo-light); transform: rotate(calc((1 - var(--logo-light)) * 90deg)); }
.theme .moon { opacity: var(--logo-dark); transform: rotate(calc((var(--logo-light)) * -60deg)); }
.theme:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
/* While the switch is used, colours, shadows and borders change over half a second instead of snapping.
   The class is on <html> only for that moment (app.js), so nothing animates on page load. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim :not(.theme-knob):not(.theme-knob *):not(.logo img) { transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, text-decoration-color .5s ease, outline-color .5s ease, fill .5s ease, stroke .5s ease !important; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; grid-template-areas: "head" "tool" "gets" "more"; }
.hero-head { grid-area: head; display: grid; gap: clamp(14px, 1.8vw, 24px); align-content: start; }
.hero-head p { margin: 0; max-width: 40ch; }
.gets { grid-area: gets; }
.more { grid-area: more; }
.tool { grid-area: tool; }
/* Desktop: the headline and "what you get" stack in the left column; the tool is the one tall item on the right,
   six of twelve columns wide. The last left row is 1fr, so when the tool grows the extra height lands under the left
   column instead of stretching the headline row. */
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; grid-template-rows: auto auto 1fr; align-items: start;
    grid-template-areas: "head head head head head head tool tool tool tool tool tool" "gets gets gets gets gets gets tool tool tool tool tool tool" "more more more more more more tool tool tool tool tool tool"; }
  .hero-grid > * { min-width: 0; }
  .hero-head { grid-column: 1 / span 6; }
  .gets { grid-column: 1 / span 6; }
  .more { grid-column: 1 / span 6; }
  .tool { grid-column: 7 / span 6; }
}

/* The nudge: a hand-drawn arrow, from "Step one" across to the tool. Wide screens only, where the
   tool sits beside the headline. It is decoration (aria-hidden), so it carries no information the page needs. */
.nudge { display: none; }
.step1 { font-weight: 700; color: var(--text); }
@media (min-width: 1200px) {
  .hero-head .lede { max-width: 30ch; position: relative; }
    .nudge { display: block; position: absolute; left: calc(100% + 12px); bottom: -6px; width: 150px; color: var(--muted); pointer-events: none; transform: rotate(-3deg); }
  .nudge svg { width: 150px; height: auto; }
}

/* Find out more: a quiet pointer under the hero, with a hand-drawn arrow bending down the page (like the one beside the tool). */
.more { justify-self: start; display: inline-flex; align-items: flex-end; gap: 10px; color: var(--muted); text-decoration: none; font: 600 17px/1.2 var(--font-title); letter-spacing: -0.01em; padding: 4px 6px 0 0; }
.more svg { flex: none; transition: transform .3s var(--ease); }
.more:hover { color: var(--text); }
.more:hover svg { transform: translateY(4px); }
.more:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 4px; }

/* What you get: three short items, numbered in inset circles (Swiss list, neomorphic marker). */
.gets-h { font: 700 13px/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.gets ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: g; }
.gets li { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-items: start; counter-increment: g; }
.gets li::before { content: counter(g); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--font-title); box-shadow: var(--inset-sm); }
.gets b { display: block; font-family: var(--font-title); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }
.gets li span { color: var(--muted); font-size: 16.5px; line-height: 1.45; display: block; max-width: 52ch; }

/* Tool card: the one raised surface in the hero. Options inside are flat rows; the chosen row is inset. */
.tool { background: var(--bg); border-radius: 28px; box-shadow: var(--raise); padding: clamp(20px, 2.2vw, 30px); }
.tool fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tool legend { font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.04em; line-height: 1.08; padding: 0; margin-bottom: 6px; }
.tool .hint { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.opts { display: grid; gap: 4px; margin: 0 0 22px; padding: 0; list-style: none; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt > span { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 14px; border-radius: var(--r-ctl); line-height: 1.3; transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.opt > span::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--faint); box-shadow: var(--inset-sm); background: var(--bg); }
.opt:hover input:not(:disabled):not(:checked) + span { background-color: var(--hover); }
.opt input:checked + span { box-shadow: var(--inset); }
.opt input:checked + span::before { background-color: var(--blue); border-color: var(--blue); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.8l4.2 4.2 8.8-9.6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; }
.opt input:focus-visible + span { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.opt input:disabled + span { opacity: .45; cursor: default; }
.opt input:disabled:checked + span { opacity: 1; }

/* Primary button: a raised blue key that presses in. The only blue fill that acts. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 30px; border: 0; border-radius: var(--r-ctl); background: var(--blue); color: var(--blue-ink); font: 700 18px/1 var(--font-ui); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; box-shadow: var(--raise-sm); transition: box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); }
.btn:hover { filter: brightness(1.08); }
.btn:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,.38), inset -2px -2px 6px rgba(255,255,255,.14); filter: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
.btn-wide { width: 100%; }
@media (min-width: 560px) { .btn-wide { width: auto; } }
.micro { color: var(--muted); font-size: 14.5px; margin: 16px 0 0; max-width: none; }
.tool-next { display: none; }
.tool.is-next fieldset, .tool.is-next .micro { display: none; }
.tool.is-next .tool-next { display: block; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 4px 12px; margin-bottom: 14px; }
.btn-quiet { background: transparent; color: var(--blue-text); border: 0; box-shadow: none; padding: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 16px; }
.btn-quiet:hover { filter: none; }
.btn-quiet:active { box-shadow: none; }

/* Slots: hidden on the live page until real. ?preview=1 reveals them. */
.slot { border: 2px dashed var(--faint); border-radius: var(--r-ctl); padding: 16px; color: var(--muted); font-size: 14.5px; margin-top: 18px; }
.slot[hidden] { display: none; }
.slot.video { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; margin: 28px 0; }
.slot.video[hidden] { display: none; }

/* ---------- Sections: the Swiss rail ---------- */
.sec { padding-block: clamp(56px, 8vw, 120px); }
.sec .grid { row-gap: 20px; }
.rail { grid-column: 1 / -1; }
.rail .num { display: block; width: 72px; border-top: 2px solid var(--ink); padding-top: 10px; font: 700 14px/1 var(--font-ui); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.body { grid-column: 1 / -1; min-width: 0; }
.body > * + * { margin-top: 24px; }
.body > p { margin-bottom: 0; }
.body > .lede { text-wrap: balance; }
@media (min-width: 1280px) { :root { --measure: calc(100% * 6 / 9 - var(--col-gap) / 3); } }
@media (min-width: 980px) { .body > :where(p, .trust-text) { max-width: var(--measure); } .trust-text p { max-width: none; } }
@media (min-width: 980px) {
  .rail { grid-column: 1 / span 3; align-self: start; position: sticky; top: 24px; margin-right: 32px; }
  .rail .num { width: 50%; }
  .body { grid-column: 4 / span 9; }
}
.body > h2 { margin-top: 0; }

/* 01 Problem: big numbers with hairline rules */
.tiles { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: 0; margin: 36px 0; }
.tiles li { border-top: 2px solid var(--ink); padding: 14px 0 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tiles strong { font-family: var(--font-title); font-weight: 700; font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.055em; line-height: .95; }
.tiles span { color: var(--muted); font-size: 18px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); column-gap: var(--col-gap); } .tiles li { display: block; } .tiles strong { display: block; margin-bottom: 10px; } }

/* 02 How: a statement, then six numbered steps in a grid */
.body > .audit { font-family: var(--font-title); font-weight: 600; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.04em; line-height: 1.12; max-width: 40ch; margin-top: 28px; margin-bottom: 0; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 26px var(--col-gap); counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; align-content: start; }
.steps li::before { content: "Stage " counter(step); justify-self: start; padding: 8px 14px; border-radius: 99px; box-shadow: var(--inset-sm); font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; background: var(--bg); }
.steps b { display: block; font-family: var(--font-title); font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 4px; }
.steps span { color: var(--muted); }
/* Two-item version for the promises in 07: same rule, pill and type as the stages, always two columns from 720px */
.steps.two { grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps.two { grid-template-columns: repeat(2, 1fr); } }
.steps.two li::before { content: "Promise " counter(step); }
.steps.two span { color: var(--text); }

/* 04 What you get: one raised card, a two-column checklist */
.checklist { margin-top: 36px; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--raise); padding: clamp(24px, 2.6vw, 40px); }
.checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px 40px; }
@media (min-width: 880px) { .checklist ul { grid-template-columns: 1fr 1fr; } }
.checklist li { position: relative; padding-left: 44px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; box-shadow: var(--inset-sm); background: var(--bg); }
.checklist li::after { content: ""; position: absolute; left: 10px; top: 7px; width: 6px; height: 12px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.checklist b { display: block; font-family: var(--font-title); font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 4px; }
.checklist span { display: block; color: var(--muted); font-size: 16px; line-height: 1.45; }


/* 04 Why trust me: photo beside the story */
/* 05 Who am I?: photo lives in the rail, text keeps a readable measure */
.trust-text > * + * { margin-top: 1em; }
.trust-text p { margin-bottom: 0; }
/* Round raised avatar: Harry beside "Who am I?", clients beside their names */
.who-head { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.who-head h2 { margin: 0; }
.avatar { flex: none; width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); border-radius: 50%; object-fit: cover; border: 5px solid var(--bg); box-shadow: var(--raise-sm); background: var(--bg); }
.avatar.sm { width: 96px; height: 96px; border-width: 4px; }
/* 06 Happy Clients: raised quote cards, same family as the checklist and the fit lists */
.proof { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.quote { display: flex; flex-direction: column; margin: 0; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--raise); padding: clamp(24px, 2.4vw, 36px); }
.quote blockquote { margin: 0; }
.quote b { display: block; font-family: var(--font-title); font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 12px; }
.quote p { margin: 0; color: var(--muted); }
.quote figcaption { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; font-weight: 700; }

/* 05 Promises: two raised cards */

/* 06 Fit: raised for yes, inset for no */
.fit { display: grid; gap: 24px; margin-top: 36px; }
@media (min-width: 880px) { .fit { grid-template-columns: 1fr 1fr; gap: 32px; } }
.fit > div { border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 40px); }
.fit .yes { box-shadow: var(--raise); }
.fit .no { box-shadow: var(--inset); }
.fit h3 { margin-bottom: 18px; font-size: clamp(22px, 2vw, 28px); }
.fit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fit li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.fit li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; box-shadow: var(--inset-sm); background: var(--bg); }
.fit .yes li::before { background: radial-gradient(circle, var(--ink) 0 26%, transparent 28%), var(--bg); }
.fit .no li::before { background: linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat, var(--bg); }
.slots-line { margin-top: 36px; font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.045em; line-height: 1.08; max-width: 26ch; }

/* 07 FAQ */
.faq { margin-top: 28px; }
.faq details { border-top: 2px solid var(--ink); }
.faq details:last-child { border-bottom: 2px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 68px; padding: 16px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(20px, 1.8vw, 26px); }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); transition: transform var(--dur) var(--ease); margin-right: 6px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 0 22px; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }

/* Final call: a raised blue block. The button turns off-white so it still stands out. */
.final { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 120px); }
.final .block { background: var(--blue); color: #fff; border-radius: 32px; box-shadow: var(--raise); padding: clamp(28px, 5vw, 80px); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.final h2 { color: #fff; max-width: 17ch; }
.final .final-text p { margin: 16px 0 0; }
.final .btn svg { flex: none; }
.final .slot { grid-column: 1 / -1; }
/* Desktop: the headline and its one line sit on the left, the button on the right, vertically centred across the card. Phones stack them,
   with the button full width. */
@media (min-width: 900px) {
  .final .block { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 80px); }
  .final .btn { min-height: 68px; padding: 0 40px; font-size: 20px; }
}
@media (max-width: 899px) { .final .btn { width: 100%; } }
.final .final-text p { text-wrap: balance; }
@media (max-width: 599px) {
  .final .block { padding: 28px 22px; }
  .final .btn { padding: 0 16px; font-size: 17px; }
  .final .final-text p { font-size: 16px; }
}
.final .btn { background: #fbf7f4; color: #222126; box-shadow: 4px 4px 12px rgba(0,0,0,.28), -3px -3px 8px rgba(255,255,255,.12); }
.final .btn:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,.25); }
.final p { color: rgba(255,255,255,.9); }
.final .slot { border-color: rgba(255,255,255,.7); color: #fff; }

footer { padding-block: 32px 56px; color: var(--muted); font-size: 14.5px; border-top: 2px solid var(--ink); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
footer p { margin: 0; max-width: none; }

/* Phones: room to breathe around the headline; the first question starts just below the first screen */
@media (max-width: 600px) {
  h1 { font-size: 38px; line-height: 1; }
  .top { padding-block: 20px 0; }
  .logo { width: 56px; }
  .brand { gap: 12px; }
  .hero { padding-block: 32px 28px; }
  .hero-grid { gap: 28px; }
  .hero-head { gap: 20px; }
  .lede { font-size: 17px; line-height: 1.45; }
  .tool { padding: 18px; border-radius: 24px; }
  .tool legend { font-size: 22px; }
  .tool .hint { margin-bottom: 8px; }
  .opts { gap: 2px; margin-bottom: 16px; }
  .opt > span { min-height: 50px; padding: 8px 10px; font-size: 16px; line-height: 1.25; }
  .btn { min-height: 52px; }
}

/* ---------- The tool (stage 03): screens drawn by app.js ----------
   Inputs are inset (a control), quick-answer chips and the button are raised, the AI's line sits in an inset block.
   No new colours: blue only on things that act. */
#tool-root { margin: -8px; padding: 8px; transition: height .36s var(--ease); }
/* Typeform-style: the old screen drifts up and fades, the next rises in, and the card eases to its new height. */
.screen { outline: none; }
.screen.out { opacity: 0; transform: translateY(var(--dy, -16px)); transition: opacity .18s ease, transform .2s ease; }
.screen.in { opacity: 0; transform: translateY(var(--dy, 24px)); }
.screen.in.go { opacity: 1; transform: none; transition: opacity .34s var(--ease), transform .42s var(--ease); }
.tool-loading { margin: 0; }
.tool .step { font-size: 13.5px; letter-spacing: .02em; margin: 0 0 8px; }
.tool .ai-msg { margin: 6px 0 14px; padding: 12px 14px; border-radius: var(--r-ctl); box-shadow: var(--inset-sm); font-size: 16px; line-height: 1.45; max-width: none; }
.tool .caveat { font-style: normal; }
.tool .err { margin: 0 0 12px; padding: 4px 0 4px 12px; border-left: 3px solid var(--ink); font-weight: 600; font-size: 15.5px; max-width: none; }
.tool .field { display: block; width: 100%; margin: 0 0 12px; padding: 14px 16px; border: 0; border-radius: var(--r-ctl); background: var(--bg); color: var(--text); box-shadow: var(--inset-sm); font: 400 17px/1.45 var(--font-ui); resize: none; overflow: hidden; min-height: 52px; }
.tool .field::placeholder { color: var(--faint); opacity: 1; }
.tool .other-text { margin: 4px 0 6px; }
.tool .sub { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.screen.kind-form legend { margin-bottom: 20px; }
.screen.kind-form .sub-legend { margin-bottom: 8px; }
.tool .sub-legend { font-family: var(--font-ui); font-weight: 600; font-size: 16.5px; letter-spacing: 0; line-height: 1.35; margin: 0 0 8px; padding: 0; }
.tool .sub .opts { margin-bottom: 4px; }
.tool .sub .opt > span { min-height: 48px; }
.opt.radio > span::before { border-radius: 50%; }
/* An option with a one-line plain description (the first question): name on top, description under it. */
.opt-text { display: block; min-width: 0; }
.opt-name { display: block; font-weight: 700; letter-spacing: -0.01em; }
.opt-desc { display: block; color: var(--muted); font-size: 15px; line-height: 1.3; margin-top: 1px; }
.opt.radio input:checked + span::before { background-image: radial-gradient(circle at center, #fff 0 30%, transparent 33%); background-size: 100% 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 99px; background: var(--bg); color: var(--text); box-shadow: var(--raise-sm); font: 500 15.5px/1.2 var(--font-ui); cursor: pointer; text-align: left; }
.chip:active { box-shadow: var(--inset-sm); }
.status { margin: 12px 0 0; font-size: 15px; }
.tool-end p, .result p { max-width: none; }
.r-title { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.04em; line-height: 1.08; margin: 0 0 14px; }
.result .notice { padding: 10px 14px; border-radius: var(--r-ctl); box-shadow: var(--inset-sm); font-size: 15.5px; }
.r-sec { margin: 0 0 16px; }
.r-sec h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 4px; }
.r-sec p { margin: 0; font-size: 16.5px; line-height: 1.5; }
.r-list { margin: 4px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.r-list li { margin: 2px 0; }
.r-red { padding: 12px 14px; border-radius: var(--r-ctl); box-shadow: var(--inset-sm); }
.cta { margin-top: 20px; }
.cta .btn { text-decoration: none; }
@media (max-width: 600px) {
  .tool .field { font-size: 16px; }
  .tool .sub-legend { font-size: 16px; }
}
.tool [hidden] { display: none !important; }

/* Tool card header: the Back pill (when there is somewhere to go back to) and a progress bar (an inset track with a blue fill: it shows state, it is not a button). */
.tool-head { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; min-height: 36px; }
.bar { flex: 1; height: 6px; border-radius: 99px; box-shadow: var(--inset-sm); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--blue); transition: width 320ms var(--ease); }
.back[hidden] { display: none; }

/* Secondary button: a raised pill that presses in, the same language as the day/night switch. Back, skip and other quiet actions. */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px 0 10px; border: 0; border-radius: 99px; background: var(--bg); color: var(--text); font: 600 14.5px/1 var(--font-ui); letter-spacing: -0.005em; cursor: pointer; box-shadow: var(--raise-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; }
.pill svg { flex: none; transition: transform .25s var(--ease); }
.pill:hover svg { transform: translateX(-2px); }
.pill:active { box-shadow: var(--inset-sm); }
.pill[disabled] { opacity: .5; cursor: not-allowed; }
.pill-plain { padding: 0 18px; }
.pill-plain:hover svg { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gets li > b, .gets li > span { grid-column: 2; }
.gets li::before { grid-row: 1 / span 2; }
/* Phones: the first question and its Next button must stay in the first screen. The card header already names the tool. */
@media (max-width: 600px) {
  .tool-head { margin-bottom: 14px; }
}
@media (max-width: 600px) {
  .tool { padding: 16px; }
  .opt > span { min-height: 46px; }
  .tool .btn { min-height: 48px; }
}

/* The read-back: the statement and its choices first, the notes after. */
.tool .notes { margin: 4px 0 18px; display: grid; gap: 8px; }
.tool .notes .hint { margin: 0; }
.tool .ai-msg { font-size: 17px; }

/* Waiting on the AI: three pulsing dots and what it is doing. */
.status { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-text); animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 70%, 100% { opacity: .25; transform: scale(.8); } 35% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .7; } }

/* Dictation: a round raised mic key in the corner of the answer box. It presses in and pulses while listening. */
.fieldwrap { position: relative; }
.fieldwrap .field { padding-right: 64px; margin-bottom: 12px; }
.mic { position: absolute; right: 10px; bottom: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--raise-sm); -webkit-tap-highlight-color: transparent; transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.mic:active { box-shadow: var(--inset-sm); }
.mic[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: var(--inset-sm); animation: listen 1.4s ease-in-out infinite; }
@keyframes listen { 0%, 100% { box-shadow: inset 2px 2px 5px rgba(0,0,0,.3), 0 0 0 0 rgba(20,84,216,.45); } 50% { box-shadow: inset 2px 2px 5px rgba(0,0,0,.3), 0 0 0 9px rgba(20,84,216,0); } }
@media (prefers-reduced-motion: reduce) { .mic[aria-pressed="true"] { animation: none; } }
.dictate-note { margin: -4px 0 12px; font-size: 13.5px; color: var(--muted); }

/* The Next key on tap-to-answer screens stays in the page for keyboard users (Enter on an option) but is invisible until focused. */
.tool .btn.sr-only { min-height: 0; padding: 0; }
.tool .btn.sr-only:focus-visible { position: static; width: auto; height: auto; margin: 12px 0 0; clip: auto; overflow: visible; padding: 0 30px; min-height: 52px; }
.tool .field:focus-visible { outline-width: 2px; outline-offset: 1px; }

/* ---------- Your Quick Win page ---------- */
.rgrid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px) {
  .rgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .rhead { grid-column: 1 / span 7; }
  .next-card { grid-column: 8 / span 5; margin-top: 12px; }
}
.rhead { display: grid; gap: clamp(14px, 1.8vw, 24px); align-content: start; justify-items: start; }
.rhead > * { margin: 0; }
.r-task { font-family: var(--font-title); font-weight: 700; font-size: clamp(26px, 3.4vw, 50px); letter-spacing: -0.04em; line-height: 1.05; max-width: 24ch; text-wrap: balance; }
.r-hours { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); max-width: 46ch; }
.pill-home { margin-top: 6px; }
.r-reassure { color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 46ch; }
.r-reassure[hidden] { display: none; }
.next-card { background: var(--bg); border-radius: 28px; box-shadow: var(--raise); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 14px; justify-items: start; }
.next-card[hidden] { display: none; }
.next-card h2 { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.045em; line-height: 1.05; }
.next-card p { margin: 0; }
.next-card .btn { margin-top: 6px; }
.next-who { display: flex; align-items: center; gap: 16px; }
.next-who h2 { margin: 0; }
.next-photo { width: 76px; height: 76px; flex: none; border-radius: 22px; object-fit: cover; box-shadow: var(--raise-sm); }
.next-eyebrow { font: 700 13px/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.next-fine { color: var(--muted); font-size: 14.5px; }

.sec.tight { padding-block: clamp(32px, 4.5vw, 64px); }
.r-h { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.05em; }
.r-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 62ch; }
.r-sub { font-size: clamp(20px, 1.8vw, 24px); margin-top: 32px; }
.checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; max-width: 64ch; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; box-shadow: var(--inset-sm); background: radial-gradient(circle, var(--ink) 0 26%, transparent 28%), var(--bg); }
.r-redwide { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-card); box-shadow: var(--inset); }
.r-redwide p { margin: 8px 0 0; max-width: none; }
.r-redh { font-size: clamp(20px, 1.8vw, 26px); }

/* How it scores: raised card, four meters of five cells. Filled cells are blue, empty ones inset; the dashed cells on the
   certainty meter are where the Clarity Session aims. */
.scores { background: var(--bg); border-radius: var(--r-card); box-shadow: var(--raise); padding: clamp(20px, 2.8vw, 40px); display: grid; gap: 26px; margin-top: 28px; }
.score, .certainty { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px 28px; align-items: center; }
@media (max-width: 720px) { .score, .certainty { grid-template-columns: 1fr; } }
.score-name b { display: block; font-family: var(--font-title); font-size: 21px; letter-spacing: -0.025em; line-height: 1.15; }
.score-name span { color: var(--muted); font-size: 15px; }
.cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cells i { display: block; height: 18px; border-radius: 99px; background: var(--bg); box-shadow: var(--inset-sm); }
.cells i.on { background: var(--blue); box-shadow: inset 0 1px 2px rgba(255,255,255,.28), 1px 1px 4px var(--sh); }
.score-meter p { margin: 10px 0 0; font-size: 17px; line-height: 1.35; max-width: none; }
.certainty { border-top: 1.5px solid var(--line); padding-top: 26px; }
.cert-key { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.k-now { font-weight: 700; }
.cert-note { grid-column: 1 / -1; margin: 6px 0 0; padding: 14px 18px; border-radius: var(--r-ctl); box-shadow: var(--inset-sm); font-size: 16.5px; line-height: 1.5; max-width: none; }

/* The Clarity Session: lead-in, three steps, the agenda and the booking calendar */
.cs-steps { list-style: none; padding: 0; margin: 28px 0 8px; display: grid; gap: 28px var(--col-gap); counter-reset: cs; }
@media (min-width: 880px) { .cs-steps { grid-template-columns: repeat(3, 1fr); } }
.cs-steps li { counter-increment: cs; border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.cs-steps li::before { content: counter(cs, decimal-leading-zero); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: var(--inset); font: 700 16px/1 var(--font-title); background: var(--bg); }
.cs-steps b { font-family: var(--font-title); font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.03em; line-height: 1.15; }
.cs-steps span { color: var(--muted); }
.book-embed { margin-top: 12px; border-radius: var(--r-card); box-shadow: var(--inset); padding: 12px; min-height: 160px; display: grid; align-content: start; }
.book-embed iframe { width: 100%; height: 720px; border: 0; border-radius: 16px; background: var(--bg); }
.book-embed .todo { justify-self: start; margin: 12px; }
a.pill { text-decoration: none; }

/* Dictation on a single-line box (the Other boxes): the mic sits centred in the field. */
.fieldwrap.single .field { margin-bottom: 6px; }
.fieldwrap.single .mic { bottom: auto; top: 6px; }
.count-wrap { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); display: grid; gap: 6px; }
.count-wrap[hidden], .count-wrap .count-msg[hidden] { display: none; }
.count-wrap .count { justify-self: end; font-variant-numeric: tabular-nums; }
.count-wrap.over .count { color: var(--text); font-weight: 600; }
.count-wrap .count-msg { margin: 0; }
.other-wrap { margin: 2px 0 8px; }
.other-wrap[hidden] { display: none; }
.other-wrap .dictate-note { margin: 0 0 6px; }

/* Next and Skip sit side by side where there is room. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* Certainty: "Low for now." with a blue arrow running left to right under the meter and the promise under the arrow. */
.cert-labels { margin-top: 12px; display: grid; gap: 6px; }
.cert-arrow { display: flex; align-items: center; gap: 12px; }
.cert-arrow .k-now { font-weight: 700; font-size: 16px; line-height: 1.3; white-space: nowrap; }
.cert-arrow .shaft { flex: 1; height: 2px; border-radius: 2px; background: var(--blue-text); }
.cert-arrow svg { flex: none; margin-left: -14px; color: var(--blue-text); }
.cert-labels .k-goal { justify-self: end; text-align: right; color: var(--blue-text); font-weight: 600; font-size: 16px; line-height: 1.3; }
.cal-inline { width: 100%; min-height: 560px; overflow: auto; border-radius: 16px; }

/* 01 and 02 problem: bullets in a card, then a before and after chain */
.mirror { list-style: none; padding: clamp(22px, 2.4vw, 34px); margin: 28px 0 0; display: grid; gap: 14px 24px; border-radius: var(--r-card); box-shadow: var(--raise); }
.mirror li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.mirror li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; box-shadow: var(--inset-sm); background: radial-gradient(circle, var(--ink) 0 26%, transparent 28%), var(--bg); }
@media (min-width: 640px) { .mirror { grid-template-columns: 1fr 1fr; } }
h2 em { font-style: italic; margin-inline: .06em; }
.flow { display: grid; gap: 0; margin-top: 32px; }
.flow-card { display: grid; gap: 22px; padding: clamp(26px, 3vw, 44px); border-radius: var(--r-card); box-shadow: var(--raise); }
.flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.flow-head h3 { font-size: clamp(24px, 2.2vw, 32px); }
.flow-head span { color: var(--muted); font-size: 17px; }
.body > .flow > * + * { margin-top: 0; }
.body > .flow > .flow-bridge { margin: 30px 0; }
.body > .closing { margin-top: 28px; }
.chain { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 14px; }
.chain li { position: relative; display: grid; justify-items: center; gap: 6px; }
.chain li > span { padding: 9px 16px; border-radius: 99px; background: var(--bg); box-shadow: var(--raise-sm); font: 600 15px/1.2 var(--font-ui); }
.chain li > span { color: var(--muted); }
.chain li.you > span { background: var(--text); color: var(--bg); box-shadow: none; }
.chain li.you small { color: var(--text); }
.chain small { color: var(--muted); font: 600 12px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 19px; width: 14px; height: 2px; background: var(--faint); opacity: .6; }
.tiles.sm { margin: 24px 0 0; }
.tiles.sm li { padding: 12px 0 14px; }
.tiles.sm strong { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 6px; }
.tiles.sm span { font-size: 16px; }
@media (max-width: 899px) { .chain li::after { display: none !important; } }

.audit span { display: block; }
.steps li { grid-template-columns: auto 1fr; align-items: center; }
.steps li > div { grid-column: 1 / -1; }
.steps li > .try { justify-self: start; }
.try { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 99px; background: var(--blue); color: var(--blue-ink); box-shadow: var(--raise-sm); font: 600 14px/1 var(--font-ui); text-decoration: none; transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.try:hover { filter: brightness(1.1); }
.try:active { box-shadow: var(--inset-sm); filter: none; }
#tool { scroll-margin-top: 28px; }

/* Phones and tablets: the three client quotes become a sideways swipe. Tom's card (first) is in focus on load, the others are
   softly faded and a touch smaller until they are swiped in. From 900px all three sit side by side as before. */
.proof-dots { display: none; }
@media (max-width: 899px) {
  .proof { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 30px; scroll-padding-inline: var(--gutter); margin-top: 12px; }
  .proof::-webkit-scrollbar { display: none; }
  .proof:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--r-card); }
  .proof .quote { flex: 0 0 min(80%, 400px); scroll-snap-align: start; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .proof .quote:not(.is-active) { opacity: .42; transform: scale(.96); }
  .proof-dots { display: flex; justify-content: center; gap: 14px; margin-top: 2px; }
  .proof-dots button { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); box-shadow: var(--raise-sm); cursor: pointer; position: relative; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
  .proof-dots button::after { content: ""; position: absolute; inset: -15px; }
  .proof-dots button[aria-current="true"] { background: var(--blue); box-shadow: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .proof .quote, .proof-dots button { transition: none; } }

/* Phones: the three time-cost figures sit side by side instead of stacked */
@media (max-width: 719px) {
  .tiles.sm { grid-template-columns: repeat(3, 1fr); column-gap: 14px; margin-top: 20px; }
  .tiles.sm li { display: block; padding: 12px 0 8px; }
  .tiles.sm strong { display: block; font-size: min(28px, 7vw); margin-bottom: 6px; }
  .tiles.sm span { display: block; font-size: 14px; line-height: 1.3; }
}

/* Phones and tablets: the eight steps in each before and after card sit in two even columns, in reading order, instead of a loose wrap */
@media (max-width: 899px) {
  .chain { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .chain li > span { display: block; width: 100%; text-align: center; padding: 11px 10px; }
}

/* Hero when stacked (below 980px): "At the end you get" comes before the tool so there is a reason to start, and the "Find out more" arrow
   goes (the page scrolls anyway, and it pointed away from the tool). On phones the list is compact: titles only, so the first question
   still shows on the first screen. Desktop keeps the two columns, the full list and the arrow. */
@media (max-width: 979px) {
  .hero-grid { grid-template-areas: "head" "gets" "tool"; }
  .more { display: none; }
}
@media (max-width: 599px) {
  .gets-h { margin-bottom: 12px; }
  .gets ol { gap: 10px; }
  .gets li { grid-template-columns: 30px 1fr; column-gap: 14px; align-items: center; }
  .gets li::before { width: 30px; height: 30px; font-size: 14px; grid-row: auto; }
  .gets b { font-size: 17px; line-height: 1.25; }
  .gets li > span { display: none; }
}