/* Homepage section bands (6 October 2026). The sections alternate light and dark again, as they did
   while Our Research was the dark band under the hero: hero (paper) → The Search Hypothesis (dark
   green) → Test Time Cognition (cream) → Our Research Applied (dark green) → signup (paper). The study
   is in design-explorations/section-bands/.
   Inside the dark bands the theme tokens are re-mapped, so the text, the hypothesis figures and the
   result plots draw light on dark, with the graphics' lighter coral, green and sage (the dark theme's
   variants, figure-colors.20260928.css). Contrast on the green: text 10.2:1, muted text 6.7:1, coral
   4.7:1, green 4.9:1. The plots mark Test Time Cognition in a sky blue that suits the green (Evals
   keeps its blue). In the dark theme the bands are #111 on the #181818 page, as the Our Research panel
   was. Print keeps the day palette, without bands. */
@media screen {
  /* Both bands sit inside .page-width; their colour runs the full width of the window. */
  #hypothesis,
  #results {
    background: var(--band);
    box-shadow: 0 0 0 100vmax var(--band);
    clip-path: inset(0 -100vmax);
  }

  html:not([data-theme="dark"]) :is(#hypothesis, #results) {
    --band: #233d32;
    --paper: #233d32;
    --cream: #2b4a3c;
    --ink: #eeefe7;
    --muted: #a6b5a5;
    --muted-text: #bcc7ba;
    --rule: #ffffff2b;
    --coral: #eb8b61;
    --accent: #75b68c;
    --accent-text: #94cda7;
    --field-glow-rgb: 181,194,132;
    color: var(--ink);
  }

  html[data-theme="dark"] :is(#hypothesis, #results) {
    --band: #111111;
    --paper: #111111;
    --cream: #1c1c1a;
  }

  /* Test Time Cognition's sky blue on the green: markers and arrows 5.2:1, labels and numbers 7.6:1. */
  html:not([data-theme="dark"]) #results .evidence-window {
    --result-fill: #68b4e6;
    --result-ink: #a6d6f4;
  }

  /* The bands meet edge to edge, with room inside each. */
  .ttc-bridge { margin-bottom: 0; padding-bottom: 40px; }
  #results { padding-block: 92px 96px; }
  .home-signup { border-top: 0; }
}

@media screen and (max-width: 760px) {
  .ttc-bridge { padding-bottom: 32px; }
  #results { padding-block: 60px 64px; }
}

/* Results: on the homepage the cards carry no headline figures or legends. Customer Service's line
   gives its score instead, with "SOTA" in the blue of the plots' Test Time Cognition markers (sky on
   the green band, blue in the dark theme). On wide screens the three cards share their rows
   (subgrid), so the plots stay level whichever description runs longest. */
#results .evidence-sota { color: var(--result-fill); }
@media (min-width: 901px) {
  #results .evidence-window { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
/* The headline figures used to supply the space above each plot; where the plot sits under the text (not beside
   it, as on tablets), keep a gap. */
@media (min-width: 901px), (max-width: 600px) {
  #results .evidence-window figure { margin-top: 20px; }
}

/* Hero title: a small superscript after "System 2 AI" links to a reading on System 2 thinking. It is
   raised with position rather than vertical-align, so the title's line height doesn't change. Its "1"
   is drawn by CSS (12 October 2026), so search engines read the title as "System 2 AI", not "AI1". */
.hv-copy h1 .hv-ref { position: relative; top: -1.3em; margin-left: .04em; font-size: .36em; line-height: 0; letter-spacing: 0; vertical-align: baseline; font-family: inherit; }
.hv-copy h1 .hv-ref a { position: relative; color: var(--muted-text, var(--muted)); text-decoration: none; padding: .15em .2em .15em .05em; }
.hv-copy h1 .hv-ref a::before { content: "1"; }
/* An invisible margin makes the small figure easier to tap on phones. */
.hv-copy h1 .hv-ref a::after { content: ""; position: absolute; inset: -10px -12px -6px -4px; }
.hv-copy h1 .hv-ref a:hover { color: var(--coral); }
.hv-copy h1 .hv-ref a:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; border-radius: 2px; }