/* Plainspoken CFO
   Layout concept: a working P&L on a clean desk. Ink-navy type on a cool paper ground,
   figures set in a mono face, and one highlighter stroke on the line that matters. */
:root {
  --paper: #f5f7f4;
  --surface: #ffffff;
  --ink: #15223b;
  --ink-2: #4a5568;
  --ink-3: #6b7484;
  --line: #d9ded6;
  --accent: #1f4fd1;
  --accent-ink: #ffffff;
  --marker: rgba(242, 207, 63, 0.72);
  --tint: #e9eef9;
  --good: #2e7a4d;
  --warn: #a8701a;
  --bad: #b13a3a;
  --good-bg: #e3f2e8;
  --warn-bg: #fbf0db;
  --bad-bg: #f8e3e3;

  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figures: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 3.9rem);

  --radius: 10px;
  --maxw: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1420;
    --surface: #161f31;
    --ink: #e7ebf2;
    --ink-2: #a9b3c4;
    --ink-3: #8790a1;
    --line: #26314a;
    --accent: #84a5ff;
    --accent-ink: #0e1420;
    --marker: rgba(226, 190, 52, 0.38);
    --tint: #1a2540;
    --good: #67c58f;
    --warn: #e2ad55;
    --bad: #f08585;
    --good-bg: #16301f;
    --warn-bg: #33270f;
    --bad-bg: #3a1a1a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1420;
  --surface: #161f31;
  --ink: #e7ebf2;
  --ink-2: #a9b3c4;
  --ink-3: #8790a1;
  --line: #26314a;
  --accent: #84a5ff;
  --accent-ink: #0e1420;
  --marker: rgba(226, 190, 52, 0.38);
  --tint: #1a2540;
  --good: #67c58f;
  --warn: #e2ad55;
  --bad: #f08585;
  --good-bg: #16301f;
  --warn-bg: #33270f;
  --bad-bg: #3a1a1a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0; }
.muted { color: var(--ink-3); }
.fig { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 12px; }

/* The highlighter stroke: used once or twice per page, on the figure or phrase that matters */
.hl {
  background-image: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 94%, transparent 94%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.06em;
}

/* Masthead */
.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.35em; text-decoration: none; color: var(--ink); margin: 0; }
.wordmark-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.wordmark-sub { font-family: var(--font-figures); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 420px) { .wordmark { flex-direction: column; align-items: flex-start; gap: 0; } .wordmark-sub { font-size: 0.62rem; } }
.wordmark-small .wordmark-name { font-size: 1.15rem; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav .nav-cta { color: var(--accent-ink); background: var(--accent); padding: 8px 14px; border-radius: 999px; }
.nav .nav-cta:hover { color: var(--accent-ink); filter: brightness(1.08); }
.menu-toggle { display: none; font: inherit; font-weight: 600; background: none; border: 1.5px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 12px; }
@media (max-width: 860px) {
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0; }
  .nav.is-open { display: flex; }
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; text-decoration: none; padding: 13px 20px; border-radius: 999px; border: 2px solid var(--accent); transition: transform 0.15s ease, filter 0.15s ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--tint); }
.btn .fig { font-size: 0.92em; }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: 40px; }
.eyebrow { font-family: var(--font-figures); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 40rem; line-height: 1.5; }
.prose { display: grid; gap: 1em; max-width: 40rem; color: var(--ink-2); }
.prose strong { color: var(--ink); }

/* Hero */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--step--1); color: var(--ink-3); }
.hero-proof span::before { content: "✓"; color: var(--good); margin-right: 6px; font-weight: 700; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* The P&L card */
.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(21, 34, 59, 0.35); min-width: 0; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 6px; }
.ledger-title { font-weight: 600; font-size: 0.95rem; }
.ledger-sub { font-family: var(--font-figures); font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.04em; }
.ledger table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ledger td { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ledger td.num { text-align: right; font-family: var(--font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.ledger td.pct { width: 4.2em; color: var(--ink-3); }
.ledger tr.key td { font-weight: 600; color: var(--ink); }
.ledger tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 600; }
.ledger-note { margin-top: 12px; font-size: 0.9rem; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.ledger-note::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; border-radius: 3px; background: var(--marker); }
.example-tag { display: inline-block; font-family: var(--font-figures); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

/* Fit list */
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fit-item { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.fit-figure { font-family: var(--font-figures); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; }
.fit-item p { color: var(--ink-2); }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; gap: 20px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding: 0; list-style: none; }
.chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.93rem; color: var(--ink-2); }

/* Five numbers */
.numbers { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.numbers li { display: grid; grid-template-columns: 3.2rem minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
.numbers .n { font-family: var(--font-figures); color: var(--ink-3); font-size: 0.95rem; }
.numbers h3 { font-size: 1.2rem; }
.numbers .q { color: var(--ink); font-weight: 500; }
.numbers .w { color: var(--ink-2); font-size: 0.95rem; }
.numbers .w b { font-family: var(--font-figures); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bad); display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .numbers li { grid-template-columns: 2.4rem minmax(0, 1fr); } .numbers .q, .numbers .w { grid-column: 2; } }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; counter-increment: step; }
.steps li::before { content: "Step " counter(step); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.steps p { color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Offers */
.offers { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: 24px; align-items: stretch; }
.offer-lead { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 28px; display: grid; gap: 16px; align-content: start; }
.offer-lead h3, .offer-lead .price { color: var(--paper); }
.offer-lead p, .offer-lead li { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.offer-lead .btn-primary { background: var(--marker); background: #f2cf3f; border-color: #f2cf3f; color: #15223b; justify-self: start; }
.price { font-family: var(--font-figures); font-size: 2.2rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.price small { font-size: 0.95rem; letter-spacing: 0; }
.price s { font-size: 1rem; opacity: 0.7; margin-left: 8px; }
.offer-lead ul, .offer-card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 0.95rem; }
.offer-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; align-content: start; }
.offer-card .price { font-size: 1.6rem; }
.offer-card p { color: var(--ink-2); font-size: 0.95rem; }
.offer-card ul { color: var(--ink-2); }
.offer-foot { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 980px) { .offers { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .offer-rest { grid-template-columns: 1fr; } }

/* Results */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.result { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.result .fig { font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.result .who { font-family: var(--font-figures); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.result p { color: var(--ink-2); font-size: 0.97rem; }
@media (max-width: 900px) { .results { grid-template-columns: 1fr; } }

/* Owner note */
.owner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.owner img { width: 220px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
@media (max-width: 700px) { .owner { grid-template-columns: 1fr; } .owner img { width: 160px; } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.07rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-figures); color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--ink-2); max-width: 44rem; }

/* Closing band */
.closer { background: var(--tint); }
.closer-inner { display: grid; gap: 18px; justify-items: start; max-width: 44rem; }

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); }
.page-hero .wrap { display: grid; gap: 18px; }

/* Tune-Up: in / out */
.io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.io-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 14px; align-content: start; }
.io-col ol { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; }
.io-col li::marker { font-family: var(--font-figures); color: var(--ink-3); }
.io-col li span { display: block; color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 800px) { .io { grid-template-columns: 1fr; } }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.timeline li { padding: 16px 16px 0 0; display: grid; gap: 6px; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.timeline .when { font-family: var(--font-figures); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.timeline p { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); } .timeline li { padding: 0 0 22px 22px; } .timeline li::before { top: 4px; left: -7px; } }

/* Sample dashboard */
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 18px; }
.sample-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.tile .label { font-size: 0.82rem; color: var(--ink-2); line-height: 1.3; }
.tile .fig { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.02em; }
.status { justify-self: start; font-family: var(--font-figures); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.status-good { color: var(--good); background: var(--good-bg); }
.status-warn { color: var(--warn); background: var(--warn-bg); }
.status-bad { color: var(--bad); background: var(--bad-bg); }
.memo { border-top: 1px dashed var(--line); padding-top: 16px; display: grid; gap: 8px; }
.memo ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.95rem; }
.memo b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tiles { grid-template-columns: 1fr; } }

.guarantee { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 26px; border: 2px solid var(--ink); border-radius: var(--radius); max-width: 52rem; }
.guarantee .fig { font-size: 2.4rem; font-weight: 500; line-height: 1; }
@media (max-width: 560px) { .guarantee { grid-template-columns: 1fr; } }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.calc form, .calc-out { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.97rem; }
.field .hint { font-size: 0.86rem; color: var(--ink-3); }
.input-money { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); }
.input-money span { padding-left: 12px; color: var(--ink-3); font-family: var(--font-figures); }
.input-money input, .field input[type="email"] { flex: 1; min-width: 0; font: 500 1.05rem var(--font-figures); color: var(--ink); background: transparent; border: 0; padding: 11px 12px; }
.field input[type="email"] { font-family: var(--font-body); border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); }
.input-money:focus-within, .field input[type="email"]:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.input-money input:focus { outline: none; }
.out-main { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.out-main .fig { font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.meter { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--good-bg) 0 35%, var(--warn-bg) 35% 50%, var(--bad-bg) 50% 100%); margin-top: 14px; }
.meter i { position: absolute; top: -5px; width: 4px; height: 22px; background: var(--ink); border-radius: 2px; transform: translateX(-2px); transition: left 0.3s ease; }
.meter-scale { display: flex; justify-content: space-between; font-family: var(--font-figures); font-size: 0.72rem; color: var(--ink-3); margin-top: 6px; }
.out-rows { display: grid; gap: 0; }
.out-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px dashed var(--line); }
.out-row span:first-child { color: var(--ink-2); }
.out-read { color: var(--ink-2); }
.form-note { font-size: 0.86rem; color: var(--ink-3); }
.form-done { color: var(--good); font-weight: 600; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* Case studies page */
.case { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 32px; padding-block: 40px; border-top: 1px solid var(--line); }
.case:first-child { border-top: 0; }
.case-stat { display: grid; gap: 6px; align-content: start; }
.case-stat .fig { font-size: 2.4rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.case-body { display: grid; gap: 14px; }
.case-body dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.case-body dt { font-family: var(--font-figures); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.case-body dd { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .case { grid-template-columns: 1fr; gap: 16px; } .case-body dl { grid-template-columns: 1fr; gap: 2px; } .case-body dd { margin-bottom: 10px; } }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-block: 40px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-brand { display: grid; gap: 8px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-fine { grid-column: 1 / -1; font-size: 0.85rem; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Four service areas */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.area-q { font-family: var(--font-figures); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--accent); margin: 0; }
.area h3 { font-size: 1.3rem; }
.area ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 700px) { .areas { grid-template-columns: 1fr; } }