/* Site developed and built by sitethreesixty.com */

/* ============================================================
   zones.css — Zone colour schemes + zone-scoped element overrides
   Colour only. No layout properties.

   Per 00-FOUNDATION.md §2a: .zone-dark = Graphite (assert) ·
   .zone-light = Chalk (read) · .zone-accent = Slate (aside) ·
   .zone-muted = #efece7. Zones own colour; containers/elements inherit.

   .zone-accent = Slate #5C6A69 (RENAMED from .zone-accent, 6 Aug 2026, owner).
   12 West allows four schemes: dark · light · accent · muted. This site needs
   four grounds and was using dark/light/SLATE/muted — a canonical name swapped
   for a non-canonical one, which is what made components unportable.
   The dormant torch-deep .zone-accent block was removed: nothing called it, and
   Torch is capped at 10% and forbidden as a large field, so a torch ground was
   never usable. Slate is the ground this site actually asserts with.
   ============================================================ */

/* --- Zone colour schemes ---
   .zone-hero is the Home page's dark-scheme alias (its colour values are
   already set in home-critical.css, matching .zone-dark exactly — Zone 1
   is critical-path and needs its background/colour available on first
   paint, before this deferred file loads). Every SCOPED override below
   is keyed to both selectors together so Home's dark zones (hero, Solari,
   how-it-works, CTA) get the same eyebrow/heading/button/card theming as
   every other .zone-dark zone on the site — one theming rule, two class
   names pointing at it. */

/* .zone-hero is NOT listed here. It is defined in home-critical.css (it is
   Zone 1, above the fold, so its colour must paint before this deferred
   sheet loads). Declaring it in both files was a B3 duplication — an
   automatic site failure — and the two copies used DIFFERENT token names
   (--bg-dark/--text-on-dark here vs --zone-dark-bg/--zone-dark-fg), which
   resolve to the same value today and would diverge silently the moment
   either pair was retuned. Deleted 4 Aug 2026 after independent inspection.
   The scoped .zone-hero overrides further down this file are fine: they
   theme elements inside the zone, they do not redeclare the zone itself. */
.zone-dark {
  background-color: var(--zone-dark-bg);
  color: var(--zone-dark-fg);
}

.zone-dark a,
.zone-hero a,
.zone-managed-hero a,
.zone-core-hero a,
.zone-pricing-hero a {
  color: var(--torch);
}

.zone-dark a:hover,
.zone-hero a:hover,
.zone-managed-hero a:hover,
.zone-core-hero a:hover,
.zone-pricing-hero a:hover {
  color: var(--chalk);
}

.zone-light {
  background-color: var(--zone-light-bg);
  color: var(--zone-light-fg);
}

.zone-light a {
  color: var(--torch-deep);
}

.zone-light a:hover {
  color: var(--torch);
}

.zone-accent {
  background-color: var(--zone-accent-bg);
  color: var(--zone-accent-fg);
}

.zone-accent a {
  color: var(--torch);
}

.zone-accent a:hover {
  color: var(--chalk);
}

.zone-muted {
  background-color: var(--zone-muted-bg);
  color: var(--zone-muted-fg);
}

.zone-muted a {
  color: var(--torch-deep);
}

.zone-muted a:hover {
  color: var(--torch);
}

/* --- Zone-scoped element overrides --- */

/* Buttons: dark zones (.zone-hero is Home's dark-scheme alias, see above) */
.zone-dark .btn-primary,
.zone-hero .btn-primary,
.zone-managed-hero .btn-primary,
.zone-core-hero .btn-primary,
.zone-pricing-hero .btn-primary {
  background-color: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.zone-dark .btn-primary:hover,
.zone-hero .btn-primary:hover,
.zone-managed-hero .btn-primary:hover,
.zone-core-hero .btn-primary:hover,
.zone-pricing-hero .btn-primary:hover {
  background-color: var(--torch-deepest);
  color: var(--chalk);
  border-color: var(--torch-deepest);
}

.zone-dark .btn-secondary,
.zone-hero .btn-secondary,
.zone-managed-hero .btn-secondary,
.zone-core-hero .btn-secondary,
.zone-pricing-hero .btn-secondary {
  color: var(--chalk);
  border-color: var(--chalk);
}

.zone-dark .btn-secondary:hover,
.zone-hero .btn-secondary:hover,
.zone-managed-hero .btn-secondary:hover,
.zone-core-hero .btn-secondary:hover,
.zone-pricing-hero .btn-secondary:hover {
  background-color: var(--chalk);
  color: var(--graphite);
}

/* Buttons: light zones */
.zone-light .btn-primary {
  background-color: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.zone-light .btn-primary:hover {
  background-color: var(--torch-deepest);
  border-color: var(--torch-deepest);
}

.zone-light .btn-secondary {
  color: var(--torch-deep);
  border-color: var(--torch-deep);
}

.zone-light .btn-secondary:hover {
  background-color: var(--torch-deep);
  color: var(--chalk);
}

/* Buttons: slate zones */
.zone-accent .btn-primary {
  background-color: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.zone-accent .btn-primary:hover {
  background-color: var(--torch-deepest);
  border-color: var(--torch-deepest);
}

.zone-accent .btn-secondary {
  color: var(--chalk);
  border-color: var(--chalk);
}

.zone-accent .btn-secondary:hover {
  background-color: var(--chalk);
  color: var(--slate);
}

/* Buttons: muted zones */
.zone-muted .btn-primary {
  background-color: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.zone-muted .btn-primary:hover {
  background-color: var(--torch-deepest);
  border-color: var(--torch-deepest);
}

.zone-muted .btn-secondary {
  color: var(--torch-deep);
  border-color: var(--torch-deep);
}

.zone-muted .btn-secondary:hover {
  background-color: var(--torch-deep);
  color: var(--chalk);
}

/* Buttons: accent zones */
/* Cards: zone-scoped colour overrides */
.zone-dark .card,
.zone-hero .card,
.zone-managed-hero .card,
.zone-core-hero .card,
.zone-pricing-hero .card {
  background-color: var(--grey-darkest);
  border-color: var(--grey-dark);
}

.zone-light .card {
  background-color: var(--chalk);
  border-color: var(--grey-lightest);
}

.zone-accent .card {
  background-color: var(--grey-darkest);
  border-color: var(--grey-dark);
}

.zone-muted .card {
  background-color: var(--chalk);
  border-color: var(--grey-light);
}

/* Section labels (eyebrows): zone-scoped */
.zone-dark .section-label,
.zone-hero .section-label,
.zone-managed-hero .section-label,
.zone-core-hero .section-label,
.zone-pricing-hero .section-label {
  color: var(--torch);
}

.zone-light .section-label {
  color: var(--torch-deep);
}

.zone-accent .section-label {
  color: var(--torch);
}

.zone-muted .section-label {
  color: var(--torch-deep);
}

/* Section headings: zone-scoped */
.zone-dark .section-heading,
.zone-hero .section-heading,
.zone-managed-hero .section-heading,
.zone-core-hero .section-heading,
.zone-pricing-hero .section-heading {
  color: var(--chalk);
}

.zone-light .section-heading {
  color: var(--graphite);
}

.zone-accent .section-heading {
  color: var(--chalk);
}

.zone-muted .section-heading {
  color: var(--graphite);
}

/* Form inputs: zone-scoped */
.zone-dark .form-input,
.zone-dark .form-textarea,
.zone-hero .form-input,
.zone-managed-hero .form-input,
.zone-core-hero .form-input,
.zone-pricing-hero .form-input,
.zone-hero .form-textarea,
.zone-managed-hero .form-textarea,
.zone-core-hero .form-textarea,
.zone-pricing-hero .form-textarea {
  background-color: var(--grey-darkest);
  border-color: var(--grey-dark);
  color: var(--chalk);
}

.zone-light .form-input,
.zone-light .form-textarea {
  background-color: var(--chalk);
  border-color: var(--grey-light);
  color: var(--graphite);
}

.zone-accent .form-input,
.zone-accent .form-textarea {
  background-color: var(--grey-darkest);
  border-color: var(--grey-dark);
  color: var(--chalk);
}

.zone-muted .form-input,
.zone-muted .form-textarea {
  background-color: var(--chalk);
  border-color: var(--grey-light);
  color: var(--graphite);
}

/* Badges: zone-scoped */
.zone-dark .badge,
.zone-hero .badge,
.zone-managed-hero .badge,
.zone-core-hero .badge,
.zone-pricing-hero .badge {
  background-color: var(--torch);
  color: var(--graphite);
}

.zone-light .badge {
  background-color: var(--torch-deep);
  color: var(--chalk);
}

.zone-accent .badge {
  background-color: var(--torch);
  color: var(--graphite);
}

.zone-muted .badge {
  background-color: var(--torch-deep);
  color: var(--chalk);
}

/* ============================================================
   FOOTER — colour only (layout lives in containers.css)
   The footer is a ZONE inside the Framework (`<footer class="zone
   zone-dark">`), never a Fixture outside it — Build Lesson #1.
   It carries `.zone-dark`, so headings/links/text inherit from the
   zone-dark rules above. Only footer-specific colour deltas go here.
   ============================================================ */

.zone-dark .footer-heading {
  color: var(--chalk);
}

/* A8: `opacity` on text is banned however it is spelled — a token is still
   transparency. The whole footer ran at --opacity-heavy (.8), 181 elements
   across the 4 pages. Hover is the underline (elements.css) plus the torch
   colour; it no longer needs an opacity change to feel like a state. */
.zone-dark .footer-link {
  color: var(--chalk);
}

.zone-dark .footer-link:hover,
.zone-dark .footer-link:focus-visible {
  color: var(--torch-bright);
}

.zone-dark .footer-tagline,
.zone-dark .footer-privacy,
.zone-dark .footer-copyright {
  color: var(--chalk);
}

.zone-dark .footer-bottom {
  border-top: var(--border-thin) solid color-mix(in srgb, var(--chalk) 12%, transparent);
}

/* Wordmark in the footer brand column */
.zone-dark .footer-wordmark { color: var(--chalk); }
.zone-dark .footer-wordmark .tsx,
.zone-dark .footer-wordmark .deg { color: var(--torch-bright); }

/* "Sources & citations" trigger (explore pages only — the button is a
   portable element, its colour belongs to the zone) */
.zone-dark .footer-sources {
  color: var(--chalk);
}

.zone-dark .footer-sources:hover,
.zone-dark .footer-sources:focus-visible {
  color: var(--torch-bright);
}

/* ============================================================
   EXPLORE-MORE (businesses marquee) — colour only
   The strip is its own Slate band above the footer. Consolidated
   here from css/businesses-marquee.css 4 Aug 2026 (12 West allows
   six CSS files; that file was a seventh).
   ============================================================ */

.explore-more {
  background-color: var(--bg-muted);   /* Slate band + chalk text (Steve 30 Jul) */
  color: var(--text-on-dark);
  border-top: var(--border-thin) solid var(--grey-light);
}

.explore-more .explore-more-link,
.explore-more .explore-more-sep {
  color: var(--text-on-dark);
}

/* Title/separator dimmed via COLOUR, never opacity — opacity belongs to
   the scroll-reveal animation (0 -> 1); setting both kills the fade-in. */
.explore-more .explore-more-title {
  color: var(--chalk);
}

.explore-more .explore-more-sep {
  color: var(--chalk);
}

.explore-more .explore-more-link:hover {
  color: var(--brand-accent);
}

/* The old 640px block gave links a pill background+border on mobile
   only. Folding that breakpoint away made it unconditional, which put
   boxes round every link on desktop. Dropped 4 Aug — the strip is plain
   dot-separated text links at every width. */

.explore-more-trades {
  border-top: none;
}

/* ============================================================
   HOME PAGE — colour only (layout in containers.css, element
   structure in elements.css). Consolidated from css/home.css
   4 Aug 2026: 12 West allows six CSS files and home.css was a
   seventh. Deferred either way — this is a file move, not a
   change to what blocks rendering.
   ============================================================ */

/* --- Zone 3: proof / speedometer --- */
.proof-copy p { color: var(--slate); }
.speedo-eyebrow { color: var(--torch-deep); }
.speedo { color: var(--graphite); }

/* MODULE:START speedometer — colour half (travels with the instrument) */
.bg-danger   { stroke: var(--slate); }
.bg-good     { stroke: var(--torch); }
.bg-num      { fill: var(--slate); }
.bg-needle   { stroke: var(--torch); }
.bg-hub      { fill: var(--chalk); stroke: currentColor; }
.bg-hub2     { fill: var(--torch); }
.bg-window   { fill: color-mix(in srgb, var(--graphite) 6%, transparent); stroke: currentColor; }
.bg-digital  { fill: var(--torch-deep); }
.bg-cap      { fill: var(--slate); }
/* MODULE:END speedometer */

/* --- Zone 4: bearings dial --- */
.bearings-dial { color: var(--chalk); }

/* The bearings-dial instrument was REMOVED from Home (see index.html:190 —
   Steve, 2 Aug) and has not been rebuilt on any other page. Its CSS was
   dead: 21 rules matching no markup, including animation-delay:
   calc(var(--i) * .22s) where --i is set nowhere — an A3 undefined-token
   HARD FAIL found by independent inspection 4 Aug 2026.
   Deleted rather than kept "in case": dead CSS with an undefined token is
   a rule that reads as working. The instrument's spec survives in
   design-mockups/hero/bearings-dial.html if it is ever rebuilt. */

/* --- Zone 5: how it works --- */
.journey-num { color: var(--torch); }
.journey-title { color: var(--chalk); }
.journey-step p { color: var(--chalk); }
.journey-lane {
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 15%, transparent);
  background-color: color-mix(in srgb, var(--chalk) 2%, transparent);
}
.journey-lane-label { color: var(--torch); }
.journey-lane p { color: var(--chalk); }
.journey-lane-note { color: var(--slate); }
.journey-lane-verify {
  color: var(--slate);
  border-top: var(--border-thin) dotted color-mix(in srgb, var(--chalk) 15%, transparent);
}
.journey-closer {
  color: var(--chalk);
  border-left: var(--border-medium) solid var(--torch);
}
.zone-journey .quiet-link { color: var(--torch); }
.zone-journey .quiet-link:hover { color: var(--chalk); }

/* --- Zone 6: pricing teaser --- */
.pricing-teaser-card {
  border: var(--border-thin) solid var(--grey-lightest);
  background-color: var(--chalk);
}
.pricing-teaser-bearing { color: var(--slate); }
.pricing-teaser-name { color: var(--graphite); }
.pricing-teaser-name .dot { color: var(--torch); }
.pricing-teaser-price { color: var(--graphite); }
.pricing-teaser-price .mo { color: var(--torch); }
.pricing-teaser-line { color: var(--slate); }

/* --- Zone 7: CTA --- */
.zone-cta .cta-block p { color: var(--chalk); }

/* --- FAQ accordion --- */
.faq-item {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-light);
}
.faq-item summary::after { color: var(--torch); }
.faq-a { color: var(--grey-dark); }

/* --- Solari flap seam (decorative) --- */
.solari-board-flap::after {
  background-color: color-mix(in srgb, var(--graphite) 82%, var(--chalk));
}

/* --- Marquee inside .zone-marquee: the BAND comes from .zone-accent, so the
   component's own colour is neutralised here (it would otherwise double up) --- */
.zone-marquee .explore-more { background: transparent; border-top: none; }
.zone-marquee .explore-more-title,
.zone-marquee .explore-more-link { color: var(--chalk); }
.zone-marquee .explore-more-link:hover { color: var(--torch); }
.zone-marquee .explore-more-sep { color: var(--chalk); }

/* ============================================================
   PRICING PAGE — colour only (layout in containers.css, element
   structure in elements.css). Consolidated from css/pages/pricing.css
   4 Aug 2026.
   ============================================================ */

.tiers-head p {
  color: var(--slate);
}

/* Tier card element (page-specific card variant — travels with this page,
   not a candidate for elements.css since its internal structure is
   pricing-specific: badge, bearing label, price display) */
.tier-card {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-lightest);
  box-shadow: var(--shadow-sm);
}

.tier-card.featured {
  border-color: var(--torch);
  box-shadow: var(--shadow-lg);
}

.tier-card .tier-badge {
  background-color: var(--torch-deep);
  color: var(--chalk);
}

.tier-card .tier-bearing {
  color: var(--slate);
}

.tier-card h3 .dot {
  color: var(--torch);
}

.tier-card .tier-tagline {
  color: var(--slate);
}

.tier-card .tier-price-label {
  color: var(--slate);
}

.tier-card .tier-price {
  color: var(--graphite);
}

.tier-card .tier-price .tier-mo {
  color: var(--torch);
}

.tier-card .tier-sub {
  color: var(--slate);
}

.tier-card li {
  color: var(--graphite);
}

.tier-card li::before {
  border-right: 2px solid var(--torch);
  border-bottom: 2px solid var(--torch);
}

.tier-card li.muted {
  color: var(--slate);
}

.tier-card li.muted::before {
  border-color: var(--slate);
}

.tiers-fineprint a {
  color: var(--slate);
}

.tiers-fineprint a:hover {
  color: var(--torch-deep);
}

/* ---- Charter / Claim Your Spot (Zone 3 — Slate) ---- */
.charter-lead {
  color: var(--chalk);
}

.guarantee-item h3 {
  color: var(--chalk);
}

.guarantee-item h3::before {
  border-right: 2px solid var(--torch);
  border-bottom: 2px solid var(--torch);
}

.guarantee-item p {
  color: var(--chalk);
}

.charter-cta {
  border-top: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
}

/* A8: full-strength chalk, never dimmed. The slate band has only 5.19:1 of
   headroom, so ANY transparency on text here fails AA (65% = 3.21:1).
   Recession comes from size/weight, not from fading toward the background. */
.charter-final {
  color: var(--chalk);
}

/* The compare table reflows to stacked cards on narrow screens rather
   than scrolling sideways — Steve: "side scroll is annoying on small
   mobile phones". Removed `min-width: 640px` + `overflow-x: auto`.
   Uses a CONTAINER query, not a viewport breakpoint: the table reflows
   when ITS container is narrow, which is the correct trigger and keeps
   the site's single 1000px viewport breakpoint intact. */
.tablewrap {
  border: var(--border-thin) solid var(--grey-lightest);
}

.compare-table {
  background-color: var(--chalk);
}

.compare-table th, .compare-table td {
  border-bottom: var(--border-thin) solid var(--grey-lightest);
}

.compare-table thead th {
  color: var(--slate);
  background-color: var(--chalk);
}

.compare-table thead th.col-tier {
  color: var(--graphite);
}

.compare-table td.feat {
  color: var(--graphite);
}

.compare-table td.val {
  color: var(--graphite);
}

.compare-table td.val .dash {
  color: var(--slate);
}

/* Core column — intentionally empty (§9 OPEN ITEM 1, 00-FOUNDATION §11a).
   Every Core cell renders as a low-opacity em-dash. Do not fill with
   invented content — Steve supplies the real row values. */
.compare-table td.val.core-empty {
  color: var(--slate);
}

.compare-table tr.group td {
  background-color: var(--grey-lightest);
  color: var(--slate);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Shared section scaffolding (Zones 5–8) ---- */
.section-lead {
  color: var(--slate);
}

.zone-accent .section-lead {
  color: var(--chalk);
}

.faq-item {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-light);
}

.faq-item summary {
  color: var(--graphite);
}

.faq-item summary::after {
  color: var(--torch);
}

.faq-item .faq-a {
  color: var(--graphite);
}

.addon-item {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-lightest);
}

.addon-item p {
  color: var(--slate);
}

.addon-how {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-lightest);
}

.addon-how li {
  color: var(--graphite);
}

.addon-how li::before {
  border-right: 2px solid var(--torch);
  border-bottom: 2px solid var(--torch);
}

.addon-result {
  color: var(--graphite);
  border-top: var(--border-thin) solid var(--grey-lightest);
}

.addon-result strong {
  color: var(--torch-deep);
}

.fair-col li {
  color: var(--graphite);
}

.fair-covered li::before {
  color: var(--torch);
}

.fair-notcovered li::before {
  color: var(--slate);
}

.diff-item {
  background-color: color-mix(in srgb, var(--chalk) 6%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 15%, transparent);
}

.diff-item h3 {
  color: var(--chalk);
}

.diff-item p {
  color: var(--chalk);
}

@container (max-width: 640px) {
  /* One card per feature */
  .compare-table tbody tr:not(.group) {
    border-bottom: var(--border-thin) solid var(--grey-lightest);
  }

  .compare-table td {
    border-bottom: none;
  }

  .compare-table td.val::before {
    color: var(--slate);
  }
}

/* ============================================================
   EXPLORE MANAGED — colour only. Consolidated from
   css/pages/explore-managed.css 4 Aug 2026.
   ============================================================ */

.divide-frame {
  color: var(--chalk);
}

.divide-frame em {
  color: var(--torch);
}

.divide-col {
  background-color: color-mix(in srgb, var(--chalk) 5%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 14%, transparent);
}

.divide-col-current {
  border-color: var(--torch);
}

.divide-eyebrow {
  color: var(--chalk);
}

.divide-here {
  color: var(--torch);
}

.divide-h {
  color: var(--chalk);
}

.divide-col p {
  color: var(--chalk);
}

.divide-col strong {
  color: var(--chalk);
}

.divide-link {
  color: var(--torch);
}

.divide-link:hover {
  color: var(--chalk);
}

.handled-mark {
  border-right: 2px solid var(--torch);
  border-bottom: 2px solid var(--torch);
}

.handled-lead {
  color: var(--chalk);
}

.handled-list p {
  color: var(--chalk);
}

.handled-plus {
  background-color: color-mix(in srgb, var(--torch) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--torch) 30%, transparent);
}

.handled-plus p {
  color: var(--chalk);
}

.handled-promise {
  color: var(--slate);
}


.why p {
  color: var(--graphite);
}

.why-proof {
  color: var(--torch-deep);
}

.process-steps li {
  border-top: 2px solid color-mix(in srgb, var(--chalk) 18%, transparent);
}

.process-num {
  color: var(--torch);
}

.process-steps h3 {
  color: var(--chalk);
}

.process-steps p {
  color: var(--chalk);
}

.cn-intro {
  color: var(--slate);
}

.cn-eyebrow {
  color: var(--slate);
}

.cn-col {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-lightest);
}

.cn-col h3 {
  color: var(--graphite);
}

.cn-col p {
  color: var(--graphite);
}

.cn-contrast {
  color: var(--slate);
}

/* Inline citation trigger (superscript) */
.cite {
  background: none;
  border: none;
  color: var(--torch-deep);
}

.cite:hover sup {
  color: var(--torch);
}

.sources-trigger {
  background: none;
  border: none;
  color: var(--slate);
}

.sources-trigger:hover {
  color: var(--torch-deep);
}

.cs-sub {
  color: var(--chalk);
}

.faq-item {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-light);
}

.faq-item summary {
  color: var(--graphite);
}

.faq-item summary::after {
  color: var(--torch);
}

.faq-item .faq-a {
  color: var(--graphite);
}

.enquiry-sub {
  color: var(--chalk);
}

.field label {
  color: var(--chalk);
}

.field .opt {
  color: var(--slate);
}

.radio, .check {
  color: var(--chalk);
}

.radio input, .check input {
  accent-color: var(--torch);
}

.checks {
  background-color: color-mix(in srgb, var(--chalk) 4%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 12%, transparent);
}

.form-error {
  color: var(--torch);
}

.enquiry-secondary {
  border-top: 1px solid color-mix(in srgb, var(--chalk) 14%, transparent);
}

.enquiry-secondary a {
  color: var(--torch);
}

.enquiry-secondary a:hover {
  color: var(--chalk);
}

.enquiry-offramp {
  color: var(--slate);
}

.enquiry-offramp a {
  color: var(--torch);
}

.enquiry-offramp a:hover {
  color: var(--chalk);
}

.confirm-level {
  color: var(--chalk);
}

/* small literal Level — visible hairline instrument (NOT ghost), bubble
   already centred (the reading held). Same fine-line family, higher
   contrast than the hero ghost. */
.confirm-level .level-frame, .confirm-level .level-vial, .confirm-level .level-edge, .confirm-level .level-grad {
  stroke: currentColor;
  fill: none;
}

.confirm-level .level-bubble {
  stroke: none;
  fill: var(--torch);
}

.confirm-caption {
  color: var(--torch);
}

.confirm-line {
  color: var(--chalk);
}

.confirm-secondary a {
  color: var(--torch);
}

.confirm-secondary a:hover {
  color: var(--chalk);
}

/* ============================================================
   SOURCES & CITATIONS MODAL (shared component)
   [hidden]/dialog:not([open]) no-flash guard lives in critical.
   ============================================================ */
.sources-modal {
  border: var(--border-thin) solid var(--grey-light);
  background-color: var(--chalk);
  color: var(--graphite);
  box-shadow: var(--shadow-lg);
}

.sources-modal::backdrop {
  background: color-mix(in srgb, var(--graphite) 55%, transparent);
}

.sources-modal-head {
  border-bottom: var(--border-thin) solid var(--grey-lightest);
}

.sources-modal-close {
  background: none;
  border: none;
  color: var(--slate);
}

.sources-modal-close:hover {
  color: var(--torch-deep);
}

.sources-list li {
  border-left: 2px solid transparent;
}

/* Brief highlight when a superscript opens the modal at its entry. */
.sources-list li.is-cited {
  border-left-color: var(--torch);
  background-color: color-mix(in srgb, var(--torch) 6%, transparent);
}

/* The inline superscript citation button — make it read as interactive. */
.cite {
  border: 0;
  background: none;
  color: var(--torch-deep);
}

.source-claim {
  color: var(--graphite);
}

.source-ref {
  color: var(--slate);
}

.source-ref a {
  color: var(--torch-deep);
}

/* ============================================================
   EXPLORE CORE — colour only. Consolidated from
   css/pages/explore-core.css 4 Aug 2026.
   ============================================================ */

/* MODULE:START core-agent-anchor [motion] */
.core-anchor-live::before {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--torch) 45%, transparent);
}

.core-anchor-sweep {
  background: conic-gradient(from 0deg, transparent 0 82%, color-mix(in srgb, var(--torch) 17%, transparent) 96%, var(--torch) 100%);
}

.core-anchor-transfer {
  background: linear-gradient(90deg, transparent, var(--torch), transparent);
}

.zone-dark .core-eyebrow, .zone-accent .core-eyebrow {
  color: var(--torch);
}

.zone-light .core-eyebrow {
  color: var(--torch-deep);
}

.step-card {
  background: color-mix(in srgb, var(--chalk) 5%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 14%, transparent);
}

.step-num {
  color: var(--torch);
}

.step-card h3 {
  color: var(--chalk);
}

.step-card p {
  color: var(--chalk);
}

.included-list li {
  color: var(--graphite);
}

.included-list li::before {
  border-right: 2px solid var(--torch);
  border-bottom: 2px solid var(--torch);
}


/* "What you need to start" — a DARK panel (right column of Zone 4), a
   designed counterpart to the light included-list. Its own Graphite surface
   makes it read as a distinct, intentional aside, not a plopped-on box. */
.need-panel {
  background: var(--graphite);
  color: var(--chalk);
  border-top: var(--border-thick) solid var(--torch);
  box-shadow: var(--shadow-md);
}

/* .need-panel is a GRAPHITE card that can sit in a light zone, so the
   zone-scoped rules below never match it. Its ground is always dark:
   raw --torch is 4.32:1 there, --torch-bright is 5.50:1 (gate A6b). */
.need-panel-eyebrow {
  color: var(--torch-bright);
}

.need-panel-title {
  color: var(--chalk);
}

.need-panel-lead {
  color: var(--chalk);
}

.need-panel-link {
  color: var(--chalk);
  background: var(--torch-deep);
  border: var(--border-medium) solid var(--torch-deep);
}

.need-panel-link:hover {
  background: var(--torch-deepest);
  border-color: var(--torch-deepest);
}


.guarantee h2 {
  color: var(--chalk);
}

.guarantee h2 .t {
  color: var(--torch);
}

.guarantee p {
  color: var(--chalk);
}

/* Quiet terms line under the guarantee — honest "terms apply" without
   turning the sell into a contract (§core-guarantee-terms). Selector is
   `.guarantee p.guarantee-terms` so it beats `.guarantee p` on specificity
   without an override flag. */
.guarantee p.guarantee-terms {
  color: var(--chalk);
}

.guarantee-terms a {
  color: var(--chalk);
}

.guarantee-terms a:hover {
  color: var(--chalk);
}

/* ============================================================
   ZONE 6 — Prefer a more personal service? (Chalk). Reframed 3 Aug:
   a soft, centred invitation to talk to a designer / explore Managed,
   not a hard Core-vs-Managed table.
   ============================================================ */
.personal-lead {
  color: var(--slate);
}

/* .cta-core is chalk text on a torch-deep fill. On a .zone-light zone the
   shared "zone-light a { color: torch-deep }" rule (zones.css) would win by
   source order and paint the label torch-on-torch (invisible). This deferred
   rule loads AFTER zones.css at equal specificity → the button's own colour
   wins in every zone. (Caught at render, 3 Aug — the "Get in touch" button
   went blank on the Chalk personal-service zone.)
   NOTE (not a duplicate-CSS violation): critical's `.cta-core{color:chalk}`
   exists for correct FIRST PAINT of the above-the-fold hero button; THIS
   `a.cta-core` is a specificity escalation to beat a zone `a` rule below the
   fold. Different selector, different purpose — do not "dedupe" by deleting
   either, or the hero flashes (remove critical) or the light-zone button goes
   invisible (remove this). */
a.cta-core {
  color: var(--chalk);
}

a.cta-core:hover {
  color: var(--chalk);
}

/* A quiet secondary link for the light (Chalk) zone — pairs with the
   primary .cta-core (defined in critical). */
.cta-quiet-dark {
  color: var(--torch-deep);
}

.cta-quiet-dark:hover {
  color: var(--graphite);
}

.cmp th, .cmp td {
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--chalk) 14%, transparent);
}

/* Row-label column (the "Compared" dimension) */
.cmp tbody th[scope="row"] {
  color: var(--chalk);
}

/* Column headers */
.cmp thead th {
  color: var(--chalk);
  border-bottom: var(--border-medium) solid color-mix(in srgb, var(--chalk) 28%, transparent);
}

.cmp .cmp-rowlabel-h {
  color: var(--chalk);
}

.cmp td {
  color: var(--chalk);
}

/* The Core column — a GRAPHITE panel so the eye lands on the answer (Steve,
   5 Aug). Replaces a 7% torch tint on the slate band. Chalk on Graphite is
   15.4:1 — the spec's "reversed section" pairing — and it fixes the header,
   which was Torch on Slate at 1.46:1, the palette's worst pairing. */
.cmp .cmp-core {
  color: var(--chalk);
  background: var(--graphite);
}

/* "Core" — the accent moment in the panel. --torch-bright is the only
   orange that clears AA on graphite (5.50); raw --torch is 4.32 and
   --torch-deep is 2.82, the light-ground token (gate A6b). */
.cmp thead th.cmp-core {
  color: var(--torch-bright);
}

/* The table sits on the SLATE band, where Torch is 1.46:1 — the palette's
   worst pairing, and no orange is legible on it (ruled 5 Aug). Chalk is
   5.19:1. The Core column's own citations are handled separately: that
   column is a graphite panel, so they take --torch-bright. */
.cmp sup a {
  color: var(--chalk);
}

/* Hover must also clear AA. On the slate band --torch-bright is only
   1.86:1, so the hover cue is the underline, not a colour change.
   (A contrast audit does not test :hover — this was measured by hand.) */
.cmp sup a:hover {
  text-decoration: underline;
}

.who-col {
  border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 16%, transparent);
  background: color-mix(in srgb, var(--chalk) 4%, transparent);
}

/* The Core card is a GRAPHITE panel, matching the compare table's Core
   column on this page (Steve, 5 Aug). Was a 7% torch tint on slate — the
   same treatment the table moved away from, so the two disagreed. */
.who-col-core {
  border-color: var(--graphite);
  background: var(--graphite);
}

.who-col h3 {
  color: var(--chalk);
}

.who-col li {
  color: var(--chalk);
}

.who-col li::before {
  color: var(--torch);
}

/* Inside the Core card's graphite panel, raw --torch is 4.32:1 — the spec
   allows it for display >=24px only, and these dashes are small. */
.who-col-core li::before {
  color: var(--torch-bright);
}

.who-verdict {
  color: var(--chalk);
}

.who-col-core .who-verdict {
  color: var(--chalk);
}

/* --- Plain-English summary --- */
.cmp-summary {
  color: var(--chalk);
}

.faq-item {
  background-color: var(--chalk);
  border: var(--border-thin) solid var(--grey-light);
}

.faq-item summary {
  color: var(--graphite);
}

.faq-item summary::after {
  color: var(--torch);
}

.faq-item .faq-a {
  color: var(--graphite);
}

.close-zone h2 {
  color: var(--chalk);
}

.close-reassure {
  color: var(--slate);
}

/* MODULE:START sources-modal */
.sources-modal {
  background: color-mix(in srgb, var(--graphite) 60%, transparent);
}

.sources-modal-dialog {
  background: var(--chalk);
  color: var(--graphite);
  border: var(--border-thin) solid var(--grey-light);
  box-shadow: var(--shadow-lg);
}

.sources-modal-head {
  border-bottom: var(--border-thin) solid var(--grey-lightest);
}

.sources-modal-title {
  color: var(--graphite);
}

.sources-modal-close {
  background: transparent;
  border: var(--border-thin) solid var(--grey-light);
  color: var(--graphite);
}

.sources-modal-close:hover {
  background: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.sources-modal-intro {
  color: var(--slate);
}

.sources-modal-item {
  border: var(--border-thin) solid var(--grey-lightest);
}

.sources-modal-item.is-highlight {
  border-color: var(--torch);
  background: color-mix(in srgb, var(--torch) 6%, transparent);
}

.sources-modal-claim {
  color: var(--graphite);
}

.sources-modal-marker {
  color: var(--torch-deep);
}

.sources-modal-meta {
  color: var(--slate);
}

.sources-modal-meta a {
  color: var(--torch-deep);
}

/* MODULE:START need-modal */
.need-modal {
  background: color-mix(in srgb, var(--graphite) 60%, transparent);
}

.need-modal-dialog {
  background: var(--chalk);
  color: var(--graphite);
  border: var(--border-thin) solid var(--grey-light);
  box-shadow: var(--shadow-lg);
}

.need-modal-head {
  border-bottom: var(--border-thin) solid var(--grey-lightest);
}

.need-modal-title {
  color: var(--graphite);
}

.need-modal-close {
  background: transparent;
  border: var(--border-thin) solid var(--grey-light);
  color: var(--graphite);
}

.need-modal-close:hover {
  background: var(--torch-deep);
  color: var(--chalk);
  border-color: var(--torch-deep);
}

.need-modal-intro, .need-modal-foot {
  color: var(--slate);
}

.need-modal-foot {
  border-top: var(--border-thin) solid var(--grey-lightest);
}

.need-group-title {
  color: var(--graphite);
}

.need-group-tag {
  background: var(--grey-lightest);
  color: var(--slate);
}

/* the "required" tag reads as the one thing that matters */
.need-group-tag-req {
  background: var(--torch-deep);
  color: var(--chalk);
}

.need-list li {
  color: var(--slate);
}

.need-list li::before {
  color: var(--torch);
}

.need-list li strong {
  color: var(--graphite);
}

@keyframes core-live {
  70%, 100% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--torch) 0%, transparent);
  }
}

@container (max-width: 640px) {
  .cmp tr {
    border: var(--border-thin) solid color-mix(in srgb, var(--chalk) 16%, transparent);
  }

  .cmp tbody th[scope="row"] {
    background: color-mix(in srgb, var(--chalk) 6%, transparent);
    color: var(--chalk);
    border-bottom: var(--border-thin) solid color-mix(in srgb, var(--chalk) 14%, transparent);
  }

  .cmp td {
    border-bottom: var(--border-thin) solid color-mix(in srgb, var(--chalk) 10%, transparent);
  }

  /* prefix each answer with its column name */
  .cmp td::before {
    color: var(--chalk);
  }

  /* Sits on the Core column's graphite panel — Torch is 4.3:1 there, which
     the spec permits for display ≥24px only, and this is 13px. */
  .cmp td.cmp-core::before {
    color: var(--chalk);
  }

  .cmp tr td:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   GROUND-CORRECT TEXT COLOUR — RULED Steve, 5 Aug 2026
   BLUEPRINTS/CONTRAST-FIX-PLAN.md · CONTRAST-RULING-NEEDED.md

   --torch and --slate each served as the accent/muted value for BOTH
   light and dark grounds. Impossible: the two need opposite luminance,
   so no single value clears 4.5:1 on both. Lighthouse read Accessibility
   95 with contrast as the only failure.

   119 of 136 usages were UNQUALIFIED (e.g. `.journey-lane-note { color:
   var(--slate) }`), so they inherited into whatever zone they landed in —
   which is why one class measured 5.19 on one page and 2.96 on another.
   The ground must decide the colour. That is what this block does.

   LAST in the LAST-loaded colour file, deliberately: equal specificity,
   so load order settles it (Build Lesson — learned three times, 4 Aug).
   ============================================================ */

/* ---- DARK grounds: --torch 4.32 ✗ → --torch-bright 5.50 ✓ ---- */
.zone-dark .section-label,
.zone-hero .section-label,
.zone-core-hero .section-label,
.zone-managed-hero .section-label,
.zone-pricing-hero .section-label,
.zone-dark .hero-eyebrow,
.zone-hero .hero-eyebrow,
.zone-core-hero .hero-eyebrow,
.zone-managed-hero .hero-eyebrow,
.zone-pricing-hero .hero-eyebrow,
.zone-dark .bc-deg,
.zone-hero .bc-deg,
.zone-core-hero .bc-deg,
.zone-managed-hero .bc-deg,
.zone-pricing-hero .bc-deg,
.zone-dark .bc-eyebrow,
.zone-hero .bc-eyebrow,
.zone-core-hero .bc-eyebrow,
.zone-managed-hero .bc-eyebrow,
.zone-pricing-hero .bc-eyebrow,
.zone-dark .core-eyebrow,
.zone-hero .core-eyebrow,
.zone-core-hero .core-eyebrow,
.zone-managed-hero .core-eyebrow,
.zone-pricing-hero .core-eyebrow,
.zone-dark .need-panel-eyebrow,
.zone-hero .need-panel-eyebrow,
.zone-core-hero .need-panel-eyebrow,
.zone-managed-hero .need-panel-eyebrow,
.zone-pricing-hero .need-panel-eyebrow,
.zone-dark .journey-num,
.zone-hero .journey-num,
.zone-dark .quiet-link,
.zone-hero .quiet-link,
.zone-dark .cta-quiet,
.zone-hero .cta-quiet,
.zone-core-hero .cta-quiet,
.zone-managed-hero .cta-quiet,
.zone-pricing-hero .cta-quiet,
.zone-dark .hero-quiet,
.zone-hero .hero-quiet,
.zone-core-hero .hero-quiet,
.zone-managed-hero .hero-quiet,
.zone-pricing-hero .hero-quiet,
.zone-dark .st-ready,
.zone-hero .st-ready,
.zone-core-hero .st-ready,
.zone-dark .deg,
.zone-hero .deg,
.zone-core-hero .deg,
.zone-managed-hero .deg,
.zone-pricing-hero .deg,
.zone-dark .tsx,
.zone-hero .tsx,
.zone-core-hero .tsx,
.zone-managed-hero .tsx,
.zone-pricing-hero .tsx,
.zone-dark .dot,
.zone-hero .dot,
.zone-dark h1 .t,
.zone-hero h1 .t,
.zone-core-hero h1 .t,
.zone-managed-hero h1 .t,
.zone-pricing-hero h1 .t,
.zone-dark .journey-lane-label,
.zone-hero .journey-lane-label,
.zone-dark .bearing-fig,
.zone-hero .bearing-fig,
.zone-core-hero .bearing-fig,
.zone-pricing-hero .bearing-fig,
.zone-dark .core-anchor-governed,
.zone-hero .core-anchor-governed,
.zone-core-hero .core-anchor-governed {
  color: var(--torch-bright);
}

/* ---- DARK grounds: --slate 2.96 ✗ → --slate-light 6.37 ✓ ----
   Fails at EVERY opacity including 100%, so raising opacity cannot fix it. */
.zone-dark .bc-sep,
.zone-hero .bc-sep,
.zone-core-hero .bc-sep,
.zone-managed-hero .bc-sep,
.zone-pricing-hero .bc-sep,
.zone-dark .ll,
.zone-hero .ll,
.zone-core-hero .ll,
.zone-managed-hero .ll,
.zone-pricing-hero .ll,
.zone-dark .hero-note,
.zone-hero .hero-note,
.zone-core-hero .hero-note,
.zone-managed-hero .hero-note,
.zone-pricing-hero .hero-note,
.zone-dark .close-reassure,
.zone-hero .close-reassure,
.zone-core-hero .close-reassure,
.zone-dark .enquiry-offramp,
.zone-hero .enquiry-offramp,
.zone-managed-hero .enquiry-offramp,
.zone-dark .handled-promise,
.zone-hero .handled-promise,
.zone-managed-hero .handled-promise,
.zone-dark .opt,
.zone-hero .opt,
.zone-managed-hero .opt,
.zone-dark .st-label,
.zone-hero .st-label,
.zone-core-hero .st-label,
.zone-dark .journey-lane-note,
.zone-hero .journey-lane-note,
.zone-dark .journey-lane-verify,
.zone-hero .journey-lane-verify,
.zone-dark .tier-desc,
.zone-hero .tier-desc,
.zone-dark .core-anchor-live,
.zone-hero .core-anchor-live,
.zone-core-hero .core-anchor-live,
.zone-dark .panel-label,
.zone-hero .panel-label,
.zone-dark .ratio-strip,
.zone-hero .ratio-strip,
.zone-dark .core-anchor-instrument-head,
.zone-hero .core-anchor-instrument-head,
.zone-core-hero .core-anchor-instrument-head,
.zone-dark .core-anchor-instrument-foot,
.zone-hero .core-anchor-instrument-foot,
.zone-core-hero .core-anchor-instrument-foot {
  color: var(--slate-light);
}

/* Unclassed children (a, em, span, small) inheriting raw --torch from a
   classed parent on a dark ground. Targets the parent, so the child
   inherits a passing colour rather than needing a rule of its own. */
.zone-dark .core-anchor-agent,
.zone-hero .core-anchor-agent,
.zone-core-hero .core-anchor-agent,
.zone-dark .enquiry-secondary a,
.zone-hero .enquiry-secondary a,
.zone-managed-hero .enquiry-secondary a,
.zone-dark .enquiry-offramp a,
.zone-hero .enquiry-offramp a,
.zone-managed-hero .enquiry-offramp a,
.zone-dark .cite,
.zone-hero .cite,
.zone-core-hero .cite,
.zone-managed-hero .cite {
  color: var(--torch-bright);
}

/* Slate band — unclassed children of classed parents. */
.zone-accent .divide-frame em {
  color: var(--chalk);
}

/* The Core column is a GRAPHITE panel, not slate — its citation marks take
   the dark-ground orange (5.50) and stay readable as links. */
.zone-accent .cmp-core a,
.zone-accent .cmp-core sup {
  color: var(--torch-bright);
}

/* ---- SLATE band: --torch 1.46 ✗ → --chalk 5.19 ✓ ----
   Torch is never legible on Slate — too close in luminance for any orange.
   Usage rule, no token. */
.zone-accent .section-label,
.zone-accent .core-eyebrow,
.zone-accent .process-num,
.zone-accent .step-num,
.zone-accent .divide-link,
.zone-accent .divide-here,
.zone-accent .journey-lane-label,
.zone-accent .core-anchor-governed,
.zone-accent .deg,
.zone-accent .dot,
.zone-accent .tsx,
.zone-accent .mo,
.zone-accent .tier-mo,
.zone-accent .bearing-fig {
  color: var(--chalk);
}

/* `.zone-accent .cmp-core` was listed here TWICE (a duplicate from the
   5 Aug contrast pass) forcing the whole column to chalk. The Core column
   is now its own graphite panel with its own rules — the cells take chalk
   from `.cmp .cmp-core`, the header and citations take --torch-bright. */

/* ---- LIGHT grounds: --torch 3.56 ✗ → --torch-deep 5.44 ✓ ----
   --torch-deep already existed for exactly this ("text & CTA fill").
   These elements simply never used it. */
.zone-light .mo,
.zone-light .tier-mo,
.zone-light .tsx,
.zone-light .deg,
.zone-light .dot,
.zone-light .bearing-fig,
.zone-light .journey-lane-label,
.zone-light .divide-link,
.zone-light .divide-here,
.zone-light .step-num,
.zone-light .cmp-core,
.zone-light .core-anchor-governed,
.zone-light .section-label,
.zone-light .active,
.zone-muted .mo,
.zone-muted .tsx,
.zone-muted .deg,
.zone-muted .section-label,
.zone-light .tier-card .tier-price .tier-mo,
.zone-light .tiers-fineprint a,
.zone-light .addon-item a {
  color: var(--torch-deep);
}

/* Light grounds: raw --slate is fine as muted text (5.19:1) EXCEPT where it
   sits on a tinted panel that lifts the background. These land under 4.5. */
.zone-light .proof-copy p,
.zone-light .tiers-head p,
.zone-light .compare-table td,
.zone-light .addon-item p {
  color: var(--text-on-light);
}

/* ---- FIXTURE: .nav sits OUTSIDE the zone system by design (Frame layer),
   so it cannot inherit a zone's colour. It sits on Graphite. ---- */
.nav .brand .tsx,
.nav .brand .deg,
.nav .links a:hover,
.nav .links a.active {
  color: var(--torch-bright);
}

/* ============================================================
   ARTICLE — colour only (B1 PART 4 Zone 2). Structure in elements.css/
   containers.css. Zone-scoped: article prose only ever sits on Zone Light.
   ============================================================ */

.zone-light .article-lede { color: var(--text-muted-light); }

.zone-light .article-pullquote {
  border-left-color: var(--torch);
  color: var(--text-on-light);
}

/* ============================================================
   SHARE LINKS — tooltip surface (Zone 2, on Zone Light). Backgrounds
   and borders may use colour-mix() freely (A8 is text-only).
   ============================================================ */

.zone-light .share-links-tooltip {
  background-color: var(--graphite);
  color: var(--chalk);
}

.zone-light .share-links-label {
  color: var(--text-muted-light);
}

/* https://www.sitethreesixty.com */