/* TidyCheck homepage — LIGHT UNIFIED register (exemplar, 2026-08-01).
   Drop-in replacement for home.css. Restyles the homepage chrome into the
   site-wide light "official document" system (style.css, ref didtheyghostyou.com)
   so the whole site speaks ONE language. All markup + JS hooks unchanged.

   Typography anchored to primary sources (cited inline):
   - Bringhurst, "The Elements of Typographic Style" (ETST) — modular scale,
     measure, optical letterspacing, letterspaced caps.
   - Butterick, "Practical Typography" (PT) — one family done well, restraint on
     size, tabular figures, kerning/ligatures on, letterspaced caps only.
   - Nielsen Norman Group — legibility, scannable hierarchy, measure.
   Authority is restraint + consistency, not size or ornament. */

:root {
  /* Inherit the light document palette from style.css (--paper --ink --ink-2
     --muted --card --line --accent). Homepage-scoped elevation tokens: */
  --hair: var(--line);              /* 1px hairline dividers */
  --rule: var(--ink);               /* 2px signature stroke (the document's stroke) */
  --tint: #E9E9E3;                  /* subtle panel tone, one step off paper */
  --tint-2: #F5F5F0;                /* inset card tone */

  /* Modular type scale — Perfect Fourth-ish (ETST §3.1 "use of a scale").
     Restrained ceilings: "enthusiasm for large type is a sign of amateur
     typography" (PT, Point size). Authority reads tight, not loud. */
  --t-display:  clamp(2.4rem, 1.25rem + 3.4vw, 3.5rem);   /* 38 → 56px  hero H1 / band */
  /* --font-display is NOT redefined here. ledger.css owns it. This file used to
     carry a second, slightly different stack (no Charter/XCharter), which is a
     token with two definitions — the exact drift the codes.js refactor removed
     from the JS on the same day. One definition, in the house stylesheet. */
  --t-headline: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);  /* 27 → 38px  section H2 */
  --t-title:    1.3125rem;                                 /* 21px       card / faq titles */
  --t-lede:     1.1875rem;                                 /* 19px       hero lede */
  --t-body:     1.0625rem;                                 /* 17px       body */
  --t-label:    0.6875rem;                                 /* 11px       seals / labels */
}

/* Kerning + ligatures on everywhere; render for legibility (PT, Kerning &
   Ligatures). Tabular, lining figures so all numerals align (PT, Alternate
   figures) — prices, counts, dates read like an instrument, not prose. */
body.home {
  background: var(--paper);
  color: var(--ink);
  padding: 0;               /* ledger base pads body; .home #app owns its gutters */
  font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Retire the dark-deck film grain. */
body.home::before { content: none; display: none; }

.home #app { max-width: none; padding: 0; margin: 0; }
.home .skip-link { background: var(--ink); color: var(--paper); }

/* Shared container — 1120px. Narrower than the old 1400 deck: generous margins
   are how a document signals value (ETST §2.2, the page as a field). */
.home-nav-in, .home-hero, .home-tool-in, .home-pro-strip-in,
.home-band-in, .home-faq-in, .home-foot-top, .home-foot-bottom,
.home-features-in, .home-pain-in, .home-how-in, .home-industries-in,
.home-testimonials-strip-in {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared label / seal — letterspaced caps (ETST §3.2.2; PT letterspace caps
   only). Small, tracked, accent: fine engraving, not shouting. */
.home-micro, .hs-bar, .home-foot-bottom {
  font-family: "Switzer", sans-serif;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.home-nav { border-bottom: 1px solid var(--hair); background: var(--paper); }
.home-nav-in {
  padding: 0 40px; height: 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.home-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.home-mark { color: var(--ink); flex: 0 0 auto; }
.home-wordmark-name { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.home-nav-l { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.home-nav-l a {
  display: inline-flex; align-items: baseline; color: var(--muted);
  text-decoration: none; position: relative; padding: 4px 0; transition: color 0.15s;
}
.home-nav-l a:hover, .home-nav-l a[aria-current="page"] { color: var(--ink); }
.home-nav-l a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s;
}
.home-nav-l a:hover::after, .home-nav-l a[aria-current="page"]::after { transform: scaleX(1); }
.home-nav-r { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; }
.home-nav-login { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.home-nav-login:hover { color: var(--ink); }

/* ---------- Buttons ---------- one ink primary, one outline, one text link.
   No gradients, no glows (DESIGN.md: no decorative gradients). */
.home .btn-solid, .home .btn-cream {
  display: inline-block; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); padding: 14px 26px; font-family: inherit;
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em; text-decoration: none;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.home .btn-solid:hover, .home .btn-cream:hover { background: #2A2A26; }
.home .btn-solid:focus-visible, .home .btn-cream:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home .btn-sm { padding: 10px 18px; font-size: 13px; }

.home .btn-line {
  display: inline-block; background: transparent; color: var(--ink);
  border: 1px solid var(--line); padding: 13px 25px; font-family: inherit;
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em; text-decoration: none;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.home .btn-line:hover { border-color: var(--ink); }
.home .btn-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.home .btn-text {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  border-bottom: 1px solid var(--accent); padding: 13px 1px; transition: color 0.15s, border-color 0.15s;
}
.home .btn-text:hover { color: var(--accent); }
.home .btn-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Hero ---------- */
.home-hero {
  padding: 84px 40px 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; align-items: center;
}
.home-hero-in { min-width: 0; }

/* Hero seal — every interior page opens with an accent document-label; the
   homepage now matches (letterspaced caps, ETST §3.2.2). */
.home-seal {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 16px;
}

/* Display — Switzer 700, tight optical tracking at size (ETST §3.1.5: large
   type wants negative tracking). Measure held to ~16ch per line for impact. */
.home-display {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-display); line-height: 1.03;
  letter-spacing: -0.032em; margin: 0 0 22px; color: var(--ink); max-width: 15ch;
}
.home-display .dim { color: var(--muted); }   /* was low-contrast grey; muted is a defined role, not a mud */

/* Lede — measure 60ch (ETST §2.1.2: 45–75, 66 ideal; NNG scannability). */
.home-lede {
  font-size: var(--t-lede); font-weight: 400; line-height: 1.55;
  color: var(--ink-2); max-width: 58ch; margin: 0 0 30px; text-wrap: pretty;
}
.home-ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* ---------- Specimen — a real printed record, not a glowing panel ---------- */
.home-specimen { min-width: 0; position: relative; }
.hs-frame {
  background: var(--card); border: 1px solid var(--line);
  border-top: 2px solid var(--rule);            /* the document's signature stroke */
  box-shadow: 0 18px 50px -20px rgba(8, 8, 8, 0.22);
}
.hs-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  color: var(--muted); white-space: nowrap; overflow: hidden;
}
.hs-bar-title { color: var(--ink); flex: 0 0 auto; letter-spacing: 0.12em; }
.hs-bar-meta { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hs-sheet { background: var(--card); color: var(--ink); padding: 26px 26px 30px; }
.hs-room {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.hs-tasks { list-style: none; margin: 0 0 22px; padding: 0; }
.hs-tasks:last-child { margin-bottom: 0; }
.hs-task { display: flex; align-items: flex-start; gap: 13px; padding: 5px 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.hs-box { position: relative; width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; border: 1.5px solid var(--muted); }
.hs-task.done .hs-box, .hs-task.run .hs-box { border-color: var(--accent); }
.hs-task.done .hs-box::after, .hs-task.run .hs-box::after {
  content: "✓"; position: absolute; left: 0; top: -4px; font-weight: 700;
  font-size: 12px; line-height: 1; color: var(--accent);
  opacity: 0; transform: scale(0.72); transform-origin: center;
}
/* The checklist completes in a quiet sequence on the first scroll. */
.home-specimen.is-revealed .hs-task.done .hs-box::after,
.home-specimen.is-revealed .hs-task.run .hs-box::after {
  animation: hsTick 0.62s var(--tick-delay, 0s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hsTick { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }

/* ---------- Tool section ---------- */
.home-tool { border-top: 1px solid var(--hair); padding: 76px 0 92px; }
.home-tool-in { padding: 0 40px; }
.tool-intro { padding: 0 0 34px; }
.tool-intro h2 { font-weight: 700; font-size: var(--t-headline); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 14px; }
.tool-intro-p { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); max-width: none; margin: 0; }

/* Wizard + preview containers = clean paper cards with the 2px signature top rule. */
.home .tool-wizard { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 2px solid var(--rule); padding: 32px 34px 36px; box-shadow: 0 18px 50px -22px rgba(8,8,8,0.18); }
.home .preview { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--rule); box-shadow: 0 18px 50px -22px rgba(8,8,8,0.18); }

/* Step indicator — letterspaced-cap tabs, ink active, accent index. */
.home .step-indicator { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 28px; }
.home .step {
  flex: 1; padding: 12px 4px; margin-bottom: -1px; display: inline-flex; align-items: baseline;
  justify-content: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); text-align: center; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.home .step b { font-weight: 600; color: var(--accent); font-size: 10px; font-variant-numeric: tabular-nums; }
.home .step:hover { color: var(--ink); }
.home .step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home .step.active { color: var(--ink); border-bottom-color: var(--ink); }
.home .step.completed { color: var(--muted); }
.home .step.completed::after { content: "✓"; color: var(--accent); }

/* ---------- Pro strip — inset document panel ---------- */
.home-pro-strip { border-top: 1px solid var(--hair); padding: 76px 0; }
.home-pro-strip-in {
  padding: 44px 44px; background: var(--tint-2); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: center;
}
.home-pro-strip-title { font-weight: 700; font-size: var(--t-headline); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.home-pro-strip-sub { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 46ch; }
.home-pro-strip-list { list-style: none; margin: 0 0 26px; padding: 0; }
.home-pro-strip-list li { position: relative; padding: 10px 0 10px 28px; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--hair); }
.home-pro-strip-list li::before { content: "✓"; position: absolute; left: 2px; top: 9px; color: var(--accent); font-weight: 700; }
.home-pro-strip-side { min-width: 0; }

/* ---------- Band — the one large statement, fully light, centred ---------- */
.home-band { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--tint); }
.home-band-in { padding: 96px 40px; text-align: center; }
.home-micro { color: var(--accent); margin: 0 0 24px; }
.home-giant { font-weight: 700; font-size: var(--t-display); line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 26px; }
.home-giant .dim { color: var(--muted); }
.home-band-in .sub { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); max-width: 60ch; margin: 0 auto 36px; text-wrap: pretty; }
.home-band-in .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- FAQ — ruled document rows ---------- */
.home-faq { border-top: 1px solid var(--hair); }
.home-faq-in { padding: 76px 40px 88px; }
.home-faq-title { font-weight: 700; font-size: var(--t-headline); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 8px; }
.home-faq-rows { display: grid; gap: 0; }
.faq-row { padding: 24px 0; border-top: 1px solid var(--hair); }
.faq-row:last-child { border-bottom: 1px solid var(--hair); }
.faq-row h3 { font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
.faq-row p { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: none; }

/* ---------- Footer ---------- */
.home-footer { border-top: 1px solid var(--hair); background: var(--paper); }
.home-foot-top { padding: 56px 40px 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.home-foot-top .home-wordmark { font-size: 17px; font-weight: 600; }
.home-foot-top .home-wordmark i { font-style: normal; color: var(--accent); }
.home-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 48px; }
.home-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.home-foot-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.home-foot-col a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 0.15s; }
.home-foot-col a:hover { color: var(--accent); }
.home-foot-bottom {
  padding: 20px 40px 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; color: var(--muted); border-top: 1px solid var(--hair);
}

/* ---------- Trust assurance band ---------- */
.home-trust {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--tint-2);
}
/* Option C, approved by Azhar 2026-08-19.
   A sentence, not a grid. The band that shipped on 19 Aug listed six audiences
   as bordered tiles plus a seventh reading "And more" — boxes that ask to be
   read as buttons, and a line that admits the list was padded. A sentence needs
   no seventh item, and nobody counts a clause. */
.home-trust-in {
  max-width: 760px; margin: 0 auto; padding: 26px 40px; text-align: center;
}
.home-trust-line {
  margin: 0; font-family: var(--font-display);
  font-size: var(--t-lg); line-height: 1.5; text-wrap: pretty;
}
.home-trust-line em { font-style: normal; color: var(--accent); }
.home-trust-sub {
  margin: 10px 0 0;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ---------- Shared section title ---------- */
.home-section-title {
  font-weight: 700; font-size: var(--t-headline); line-height: 1.05;
  letter-spacing: -0.025em; color: var(--ink); margin: 0 0 8px;
}

/* ---------- Features grid ---------- */
.home-features { border-top: 1px solid var(--hair); padding: 76px 0; }
.home-features-in { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.home-features-in .home-micro { margin: 0 0 8px; }
.home-features-in .home-section-title { margin: 0 0 48px; }
.home-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.home-feature-card {
  border: 1px solid var(--line); padding: 32px 28px; background: var(--card);
}
/* Head row: a drawn mark on the left, the tier it belongs to on the right.
   Replaces the emoji, which read as decoration rather than information. */
.home-feature-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 18px;
}
.home-feature-mark { color: var(--ink); line-height: 0; }
.home-feature-mark svg { display: block; width: 26px; height: 26px; }
.home-feature-tier {
  font-family: "Switzer", sans-serif; font-size: var(--t-label);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--line); padding-bottom: 6px;
}
.home-feature-tier.is-paid { color: var(--accent); border-bottom-color: var(--accent); }
.home-feature-card h3 {
  font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 10px;
}
.home-feature-card p {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); margin: 0;
}

/* ---------- Pain points ---------- */
.home-pain { border-top: 1px solid var(--hair); padding: 76px 0; background: var(--tint-2); }
.home-pain-in { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.home-pain-in .home-section-title { margin: 0 0 8px; }
.home-pain-sub {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin: 0 0 48px; max-width: 50ch;
}
.home-pain-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.home-pain-card {
  border: 1px solid var(--line); padding: 32px 28px; background: var(--card);
}
.home-pain-card h3 {
  font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 10px;
}
.home-pain-card p {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); margin: 0;
}

/* ---------- How it works ---------- */
.home-how { border-top: 1px solid var(--hair); padding: 76px 0; }
.home-how-in { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.home-how-in .home-section-title { margin: 0 0 8px; }
.home-how-sub {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin: 0 0 48px; max-width: 50ch;
}
.home-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.home-how-step {
  border: 1px solid var(--line); padding: 32px 28px; background: var(--card);
}
.home-how-num {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.home-how-step h3 {
  font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 10px;
}
.home-how-step p {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); margin: 0;
}

/* ---------- Industries ---------- */
.home-industries { border-top: 1px solid var(--hair); padding: 76px 0; background: var(--tint-2); }
.home-industries-in { max-width: 1120px; margin: 0 auto; padding: 0 40px; text-align: center; }
.home-industries-in .home-section-title { margin: 0 0 8px; }
.home-industries-sub {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin: 0 auto 48px; max-width: 50ch;
}
.home-industries-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.home-industry-tag {
  font-size: 14px; font-weight: 500; color: var(--ink);
  padding: 12px 24px; border: 1px solid var(--line); background: var(--card);
}

/* ---------- Testimonials strip ---------- */
.home-testimonials-strip { border-top: 1px solid var(--hair); padding: 76px 0; }
.home-testimonials-strip-in { max-width: 1120px; margin: 0 auto; padding: 0 40px; text-align: center; }
.home-testimonials-strip-in .home-micro { margin: 0 0 8px; }
.home-testimonials-strip-in .home-section-title { margin: 0 0 16px; }
.home-testimonials-sub {
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin: 0 auto 36px; max-width: 58ch;
}
.home-testimonials-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs-task.done .hs-box::after, .hs-task.run .hs-box::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .home-hero { grid-template-columns: 1fr; gap: 52px; }
  .home-specimen .hs-frame { max-width: 560px; }
  .home-pro-strip-in { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 820px) {
  .home-nav-in { padding: 0 24px; }
  .home-hero { padding: 64px 24px 56px; }
  .home-tool-in { padding: 0 24px; }
  .home-pro-strip { padding: 60px 0; }
  .home-pro-strip-in { padding: 34px 26px; }
  .home-band-in { padding: 76px 24px; }
  .home-faq-in { padding: 60px 24px 72px; }
  .home-foot-top { padding: 40px 24px 28px; }
  .home-foot-bottom { padding: 16px 24px 36px; }
}
@media (max-width: 768px) {
  /* Nav — hamburger replaces links */
  .home-nav-l { display: none; }
  .home-nav-in { height: 66px; }

  /* Hero — generous breathing room */
  .home-hero { padding: 48px 24px; gap: 40px; }
  .home-display { font-size: clamp(28px, 7vw, 36px); line-height: 1.05; }
  .home-lede { font-size: var(--t-body); max-width: 50ch; }
  .home-ctas { flex-direction: column; align-items: stretch; }
  .home-ctas .btn-solid { width: 100%; text-align: center; }
  .home-ctas .btn-text { justify-content: center; margin-top: 4px; }

  /* Specimen — remove shadow, signature stroke */
  .home-specimen .hs-frame { box-shadow: none; border-top: 2px solid var(--rule); }
  .home-specimen .hs-sheet { padding: 20px 18px; }
  .home-specimen .hs-bar { padding: 12px 18px; }

  /* Tool section — tighter vertical rhythm */
  .home-tool { padding: 48px 0 64px; }
  .home-tool-in { padding: 0 24px; }

  /* Pro strip — more breathing room */
  .home-pro-strip { padding: 48px 0; }
  .home-pro-strip-in { padding: 32px 24px; gap: 28px; }
  .home-pro-strip-title { font-size: clamp(22px, 5vw, 28px); }

  /* Band — generous vertical padding */
  .home-band-in { padding: 48px 24px; }
  .home-giant { font-size: clamp(28px, 7vw, 36px); }

  /* FAQ — tighter rhythm */
  .home-faq-in { padding: 48px 24px; }
  .faq-row { padding: 20px 0; }
  .faq-row p { line-height: 1.6; }

  /* Footer — 2-column grid */
  .home-foot-top { padding: 40px 24px 28px; flex-direction: column; align-items: flex-start; gap: 32px; }
  .home-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; width: 100%; }
  .home-foot-bottom { padding: 20px 24px 36px; flex-direction: column; gap: 8px; text-align: left; align-items: flex-start; line-height: 1.5; }

  /* Trust band — refined mobile */
  .home-trust-in { padding: 20px 24px; }
  .home-trust-line { font-size: var(--t-base); }

  /* New sections — responsive */
  .home-features { padding: 48px 0; }
  .home-features-in { padding: 0 24px; }
  .home-features-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-pain { padding: 48px 0; }
  .home-pain-in { padding: 0 24px; }
  .home-pain-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-how { padding: 48px 0; }
  .home-how-in { padding: 0 24px; }
  .home-how-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-industries { padding: 48px 0; }
  .home-industries-in { padding: 0 24px; }
  .home-industries-grid { gap: 10px; }
  .home-industry-tag { padding: 10px 18px; font-size: 13px; }
  .home-testimonials-strip { padding: 48px 0; }
  .home-testimonials-strip-in { padding: 0 24px; }
}
@media (max-width: 480px) {
  /* Trust band — two equal columns keep each audience point balanced. */
  .home-trust-in { padding: 20px 24px; }
  .home-trust-line { font-size: var(--t-base); line-height: 1.45; }
  .home-trust-sub { letter-spacing: 0.1em; }
  .home-foot-cols { gap: 24px 16px; }
}

/* ---------- Prose type ------------------------------------------------------
   Running body copy on the homepage is set in the serif (--font-copy). This is
   an explicit allowlist, never a blanket `main p`: several controls in
   style.css and above use `font-family: inherit`, so a blanket rule would drag
   buttons and inputs into the serif with it. Interface chrome — eyebrows,
   labels, buttons, the checklist tool — stays on --font-body.               */
.home-lede,
.tool-intro-p,
.home-pro-strip-sub,
.home-pro-strip-list li,
.home-band-in .sub,
.home-feature-card p,
.home-pain-sub,
.home-pain-card p,
.home-how-sub,
.home-how-step p,
.home-industries-sub,
.faq-row p {
  font-family: var(--font-copy);
}