/* Homepage-only styles (index.html). Loaded after site.css and reuses its tokens (--color-*,
   --radius, --good) and its .button/.button.ghost CTAs; nothing here touches other pages. The
   site is light-only (site.css sets color-scheme: light), so there is no dark-mode block. */
.home {
  --home-body: #4d5a52;          /* body copy: softer than headings, passes 4.5:1 on sage */
  --home-hand-ink: #cf6b5a;      /* softer coral for handwritten labels; 3.1:1 on sage (large text) */
  --home-muted-bar: #b5c2ba;      /* comparison series: neutral, ΔE ≥ 15 from the brand green */
  --home-band-line: #d7e4dc;
  --home-list-line: #c9d9cf;
  color: var(--color-primary);
}

/* site.css caps every <main> at 700px with padding; the homepage sections set their own widths. */
main.home { max-width: none; padding: 0; }

.home h1, .home h2, .home h3, .home p { margin: 0; }
.home-container { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.home-center { align-items: center; text-align: center; }

/* Handwritten labels (Caveat, homepage only). Self-hosted rather than Google Fonts: the app's CSP
   (main.py) only allows same-origin styles and fonts, so the Google link was silently blocked in
   production and browsers fell back to their own differing "cursive" faces. One variable file
   covers weights 400-700 (latin subset); licence in caveat-OFL.txt. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/caveat.woff2") format("woff2");
}
.home-hand {
  font-family: "Caveat", sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--home-hand-ink);
}

/* CTAs use site.css's .button / .button.ghost; this only lines up the arrow icon. */
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-actions-center { justify-content: center; }
.home-actions .button { display: inline-flex; align-items: center; gap: 10px; }

/* 1. Hero */
.home-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
  padding-top: 88px; padding-bottom: 72px;
}
.home-hero-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.home-hero-title {
  font-size: 64px; line-height: 1.05; font-weight: 800; letter-spacing: -0.025em;
  color: var(--color-primary);
}
.home-underline { position: relative; white-space: nowrap; }
.home-underline svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 16px; }
.home-underline path { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; }
.home-lede { font-size: 21px; line-height: 1.55; color: var(--home-body); max-width: 540px; text-wrap: pretty; }

.home-hero-visual { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-hero-note {
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px;
  padding-right: 48px; margin-bottom: 2px;
}
/* label sits beside the top of the loop arrow, where its stroke starts */
.home-hero-note .home-hand { align-self: flex-start; transform: rotate(-3deg); margin-top: 10px; }
.home-hero-note img { display: block; height: auto; }

/* Example report card */
.home-report {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05), 0 24px 48px rgba(30, 98, 65, .12);
  padding: 28px; display: flex; flex-direction: column; gap: 20px;
}
.home-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.home-report-head > div { display: flex; flex-direction: column; gap: 2px; }
.home-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.home-report-title { font-size: 22px; font-weight: 700; line-height: 1.3; }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-chips span {
  padding: 3px 12px; border-radius: 999px; background: var(--color-surface-alt);
  font-size: 14px; font-weight: 600;
}
.home-outcome {
  background: var(--color-surface-alt); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.home-outcome-label { font-size: 15px; font-weight: 700; }
/* Illustrative column chart (bar heights are placeholders) */
.home-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.home-chart-legend { display: flex; gap: 14px; font-size: 13px; font-weight: 600; color: var(--home-body); }
.home-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.home-chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--color-success); }
.home-chart-legend-muted i { background: var(--home-muted-bar); }
.home-chart { display: block; width: 100%; height: auto; }
.home-chart line { stroke: var(--color-border); stroke-width: 1; }
.home-chart .home-col { fill: var(--color-success); }
.home-chart .home-col-muted { fill: var(--home-muted-bar); }
.home-chart text { font-size: 12px; font-weight: 600; text-anchor: middle; fill: var(--color-text-secondary); }
.home-chart .home-text-start { text-anchor: start; }
.home-chart .home-text-strong { fill: var(--color-primary); font-weight: 700; }
.home-chart .home-step { fill: none; stroke: var(--color-success); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.home-chart .home-step-muted { stroke: var(--home-muted-bar); }
.home-chart .home-marker { stroke: var(--home-body); stroke-dasharray: 4 4; }
.home-chart .home-ci { stroke: var(--home-body); stroke-width: 2; stroke-linecap: round; }

/* Rotating example scenarios (home.js). Every scenario shares one grid cell, so the card is always
   as tall as the tallest one and never jumps; inactive ones are visibility:hidden, which also takes
   them out of the accessibility tree. */
.home-scenarios { display: grid; position: relative; }
/* Round prev/next buttons centred on the card's side borders (28px padding + 1px border + half of 36px) */
.home-scenario-arrow {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: var(--color-primary);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-scenario-arrow:hover { border-color: var(--color-success); background: var(--color-surface-alt); }
.home-scenario-arrow:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; }
.home-scenario-arrow svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.home-scenario-arrow-prev { left: -47px; }
.home-scenario-arrow-next { right: -47px; }
.home-scenario {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 20px;
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s;
}
.home-scenario.is-active { opacity: 1; visibility: visible; }
.home-scenario-dots { display: flex; justify-content: center; gap: 4px; margin-top: -8px; }
.home-scenario-dots[hidden] { display: none; }
.home-scenario-dots button {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-scenario-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border);
  transition: background 0.2s ease, width 0.2s ease;
}
.home-scenario-dots button[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--color-success); }
.home-scenario-dots button:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .home-scenario, .home-scenario-dots button::before { transition: none; }
}
.home-report-summary { font-size: 16px; line-height: 1.5; color: var(--home-body); }
.home-report-summary strong { color: var(--color-primary); }

/* 2. Stat band */
.home-stat-wrap { padding-bottom: 96px; }
.home-stat {
  background: var(--color-primary); color: #fff; border-radius: var(--radius);
  padding: 44px 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px;
}
.home-stat-number { flex: 0 0 auto; font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.home-stat-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* explicit colour: site.css's `main p` would otherwise paint this green on green */
.home-stat-claim { font-size: 28px; line-height: 1.35; font-weight: 700; color: #fff; }
.home-stat-note { font-size: 15px; color: #fff; }
.home-stat-source { font-size: 12px; color: #b4d3c1; margin: -4px 0 6px; }  /* cites the claim above; 4.5:1 on the band */

/* Shared section heading */
.home-section-head { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.home h2 { font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary); }

/* 3. How it works */
.home-steps-section {
  padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.home-steps { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; }
.home-step {
  flex: 1 1 240px; max-width: 310px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.home-step-art { height: 180px; display: flex; align-items: center; justify-content: center; }
.home-step-art img { max-width: 100%; height: auto; display: block; }
.home-step h3 { font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--color-primary); }
.home-step p { font-size: 17px; color: var(--home-body); }
.home-step-arrow { flex: none; height: auto; margin-top: 80px; }

/* 4. Why SudoTrials */
.home-band {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--home-band-line);
  border-bottom: 1px solid var(--home-band-line);
}
.home-why { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 48px 72px; }
.home-why-intro { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.home-why-intro p { font-size: 18px; color: var(--home-body); }
.home-why-list { flex: 1 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.home-why-list li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--home-list-line); }
.home-why-list li:last-child { border-bottom: none; }
.home-why-list svg {
  flex: none; width: 28px; height: 28px; margin-top: 2px;
  fill: none; stroke: var(--color-success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-why-list li > div { display: flex; flex-direction: column; gap: 4px; }
.home-why-list h3 { font-size: 20px; font-weight: 700; color: var(--color-primary); }
.home-why-list p { font-size: 17px; color: var(--home-body); }

/* 5. Subscribe for updates: sits between the sage band and the closing CTA, divided from the
   CTA by a hairline so the two read as separate asks. */
.home-subscribe { max-width: 688px; padding-top: 72px; }
.home-subscribe-form {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding-bottom: 56px; border-bottom: 1px solid var(--home-band-line);
}
.home-subscribe-label { font-size: 18px; color: var(--home-body); }
.home-subscribe-row { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.home-subscribe-row input[type="email"] {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--color-text-primary);
  padding: 13px 16px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface);
}
.home-subscribe-row input[type="email"]::placeholder { color: var(--color-text-placeholder); }
.home-subscribe-row input[type="email"]:focus-visible { outline: 2px solid var(--color-success); outline-offset: 1px; }
.home-subscribe-row .button { cursor: pointer; font-family: inherit; }
.home-subscribe-row .button:disabled { opacity: .6; cursor: default; }
.home-subscribe-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.home-subscribe-status { min-height: 1.5em; font-size: 16px; font-weight: 600; color: var(--color-primary); }
.home-subscribe-status.error { color: #b3261e; }

/* 6. Closing CTA */
.home-cta {
  max-width: 688px; padding-top: 64px; padding-bottom: 96px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.home-cta p { font-size: 19px; color: var(--home-body); }
.home-cta a:not(.button) { font-weight: 700; }
.home-cta .home-actions { margin-top: 4px; }

/* Phones */
@media (max-width: 760px) {
  .home-hero { padding-top: 56px; gap: 40px; }
  .home-hero-title { font-size: 40px; }
  .home-lede { font-size: 19px; }
  .home h2 { font-size: 30px; }
  .home-stat { padding: 32px 28px; }
  .home-stat-number { font-size: 56px; margin-bottom: 8px; }  /* room for the underline when stacked */
  .home-stat-claim { font-size: 22px; }
  .home-step-arrow { display: none; }
  .home-hero-note { padding-right: 12px; }
  .home-hero-note .home-hand { font-size: 27px; }
  .home-subscribe { padding-top: 56px; }
  .home-subscribe-row { flex-direction: column; }
  .home-subscribe-row .button { width: 100%; }
}