/* Home page only (07 §1, doc/Design_guide/Home_page_improvement/Home_Page_Improvement_Plan.md).
   Colours and sizes come from tokens.css only (rule 12). */

/* ---------- Hero: intro left, test card right; phones show intro → card → proof points ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
  grid-template-areas: "intro" "card" "proof";
  padding-top: var(--space-5);
}
.hero__intro { grid-area: intro; display: grid; gap: var(--space-3); justify-items: start; }
.hero__card { grid-area: card; min-width: 0; }
.hero__proof { grid-area: proof; display: grid; gap: var(--space-3); padding: 0; list-style: none; }

.hero__eyebrow {
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-primary);
  font-size: var(--text-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero__title { font-size: var(--text-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.hero__lead { max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-body); line-height: 1.55; }
.hero__proof li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-small); }
.hero__proof svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--color-primary); }

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--space-8); row-gap: var(--space-5);
    grid-template-areas: "intro card" "proof card"; align-items: center;
    padding-top: var(--space-7);
  }
  .hero__intro { align-self: end; gap: var(--space-4); }
  .hero__proof { align-self: start; }
  .hero__lead { font-size: var(--text-h3); }
  .hero__proof li { font-size: var(--text-body); }
}

/* Test card inside the hero (TestHero = "true"). Same markup as tool pages, home-only look. */
/* min-height = the running state (tallest: live number + metrics), so ready → running → done never moves the page (CLS). */
.test-area--hero {
  max-width: none; min-height: var(--test-area-hero-min-h); margin: 0;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
}
.test-area__label {
  font-size: var(--text-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
}
.test-area--hero .go-btn {
  background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 14%, transparent),
              0 0 0 22px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.test-area--hero .go-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 18%, transparent),
              0 0 0 28px color-mix(in srgb, var(--color-primary) 7%, transparent);
}
@media (prefers-reduced-motion: reduce) { .test-area--hero .go-btn:hover { transform: none; } }
.test-area--hero .metric {
  padding: var(--space-3) var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.test-area--hero .metrics { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); }
.test-area--hero .metric--wide { grid-column: auto; }
@media (min-width: 768px) { .test-area--hero .metric + .metric { border-left: 1px solid var(--color-border); } }

/* ---------- "Is my speed good?" cards (generated from use-cases.json) ---------- */
/* 1 → 2 → 4 columns, never 3 + 1 */
.need-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .need-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .need-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.need-card {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.need-card__icon { width: 28px; height: 28px; color: var(--color-primary); }
.need-card__label { font-size: var(--text-body); font-weight: 600; }
.need-card__value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
.need-card__num { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.need-card__unit { font-size: var(--text-small); color: var(--color-text-muted); }
.need-card__unit + .need-card__num { margin-left: var(--space-2); }
.need-card__source { margin-top: auto; font-size: var(--text-small); color: var(--color-text-muted); }

.tip-strip {
  display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); font-size: var(--text-small);
}
.tip-strip__icon { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--color-primary); }
.section--alt h3.table-gap { margin-top: var(--space-7); }

/* ---------- Tools: test tiles + calculators list ---------- */
.tools-split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .tools-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.tools-split__heading {
  margin-bottom: var(--space-3); font-size: var(--text-tiny); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.tools-split__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.tools-split__grid .card { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.tools-split__grid .card__icon { margin-bottom: var(--space-2); }
.tools-list {
  padding: 0; list-style: none; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
}
.tools-list li + li { border-top: 1px solid var(--color-border); }
.tools-list__link {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.tools-list__link:hover { background: var(--color-bg-alt); }
.tools-list__name { display: block; font-weight: 600; }
.tools-list__text { display: block; font-size: var(--text-small); color: var(--color-text-muted); }
.tools-list__arrow { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-primary); }

/* ---------- How it works: steps (components/sections.css) + columns ---------- */
.seo-cols { display: grid; gap: var(--space-6); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.seo-cols h2 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.seo-cols p { color: var(--color-text-muted); }
.seo-cols__box { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
#methodology { margin-top: var(--space-6); }

/* ---------- Guides ---------- */
[aria-labelledby="latest-guides"] .grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.home-sections .post-card { border-radius: var(--radius-lg); }
.home-sections .post-card .badge { color: var(--color-primary); border-color: var(--color-border); }