/* ==========================================================================
   BEP Inc. — design tokens + base styles
   Hard rule: no pure white / bright backgrounds anywhere. Warm cream (light)
   or deep green-black (dark) only. Every text/background pairing below has
   been checked against WCAG 2.2 AA (>=4.5:1 body, >=3:1 large text/UI).
   ========================================================================== */

:root {
  --bg: #F4EFE6;
  --surface: #EDE4D3;
  --surface-raised: #F8F4EC;
  --text: #1C2620;
  --muted: #4F5D52;
  --primary: #1F4D3A;      /* links, headings-on-surface, primary buttons */
  /* --accent was declared here and painted nothing: `var(--accent)` appears in
     no stylesheet, page or script in this folder. It measured 4.4:1 on --bg and
     4.0:1 on --surface, under the 4.5:1 the house standard requires of text,
     and the CPO gate could not see it because the cream theme was never being
     parsed (chiefs/accessibility.py, _resolve_negated_themes, 10 Sep).
     Removed rather than recoloured: recolouring is a brand decision and this
     token tints nothing, so deleting it changes zero pixels and lets the gate
     read the live palette honestly. If an accent is wanted, --primary is the
     one that already passes at 8.4:1. */
  --on-primary: #F4EFE6;   /* text placed on --primary background */
  --line: #C9BEA4;
  --focus: #1F4D3A;
  --error: #B3261E;
  --ok: #1F6D45;

  /* Fixed (non-theme-flipping) header treatment: a solid brand-green bar
     gives real, opaque contrast against both the cream and dark body —
     stronger and more reliable than a translucent/blurred bar sitting
     close in tone to whatever theme is active. */
  --header-bg: #1F4D3A;
  --header-text: #F4EFE6;
  --header-line: rgba(244, 239, 230, 0.28);
  --header-active: #8FDBB4;

  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1120px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #14201A;
  --surface: #1B2A22;
  --surface-raised: #203026;
  --text: #EDE7DA;
  --muted: #A9B8AC;
  --primary: #6FCB9F;
  --on-primary: #14201A;
  --line: #2B3B31;
  --focus: #6FCB9F;
  --error: #FF8A80;
  --ok: #6FCB9F;
  color-scheme: dark;
}

/* Default to the OS preference until JS applies the saved / explicit choice,
   so there is never a flash of the wrong theme. Never falls back to white. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14201A;
    --surface: #1B2A22;
    --surface-raised: #203026;
    --text: #EDE7DA;
    --muted: #A9B8AC;
    --primary: #6FCB9F;
    --on-primary: #14201A;
    --line: #2B3B31;
    --focus: #6FCB9F;
    --error: #FF8A80;
    --ok: #6FCB9F;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px — the house floor, never below */
  line-height: 1.65;
  transition: background-color .2s ease, color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

img, svg { max-width: 100%; height: auto; display: block; }

/* Visible focus on every interactive element — never suppressed. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--surface-raised);
  color: var(--text);
  padding: .9rem 1.2rem;
  border: 2px solid var(--focus);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
section + section { border-top: 1px solid var(--line); }

/* ---------- Header / nav ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem; max-width: var(--max-width); margin: 0 auto; gap: 1rem;
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--header-text); text-decoration: none; display: flex; align-items: center; gap: .5rem;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--header-text);
  color: var(--header-bg); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--font-display); flex: none;
}
nav.primary-nav ul {
  list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap;
}
nav.primary-nav a {
  color: var(--header-text); text-decoration: none; font-weight: 600; font-size: .97rem;
  padding: .4rem .1rem; border-bottom: 2px solid transparent;
}
nav.primary-nav a[aria-current="page"] { border-bottom-color: var(--header-active); color: var(--header-active); }
nav.primary-nav a:hover { border-bottom-color: var(--header-line); }

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--header-line); border-radius: var(--radius-sm);
  padding: .5rem .7rem; color: var(--header-text); font: inherit; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; }
  nav.primary-nav {
    position: absolute; inset: 100% 0 auto 0; background: var(--header-bg);
    border-bottom: 1px solid var(--header-line); padding: 1rem 1.5rem; display: none;
  }
  nav.primary-nav.open { display: block; }
  nav.primary-nav ul { flex-direction: column; gap: .2rem; }
  nav.primary-nav a { display: block; padding: .7rem .2rem; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: .45rem .9rem; font: inherit; font-weight: 600;
  font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
}
.theme-toggle:hover { border-color: var(--primary); }
.site-header .theme-toggle {
  background: var(--header-text); color: var(--header-bg); border-color: transparent;
}
.site-header .theme-toggle:hover { filter: brightness(0.95); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none;
  padding: .85rem 1.5rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--primary); text-decoration: none; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: clamp(3rem, 8vw, 5.5rem); }
.eyebrow {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--primary); margin: 0 0 1rem;
}
.hero .lede { max-width: 56ch; margin: 1rem auto 2rem; color: var(--muted); font-size: 1.2rem; }
.hero .btn-row { justify-content: center; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.card h3 { margin: 0; }
.card p { color: var(--muted); margin: 0; }
.card a.card-link { color: var(--text); text-decoration: none; }
.card a.card-link:hover { color: var(--primary); }

.pillar-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex: none;
}

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; }
.tag-list li {
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem;
  font-size: .88rem; color: var(--muted); background: var(--surface);
}

.status-pill {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--line); color: var(--muted);
}
.status-pill.live { color: var(--ok); border-color: var(--ok); }

/* ---------- Forms ---------- */
form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; margin-bottom: .4rem; font-size: .95rem; }
.hint { color: var(--muted); font-size: .88rem; margin-top: .35rem; }
/* date is here because the questionnaire asks for two of them and a date
   field left out of this list renders at the browser default - about 13px on
   a phone, under the house 18px floor, on a page whose whole job is to be the
   demonstration. Enumerating input types is exactly the shape RULE 22 warns
   about; it stays a list only because the ones deliberately NOT here
   (checkbox, radio, file) want completely different geometry, not the same
   geometry with an exception. */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="date"],
select, textarea {
  width: 100%; font: inherit; padding: .75rem .9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--bg); color: var(--text);
}
textarea { min-height: 130px; resize: vertical; }
.error-text { color: var(--error); font-size: .88rem; margin-top: .35rem; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--error); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; margin: 0 0 1.1rem; }
legend { font-weight: 700; padding: 0 .4rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--primary); color: var(--on-primary); border-radius: var(--radius);
  padding: 2.5rem; text-align: center; margin: 0 1.5rem;
}
.cta-band h2, .cta-band p { color: var(--on-primary); }
.cta-band .btn-secondary { border-color: color-mix(in srgb, var(--on-primary) 60%, transparent); color: var(--on-primary); }

/* ---------- Score gauge ---------- */
.score-gauge { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.score-ring { width: 150px; height: 150px; flex: none; }
.score-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; }
.score-band { font-size: .9rem; color: var(--muted); }

/* ---------- Accessibility Welcome Screen ---------- */
.a11y-welcome-backdrop {
  position: fixed; inset: 0; background: rgba(10, 14, 11, .55); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.a11y-welcome {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 520px; width: 100%; padding: 1.75rem; max-height: 90vh; overflow: auto;
}
.a11y-welcome h2 { margin-top: 0; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.a11y-row:first-of-type { border-top: none; }
.a11y-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }

.a11y-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Text-size / high-contrast preference classes applied to <html> by JS */
html[data-text-size="lg"] body { font-size: 1.2rem; }
html[data-text-size="xl"] body { font-size: 1.4rem; }
html[data-contrast="high"] { --line: currentColor; }
html[data-contrast="high"] .card, html[data-contrast="high"] .btn-secondary { border-width: 2px; }

/* ---------- Footer ---------- */
footer.site-footer { padding: 3rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
footer.site-footer .grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 2rem; }
footer.site-footer h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
footer.site-footer a { color: var(--muted); text-decoration: none; }
footer.site-footer a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.mt-0 { margin-top: 0; }
.narrow { max-width: 70ch; }
.narrow.text-center { margin-left: auto; margin-right: auto; }

/* FIX: honor the hidden attribute so 'Start browsing' actually closes the gate */
[hidden] { display: none !important; }

/* Business identity in the footer — required for CASL, and a company with no
   address on its own site reads as provisional. */
.footer-address {
  font-style: normal;
  font-size: .88rem;
  color: var(--muted);
  margin-top: .9rem;
  line-height: 1.6;
}

/* ---------- Code snippets (sample audits, fix-it guide) ----------
   Wide snippets scroll inside their own box so the page body never
   scrolls sideways on a phone. */
pre {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  overflow-x: auto;
  margin: .35rem 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .92em;
}

/* On narrow screens, wrap code rather than making people scroll sideways to
   read it. WCAG 2.1 reflow (1.4.10): content should not need two-dimensional
   scrolling at 320px. Code is arguably exempt, but this page sells
   accessibility - it should not ask a low-vision reader to pan a code sample. */
@media (max-width: 640px) {
  pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* ---- The tier menu ---------------------------------------------------
   Candice's brief, in her words: "I'm used to seeing prices displayed like
   a menu. It makes you want to choose something." Four compact boxes, all
   four visible on a phone without scrolling, each jumping to its own full
   description below.

   Compact is a CONSEQUENCE of the 18px floor, not a compromise with it. At
   the house type size four full-height cards cannot fit one phone screen,
   so the boxes carry the name, the kind and the price and nothing else.
   The type size does not move.

   Two things this must not get wrong, and neither is visual:
   - The jump must move FOCUS, not only the viewport. A silent scroll is
     nothing at all to a screen reader user. app.js does the focusing; the
     tabindex="-1" on each .tier-detail is what makes that possible, and the
     focus outline on it is deliberately NOT suppressed.
   - The hierarchy lives in the markup - an ordered list, and "Tier n of
     four" written out - because size and colour convey nothing to a screen
     reader.

   There is no motion here. Motion is its own brief and it has not started. */
.tier-menu {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 720px) {
  .tier-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.tier-chip {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  height: 100%;
  box-sizing: border-box;
  padding: .8rem .9rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.tier-chip:hover { border-color: var(--primary); }
.tier-chip-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}
.tier-chip-kind { color: var(--muted); font-size: .95rem; }
.tier-chip-price { font-weight: 600; }

.tier-detail {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-top: 2rem;
}
.tier-detail ul { margin: 0 0 1em; padding-left: 1.25rem; }
.tier-detail li { margin-bottom: .35em; }
.tier-bestfor { color: var(--muted); }
.tier-back { font-size: .95rem; }
html[data-contrast="high"] .tier-chip { border-width: 2px; }

/* A checkbox and the sentence it belongs to, on one line.
 *
 * Radios too, since the questionnaire builds its yes/no and choice questions
 * out of them: a radio and a checkbox are the same problem wearing different
 * shapes, and giving radios their own class would be a second rule about one
 * thing.
 *
 * The control is 1.5rem because WCAG 2.2 added Target Size (Minimum), 2.5.8,
 * and a browser-default checkbox is about 13px - under the 24px floor. BEP
 * writes reports against WCAG 2.2. Shipping a form control that fails it on
 * BEP's own site is the kind of thing a client's lawyer reads out.
 *
 * font-weight is normal on purpose: these labels are sentences to read, not
 * headings to scan, and bolding them made the checkbox look like the label of
 * a section rather than a thing to tick.
 */
.checkrow {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.checkrow input[type="checkbox"],
.checkrow input[type="radio"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .15rem;
}
.checkrow label { font-weight: 400; }