/* mix.css: the home page's own sheet (index.html is the only page that links it).
 *
 * THE HOME PAGE, REBUILT (the website plan of 25 Sep 2026, section 5; S2-1 of the build brief). Seven
 * sections, about 450 words: the first screen (who it is for, the headline, the line under it, two
 * buttons, every price), what we check, how it works, the four products, a real person and the
 * guarantee, four questions, and the free report form. Class prefix: hm-. (The example, "One HVAC
 * business, in three numbers", left on 26 Sep, the owner's D8: it showed a week of plan-scale checks
 * beside "Your Free report checks the same three things".)
 *
 * The sheet that animated the map grid on this page (the mx- window primitives, the mxh- cards and the
 * count-up, with assets/js/mix-home.js) retired with that section: the hero shows a finished picture.
 *
 * LAWS: tokens only (instrument.css holds the dark palette); no inline styles on the page (CSP); no
 * coloured left or top stripes (colour goes on a full border, a wash, a dot or a chip); every
 * transition carries its reduced-motion guard; no em or en dash.
 */

/* ── 1 · The first screen ─────────────────────────────────────────────── */
.hm-hero { padding: 104px 0 clamp(24px, 3vw, 40px); }
.hm-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hm-for { margin: 0 0 12px; font-size: 0.98rem; font-weight: 600; line-height: 1.45; color: var(--forest); }
/* the site's one hero headline size (components.css .hero h1): 32 px on a phone, 56 px at 1440 */
.hm-hero h1 { margin: 0 0 14px; max-width: 20ch; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; color: var(--ink); }
.hm-sub { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; color: var(--muted); }
/* the site's button row (components.css .hero .hero-actions): never a ragged wrap, one full-width column on a phone */
.hm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), max-content)); gap: 12px; margin-top: 24px; }
/* every price in one line, as three chips: they wrap cleanly, so no separator is ever left dangling at
   the end of a line (the plan, section 10: "stray dots at line ends") */
.hm-prices { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.hm-prices li {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface);
  font-size: 0.88rem; line-height: 1.3; color: var(--muted);
}
.hm-prices b { color: var(--gold); font-weight: 700; }
/* the picture: a finished capture of the sample report, not a drawing that fills in while you read */
.hm-shot { margin: 0; min-width: 0; }
/* THE TAG NEVER SITS ON WORDS (the coordinator's review of S2-1). The picture is framed 16:10 from its top, like
   every other frame of this capture on the site, and the frame keeps a strip of its own under the picture for the
   "Open the full example" tag, so the tag covers nothing the capture says. The link still covers the whole frame. */
.hm-shot .capture-slot { overflow: hidden; padding-bottom: 40px; border: 1px solid var(--line-2); border-radius: 16px; background: #0b0e0d; box-shadow: var(--glow); }
.hm-shot .capture-slot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.hm-shot-cap { margin: 10px 2px 0; font-size: 0.85rem; line-height: 1.5; color: var(--faint); }
/* THE PICTURE ENDS WHERE THE WORDS END (the owner, 26 Sep: the example "should be the same size as the text to its left
   including the pills"). Beside the words the figure takes the row's height, with the caption under the window; the
   picture is taken out of the flow (so the row is measured from the words, not from it) and fills the window from its top,
   fading out above the tag's 40 px strip. Its capture is taller than any window it fills (979 x 1450, a width to height of
   at most 0.70), so only its bottom is ever cut, never its sides. Stacked (920 px and below) the window keeps its 16:10
   from the top, as above. */
@media (min-width: 921px) {
  .hm-hero-grid { align-items: stretch; }
  .hm-shot { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .hm-shot .capture-slot { min-height: 300px; }
  .hm-shot .capture-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 40px); aspect-ratio: auto;
    object-fit: cover; object-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  }
}

/* ── the sections ─────────────────────────────────────────────────────── */
.hm-sec { padding: clamp(32px, 4vw, 56px) 0; }
.hm-h2 { margin: 0 0 20px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; }
.hm-muted { margin: 0; color: var(--muted); }
.hm-sec h3 { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.2; }
.hm-sec p { margin: 0; }

/* ── 2 · What we check: four cards, one line each ─────────────────────── */
.hm-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-check { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hm-check p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.hm-ic {
  display: block; width: 30px; height: 30px; margin-bottom: 12px;
  fill: none; stroke: var(--forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 3 · How it works: three steps ────────────────────────────────────── */
.hm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hm-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hm-steps p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.hm-step-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(230, 182, 84, .12); border: 1px solid rgba(230, 182, 84, .5); color: var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}

/* ── 4 · Pick what you need: the four products ────────────────────────── */
.hm-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.hm-product { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
/* the free report is the first step, so its card wears the one mint ring (a full border, never a stripe) */
.hm-product:first-child { border-color: rgba(67, 213, 151, .45); }
.hm-product h3 { margin: 0; }
.hm-price { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--gold); }
.hm-price span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.hm-product > p:not(.hm-price) { flex: 1; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
/* "Plans open Monday 5 October" is longer than a card is wide: the label wraps inside its button */
.hm-product .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
.hm-credit { margin-top: 16px !important; font-size: 0.92rem; color: var(--muted); }

/* ── 5 · A real person, and the guarantee ─────────────────────────────── */
.hm-person { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.hm-person p + p { margin-top: 14px; }
.hm-person > div > p:not(.hm-guarantee) { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.hm-guarantee {
  padding: 14px 16px; border: 1px solid rgba(67, 213, 151, .35); border-radius: 12px; background: rgba(67, 213, 151, .06);
  color: var(--ink); line-height: 1.55;
}
.hm-people { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hm-faces { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; padding: 0; list-style: none; }
.hm-faces li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.hm-face {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #e6b654, #b98a2e); color: #0b0e0d;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
}
.hm-call { color: var(--muted); }
.hm-call a { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ── 6 · Questions ────────────────────────────────────────────────────── */
.hm-more { margin-top: 16px !important; }
.hm-more a { color: var(--gold); }
/* the call link and the FAQ's link are taps of their own: 44 px tall (the review's L9, 26 Sep) */
.hm-call a, .hm-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 7 · The free report form ─────────────────────────────────────────── */
.hm-form-wrap { max-width: 820px; }
/* The security check draws a 300 by 65 box in production (measured on lighthousepro.ai at 390: 300 by 73), so its
   seat stays; it is centred, without the extra margins seo-report.css gives it, and on a phone the button under it
   runs the full width like every other main button on the page. */
.hm-form .rigfoot .grader-turnstile { margin: 0; justify-content: center; }
.hm-form-head { margin-bottom: 18px; }
.hm-form-head .hm-h2 { margin-bottom: 6px; }
.hm-upsell-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-upsell-actions .btn { margin-top: var(--s-4); }

/* ── a phone ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-checks, .hm-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-steps { grid-template-columns: minmax(0, 1fr); }
  .hm-person { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hm-hero { padding-top: 92px; }
  .hm-actions { grid-template-columns: 1fr; }
  .hm-form .rigfoot { flex-direction: column; align-items: stretch; gap: 12px; }
  .hm-form .rigfoot .btn { flex: 0 0 auto; width: 100%; }
  /* the website switch's row: a 44 px target on a phone (L9) */
  .hm-form .nositerow { min-height: 44px; }
  .hm-checks, .hm-products { grid-template-columns: minmax(0, 1fr); }
  /* a check reads as a row on a phone: the mark beside its words */
  .hm-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .hm-check .hm-ic { grid-row: span 2; margin: 2px 0 0; }
}
@media (max-width: 400px) {
  .hm-prices li { font-size: 0.84rem; }
}