/* --------------------------------------------------------------------------
   Light theme, campaign landing pages only.

   Loaded AFTER brv.css and scoped to html.theme-light, so it is a token
   override rather than a second design system. Every component keeps its
   existing rules and simply resolves them against inverted values.

   The main site is dark by design. Newsletter readers arrive from a light
   editorial layout, and dropping them onto a black page reads as a different
   company entirely, so campaign pages invert.

   The dark decorative layers (grain, aurora, mesh, spotlight) are not
   overridden here. They use plus-lighter and overlay blends that only compose
   against black, so the campaign pages simply do not include that markup.
   -------------------------------------------------------------------------- */

html.theme-light {
  /* Not paper white. A flat #fff page with grey cards reads as unfinished, so
     the ground carries a faint cool cast and the cards sit white on top of it,
     which is what makes them look like cards at all. */
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #eaf1f3;
  --border: rgba(12, 34, 40, 0.13);
  --border-strong: rgba(12, 34, 40, 0.26);
  --text: #0d1b1f;
  /* Newspaper contrast. The dark site can carry low-contrast grey body copy
     because grey on black still separates cleanly; the same grey on white just
     reads as faded. Body copy sits close to black here, the way a news site
     sets it, because this page is meant to be read rather than admired. */
  --muted: #232d30;
  --dim: #5f6d71;

  /* The channel hues are drawn for a black ground and every one of them fails
     contrast on a light one. Re-tuned rather than dropped, so the page still
     reads as the same family of colours as the dark site. */
  --ch-platform: #0d6e7d;
  --ch-agents: #5b34b8;
  --ch-soc: #a35c00;
  --ch-build: #b32744;
  --ch-live: #0a7c2f;

  /* Teal leads. Amber is kept for the warning states in the result panel,
     where it means something, rather than spent on furniture. */
  --accent: var(--ch-platform);
  color-scheme: light;
}

/* A section can still claim a hue, but the default no longer turns everything
   amber just because the markup says ch-soc. */
html.theme-light .ch-soc { --accent: var(--ch-platform); }

html.theme-light body {
  background: var(--bg);
  color: var(--text);
}

/* The shared header is sticky and transparent, and only gets a solid backdrop
   from the .is-stuck class that brv.js adds on scroll. Campaign pages do not
   load brv.js, so it would stay transparent and the wordmark would ride over
   the headline. A one-CTA landing page gains nothing from a persistent header
   anyway, so it simply sits still. */
html.theme-light .header {
  position: static;
  background: var(--bg);
  border-bottom-color: var(--border);
}

/* With a static header the hero no longer needs to clear it. The wash gives the
   top of the page some depth without any of the dark site's blend layers. */
/* Pitch and form share one row on a desktop, so there is no scroll between
   reading the reason and acting on it. Below 940px they stack in source order,
   which puts the argument first, as it should be on a phone. */
html.theme-light .hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(26px, 3.6vw, 52px);
  align-items: start;
}

@media (max-width: 940px) {
  html.theme-light .hero-split { grid-template-columns: minmax(0, 1fr); }
}

/* .head is capped at 820px for a full-width hero; in a column it just needs
   to fill the column. */
html.theme-light .hero-split .head { max-width: none; margin-bottom: 0; }

html.theme-light .hero-form { display: grid; gap: 16px; }

html.theme-light .page-hero {
  padding-block: clamp(28px, 5vh, 56px) clamp(36px, 5vh, 64px);
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in oklab, var(--ch-platform) 13%, transparent), transparent 62%),
    radial-gradient(90% 80% at 96% 12%, color-mix(in oklab, var(--ch-soc) 11%, transparent), transparent 58%),
    linear-gradient(180deg, #ffffff, var(--bg));
  border-bottom: 1px solid var(--border);
}

/* The eyebrow is the smallest place a brand colour still registers. */
html.theme-light .label {
  color: var(--accent);
}

html.theme-light .reader-line strong {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--ch-soc) 17%, transparent);
  color: color-mix(in oklab, var(--ch-soc) 76%, #000);
}

/* 58px is sized to hold its own against a six-link nav. With no nav beside it
   the wordmark reads as shouting, so it comes down to masthead scale. */
html.theme-light .header .shell { min-height: 0; padding-block: 18px; }
html.theme-light .header .logo-name { height: 30px; }

html.theme-light ::selection {
  background: var(--accent);
  color: #fff;
}

/* Seven separate rules in brv.css hardcode white headings, on the reasonable
   assumption of a black ground. Rather than chase each selector and miss one,
   headings are reset at the element level. Anything that genuinely needs a
   coloured heading, like .form-ok h3, wins on specificity below. */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4 {
  color: var(--text);
}

/* Buttons are built from a dark-ground mix, which turns muddy on white. */
html.theme-light .btn {
  border-color: var(--border-strong);
  color: var(--text);
}

html.theme-light .btn-primary,
html.theme-light .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html.theme-light .btn-primary:hover {
  background: color-mix(in oklab, var(--accent) 84%, #000);
}

/* Inputs hardcode a black fill for the dark site. */
html.theme-light .field input,
html.theme-light .field select,
html.theme-light .field textarea {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
}

html.theme-light .field input::placeholder {
  color: var(--dim);
}

html.theme-light .form {
  background: var(--surface);
  border-color: var(--border);
}

/* The result console is a black terminal on the dark site. On white it reads
   as a report, so it keeps the monospace structure and loses the terminal. */
html.theme-light .console {
  background: #fff;
  border-color: var(--border);
}

html.theme-light .console-rail {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

html.theme-light .console-line {
  border-color: var(--border);
}

html.theme-light .console-line time {
  color: var(--dim);
}

html.theme-light .console-tag {
  color: var(--accent);
}

html.theme-light .console-tag.hold {
  color: #b3261e;
}

html.theme-light .console-tag.human {
  color: var(--ch-live);
}

/* White cards on the tinted ground, each claiming one channel hue on its rail.
   Four grey boxes in a row was the flattest thing on the page. */
html.theme-light .feature {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(12, 34, 40, 0.05);
}

html.theme-light .feature:nth-child(1) { border-left-color: var(--ch-platform); }
html.theme-light .feature:nth-child(2) { border-left-color: var(--ch-agents); }
html.theme-light .feature:nth-child(3) { border-left-color: var(--ch-soc); }
html.theme-light .feature:nth-child(4) { border-left-color: var(--ch-build); }

html.theme-light .feature:hover {
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(12, 34, 40, 0.09);
}

html.theme-light .feature h3 { color: var(--text); }

html.theme-light .form-ok h3 {
  color: var(--ch-live);
}

html.theme-light .form-error {
  color: #b3261e;
}

html.theme-light .chip {
  background: color-mix(in oklab, var(--ch-live) 10%, #fff);
  border-color: color-mix(in oklab, var(--ch-live) 40%, transparent);
}

/* The sample must never wear the live badge. Neutral, and it says Sample. */
html.theme-light .chip-sample {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--muted);
}

/* Set back from the form so it reads as an illustration rather than as this
   visitor's own result. */
html.theme-light .console.sample {
  background: color-mix(in oklab, var(--ch-platform) 4%, #fff);
  border-style: dashed;
}

/* The one proof line. Sized like a statement of fact, not a testimonial. */
.proof-line {
  margin: 0;
  padding: 12px 15px;
  border-left: 3px solid var(--ch-build);
  background: color-mix(in oklab, var(--ch-build) 8%, #fff);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/* The form is the point of the page, so it gets the one strong edge on it. */
html.theme-light .form-band .form {
  border-top: 3px solid var(--accent);
  box-shadow: 0 2px 16px rgba(12, 34, 40, 0.08);
}

/* Beside the copy the form fills its column rather than sitting at the
   reading width it needed when it spanned the page. */
html.theme-light .hero-form .form,
html.theme-light .hero-form .console { max-width: none; }

/* One teal frame around the whole right column, so the form, the sample and
   the live result read as a single unit rather than three stacked cards. */
html.theme-light .hero-form {
  padding: clamp(14px, 2vw, 20px);
  border: 2px solid var(--ch-platform);
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in oklab, var(--ch-platform) 7%, #fff);
  box-shadow: 0 6px 26px color-mix(in oklab, var(--ch-platform) 16%, transparent);
}

/* Inside the frame the form's own edge and shadow are a second box around the
   same thing. The white ground is what still needs to separate it. */
html.theme-light .hero-form .form {
  border: 0;
  box-shadow: none;
}

/* .console margin-top would double the frame's own gap. */
html.theme-light .hero-form .console { margin-top: 0; }

/* .form sets display: grid, which beats the hidden attribute's UA rule, so the
   report step would show before the visitor has a result without this. */
html.theme-light .hero-form .form[hidden] { display: none; }

/* The report step's heading and intro sit in the form's grid, whose gap
   already spaces them; default margins would double it. */
html.theme-light #flyoverReport > h3,
html.theme-light #flyoverReport > p { margin: 0; }

html.theme-light .footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}