@import url("https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap");

/* ============================================================
   CORA, The Operator's Field Guide
   A working reference, not a brochure.
   (weav-format skin appended at end of file, 2026-07-10)
   ============================================================ */

:root {
  /* ===== Brand palette (reskin 2026-07-05): plum ink · ivory ground · blood-orange accent · moss/olive · blush. NB: legacy token names (green/teal now = plum, terra = blood orange), the VALUES are authoritative, not the names. ===== */
  --black: #481827;
  --green: #481827;
  --terra: #ab482d;
  --cream: #ebe2cf;

  /* black */
  --ink: #481827;
  --ink-soft: #481827;
  --muted: #481827;
  --light-txt: #5c3c44;        /* neutral grey, smallest metadata only */

  /* cream family (one cream + a banding shade) */
  --cream-deep: #f3e9d6;
  --peach: #f3e9d6;
  --peach-deep: #d3c6ac;

  /* green (one green; aliases kept for existing rules) */
  --teal: #481827;
  --teal-dk: #481827;
  --teal-tint: #f3e9d6;        /* folded to cream-deep */
  --teal-soft: #ebe2cf;        /* dimmed cream for text on green */

  /* terracotta (one terracotta + hover shade) */
  --terra-dk: #8a3a22;
  --terra-darker: #8a3a22;      /* AA-safe CTA fill + hover */
  --terra-tint: #f3e9d6;

  /* streams → one green */
  --sage: #481827;
  --slate: #481827;
  --mauve: #481827;
  --amber: #481827;

  --rule: #e1d6c1;
  --rule-soft: #e1d6c1;

  --flag-red: #ab482d;         /* attention states → terracotta */

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--terra); color: var(--cream); }

a { color: var(--teal-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.004em;
  line-height: 1.12;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 600;
  color: var(--green);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--terra-dk);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--teal-dk); color: var(--cream);
  padding: 10px 18px; border-radius: 4px; z-index: 200;
  text-decoration: none; font-weight: 600; font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 760px; }

/* ===== INDEX / FIELD-GUIDE MARKERS ===== */
.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra-dk);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--terra);
  display: inline-block;
}

.sec-head { margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head .num {
  display: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--light-txt);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--rule);
}
.sec-head h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  max-width: 18ch;
  margin-top: 14px;
}
.sec-head .lead { margin-top: 22px; max-width: 60ch; font-size: 1.18rem; color: var(--muted); }

/* ===== NAV ===== */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1.5px solid var(--rule);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-nav.scrolled { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(31,69,55,0.45); }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  letter-spacing: -0.02em; color: var(--teal-dk); text-decoration: none;
  display: inline-flex; align-items: baseline;
}
.wordmark .dot { color: var(--terra); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--font-body); font-size: 15px; text-decoration: none;
  color: var(--ink-soft); font-weight: 500; padding: 6px 0;
  position: relative; transition: color 0.2s var(--ease); background: none; border: none; cursor: pointer;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--terra); transition: width 0.28s var(--ease);
}
.nav-links a:hover { color: var(--teal-dk); }
.nav-links a.active { color: var(--teal-dk); }
.nav-links a.active::after { width: 100%; }
.nav-cta {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  color: var(--cream); background: var(--terra-dk); text-decoration: none;
  padding: 11px 22px; border-radius: 5px; transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: var(--terra-darker); transform: translateY(-1px); }
.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--rule); border-radius: 5px;
  width: 44px; height: 40px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: 0.25s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  padding: 14px 26px; border-radius: 5px; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: all 0.2s var(--ease); line-height: 1;
}
.btn .arr { transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--terra-dk); color: var(--cream); }
.btn-primary:hover { background: var(--terra-darker); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--ink-soft); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-teal { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-dk); border-color: var(--teal-dk); transform: translateY(-1px); }
.btn-on-teal { background: var(--cream); color: var(--teal-dk); }
.btn-on-teal:hover { background: var(--peach); }
.btn-ghost-on-teal { background: transparent; color: var(--cream); border-color: rgba(250,246,238,0.45); }
.btn-ghost-on-teal:hover { border-color: var(--cream); background: rgba(250,246,238,0.08); }
.link-arrow {
  font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--terra-dk);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.link-arrow .arr { transition: transform 0.25s var(--ease); }
.link-arrow:hover .arr { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== BANDS ===== */
.band { padding: clamp(64px, 9vw, 120px) 0; }
.band-cream-deep { background: var(--cream-deep); }
.band-peach { background: var(--peach); }
.band-teal { background: var(--teal-dk); color: var(--teal-soft); }
.band-teal h1, .band-teal h2, .band-teal h3 { color: var(--cream); }
.band-teal h2 em, .band-teal h3 em { color: inherit; }
.band-teal .kicker { color: var(--peach-deep); }
.band-teal .kicker::before { background: var(--peach-deep); }
.band-teal .sec-head .num { color: var(--teal-soft); border-color: rgba(188,208,197,0.3); }
.band-teal .sec-head .lead { color: var(--teal-soft); }

/* Blush dark ground (adds a fifth palette band so how-it-works alternates the
   full CORA palette). Mirrors band-teal's light-on-dark text handling. */
.band-blush { background: #9d5257; color: #f3e9d6; }
.band-blush h1, .band-blush h2, .band-blush h3, .band-blush h4 { color: #f3e9d6; }
.band-blush h2 em, .band-blush h3 em { color: #f7d7c9; }
.band-blush p { color: #f0e2d4; }
.band-blush .kicker { color: #f7d7c9; }
.band-blush .kicker::before { background: #f7d7c9; }
.band-blush .sec-head .lead { color: #f0e2d4; }
.band-blush strong { color: #f3e9d6; }
/* buttons already resolve to a moss fill + terracotta fill, both read on blush */
.band-blush :focus-visible { outline-color: var(--cream); }

/* ===== HERO (home) ===== */
.hero { padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 84px); }
.hero-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-block; padding: 7px 14px; border: 1.5px solid var(--ink-soft);
  border-radius: 100px; background: transparent; margin-bottom: 28px;
}
.hero-title {
  font-size: clamp(2.6rem, 6.6vw, 4.7rem); line-height: 1.08; max-width: 17ch;
  letter-spacing: -0.012em; font-weight: 600;
}
.hero-lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--muted); max-width: 54ch; margin-top: 28px; }
.hero .btn-row { margin-top: 38px; }

/* proof strip under hero */
.proof-strip {
  margin-top: clamp(44px, 6vw, 72px); padding-top: 30px; border-top: 1.5px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.proof-strip .pf .n {
  font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 500;
  color: var(--teal); line-height: 1; display: block;
}
.proof-strip .pf .l { font-size: 14px; color: var(--muted); margin-top: 8px; display: block; line-height: 1.4; }

/* ===== Prose columns ===== */
.prose-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.prose-grid p { font-size: 1.12rem; color: var(--muted); }
.prose-grid p strong { color: var(--ink); font-weight: 600; }
/* Green feature band variant (What CORA is) */
.band-teal .prose-grid p { color: var(--teal-soft); }
.band-teal .prose-grid > div:first-child p { font-family: var(--font-display); font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.22; letter-spacing: -0.01em; }
.band-teal .prose-grid p strong { color: var(--cream); font-weight: 500; }

/* ===== Pull quote ===== */
.pullquote { padding: clamp(56px,8vw,96px) 0; }
.pullquote .wrap { text-align: center; }
.pullquote q {
  font-family: var(--font-display); font-style: normal; font-weight: 600; quotes: none;
  font-size: clamp(1.85rem, 4.2vw, 3.1rem); line-height: 1.16; color: var(--teal-dk); display: block; max-width: 24ch; margin: 0 auto; text-align: center; letter-spacing: -0.012em;
  position: relative; padding: 36px 0;
}
.pullquote q::before, .pullquote q::after {
  content: ""; display: block; width: 64px; height: 2px; background: var(--terra);
  margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%);
}
.pullquote q::before { top: 0; }
.pullquote q::after { bottom: 0; }

/* ===== Approach (expandable contrast blocks) ===== */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ledger-row {
  background: var(--green); border: 1.5px solid var(--green); border-radius: 12px;
  padding: 28px 26px; cursor: pointer; align-items: start;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.ledger-row:hover, .ledger-row:focus-within { transform: translateY(-3px); box-shadow: 0 22px 46px -28px rgba(26,26,26,0.5); }
.ledger-row .ix { display: none; }
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ledger-row h3 { font-size: 1.25rem; line-height: 1.2; margin: 0; color: var(--cream); }
.ledger-row h3 em { color: var(--cream); }
.ledger-toggle { flex: none; font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--terra); transition: transform 0.3s var(--ease); }
.ledger-row:hover .ledger-toggle, .ledger-row:focus-within .ledger-toggle { transform: rotate(45deg); }
.ledger-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.ledger-row:hover .ledger-more, .ledger-row:focus-within .ledger-more { grid-template-rows: 1fr; }
.ledger-more-inner { overflow: hidden; min-height: 0; }
.ledger-row p { color: var(--teal-soft); margin: 0; padding-top: 14px; font-size: 0.97rem; }
@media (hover: none) { .ledger-more { grid-template-rows: 1fr; } .ledger-toggle { display: none; } }

/* ===== Stream preview rows (home) ===== */
.stream-list { border-top: 1.5px solid var(--rule); }
.stream-row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: clamp(18px,3vw,40px);
  padding: 26px 0; border-bottom: 1.5px solid var(--rule); align-items: center;
  text-decoration: none; color: inherit; transition: background 0.2s var(--ease); cursor: pointer;
}
.stream-row:hover { background: var(--cream-deep); }
.stream-row .sx {
  font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--cream); width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.stream-row h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 4px; }
.stream-row .desc { font-size: 0.96rem; color: var(--muted); max-width: 62ch; }
.stream-row .cnt { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.stream-row .go { color: var(--terra-dk); font-weight: 600; font-size: 14px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.stream-row .go .arr { transition: transform 0.25s var(--ease); }
.stream-row:hover .go .arr { transform: translateX(4px); }

/* ===== Pillars (report preview / home) ===== */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5px; background: var(--rule); border: 1.5px solid var(--rule); border-radius: 8px; overflow: hidden; }
.pillar { background: var(--cream); padding: 28px 24px; }
/* The pillar tiles on a maroon band are cream islands. The former #7d4256 fill
   was off palette and measured 1.94:1 against the maroon ground, so the tiles
   had neither a fill nor a usable edge. See the pillar block at the end of
   this file for the replacement. */
.pillar .pn {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 16px;
}
.pillar h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pillar p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.pillar .bar { height: 4px; background: currentColor; border-radius: 2px; margin-bottom: 18px; opacity: 0.9; }

.report-callout {
  margin-top: 40px; padding: 26px 30px; background: var(--cream); border: 1.5px solid var(--ink-soft); border-radius: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.report-callout p { margin: 0; color: var(--ink); font-weight: 500; max-width: 50ch; }

/* ===== Timeline ===== */
.timeline { border-top: 1.5px solid var(--rule); }
.tl-row {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px,4vw,56px);
  padding: 32px 0; border-bottom: 1.5px solid var(--rule);
}
.tl-row .when { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--teal); }
.tl-row h3 { font-size: 1.3rem; margin-bottom: 8px; }
.tl-row p { color: var(--muted); margin: 0; max-width: 60ch; }

/* ===== CTA band ===== */
.cta-band { text-align: left; }
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 18ch; }
.cta-band p { font-size: 1.2rem; margin-top: 22px; max-width: 56ch; }
.cta-band .btn-row { margin-top: 34px; }

/* ===== Sub-page hero ===== */
.page-hero { padding: clamp(54px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); }
.page-hero h1, .page-hero h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); max-width: 16ch; }
.page-hero .lead { font-size: 1.25rem; color: var(--muted); max-width: 60ch; margin-top: 24px; }
.page-hero .lead + .lead { margin-top: 14px; font-size: 1.08rem; }

/* ===== Library ===== */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--rule);
  border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); margin-top: clamp(40px,5vw,60px);
}
.stat { background: var(--cream); padding: 28px var(--gutter); }
.stat:first-child { padding-left: 0; }
.stat .sn { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.2rem); font-weight: 500; color: var(--teal); display: block; line-height: 1; }
.stat .sl { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; display: block; }

.jump-nav { display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; padding: 22px 0; border-bottom: 1.5px solid var(--rule); }
.jump-nav .jl { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-txt); margin-right: 18px; }
.jump-nav button {
  background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 14.5px;
  font-weight: 500; color: var(--ink-soft); padding: 4px 14px; position: relative;
}
.jump-nav button:not(:last-child)::after { content: "·"; position: absolute; right: -2px; color: var(--rule); }
.jump-nav button:hover { color: var(--terra-dk); }

/* ---- Category hub cross-links (library page + course hub pages) ---- */
nav.hub-links, .hub-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.hub-links a { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--terra-dk); text-decoration: none; }
.hub-links a:hover { text-decoration: underline; }

.stream-section { padding: clamp(48px,6vw,84px) 0; border-bottom: 1.5px solid var(--rule); scroll-margin-top: 84px; }
.stream-head { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; margin-bottom: 40px; }
.stream-badge {
  font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 20px;
  color: var(--cream); width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.stream-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); display: inline; }
.stream-head .scnt { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 14px; white-space: nowrap; }
/* nowrap keeps the count on one line beside the heading, but the longest
   variant ("10 courses in this stream") pushed the compliance hub 39px past
   the viewport at 375px and gave the page horizontal overflow. It is allowed
   to wrap once there is no room for it. */
@media (max-width: 620px) { .stream-head .scnt { white-space: normal; margin-left: 0; display: block; margin-top: 6px; } }
.stream-head .sintro { color: var(--muted); margin-top: 14px; max-width: 76ch; font-size: 1.05rem; }
.stream-head .underline { height: 3px; border-radius: 2px; margin-top: 18px; width: 80px; }

.course-list { border-top: 1.5px solid var(--rule); }
.course { border-bottom: 1.5px solid var(--rule); }
.course summary { list-style: none; cursor: pointer; padding: 19px 6px; display: grid; grid-template-columns: 44px 1fr 22px; gap: 16px; align-items: center; transition: background 0.18s var(--ease); }
.course summary::-webkit-details-marker { display: none; }
.course summary:hover { background: var(--cream-deep); }
.course summary:hover .ctitle { color: var(--teal-dk); }
.course .cnum { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--light-txt); text-align: center; }
.course .ctitle { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.22rem); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.course .ctoggle { color: var(--terra); transition: transform 0.28s var(--ease); display: flex; align-items: center; justify-content: center; }
.course[open] .ctoggle { transform: rotate(180deg); }
.course-body { padding: 2px 6px 30px 60px; max-width: 84ch; }
.course-desc { color: var(--muted); font-size: 1.02rem; margin-bottom: 24px; }
.course-more { margin: -14px 0 24px; }
.course-more a { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--terra-dk); text-decoration: none; }
.course-more a:hover { text-decoration: underline; }
.course-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.meta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
/* tag-set / tag-ndis / tag-cap CSS removed in v5, per-course NDIS tag chips moved to gated PDF download */

/* ===== Pricing ===== */
.size-selector {
  background: var(--cream-deep);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 640px;
  margin: clamp(28px,4vw,40px) auto 0;
  text-align: center;
}
.size-selector .ss-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.size-selector h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  margin: 0 0 18px; color: var(--ink);
}
.size-selector select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  color: var(--ink); background: var(--cream);
  border: 2px solid var(--teal-dk); border-radius: 8px;
  padding: 12px 44px 12px 18px;
  width: 100%; max-width: 360px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23481827' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color 0.15s var(--ease);
}
/* The hover border was --peach-deep, which is 1.20:1 on the cream fill, and
   the same rule set outline:none at a specificity the global focus ring could
   not beat, so a keyboard user tabbing into the price calculator got no
   indication of focus at all. Both states now use rust-dk, 6.02:1 on #ebe2cf. */
.size-selector select:hover { border-color: var(--terra-dk); }
.size-selector select:focus-visible {
  border-color: var(--terra-dk);
  outline: 3px solid #8a3a22; outline-offset: 3px;
}
.size-selector .ss-hint {
  font-size: 0.92rem; color: var(--muted); margin: 14px 0 0; max-width: 48ch; margin-left: auto; margin-right: auto;
}
.price .amt.is-quote { font-size: 2rem; }

.fm-banner {
  background: var(--teal-dk); color: var(--cream); border-radius: 10px; padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin: clamp(36px,5vw,52px) 0;
}
.fm-banner .fl { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--peach-deep); display: block; margin-bottom: 8px; }
.fm-banner p { margin: 0; max-width: 60ch; color: var(--teal-soft); }
.fm-banner .ftext { flex: 1 1 360px; }

/* enterprise tile, larger-team "let's talk", sits ABOVE the pricing ladder */
.enterprise-tile {
  background: var(--cream-deep); border: 1.5px solid var(--terra-dk); border-radius: 16px;
  padding: 26px 30px; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap; margin: clamp(30px,4vw,44px) 0 clamp(20px,3vw,28px);
}
.enterprise-tile .et-text { flex: 1 1 380px; }
.enterprise-tile .et-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-dk); display: block; margin-bottom: 8px; }
.enterprise-tile p { margin: 0; max-width: 66ch; color: var(--ink); font-weight: 400; }
.enterprise-tile .btn { white-space: nowrap; }

.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; max-width: 760px; margin: 0 auto; }
.tier {
  background: var(--cream-deep); border: 1.5px solid var(--rule); border-radius: 12px; padding: 30px 26px;
  display: flex; flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1), box-shadow 0.4s var(--ease);
}
.tier-grid .tier, .tier-mini-row .tier { transition: opacity 0.6s var(--ease), transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1), box-shadow 0.4s var(--ease); }
.tier-grid .tier:hover, .tier-mini-row .tier:hover { transform: translateY(-8px); box-shadow: 0 26px 52px -30px rgba(26,26,26,0.42); }
/* Smaller secondary plans, collapsed, expand on hover/focus */
.tier-mini-label { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 36px 0 16px; }
.tier-mini-row { display: flex; flex-wrap: wrap; gap: 18px; }
.tier-compact { width: 264px; max-width: 100%; padding: 24px 24px 22px; background: var(--cream); position: relative; cursor: default; transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1), border-color 0.2s var(--ease), box-shadow 0.3s var(--ease); }
.tier-compact:hover, .tier-compact:focus-within { border-color: var(--ink-soft); box-shadow: 0 18px 40px -30px rgba(31,69,55,0.55); }
.tier-compact h3 { font-size: 1.35rem; }
.tier-compact .sub { min-height: 0; margin-bottom: 16px; }
.tier-compact .price { padding-bottom: 18px; margin-bottom: 0; }
.tier-compact .price .amt { font-size: 2rem; }
.tier-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.tier-more-inner { overflow: hidden; min-height: 0; }
.tier-compact:hover .tier-more, .tier-compact:focus-within .tier-more { grid-template-rows: 1fr; }
.tier-more ul { margin-top: 22px; }
.ind-desc { font-size: 0.88rem; color: var(--muted); margin: 4px 0 16px; }
.ind-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ind-plan-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--cream); }
.ind-plan-list li:first-child { border-color: var(--terra-dk); border-width: 2px; }
.ind-plan-list .ipl-term { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ind-plan-list .ipl-rate { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ind-plan-list .ipl-rate em { font-style: normal; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.ind-plan-list a { font-size: 0.85rem; font-weight: 600; color: var(--terra-dk); text-decoration: none; display: inline-block; margin-top: 2px; }
.ind-plan-list a:hover { text-decoration: underline; }
.tier-expand-hint { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--terra-dk); margin-top: 16px; transition: opacity 0.2s var(--ease); }
.tier-expand-hint::after { content: "+"; font-size: 16px; line-height: 1; }
.tier-compact:hover .tier-expand-hint, .tier-compact:focus-within .tier-expand-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }
@media (hover: none) {
  .tier-more { grid-template-rows: 1fr; }
  .tier-expand-hint { display: none; }
}
.tier.featured { background: var(--teal-dk); border-color: var(--teal-dk); }
.tier.featured h3, .tier.featured .price .amt { color: var(--cream); }
.tier.featured .sub, .tier.featured .price .per, .tier.featured li, .tier.featured .price .seat { color: var(--teal-soft); }
.tier.featured li::before { color: var(--peach-deep); }
.tier .badge { align-self: flex-start; background: var(--terra); color: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; }
.tier h3 { font-size: 1.6rem; margin-bottom: 8px; }
.tier .sub { font-size: 0.92rem; color: var(--muted); min-height: 2.6em; margin-bottom: 20px; }
.tier .price { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1.5px solid var(--rule); }
.tier.featured .price { border-color: rgba(188,208,197,0.3); }
.tier .price .amt { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: var(--ink); line-height: 1; }
.tier .price .per { font-size: 0.9rem; color: var(--muted); display: block; margin-top: 8px; }
.tier .price .seat { font-size: 0.82rem; color: var(--light-txt); display: block; margin-top: 4px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.tier li { font-size: 0.92rem; color: var(--ink-soft); padding: 7px 0 7px 24px; position: relative; line-height: 1.45; }
.tier li::before { content: "›"; position: absolute; left: 4px; color: var(--terra); font-weight: 700; }
.tier .btn { width: 100%; justify-content: center; }

.all-include { margin-top: clamp(40px,5vw,56px); padding: 32px; background: var(--cream-deep); border-radius: 12px; border: 1.5px solid var(--rule); }
.all-include .ai-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; }
.all-include ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px 28px; }
.all-include li { font-size: 0.95rem; padding-left: 24px; position: relative; color: var(--ink-soft); }
.all-include li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,4vw,44px); }
.how-step .hn { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: var(--terra); display: block; line-height: 1; margin-bottom: 16px; }
.how-step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.how-step p { color: var(--muted); font-size: 0.98rem; margin: 0; }

.addon-list { border-top: 1.5px solid var(--rule); }
.addon { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 26px 0; border-bottom: 1.5px solid var(--rule); align-items: start; }
.addon h3 { font-size: 1.2rem; margin-bottom: 8px; }
.addon p { color: var(--muted); margin: 0; max-width: 64ch; font-size: 0.96rem; }
.addon .ap { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--teal); white-space: nowrap; }

/* ===== Accordion (FAQ) ===== */
.acc { border-top: 1.5px solid var(--rule); }
.acc-item { border-bottom: 1.5px solid var(--rule); }
.acc-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; color: var(--ink);
  padding: 26px 48px 26px 0; position: relative; display: block; letter-spacing: -0.01em; line-height: 1.25;
}
.acc-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; color: var(--terra); transition: transform 0.3s var(--ease);
}
.acc-item.open .acc-q::after { transform: translateY(-50%) rotate(45deg); }
.acc-q:hover { color: var(--teal-dk); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-body-inner div { padding-bottom: 28px; padding-right: 48px; max-width: 75ch; color: var(--muted); }
.acc-body-inner p { font-size: 1.02rem; }

.faq-category { padding: clamp(40px,5vw,64px) 0 8px; scroll-margin-top: 84px; }
.faq-category > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
.faq-cat-num { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.1em; color: var(--light-txt); display: block; margin-bottom: 14px; }

/* ===== SAMPLE REPORT ===== */
.illus-banner {
  background: var(--peach-deep); color: var(--teal-dk); text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 12px 20px;
}
.illus-banner strong { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.report-doc {
  max-width: 920px; margin: clamp(20px,3vw,40px) auto; background: var(--cream);
  border: 1.5px solid var(--rule); border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(31,69,55,0.5);
}
.rd-header { background: var(--teal-dk); color: var(--cream); padding: clamp(28px,4vw,44px); position: relative; }
.rd-header .rd-watermark {
  position: absolute; top: 28px; right: clamp(28px,4vw,44px); font-family: var(--font-display); font-style: italic;
  font-size: 1.4rem; color: rgba(250,246,238,0.35); letter-spacing: 0.05em;
}
.rd-header .wordmark { color: var(--cream); font-size: 22px; margin-bottom: 26px; }
.rd-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--teal-soft); margin-bottom: 24px; }
.rd-meta strong { color: var(--cream); font-weight: 600; }
.rd-header .kicker { color: var(--peach-deep); }
.rd-header .kicker::before { background: var(--peach-deep); }
.rd-header h2 { color: var(--cream); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-top: 12px; }
.rd-header .rd-sub { color: var(--teal-soft); margin-top: 12px; max-width: 56ch; }

.rd-section { padding: clamp(28px,4vw,44px); border-bottom: 1.5px solid var(--rule); }
.rd-section:last-child { border-bottom: none; }
.rd-section > .rd-st { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra-dk); margin-bottom: 16px; }
.rd-section h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin-bottom: 18px; max-width: 30ch; }
.rd-section p { color: var(--muted); font-size: 1rem; max-width: 72ch; }
.rd-section p strong { color: var(--ink); font-weight: 600; }

.audit-banner { margin-top: 24px; background: var(--cream-deep); border: 1.5px solid var(--ink-soft); border-radius: 8px; padding: 20px 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.audit-banner .al { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 4px; }
.audit-banner p { color: var(--teal-dk); margin: 0; font-weight: 500; flex: 1 1 320px; font-size: 0.95rem; }
.audit-status { background: var(--teal); color: var(--cream); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 100px; white-space: nowrap; }

.rd-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.rd-pillar { border: 1.5px solid var(--rule); border-radius: 8px; padding: 22px 24px; }
.rd-pillar .rp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rd-pillar .rp-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.rd-pillar .rp-score { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; }
.rd-pillar .rp-delta { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: inline-block; }
.rp-delta.up { color: #3F5A34; }
.rp-delta.down { color: #7C1E2A; }
.rd-pillar .rp-track { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.rd-pillar .rp-fill { height: 100%; border-radius: 3px; }
.rd-pillar p { font-size: 0.88rem; margin: 0; color: var(--muted); }

.rd-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.92rem; }
.rd-table th, .rd-table td { text-align: right; padding: 13px 10px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.rd-table th { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rd-table th:first-child, .rd-table td:first-child { text-align: left; font-variant-numeric: normal; }
.rd-table td:first-child { font-weight: 600; color: var(--ink); }
.rd-table .amber { color: #875515; font-weight: 700; }
.rd-table .red { color: #7C1E2A; font-weight: 700; }
.rd-note { font-size: 0.82rem; color: var(--light-txt); margin-top: 12px; }

.flag-list { display: grid; gap: 12px; margin-top: 8px; }
.flag { border: 1.5px solid var(--rule); border-radius: 8px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.flag h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.flag p { font-size: 0.88rem; margin: 0; }
.flag .ftag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; white-space: nowrap; }
.ftag.high { background: var(--flag-red); color: var(--cream); }
.ftag.eng { background: var(--terra); color: var(--cream); }
.ftag.watch { background: var(--slate); color: var(--cream); }

.ps-list { display: grid; gap: 12px; margin-top: 8px; }
.ps-row { display: grid; grid-template-columns: 1fr 90px 48px; gap: 16px; align-items: center; }
.ps-row .psn { font-size: 0.92rem; color: var(--ink-soft); }
.ps-row .pstrack { height: 7px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; }
.ps-row .psfill { height: 100%; border-radius: 4px; }
.ps-row .psval { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.92rem; text-align: right; }

.rec-list { display: grid; gap: 16px; margin-top: 8px; }
.rec { border: 1.5px solid var(--rule); border-radius: 10px; padding: 24px 26px; }
.rec .rprio { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 100px; }
.rprio.high { background: var(--flag-red); color: var(--cream); }
.rprio.pri { background: var(--terra); color: var(--cream); }
.rprio.std { background: var(--teal); color: var(--cream); }
.rec h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin: 0 0 12px; max-width: 50ch; }
.rec p { font-size: 0.95rem; margin: 0 0 16px; }
.rec .rtags { display: flex; flex-wrap: wrap; gap: 8px; }
.rec .rtag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--cream-deep); padding: 5px 12px; border-radius: 6px; }
.rd-footer { padding: 24px clamp(28px,4vw,44px); background: var(--cream-deep); font-size: 12px; color: var(--muted); }
.rd-footer strong { color: var(--ink); }

.disclaimer { max-width: 920px; margin: 0 auto; padding: 32px 0; }
.disclaimer h3 { font-size: 1.1rem; margin-bottom: 12px; }
.disclaimer p { font-size: 0.9rem; color: var(--light-txt); max-width: 80ch; }

/* ===== Footer ===== */
.site-footer { background: var(--teal-dk); color: var(--teal-soft); padding: clamp(48px,6vw,72px) 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(188,208,197,0.2); }
.footer-brand .wordmark { color: var(--cream); font-size: 28px; }
.footer-brand p { color: var(--teal-soft); max-width: 42ch; margin-top: 14px; font-size: 0.98rem; }
.footer-contact a { color: var(--cream); font-weight: 600; font-size: 1.15rem; text-decoration: none; font-family: var(--font-display); }
.footer-contact a:hover { color: var(--peach); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.footer-links a { background: none; border: none; color: var(--teal-soft); cursor: pointer; font-family: var(--font-body); font-size: 14px; padding: 0; text-decoration: none; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom { padding-top: 24px; font-size: 13px; color: rgba(188,208,197,0.7); }

/* ===== Pages ===== */
.page { display: none; }
.page.active { display: block; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 64px 0 auto 0; background: var(--cream); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 28px; border-bottom: 1.5px solid var(--rule); transform: translateY(-120%); transition: transform 0.32s var(--ease); box-shadow: 0 24px 40px -30px rgba(31,69,55,0.6); }
  .nav-open .nav-links { transform: translateY(0); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font-size: 17px; }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta { margin-top: 14px; text-align: center; }
  .nav-toggle { display: flex; }
  .prose-grid, .how-grid, .tier-grid, .pillars, .rd-pillars, .footer-top { grid-template-columns: 1fr; }
  .tier-compact { width: 100%; }
  .proof-strip, .stats-row { grid-template-columns: repeat(2, 1fr); gap: 1.5px; }
  .stats-row .stat:last-child { grid-column: 1 / -1; }
  .proof-strip { gap: 24px; border-top: 1.5px solid var(--rule); }
  .stat:first-child { padding-left: var(--gutter); }
  .tier-grid { gap: 14px; }
  .tl-row, .stream-row, .ledger-row { grid-template-columns: 1fr; }
  .stream-row { grid-template-columns: 48px 1fr; }
  .stream-row .go { display: none; }
  .ledger-row .ix { margin-bottom: -8px; }
  .rec, .flag { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .proof-strip, .stats-row { grid-template-columns: 1fr; }
  .course-body { padding-left: 8px; }
  .ps-row { grid-template-columns: 1fr 60px 40px; }
  .pullquote q { font-size: 1.5rem; }
}

/* ===== SIL page domain cards ===== */
.sil-domains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sil-dom { background: var(--cream-deep); border: 1.5px solid var(--rule); border-radius: 12px; padding: 26px 24px; }
.sil-dom.out { background: transparent; border-style: dashed; border-color: var(--terra); }
.sil-dom-tag { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.sil-dom-tag.out { color: var(--terra-dk); }
.sil-dom h3 { font-size: 1.2rem; margin-bottom: 8px; }
.sil-dom p { font-size: 0.97rem; color: var(--muted); margin: 0; }
@media (max-width: 680px) { .sil-domains { grid-template-columns: 1fr; } }

/* The six per-stream swatch fills (.sx-1 to .sx-6) were removed on 2026-07-19.
   Every one of them was a dark brand hex carrying an !important, and .sx-1 was
   #481827, identical to the maroon page ground at 1.00:1. The !important would
   have out-ranked the cream plate treatment further down this file the moment
   an sx- class was reapplied. Stream badges are one cream plate with maroon
   numerals plus a salmon rule; the stream name is always present as text, so
   no information was ever carried by the swatch colour alone. */

/* ===== reskin overrides (2026-07-05): AAA button labels + solid green secondary ===== */
.btn-primary, .nav-cta, .btn-teal { color: #fff; }
.btn-ghost { background: #4f552f; color: #fff; border-color: transparent; }
.btn-ghost:hover { background: #3f4526; color: #fff; border-color: transparent; }

/* ===== hamburger nav at ALL widths (2026-07-05) ===== */
.nav-toggle { display: flex !important; }
.nav-links { position: fixed; inset: 64px 0 auto 0; background: var(--cream); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 28px; border-bottom: 1.5px solid var(--rule); transform: translateY(-120%); transition: transform .32s var(--ease); box-shadow: 0 24px 40px -30px rgba(72,24,39,.5); z-index: 40; }
.nav-open .nav-links { transform: translateY(0); }
.nav-links a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font-size: 17px; }
.nav-links a::after { display: none; }
.nav-links .nav-cta { margin-top: 14px; text-align: center; color: #fff; }
/* Portal button, always visible next to the hamburger, highlighted (existing customers sign in) */
.nav-portal {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  color: var(--cream); background: var(--teal-dk); text-decoration: none;
  padding: 10px 20px; border-radius: 5px; white-space: nowrap;
  display: inline-flex; align-items: center; margin-left: auto;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-portal:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(72,24,39,0.55); }
.nav-portal:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
@media (max-width: 560px) { .nav-portal { padding: 9px 15px; font-size: 13.5px; } }
/* warm the long approach section so ivory doesn't run */

/* ===== approved banding (2026-07-05): green pullquote, drop off-brand beige ===== */
.pullquote { background: #4f552f !important; border-top-color: #3f4526; border-bottom-color: #3f4526; }
.pullquote, .pullquote q, .pullquote .q, .pullquote p, .pullquote em { color: #fff !important; }
#approach-home { background: var(--cream) !important; }  /* revert beige -> ivory */

/* ===== audit fixes (2026-07-05): focus visible on dark surfaces ===== */
.band-teal :focus-visible, .pullquote :focus-visible, .rd-header :focus-visible { outline-color: var(--cream); }


/* ============================================================================
   WEAV-FORMAT SKIN, appended 2026-07-10
   Purpose: bring every /styles.css-driven page (how-it-works, faq, library,
   sample-report, request-a-demo, pricing, blog) into line with the weav-format
   homepage. Restyle only: no page HTML, content or SEO is touched.
   General Sans typography, tighter tracking, lighter body, pill buttons,
   rounded surfaces. Palette stays CORA (moss/rust/ink/creams).
   ============================================================================ */

:root {
  /* Repoint the two font tokens the whole stylesheet already references. */
  --font-display: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* weav accent for italic emphasis on dark surfaces */
  --weav-accent-on-dark: #f0a599;
}

/* ---- Base type: weav is a single sans, light body, tight display tracking ---- */
body { font-weight: 300; letter-spacing: -0.006em; }
h1, h2, h3, h4 { letter-spacing: -0.045em; line-height: 1.04; font-weight: 600; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; }
.hero-title, .page-hero h1, .page-hero h2 { letter-spacing: -0.05em; line-height: 1.03; }
p { font-weight: 300; }
strong, b { font-weight: 600; }
.lead, .hero-lead, .page-hero .lead, .sec-head .lead { font-weight: 300; }

/* ---- Kicker / eyebrow: keep the weav rule-mark, slightly wider tracking ---- */
.kicker { letter-spacing: 0.14em; font-weight: 600; font-size: 12.5px; }

/* ---- Buttons: weav pill shape ---- */
.btn { border-radius: 100px; font-weight: 500; letter-spacing: -0.01em; padding: 14px 26px; }
.nav-cta { border-radius: 100px; font-weight: 500; }
.nav-portal { border-radius: 100px; font-weight: 500; }
.skip-link { border-radius: 100px; }

/* ---- Nav: General Sans wordmark, weav weight ---- */
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.05em; }
.nav-links a { font-weight: 400; }

/* ---- Surfaces: soften corners toward the weav radius ---- */
.size-selector, .fm-banner, .tier, .all-include, .sil-dom,
.report-doc, .rec, .flag, .rd-pillar, .audit-banner, .report-callout,
.ledger-row { border-radius: 16px; }
.tier-compact { border-radius: 16px; }
.acc-q { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; }

/* ---- Section heads read as weav display type ---- */
.sec-head h2 { letter-spacing: -0.05em; }
.pullquote q { font-family: var(--font-display); letter-spacing: -0.05em; font-weight: 500; }

/* ---- Pricing tier heads + amounts in the weav display face ---- */
.tier h3, .tier-compact h3 { font-family: var(--font-display); letter-spacing: -0.05em; }
.tier .price .amt, .price .amt { font-family: var(--font-display); letter-spacing: -0.055em; font-weight: 600; }
.proof-strip .pf .n, .stat .sn, .how-step .hn { font-family: var(--font-display); letter-spacing: -0.055em; font-weight: 600; }

/* ---- Course + report display bits ---- */
.course .ctitle { font-family: var(--font-display); letter-spacing: -0.03em; }
.stream-head h2, .stream-row h3 { letter-spacing: -0.045em; }
.rd-pillar .rp-name, .rd-pillar .rp-score, .rd-header h2, .rd-section h3,
.flag h4, .rec h4, .addon .ap, .tl-row .when { font-family: var(--font-display); letter-spacing: -0.04em; }

/* ---- Footer ---- */
.footer-brand .wordmark, .footer-contact a { font-family: var(--font-display); letter-spacing: -0.03em; }

/* ---- Dark-surface italic emphasis picks up the warm weav accent ----
   Scoped away from .cta-band on 2026-07-19: the closing CTA's inner wrap is
   now a cream card, and salmon on cream is 1.65:1. The !important here was
   out-ranking the cream-card rules at the end of this file. The pillar tiles
   are excluded for the same reason. */
.band-teal:not(.cta-band) h2 em, .band-teal:not(.cta-band) h3 em,
.pullquote q em, .rd-header h2 em { color: var(--weav-accent-on-dark) !important; }
.band-teal .pillar h3 em { color: #983E28 !important; }   /* 5.71:1 on the cream tile */

/* ---- Custom-styled workforce-size dropdown (weav / CORA aesthetic, never raw native) ---- */
.size-selector select {
  border-radius: 100px;
  border: 1.5px solid var(--teal-dk);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23481827' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  padding: 13px 46px 13px 20px;
}
.size-selector select:hover, .size-selector select:focus {
  border-color: var(--terra-dk);
}

/* ---- keep decorative reveal timing consistent with the homepage ---- */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ============================================================================
   MAROON BANNER (2026-07-19)
   Every /styles.css page (pricing, how-it-works, faq, library, sample-report,
   request-a-demo, about) opened on a cream .page-hero, so index.html was the
   only page carrying maroon as a background. This gives every page the same
   maroon banner under the nav that index.html and the course/blog pages
   already carry (blog.css shipped the equivalent .post-hero/.hub-hero
   treatment earlier today). Same fill (var(--teal-dk), the site's maroon
   ink) and the same on-dark accent index.html already defines
   (var(--weav-accent-on-dark), #f0a599) instead of rust, which fails
   contrast on maroon (measured ~1.9-2.6:1 depending on the rust shade,
   against a required 4.5:1 for body text).
   ============================================================================ */
.page-hero {
  background: var(--teal-dk) !important;
  padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 5vw, 64px);
}
.page-hero .kicker { color: var(--peach-deep) !important; }
.page-hero .kicker::before { background: var(--peach-deep); }
.page-hero h1, .page-hero h2 { color: var(--cream-deep) !important; }
.page-hero h1 em, .page-hero h2 em { color: var(--weav-accent-on-dark) !important; }
.page-hero .lead { color: rgba(243,233,214,0.9) !important; }
.page-hero a:not(.btn) { color: var(--weav-accent-on-dark); }
.page-hero a:not(.btn):hover { color: var(--cream-deep); }

/* Pricing: the "How it works" band moves to maroon too, so the page carries
   more than one maroon moment (the brief called pricing out by name). The
   numbered step accent and body copy need the same on-dark handling. */
.band-teal .how-step .hn { color: var(--weav-accent-on-dark); }
.band-teal .how-step p { color: var(--teal-soft); }


/* ============================================================================
   MAROON GROUND (2026-07-19)
   The banner work of earlier today put maroon under the nav on every page.
   This block takes the next step the brief asked for: maroon becomes the
   page BACKGROUND, not an occasional band, so the site reads maroon-led
   rather than cream-led. Cream is kept deliberately, as panels, for long
   reference content and for the surfaces that need to read as paper.

   Method: the four text-only tokens are repointed to the cream family at
   :root, so everything sitting on the new maroon ground inherits accessible
   text automatically, including the inline style="color:var(--muted)"
   attributes in the page markup. Every remaining cream panel then
   re-declares those same tokens back to their original values, so text
   inside a light panel is unchanged. Custom properties resolve per element
   after the cascade, so a panel's own border and colour declarations pick up
   the panel's values, not the root's.

   Two tokens are deliberately NOT remapped: --cream is doing double duty as
   both the old page ground and the fill for six light cards, and
   --teal-dk / --teal / --green / --terra are each doing double duty as both
   a text colour and a background fill. Remapping either family would flip
   surfaces to maroon-on-maroon. New single-purpose tokens carry the
   ground-aware text colours instead.

   Measured on maroon #481827: #FCF7F1 13.73:1, #F3E9D6 12.15:1,
   #EBE2CF 11.36:1, #d3c6ac 8.67:1, #f0a599 7.35:1. Rust is unusable as text
   on maroon (#ab482d 2.58:1, #8a3a22 1.89:1) and never appears on it here.
   ============================================================================ */

:root {
  /* Text-only tokens, repointed for the maroon ground. */
  --ink:       #FCF7F1;   /* headings + strongest body            13.73:1 */
  --ink-soft:  #FCF7F1;   /* body copy                            13.73:1 */
  --muted:     #F3E9D6;   /* secondary copy                       12.15:1 */
  --light-txt: #d3c6ac;   /* smallest metadata                     8.67:1 */

  /* Hairlines and card edges on the maroon ground. */
  --rule:      rgba(243,233,214,0.45);   /* composites #957676     3.57:1 */
  --rule-soft: rgba(243,233,214,0.28);   /* composites #785358, decorative */

  /* New single-purpose, ground-aware tokens. */
  --accent-ink:  #f0a599;  /* links, chevrons, bullets, hovers      7.35:1 */
  --kicker-ink:  #d3c6ac;  /* eyebrow text and its rule mark        8.67:1 */
  --em-ink:      #f0a599;  /* italic emphasis inside headings       7.35:1 */
  --display-ink: #FCF7F1;  /* large numerals and stat figures      13.73:1 */
  --focus-ink:   #FCF7F1;  /* focus ring                           13.73:1 */
}

body { background: #481827; }

/* ---- Ground-aware repoints of rules that hardcoded a token by name ---- */
a { color: var(--accent-ink); }
h1 em, h2 em, h3 em { color: var(--em-ink); }
::selection { background: #F3E9D6; color: #481827; }
:focus-visible { outline: 3px solid var(--focus-ink); }

.kicker { color: var(--kicker-ink); }
.kicker::before { background: var(--kicker-ink); }

.link-arrow,
.stream-row .go,
.hub-links a,
.course-more a,
.enterprise-tile .et-label,
.tier-expand-hint,
.ind-plan-list a,
.rd-section > .rd-st,
.sil-dom-tag.out,
.jump-nav button:hover,
.acc-q:hover,
.course summary:hover .ctitle,
.course .ctoggle,
.acc-q::after,
.tier li::before,
.how-step .hn,
.ledger-toggle,
.wordmark .dot,
.nav-links a:hover,
.nav-links a.active { color: var(--accent-ink); }

.nav-links a::after { background: var(--accent-ink); }

.proof-strip .pf .n,
.stat .sn,
.tl-row .when,
.addon .ap,
.all-include .ai-label,
.audit-banner .al,
.sil-dom-tag { color: var(--display-ink); }
.all-include li::before { color: var(--display-ink); }

/* Hover fills that were cream-on-cream flashes once the ground went maroon. */
.course summary:hover,
.stream-row:hover { background: rgba(243,233,214,0.08); }

/* The library stat strip reads as a bright slab if it keeps its cream tiles.
   It takes the maroon ground instead, so only the 1.5px grid gaps show the
   hairline. It must be an opaque maroon and not transparent, or the row's
   hairline slab sits behind the text and drops it to 3.40:1. */
.stat { background: #481827; }

/* ---- Light panels: put the original text tokens back ----
   Everything listed here keeps a cream or cream-deep fill, so text inside it
   must stay maroon. Re-declaring the tokens on the panel itself restores the
   pre-change appearance for the whole subtree in one place. */
.band-cream-deep,
.band-peach,
.illus-banner,
.size-selector,
.enterprise-tile,
.tier:not(.featured),
.all-include,
.pillar,
.report-callout,
.report-doc,
.rd-footer,
.audit-banner,
.sil-dom,
.ind-plan-list li,
.rec .rtag,
#approach-home {
  --ink:       #481827;
  --ink-soft:  #481827;
  --muted:     #481827;
  --light-txt: #5c3c44;
  --rule:      #e1d6c1;
  --rule-soft: #e1d6c1;
  --accent-ink:  #8a3a22;   /* 6.02:1 on #ebe2cf, 6.44:1 on #f3e9d6 */
  --kicker-ink:  #8a3a22;
  --em-ink:      #481827;   /* unchanged from before this pass */
  --display-ink: #481827;
  --focus-ink:   #8a3a22;
  /* Re-declaring the token is not enough on its own: an element with no colour
     declaration of its own inherits the already-computed colour from body, not
     the token. The panel has to set its own colour for the subtree to follow. */
  color: var(--ink-soft);
}

/* ---- Dark panels nested inside a light panel: back to the maroon set ----
   .band-teal .pillar used to be listed here. The pillar tiles are now cream
   islands on the maroon band, so they take the light-panel tokens above. */
.report-doc .rd-header {
  --ink:       #FCF7F1;
  --ink-soft:  #FCF7F1;
  --muted:     #F3E9D6;
  --light-txt: #d3c6ac;
  --rule:      rgba(243,233,214,0.45);
  --rule-soft: rgba(243,233,214,0.28);
  --accent-ink:  #f0a599;
  --kicker-ink:  #d3c6ac;
  --em-ink:      #f0a599;
  --display-ink: #FCF7F1;
  --focus-ink:   #FCF7F1;
  color: var(--ink-soft);
}

/* ---- Nav: maroon, matching index.html ----
   A cream nav bar directly above a maroon banner was the one visible seam
   between the homepage and the rest of the site. */
/* 0.14 cream over maroon composites to #603540, 1.45:1, so the only mark of
   where the sticky nav ends was not being drawn on the seven plain-body pages
   that load this sheet alone (pricing, about, library, faq, how-it-works,
   sample-report, request-a-demo). 0.45 composites to #957676, 3.57:1, and
   matches the value maroon.css, blog-maroon.css, hub-maroon.css and
   courses-maroon.css already ship for this same edge. */
.site-nav { background: #481827; border-bottom-color: rgba(243,233,214,0.45); }
.site-nav.scrolled { box-shadow: 0 1px 0 rgba(243,233,214,0.12), 0 8px 24px -18px rgba(0,0,0,0.5); }
.site-nav .wordmark { color: #FCF7F1; }                       /* 13.73:1 */
.nav-links { background: #481827; box-shadow: 0 24px 40px -30px rgba(0,0,0,0.6); }
/* 0.16 composites to #633943, 1.53:1, so the drawer dividers were not there at
   all. maroon.css and courses/hub-maroon.css already ship 0.42 (#907070,
   3.30:1); styles.css was missed in that pass. */
.nav-links a { color: #F3E9D6; border-bottom-color: rgba(243,233,214,0.42); }  /* 12.15:1 */
.nav-toggle { border-color: rgba(243,233,214,0.45); }         /* 3.57:1 boundary */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #FCF7F1; }
.nav-open .nav-toggle span { background: transparent; }
.nav-portal { background: #F3E9D6; color: #481827; }          /* 12.15:1 */
.nav-portal:hover { background: #FCF7F1; }
.nav-portal:focus-visible { outline-color: #FCF7F1; }
/* The rust CTA fill is only 1.89:1 against maroon, so the pill silhouette
   needs an edge even though its white label passes at 7.75:1. */
.nav-cta, .nav-links .nav-cta { border: 1.5px solid rgba(243,233,214,0.5); }

/* ---- Buttons on the maroon ground ---- */
.btn-primary { border-color: rgba(243,233,214,0.5); }         /* 4.10:1 boundary */
.btn-ghost { background: transparent; color: #F3E9D6; border-color: rgba(243,233,214,0.55); }
.btn-ghost:hover { background: #F3E9D6; color: #481827; border-color: #F3E9D6; }
/* Inside a light panel the ghost button keeps its moss chip treatment. */
.band-cream-deep .btn-ghost, .band-peach .btn-ghost, .tier .btn-ghost, .sil-dom .btn-ghost {
  background: #4f552f; color: #fff; border-color: transparent;                 /* 7.86:1 */
}
.band-cream-deep .btn-ghost:hover, .band-peach .btn-ghost:hover,
.tier .btn-ghost:hover, .sil-dom .btn-ghost:hover {
  background: #3f4526; color: #fff; border-color: transparent;
}
.skip-link { border: 1.5px solid #F3E9D6; }

/* ---- Maroon panels that would otherwise vanish into the maroon ground ---- */
.tier.featured { border-color: #f0a599; }                     /* 7.35:1 edge */
.tier.featured .price { border-color: rgba(243,233,214,0.28); }
.tier .badge { background: var(--cream); color: #481827; }    /* 11.36:1, was 4.41:1 */
.fm-banner { border: 1.5px solid rgba(243,233,214,0.45); }    /* 3.57:1 edge */
.pullquote { border: 1.5px solid #d3c6ac; border-radius: 16px; }  /* 8.67:1 edge */
.pullquote q::before, .pullquote q::after { background: rgba(255,255,255,0.75); }
/* 0.16 composited to #633943, 1.53:1, so the content-to-footer divider was not
   perceivable. 0.45 composites to #957676 and matches the 3.57:1 hairline the
   rest of the maroon work uses. */
.site-footer { border-top: 1px solid rgba(243,233,214,0.45); }

/* ---- The blush CTA band becomes maroon ----
   Body copy on blush measured 4.38:1 and its kicker 4.11:1, both under AA,
   and a fifth ground no longer earns its place on a maroon-led site. */
.band-blush { background: #481827; color: #EBE2CF; }
.band-blush h1, .band-blush h2, .band-blush h3, .band-blush h4, .band-blush strong { color: #F3E9D6; }
.band-blush h2 em, .band-blush h3 em { color: #f0a599; }
.band-blush p, .band-blush .sec-head .lead { color: #EBE2CF; }
.band-blush .kicker { color: #d3c6ac; }
.band-blush .kicker::before { background: #d3c6ac; }

/* ---- Pre-existing AA failures on the cream ground, swept in the same pass ---- */
.ftag.eng, .rprio.pri { background: var(--terra-dk); }        /* was 4.41:1, now 6.02:1 */

/* ---- Stale green-grey rgba left over from the retired palette ---- */
.footer-top { border-bottom-color: rgba(243,233,214,0.45); }  /* 3.57:1, was 0.28 at 2.21:1 */
.footer-bottom { color: rgba(243,233,214,0.7); }              /* composites #c0aaa1, 6.62:1 */
.band-teal .sec-head .num { border-color: rgba(243,233,214,0.3); }

/* ---- Focus ring on the maroon banner, missed when the banner shipped ---- */
.page-hero :focus-visible, .band-blush :focus-visible, .fm-banner :focus-visible { outline-color: #FCF7F1; }

/* ---- The native workforce-size list inherits OS colours unless told otherwise ---- */
.size-selector select option { background: #f3e9d6; color: #481827; }

/* ---- Library stream badges ----
   The six per-stream fills were dark brand hexes set inline. Against maroon
   they measured 1.00:1 to 2.81:1, so the tiles lost their shape entirely and
   the compliance badge disappeared outright. Every badge is now one cream
   plate with maroon numerals and a salmon rule beneath. The stream name sits
   beside the badge and in the jump nav, so no information was carried by the
   colour alone. */
.stream-badge { background: #F3E9D6; color: #481827; }              /* 12.15:1 */
.stream-head .underline { background: #f0a599; }                    /* 7.35:1 */

/* ---- Focus ring on buttons ----
   Verified in-browser: .btn elements were resolving outline-color to
   currentColor rather than the ring token, so the ring matched the label and
   disappeared (maroon on maroon at 1.00:1 for .btn-on-teal, white on
   cream-deep at 1.20:1 for the tier buttons). Scoping the ring to .btn with
   literal values removes the indirection and the ambiguity. */
.btn:focus-visible { outline: 3px solid #FCF7F1; outline-offset: 3px; }   /* 13.73:1 on maroon */
.band-cream-deep .btn:focus-visible,
.band-peach .btn:focus-visible,
.tier:not(.featured) .btn:focus-visible,
.enterprise-tile .btn:focus-visible,
.size-selector .btn:focus-visible,
.report-callout .btn:focus-visible { outline-color: #8a3a22; }            /* 6.02 to 6.44:1 on cream */
/* .tier.featured is a maroon fill, not a cream one, so it must be excluded
   above or its ring is rust-dk on maroon at 1.89:1, the one pairing this
   palette forbids outright. It keeps the cream ring from .btn:focus-visible
   at 13.73:1. The light-panel token block already scopes itself the same way. */

/* The jump-nav separator glyph sat at 3.57:1 as text on maroon. */
.jump-nav button:not(:last-child)::after { color: var(--light-txt); }     /* 8.67:1 */

/* ---- The nav CTA is an <a> inside .nav-links, so the salmon hover colour was
   landing on its rust fill at 3.89:1. Its label stays cream in every state. */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover, .nav-cta:hover { color: #FCF7F1; }  /* 7.28:1 */

/* ---- Responsive: an inline grid-template-columns on about.html's founder
   block outranks the max-width:900px rule, so at phone widths the photo kept
   its 220px column and squeezed the copy into a ribbon a few words wide.
   Pre-existing, found while checking mobile for this pass. ---- */
@media (max-width: 700px) {
  .prose-grid[style] { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   HIERARCHY PASS ON THE MAROON GROUND (2026-07-19)

   The previous pass flipped the page ground to maroon and then fixed the text
   contrast inside every element that had been maroon. That made the copy
   legible and left the hierarchy inverted: components that were maroon in
   order to be the loudest thing on a cream page are now the same #481827 as
   the ground, so they are 1.00:1 and read as nothing at all. A 1.5px hairline
   around a 1.00:1 fill is a hairline, not a hierarchy.

   The rule applied throughout: an element that has to be looked at first gets
   a cream fill and maroon copy. Everything around it stays on the ground and
   is defined by its edge. Exactly one cream island per decision.

   Measured on maroon #481827: #FCF7F1 13.73:1, #F3E9D6 12.15:1, #EBE2CF
   11.36:1, #d3c6ac 8.67:1, #f0a599 7.35:1. Measured on #FCF7F1: #481827
   13.73:1, #8a3a22 7.28:1, #983E28 6.45:1, #5c3c44 9.02:1. Measured on
   #F3E9D6: #481827 12.15:1, #8a3a22 6.44:1, #983E28 5.71:1.
   Rust is never text on maroon (#983E28 2.13:1, #8a3a22 1.89:1); it is a
   fill under a cream label, or an accent on a cream surface.
   ============================================================================ */

/* ---- 1. The pricing ladder, inverted --------------------------------------
   Capability is the recommended plan and must be the first thing the eye
   lands on. It becomes the only filled card in the row: #FCF7F1 on the maroon
   ground is 13.73:1, which is the single strongest contrast event on the
   page, and it carries a 2px rust ring at 6.45:1 against its own fill.
   Foundations drops back to a ground card defined by a 3.57:1 edge. */

.tier.featured {
  background: #FCF7F1;
  border: 2px solid #983E28;                    /* 6.45:1 on the card fill */
  box-shadow: 0 26px 60px -34px rgba(0,0,0,0.55);
  /* Light-panel tokens, so the whole subtree re-darkens in one place. */
  --ink:       #481827;   /* 13.73:1 on #FCF7F1 */
  --ink-soft:  #481827;
  --muted:     #481827;
  --light-txt: #5c3c44;   /*  9.02:1 */
  --rule:      #e1d6c1;
  --rule-soft: #e1d6c1;
  --accent-ink:  #8a3a22; /*  7.28:1 */
  --kicker-ink:  #8a3a22;
  --em-ink:      #983E28; /*  6.45:1 */
  --display-ink: #481827;
  --focus-ink:   #8a3a22;
  color: var(--ink-soft);
}
.tier-grid .tier.featured:hover { box-shadow: 0 34px 70px -34px rgba(0,0,0,0.6); }

/* These four rules painted the card's copy cream for the maroon fill it used
   to have. On a cream card they would be 1.03:1 to 1.21:1. */
.tier.featured h3,
.tier.featured .price .amt { color: #481827; }                /* 13.73:1 */
.tier.featured .sub,
.tier.featured .price .per,
.tier.featured .price .seat,
.tier.featured li { color: #481827; }                          /* 13.73:1 */
.tier.featured h3 em { color: #983E28; }                       /*  6.45:1 */
.tier.featured li::before { color: #983E28; }                  /*  6.45:1 */
/* rgba(243,233,214,0.28) composited to #785358 on the old maroon fill, 1.94:1,
   so the divider under the price was gone. On a cream card it is the same
   hairline every other cream panel uses. */
.tier.featured .price { border-color: #e1d6c1; }

/* The badge was a cream pill; on a cream card that is 1.03:1 and the chip
   disappears. Rust fill under a cream label is the site's on-cream chip. */
.tier.featured .badge { background: #8a3a22; color: #FCF7F1; }  /* 7.28:1 */

/* The highest-value click on the page. A rust fill is 1.89:1 on maroon, so
   on the old card this button was a cream outline with a label inside it and
   no silhouette. On the cream card the fill itself reads at 7.28:1. */
.tier.featured .btn-primary {
  background: #8a3a22; color: #FCF7F1; border-color: #8a3a22;   /* 7.28:1 label */
}
.tier.featured .btn-primary:hover { background: #742f1c; color: #FCF7F1; border-color: #742f1c; }
/* The ring must not be rust on rust. It sits outside the button, on the card. */
.tier.featured .btn:focus-visible { outline-color: #8a3a22; }   /* 7.28:1 on #FCF7F1 */

/* Foundations returns to the ground. .tier:not(.featured) higher up this file
   hands it the light-panel tokens, which are correct for the three cream
   .tier-compact cards in the mini row but wrong for a card with no fill, so
   the maroon set is restored here at a higher specificity. */
.tier-grid .tier:not(.featured) {
  background: transparent;
  border: 1.5px solid rgba(243,233,214,0.45);   /* #957676, 3.57:1 */
  --ink:       #FCF7F1;   /* 13.73:1 on maroon */
  --ink-soft:  #FCF7F1;
  --muted:     #F3E9D6;   /* 12.15:1 */
  --light-txt: #d3c6ac;   /*  8.67:1 */
  --rule:      rgba(243,233,214,0.45);
  --rule-soft: rgba(243,233,214,0.28);
  --accent-ink:  #f0a599; /*  7.35:1 */
  --kicker-ink:  #d3c6ac;
  --em-ink:      #f0a599;
  --display-ink: #FCF7F1;
  --focus-ink:   #FCF7F1;
  color: var(--ink-soft);
}
/* A filled chip on the plan we are not steering toward, while the recommended
   plan's primary was a borderless ghost, was the second half of the
   inversion. #4f552f is also off palette; CORA moss is #6a7049. Filled chips
   belong to the recommended plan only. */
.tier-grid .tier:not(.featured) .btn-ghost {
  background: transparent; color: #F3E9D6;                      /* 12.15:1 */
  border: 1.5px solid rgba(243,233,214,0.55);                   /* #a68b87, 4.64:1 */
}
.tier-grid .tier:not(.featured) .btn-ghost:hover {
  background: #F3E9D6; color: #481827; border-color: #F3E9D6;   /* 12.15:1 */
}
.tier-grid .tier:not(.featured) .btn:focus-visible { outline-color: #FCF7F1; }  /* 13.73:1 */

/* ---- 2. The tailored-pricing banner --------------------------------------
   A #481827 slab on a #481827 ground is 1.00:1, so the banner was an outline
   around empty space sitting directly above the pricing cards it competes
   with. It becomes a cream island, one step quieter than the Capability card
   below it (#F3E9D6 at 12.15:1 against #FCF7F1 at 13.73:1). */
.fm-banner {
  background: #F3E9D6;
  border: 1.5px solid #d3c6ac;                  /* decorative bevel; the fill carries the shape at 12.15:1 */
  --ink: #481827; --ink-soft: #481827; --muted: #481827; --light-txt: #5c3c44;
  --rule: #e1d6c1; --rule-soft: #e1d6c1;
  --accent-ink: #8a3a22; --kicker-ink: #8a3a22; --em-ink: #481827;
  --display-ink: #481827; --focus-ink: #8a3a22;
  color: var(--ink-soft);
}
.fm-banner .fl { color: #8a3a22; }                              /* 6.44:1 */
.fm-banner p { color: #481827; }                                /* 12.15:1 */
.fm-banner .btn-on-teal { background: #8a3a22; color: #FCF7F1; border-color: #8a3a22; }  /* 7.28:1 */
.fm-banner .btn-on-teal:hover { background: #742f1c; color: #FCF7F1; border-color: #742f1c; }
.fm-banner :focus-visible { outline-color: #8a3a22; }           /* 6.44:1 */
/* .btn:focus-visible sets the ring with the outline shorthand at the same
   specificity, so the button ring is pinned explicitly rather than left to
   source order. A cream ring on the cream banner would be 1.13:1. */
.fm-banner .btn:focus-visible { outline: 3px solid #8a3a22; outline-offset: 3px; }  /* 6.44:1 */

/* ---- 3. Bands ------------------------------------------------------------
   Six pages used .band-teal as the one dark moment on a cream page. On a
   maroon ground the band is the ground, edge to edge with no rule top or
   bottom, so those pages lost their sectioning rhythm and read as one
   undifferentiated column. A hairline restores the boundary. */
.band-teal {
  border-top: 1px solid rgba(243,233,214,0.45);   /* #957676, 3.57:1 */
  border-bottom: 1px solid rgba(243,233,214,0.45);
}

/* On the closing CTA the band is the only ask on the page, so a boundary is
   not enough. The inner wrap becomes a cream card: the ask is the one cream
   island on the page, which is what the dark band used to be on cream. */
.band-teal.cta-band,
.band-blush.cta-band { border-top: none; border-bottom: none; }
.band-teal.cta-band > .wrap,
.band-blush.cta-band > .wrap {
  background: #F3E9D6;                            /* 12.15:1 against the ground */
  border: 1.5px solid #d3c6ac;
  border-radius: 16px;
  padding: clamp(36px,5vw,56px) clamp(28px,4vw,52px);
  --ink: #481827; --ink-soft: #481827; --muted: #481827; --light-txt: #5c3c44;
  --rule: #e1d6c1; --rule-soft: #e1d6c1;
  --accent-ink: #8a3a22; --kicker-ink: #8a3a22; --em-ink: #983E28;
  --display-ink: #481827; --focus-ink: #8a3a22;
  color: var(--ink-soft);
}
.band-teal.cta-band > .wrap h1,
.band-teal.cta-band > .wrap h2,
.band-teal.cta-band > .wrap h3,
.band-teal.cta-band > .wrap h4,
.band-teal.cta-band > .wrap p,
.band-teal.cta-band > .wrap strong,
.band-blush.cta-band > .wrap h1,
.band-blush.cta-band > .wrap h2,
.band-blush.cta-band > .wrap h3,
.band-blush.cta-band > .wrap h4,
.band-blush.cta-band > .wrap p,
.band-blush.cta-band > .wrap strong { color: #481827; }         /* 12.15:1 */
.band-teal.cta-band > .wrap h2 em,
.band-teal.cta-band > .wrap h3 em,
.band-blush.cta-band > .wrap h2 em,
.band-blush.cta-band > .wrap h3 em { color: #983E28; }          /*  5.71:1 */
.band-teal.cta-band > .wrap .kicker,
.band-teal.cta-band > .wrap .sec-head .lead,
.band-blush.cta-band > .wrap .kicker,
.band-blush.cta-band > .wrap .sec-head .lead { color: #8a3a22; }  /* 6.44:1 */
.band-teal.cta-band > .wrap .kicker::before,
.band-blush.cta-band > .wrap .kicker::before { background: #8a3a22; }
/* Cream-on-cream buttons: .btn-on-teal is a cream fill and .btn-primary got a
   translucent cream edge for the maroon ground. Both become a rust fill under
   a cream label, which is the on-cream primary used everywhere else. */
.band-teal.cta-band > .wrap .btn-on-teal,
.band-teal.cta-band > .wrap .btn-primary,
.band-blush.cta-band > .wrap .btn-on-teal,
.band-blush.cta-band > .wrap .btn-primary {
  background: #8a3a22; color: #FCF7F1; border-color: #8a3a22;   /* 7.28:1 */
}
.band-teal.cta-band > .wrap .btn-on-teal:hover,
.band-teal.cta-band > .wrap .btn-primary:hover,
.band-blush.cta-band > .wrap .btn-on-teal:hover,
.band-blush.cta-band > .wrap .btn-primary:hover {
  background: #742f1c; color: #FCF7F1; border-color: #742f1c;
}
.band-teal.cta-band > .wrap .btn-ghost,
.band-blush.cta-band > .wrap .btn-ghost {
  background: transparent; color: #8a3a22; border: 1.5px solid #8a3a22;   /* 6.44:1 */
}
.band-teal.cta-band > .wrap .btn-ghost:hover,
.band-blush.cta-band > .wrap .btn-ghost:hover {
  background: #8a3a22; color: #FCF7F1; border-color: #8a3a22;   /* 7.28:1 */
}
.band-teal.cta-band > .wrap :focus-visible,
.band-blush.cta-band > .wrap :focus-visible { outline-color: #8a3a22; }
.band-teal.cta-band > .wrap .btn:focus-visible,
.band-blush.cta-band > .wrap .btn:focus-visible { outline: 3px solid #8a3a22; outline-offset: 3px; }

/* ---- 4. The four capability pillars --------------------------------------
   The structural spine of the product story. The tiles carried a #7d4256
   fill, which is not a CORA colour and measures 1.94:1 against the ground,
   under a salmon border at 0.28 alpha that landed near 1.2:1 on it. Neither
   the fill nor the edge was doing any work. Four cream tiles on the maroon
   band gives the pillars the presence they are meant to have, and the
   light-panel token block higher up this file already lists .pillar, so the
   maroon copy inside them comes for free. */
.band-teal .pillars { background: rgba(243,233,214,0.45); border-color: rgba(243,233,214,0.45); }
.band-teal .pillar { background: #F3E9D6; }                     /* 12.15:1 */
/* .band-teal h1, h2, h3 paints every heading in the band cream at (0,2,0),
   which out-ranks the colour the .pillar token block hands down by
   inheritance, so the tile headings would be cream on cream at 1.03:1. */
.band-teal .pillar h3 { color: #481827; }                       /* 12.15:1 */
.band-teal .pillar h3 em { color: #983E28; }                    /*  5.71:1 */
.band-teal .pillar .pn { color: #481827; }                      /* 12.15:1 */
.band-teal .pillar p { color: #481827; }                        /* 12.15:1 */
.band-teal .pillar :focus-visible { outline-color: #8a3a22; }
/* The accent bars were inline-styled cream in the markup, which was correct
   while the tiles were dark and invisible (#EBE2CF on #F3E9D6, 1.07:1) once
   they went cream. Owning the colour here instead of inline keeps the four
   bars consistent through any future ground change. Rust is the on-cream
   accent already used for the tile em text. */
.band-teal .pillar .bar { background: #983E28; }                /*  5.71:1 */

/* ---- 5. Latent maroon fills ----------------------------------------------
   None of these four is used in any of the 131 pages today, so nothing was
   broken live, but each resolves to a #481827 fill with no boundary and would
   have rendered as shapeless text the moment a page reached for it. */
.btn-teal { background: #F3E9D6; color: #481827; border-color: #F3E9D6; }   /* 12.15:1 */
.btn-teal:hover { background: #FCF7F1; color: #481827; border-color: #FCF7F1; }
.audit-status { background: #8a3a22; color: #FCF7F1; }          /* 7.28:1 label, 6.44:1 fill on #f3e9d6 */
.rprio.std { background: #6a7049; color: #FCF7F1; }             /* 4.90:1 label on CORA moss */
.ledger-row { background: transparent; border-color: rgba(243,233,214,0.45); }  /* 3.57:1 edge */