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

/* ============================================================
   zones.css — Zone colour schemes + zone-scoped element overrides
   Colour only. No layout. Zone 1's scheme lives in the critical
   files, never here (Build Lesson #3).

   Every colour in the delivered design's elements.css was moved
   into this file: an Element must never paint itself, because the
   same Element has to survive being dropped into a different Zone.
   ============================================================ */

/* --- The four schemes --- */

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

.zone-muted {
  color: var(--text-on-light);
  background-color: var(--bg-muted);
}

.zone-dark {
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

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

/* --- Zone rhythm ---
   padding-block is the Zone layer's own property, and these two Zones carry
   more air than the standard band. Kept here rather than in a critical file
   because both sit well below the fold; the Zone base itself is in critical.
   Judged call — zones.css is otherwise colour-only. Noted in the declaration. */

.final-cta-zone {
  padding-block: var(--zone-pad-final);
}

/* pricing.html only: this Zone also carries .has-watermark, and it is
   immediately followed by .footer-zone at the same dark scheme with zero
   inter-zone gap (by design — zones are adjacent bands). The watermark's own
   `inset-block-end: -.16em` (elements.css) intentionally hangs its glyphs
   below the Zone's padding-box edge for .has-watermark's overflow:hidden to
   crop — but the shared --zone-pad-final (clamp 5rem–10rem) only leaves ~78px
   of visible glyph and no dark margin below it before the footer starts, so
   the crop line sits flush on the Zone 9/10 seam with no colour break either
   side. Reads as the watermark bleeding into the footer; it isn't — measured,
   the two Zones never overlap (0px gap at every width, boundary always
   exact). Extra bottom clearance only for this combination, so
   booking.html/our-work.html's plain .final-cta-zone (no watermark) is
   untouched. --space-lg-xl is the existing scale step that clears the
   crop from the seam without a second Zone-1-style custom pad token. */
.final-cta-zone.has-watermark {
  padding-block-end: calc(var(--zone-pad-final) + var(--space-lg-xl));
}

.hosting-final-zone {
  padding-block: var(--zone-pad-final);
}

.footer-zone {
  padding-block: var(--space-xl-2xl);
}

/* --- Portable elements, per scheme --- */

.zone-light .section-label,
.zone-muted .section-label {
  color: var(--brand-primary);
}

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

/* Owner, 17 Aug 2026: the eyebrows in the degrees (pricing) and scope (five
   pages) sections are not orange — they take the muted meta colour that already
   sits beside them in the card tops. "How 90 Degrees works" keeps its orange. */
.zone-dark .degrees-container-grid .section-label,
.zone-dark .scope-heading .section-label {
  color: var(--text-muted-dark);
}

/* The dot flips back to the brighter accent on dark ground. Descendant
   selector, so .signal-dot is not "defined" in two layers (B3). */
.zone-dark .signal-dot {
  color: var(--brand-accent);
}

.zone-light .btn-primary,
.zone-muted .btn-primary,
.zone-dark .btn-primary {
  background-color: var(--bg-accent);
  color: var(--white);
}

.zone-light .btn-secondary,
.zone-muted .btn-secondary {
  border-color: var(--text-on-light);
}

.zone-dark .btn-secondary {
  border-color: var(--text-muted-dark);
}

.zone-light .text-link,
.zone-muted .text-link {
  color: var(--brand-primary);
}

.zone-dark .text-link {
  color: var(--brand-accent);
}

/* --- Muted body copy, per ground ---
   Two rules rather than one because the muted text token is ground-bound:
   --text-muted-light fails on dark, --text-muted-dark fails on light. */

.zone-light .body-lg-system,
.zone-muted .body-lg-system,
.zone-light .trade-heading > p:last-child,
.zone-light .process-copy > p:not(.section-label),
.zone-light .examples-heading > p:last-child,
.zone-muted .trade-heading > p:last-child,
.zone-muted .about-container-grid > div:not(.about-kicker-frame) > p:not(.section-label),
.zone-light .faq-container-stack details p,
.zone-light .process-list p,
.zone-muted .trade-list article p {
  color: var(--text-muted-light);
}

.zone-dark .body-lg-system,
.zone-dark .degrees-heading > p:last-child,
.zone-dark .degrees-card > div > p:not(.section-label),
.zone-dark .scope-heading > p:last-child,
.zone-dark .final-cta-grid > div:last-child > p {
  color: var(--text-muted-dark);
}

/* --- Zone: degrees (dark) --- */

.zone-dark .degrees-card {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .degrees-card-primary {
  border-color: var(--brand-accent);
  /* transparent, because the design's `background` shorthand reset the base
     card's wash here rather than layering the gradient over it. */
  background-color: transparent;
  background-image: linear-gradient(160deg,
                      color-mix(in srgb, var(--brand-accent) 10%, transparent),
                      color-mix(in srgb, var(--bg-light) 2%, transparent) 62%);
}

.zone-dark .degrees-card-top {
  color: var(--text-muted-dark);
}

.zone-dark .degrees-card > .display-lg-main {
  color: var(--text-on-dark);
}

.zone-dark .degrees-card-primary .display-lg-main {
  color: var(--brand-accent);
}

.zone-dark .degrees-card-bottom {
  border-top-color: var(--grey-darkest);
}

.zone-dark .degrees-card-bottom p span {
  color: var(--text-muted-dark);
}

/* --- Zone: trades (muted) --- */

.zone-muted .trade-list {
  border-bottom-color: var(--grey-light);
}

.zone-muted .trade-list article {
  border-top-color: var(--grey-light);
}

.zone-muted .trade-list article > span {
  color: var(--brand-primary);
}

/* --- Zone: process (light) --- */

.zone-light .process-list li {
  border-top-color: var(--grey-light);
}

.zone-light .process-list li > span {
  color: var(--brand-primary);
}

.zone-light .process-facts-panel {
  border-color: var(--grey-darkest);
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.zone-light .process-facts-head {
  border-bottom-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

.zone-light .process-facts-head strong {
  color: var(--brand-accent);
}

.zone-light .process-facts-row {
  border-bottom-color: var(--grey-darkest);
}

.zone-light .process-facts-row > span {
  color: var(--brand-accent);
}

.zone-light .process-facts-row small {
  color: var(--text-muted-dark);
}

.zone-light .process-facts-row i {
  border-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

.zone-light .process-facts-row.is-approved i {
  border-color: color-mix(in srgb, var(--brand-accent) 42%, transparent);
  color: var(--brand-accent);
}

.zone-light .process-facts-output {
  color: var(--text-muted-dark);
}

.zone-light .process-facts-output strong {
  color: var(--text-on-dark);
}

/* --- Zone: scope (dark) --- */

.zone-dark .scope-count {
  border-bottom-color: var(--grey-darkest);
}

.zone-dark .scope-count strong {
  color: var(--brand-accent);
}

.zone-dark .scope-count span,
.zone-dark .scope-note {
  color: var(--text-muted-dark);
}

.zone-dark .scope-pages {
  border-top-color: var(--grey-darkest);
}

.zone-dark .scope-pages li {
  border-right-color: var(--grey-darkest);
  border-bottom-color: var(--grey-darkest);
}

.zone-dark .scope-pages li span {
  color: var(--brand-accent);
}

/* --- Zone: examples (light) --- */

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

.zone-light .examples-window {
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.zone-light .examples-window > span {
  color: var(--brand-accent);
}

.zone-light .examples-window > div {
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.zone-light .examples-window small {
  color: var(--text-muted-light);
}

.zone-light .examples-window i {
  background-color: var(--bg-accent);
}

.zone-light .examples-window-managed > div {
  background-color: var(--bg-muted);
}

.zone-light .examples-window-growth > div {
  color: var(--text-on-dark);
  background-color: var(--brand-secondary);
}

/* --- Zone: about (muted) ---
   The ghost wordmark is painted with composited solids, not alpha over its
   ground: identical rendered colour, no transparency on text (A8). */

.zone-muted .about-kicker {
  color: var(--grey-lightest);
}

.zone-muted .about-kicker .signal-dot {
  color: var(--brand-accent-muted);
}

/* --- Zone: questions (light) --- */

.zone-light .faq-container-stack summary span {
  color: var(--brand-primary);
}

/* --- Zone: footer (dark) ---
   :not() carries .footer-label so the label wins on source order rather than
   by force, which the delivered design used here and the rules forbid. */

.zone-dark .footer-grid p:not(.wordmark, .footer-label),
.zone-dark .footer-grid small,
.zone-dark .footer-attribution {
  color: var(--text-muted-dark);
}

.zone-dark .footer-label {
  color: var(--brand-accent);
}

.zone-dark .footer-colophon {
  border-top-color: var(--grey-darkest);
}

/* ============================================================
   Hosting page zones
   ============================================================ */

.zone-light .hosting-split-container-grid > div > p:not(.section-label, .body-lg-system),
.zone-light .hosting-growth-container-grid p:not(.section-label, .hosting-emphasis),
.zone-light .hosting-ssl-container-grid p:not(.section-label, .body-lg-system, .hosting-emphasis),
.zone-muted .hosting-resilience-container-grid p:not(.section-label, .body-lg-system),
.zone-light .hosting-managed-container-grid p:not(.section-label, .body-lg-system, .hosting-emphasis) {
  color: var(--text-muted-light);
}

.zone-dark .hosting-statement-container-grid p:not(.section-label, .hosting-emphasis),
.zone-dark .hosting-modern-container-grid p:not(.section-label, .hosting-closing-line),
.zone-dark .hosting-final-container-grid p:not(.section-label, .hosting-emphasis) {
  color: var(--text-muted-dark);
}

.zone-light .hosting-no-list,
.zone-light .hosting-check-list,
.zone-light .hosting-closing-line {
  border-color: var(--grey-light);
}

.zone-dark .hosting-check-list,
.zone-dark .hosting-closing-line {
  border-color: var(--grey-darkest);
}

.zone-dark .hosting-closing-line,
.zone-dark .hosting-emphasis {
  color: var(--text-on-dark);
}

.zone-light .hosting-no-list li span {
  color: var(--brand-primary);
}

.zone-light .hosting-check-list li::before,
.zone-dark .hosting-check-list li::before {
  background-color: var(--brand-accent);
}

/* --- Zone: security features (muted) --- */

.zone-muted .hosting-feature-grid article {
  border-color: var(--grey-light);
  background-color: color-mix(in srgb, var(--white) 38%, transparent);
}

.zone-muted .hosting-feature-grid article span {
  color: var(--brand-primary);
}

/* --- Zone: capacity (light) --- */

.zone-light .hosting-growth-track {
  color: var(--text-muted-light);
}

.zone-light .hosting-growth-track i {
  background-color: var(--grey-light);
}

.zone-light .hosting-growth-track i::before,
.zone-light .hosting-growth-track i::after {
  background-color: var(--brand-accent);
}

/* --- Zone: zero maintenance (dark) --- */

.zone-dark .hosting-zero-mark {
  color: var(--brand-accent);
}

/* --- Zone: SSL (light) --- */

.zone-light .hosting-ssl-lock {
  border-color: var(--grey-darkest);
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.zone-light .hosting-ssl-lock span {
  color: var(--text-muted-dark);
}

.zone-light .hosting-ssl-lock i {
  border-color: var(--brand-accent);
}

.zone-light .hosting-inline-list {
  border-top-color: var(--grey-light);
  border-left-color: var(--grey-light);
}

.zone-light .hosting-inline-list li {
  border-right-color: var(--grey-light);
  border-bottom-color: var(--grey-light);
}

/* --- Zone: resilience (muted) --- */

.zone-muted .hosting-resilience-visual {
  border-color: var(--grey-light);
  background-image: radial-gradient(circle,
                      color-mix(in srgb, var(--brand-accent) 11%, transparent),
                      transparent 54%);
}

.zone-muted .hosting-resilience-visual span {
  border-color: var(--grey-light);
}

.zone-muted .hosting-resilience-visual span:nth-child(3) {
  border-color: var(--brand-accent);
}

.zone-muted .hosting-resilience-visual strong {
  color: var(--text-on-light);
}

/* --- Zone: modern delivery (dark) --- */

.zone-dark .hosting-modern-feature-grid article {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .hosting-modern-feature-grid article span {
  color: var(--brand-accent);
}

/* --- Zone: managed (light) --- */

.zone-light .hosting-managed-lines {
  border-bottom-color: var(--grey-light);
}

.zone-light .hosting-managed-lines li {
  border-top-color: var(--grey-light);
}

.zone-light .hosting-managed-lines li span {
  color: var(--brand-primary);
}

/* --- Zone: included (dark) --- */

.zone-dark .hosting-included-degrees {
  border-bottom-color: var(--grey-darkest);
}

.zone-dark .hosting-included-degrees span {
  border-right-color: var(--grey-darkest);
  color: var(--text-on-dark);
}


/* ============================================================
   Comparison page — zone colour
   ============================================================ */

.zone-dark .comparison-table-container-grid > div:first-child > p:last-child, .zone-dark .comparison-note {
  color: var(--text-muted-dark);
}

.zone-dark .comparison-table th, .zone-dark .comparison-table td, .zone-dark .comparison-note {
  border-color: var(--grey-darkest);
}

.zone-dark .comparison-section-heading > p {
  color: var(--text-muted-dark);
}

.zone-light .comparison-section-heading > p, .zone-muted .comparison-section-heading > p {
  color: var(--text-muted-light);
}

.zone-dark .route-card {
  border-color: var(--grey-darkest);
  background: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .route-card > p, .zone-dark .route-card dd, .zone-dark .route-card-top {
  color: var(--text-muted-dark);
}

.zone-dark .route-card-top span, .zone-dark .route-card dt {
  color: var(--brand-accent);
}

/* Same A8 fix as the watermark below: a solid token, never color-mix to
   transparent.

   ⚠️ The child combinator is load-bearing, and fixes a SECOND, pre-existing
   defect. `.zone-dark .route-card > p` above is (0,2,1) and the route mark
   (formerly `.route-card-mark`, now `.display-lg-main` after the display-lg
   merge, 20 Aug 2026) is a <p>, so a plain `.zone-dark .display-lg-main` at
   (0,2,0) would LOSE — the mark has never rendered low-contrast, contradicting
   the spec's "large low-contrast route mark", and the only reason the featured
   card looked right is that its rule carries a third class. Keeping
   `.route-card >` makes this (0,3,0), which wins. Lesson #15 again:
   zone-scoping changes specificity, and a broad `> p` quietly outranks a named
   class. */
.zone-dark .route-card > .display-lg-main {
  color: var(--brand-secondary);
}

.zone-dark .route-card-featured {
  border-color: var(--brand-accent);
  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-accent) 11.0%, transparent), color-mix(in srgb, var(--bg-light) 2.0%, transparent) 66%);
}

.zone-dark .route-card-featured .display-lg-main {
  color: var(--brand-accent);
}

.zone-dark .route-card dl, .zone-dark .route-card dl div {
  border-color: var(--grey-darkest);
}

.zone-light .responsibility-ledger, .zone-light .ledger-row > * {
  border-color: var(--grey-light);
}

.zone-light .ledger-head {
  color: var(--brand-primary);
}

.zone-light .ledger-row > span {
  color: var(--text-muted-light);
}

.zone-light .ledger-row .ledger-degree {
  color: var(--text-on-light);
  background: color-mix(in srgb, var(--brand-accent) 6.5%, transparent);
}

.zone-light .comparison-note {
  color: var(--text-muted-light);
  border-color: var(--grey-light);
}

.zone-muted .value-equation-lead, .zone-muted .value-points p {
  color: var(--text-muted-light);
}

.zone-muted .value-points, .zone-muted .value-points article {
  border-color: var(--grey-light);
}

.zone-muted .value-points article > span {
  color: var(--brand-primary);
}

.zone-muted .value-equation-instrument {
  color: var(--text-on-dark);
  background: var(--bg-dark);
  border-color: var(--grey-darkest);
}

.zone-muted .value-equation-head {
  color: var(--text-muted-dark);
  border-color: var(--grey-darkest);
}

.zone-muted .value-equation-head span:last-child, .zone-muted .value-equation-core strong, .zone-muted .value-equation-core > i {
  color: var(--brand-accent);
}

.zone-muted .value-equation-core small, .zone-muted .value-equation-core span, .zone-muted .value-equation-instrument > p {
  color: var(--text-muted-dark);
}

.zone-muted .value-equation-core div {
  border-color: var(--grey-darkest);
}

.zone-dark .degree-rail {
  border-color: var(--grey-darkest);
  background: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .degree-rail-primary {
  border-color: var(--brand-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 12.0%, transparent), color-mix(in srgb, var(--bg-light) 2.0%, transparent) 72%);
}

.zone-dark .degree-rail-number span, .zone-dark .degree-verb, .zone-dark .degree-rail-price strong {
  color: var(--brand-accent);
}

.zone-dark .degree-rail-number small, .zone-dark .degree-rail-copy > p:not(.degree-verb), .zone-dark .degree-rail-price span, .zone-dark .degree-rail-price small, .zone-dark .degree-extras-intro > p:last-child, .zone-dark .degree-extras-list li, .zone-dark .degree-extras-note, .zone-dark .degree-coverage-lead, .zone-dark .degree-coverage-list li, .zone-dark .degree-system-links small, .zone-dark .degrees-shared-line p, .zone-dark .degrees-comparison-container-grid > .comparison-note {
  color: var(--text-muted-dark);
}

.zone-dark .degree-rail-price small {
  border-color: color-mix(in srgb, var(--brand-accent) 45.0%, transparent);
}

.zone-dark .degree-extras-panel {
  border-color: var(--grey-darkest);
  background: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .degree-extras-list li {
  border-color: var(--grey-darkest);
}

.zone-dark .degree-extras-list li::before {
  color: var(--brand-accent);
}

.zone-dark .degree-coverage-panel, .zone-dark .degree-coverage-column + .degree-coverage-column, .zone-dark .degree-coverage-list li {
  border-color: var(--grey-darkest);
}

.zone-dark .degree-coverage-panel {
  background: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .degree-coverage-column.is-covered .degree-coverage-list li::before {
  color: var(--brand-accent);
}

.zone-dark .degree-system-links, .zone-dark .degree-system-links a {
  border-color: var(--grey-darkest);
}

.zone-dark .degree-system-links span {
  color: var(--text-on-dark);
}

.zone-dark .degrees-shared-line, .zone-dark .degrees-comparison-container-grid > .comparison-note {
  border-color: var(--grey-darkest);
}

.zone-dark .degrees-shared-line > span {
  color: var(--brand-accent);
}

.zone-light .research-number {
  color: var(--brand-primary);
}

.zone-light .research-copy > p:not(.section-label, .body-lg-system, .research-scope), .zone-light .research-stats span {
  color: var(--text-muted-light);
}

.zone-light .research-stats, .zone-light .research-stats div {
  border-color: var(--grey-light);
}

.zone-light .research-stats strong, .zone-light .research-scope {
  color: var(--brand-primary);
}

.zone-muted .fit-grid article {
  border-color: var(--grey-light);
  background: var(--bg-light);
}

.zone-muted .fit-grid article > span {
  color: var(--brand-primary);
}

.zone-muted .fit-grid article > p {
  color: var(--text-muted-light);
}

.zone-muted .fit-grid .fit-card-featured {
  color: var(--text-on-dark);
  background: var(--bg-dark);
  border-color: var(--bg-dark);
}

.zone-muted .fit-grid .fit-card-featured > span {
  color: var(--brand-accent);
}

.zone-muted .fit-grid .fit-card-featured > p {
  color: var(--text-muted-dark);
}


/* ============================================================
   360Dash & Ecosystem page — zone colour
   ============================================================ */

/* One rule covers both card grids on this page — same dark-ground wash as
   degrees-card / route-card / degree-rail, so cards read consistently across
   every dark Zone on the site rather than inventing a fourth variant. */
.zone-dark .job-card,
.zone-dark .bearings-card {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-light .content-map-steps li > span,
.zone-muted .progress-line li > span,
.zone-muted .progress-line li > b {
  color: var(--brand-primary);
}

.zone-dark .job-card-top span {
  color: var(--brand-accent);
}

.zone-dark .job-card-body p,
.zone-dark .bearings-card-body > p,
.zone-dark .bearings-pill {
  color: var(--text-muted-dark);
}

.zone-dark .bearings-pill {
  border-color: var(--grey-darkest);
}

/* The one Signal dot per icon (contract 3.8) — scoped once for every icon on
   this page's two dark-zone card grids, rather than per component. */
.zone-dark .icon-dot {
  fill: var(--brand-accent);
}

/* --- Zone: Content Map (light) --- */

.zone-light .content-map-copy > p:not(.section-label) {
  color: var(--text-muted-light);
}

.zone-light .content-map-steps li {
  border-top-color: var(--grey-light);
}

/* --- Zone: build progress (muted) --- */

.zone-muted .progress-line li {
  border-top-color: var(--grey-light);
}

.zone-muted .progress-line p {
  color: var(--text-muted-light);
}

/* --- Zone: mobile app (light) --- */

.zone-light .mobile-app-copy > p:not(.section-label) {
  color: var(--text-muted-light);
}

.zone-light .mobile-app-list li {
  border-top-color: var(--grey-light);
}

.zone-light .mobile-app-list li::before {
  background-color: var(--brand-accent);
}

/* Owner ruling, 18 Aug 2026: honest "pending" placeholders for both spots the
   spec calls for a real 360Dash capture, not a coded stand-in — see the
   Build Blocker Report in SESSION_LOG.md / CHANGELOG.md. */
.zone-light .content-map-panel,
.zone-light .mobile-app-panel {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
}

/* --- Zone: questions (muted) ---
   The light-scheme rule already covers .faq-container-stack; muted is also a
   light-ground scheme (contract 3.2), so it takes the same two values. */
.zone-muted .faq-container-stack summary span {
  color: var(--brand-primary);
}

.zone-muted .faq-container-stack details p {
  color: var(--text-muted-light);
}


/* ============================================================
   360° Booking page — zone colour
   ============================================================ */

/* --- Zone 02: customer booking journey (dark) --- */

.zone-dark .booking-journey-heading > p:last-child,
.zone-dark .booking-stage > p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .booking-stage {
  border-top-color: var(--grey-darkest);
}

.zone-dark .booking-stage-step {
  color: var(--brand-accent);
}

/* The one Signal detail per icon (contract 3.8), scoped once for the set. */
.zone-dark .booking-stage .icon-dot {
  fill: var(--brand-accent);
}

/* --- Zone 03: built to order (light) --- */

.zone-light .booking-custom-lead,
.zone-light .booking-capability-list span {
  color: var(--text-muted-light);
}

.zone-light .booking-capability-list > div {
  border-top-color: var(--grey-light);
}

.zone-light .booking-capability-list dt {
  color: var(--brand-primary);
}

/* White field on Paper, per spec — the one place the design asks for the
   cleaner inset surface rather than the Zone's own Paper ground. */
.zone-light .booking-form-example {
  border-color: var(--grey-light);
  background-color: var(--white);
}

.zone-light .booking-form-head {
  border-bottom-color: var(--grey-light);
  color: var(--brand-primary);
}

.zone-light .booking-form-fields > div {
  border-bottom-color: var(--grey-light);
}

.zone-light .booking-form-fields dt {
  color: var(--text-muted-light);
}

.zone-light .booking-form-action {
  color: var(--white);
  background-color: var(--bg-accent);
}

.zone-light .booking-form-note {
  color: var(--text-muted-light);
}

/* --- Zone 04: included and outside fees (muted) --- */

.zone-muted .booking-fees-heading > p:last-child,
.zone-muted .booking-sms-note {
  color: var(--text-muted-light);
}

.zone-muted .booking-fees-panel {
  border-color: var(--grey-light);
}

/* Ink field / Paper field, per spec — the two halves contrast with each other
   rather than sharing the comparison page's single wash. */
.zone-muted .booking-fees-panel .is-covered {
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.zone-muted .booking-fees-panel .is-covered .section-label {
  color: var(--brand-accent);
}

/* ⚠️ The Ink field flips the heading dot back to the brighter accent, exactly
   as a dark Zone does. The Zone here is MUTED, so the dot would otherwise take
   --brand-accent-on-light, which is 4.62:1 on --bg-muted but only 3.10:1 on
   the --bg-dark ground this panel paints — a fail at 23px/300, which WCAG
   counts as normal text (bold starts at 700). The binding ground is the panel,
   not the Zone. Caught by scripts/contrast.py, not by eye. */
.zone-muted .booking-fees-panel .is-covered .signal-dot {
  color: var(--brand-accent);
}

.zone-muted .booking-fees-panel .is-covered .degree-coverage-list li {
  border-top-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

.zone-muted .booking-fees-panel .is-covered .degree-coverage-list li::before {
  color: var(--brand-accent);
}

.zone-muted .booking-fees-panel .degree-coverage-column:not(.is-covered) {
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.zone-muted .booking-fees-panel .booking-fee-lines > div {
  border-top-color: var(--grey-light);
}

.zone-muted .booking-fees-panel .booking-fee-lines dt {
  color: var(--brand-primary);
}

.zone-muted .booking-fees-panel .booking-fee-lines dd {
  color: var(--text-muted-light);
}

.zone-muted .booking-sms-note {
  border-top-color: var(--grey-light);
}

/* The panel's own divider would double up against two contrasting fields. */
.zone-muted .booking-fees-panel .degree-coverage-column + .degree-coverage-column {
  border-left-color: transparent;
}

/* --- Zone 05: integrated versus a separate tool (dark) --- */

.zone-dark .booking-difference-copy > p:last-child,
.zone-dark .booking-difference-column li {
  color: var(--text-muted-dark);
}

.zone-dark .booking-difference-column {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .booking-difference-column li {
  border-top-color: var(--grey-darkest);
}

/* The spec makes the Signal label one of the two things that distinguish the
   Sitethreesixty column, so the comparison column's label has to give it up —
   .zone-dark .section-label paints every eyebrow accent by default, which left
   both columns identical. Same de-orange-ing the degrees and scope eyebrows
   already take (owner ruling 14). */
.zone-dark .booking-difference-column .section-label {
  color: var(--text-muted-dark);
}

/* Restrained Signal tint and Signal label on the Sitethreesixty column —
   no green ticks, no red crosses, per spec. */
.zone-dark .booking-difference-featured {
  border-color: var(--brand-accent);
  background-color: transparent;
  background-image: linear-gradient(155deg,
                      color-mix(in srgb, var(--brand-accent) 11%, transparent),
                      color-mix(in srgb, var(--bg-light) 2%, transparent) 66%);
}

.zone-dark .booking-difference-featured .section-label {
  color: var(--brand-accent);
}


/* ============================================================
   360 Publishing Suite page — zone colour
   ============================================================ */

/* --- Zone 02: useful inputs (dark) --- */

.zone-dark .publishing-inputs-heading > p:last-child,
.zone-dark .input-panel > p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .input-panel {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .input-panel-step {
  color: var(--brand-accent);
}

/* The one Signal detail per icon (contract 3.8), scoped once for the set. */
.zone-dark .input-panel .icon-dot {
  fill: var(--brand-accent);
}

.zone-dark .publishing-bridge {
  border-block-color: var(--grey-darkest);
}

.zone-dark .publishing-bridge span {
  color: var(--brand-accent);
}

/* --- Zone 03: the publishing view (light) --- */

.zone-light .publishing-view-lead {
  color: var(--text-muted-light);
}

.zone-light .publishing-view-panel {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
}

/* --- Zone 04: publishing outcomes (muted) --- */

.zone-muted .publishing-outcomes-heading > p:last-child,
.zone-muted .outcome-card > p:last-child {
  color: var(--text-muted-light);
}

/* Paper fields on the Mist Zone, per spec — the cards lift off their ground
   rather than sharing it. */
.zone-muted .outcome-card {
  border-color: var(--grey-light);
  background-color: var(--bg-light);
}

/* --- Zone 05: fit and boundary (dark) --- */

.zone-dark .publishing-fit-copy > p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .publishing-scope-note {
  border-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

/* --- Zone 06: one useful month (light) --- */

.zone-light .publishing-month-copy > p:last-child,
.zone-light .publishing-month-grid article > p:last-child,
.zone-light .publishing-month-note {
  color: var(--text-muted-light);
}

.zone-light .publishing-month-grid article {
  border-color: var(--grey-light);
  background-color: var(--white);
}


/* ============================================================
   Zone watermark — the Zone's own containment, plus its colour

   position/overflow are the Zone layer's own properties and belong with the
   Zone, exactly as --zone-pad-final's padding-block does above. Same judged
   call, same reason: there is no other legal home for a Zone-level property,
   since the critical file holds only the .zone base and containers.css may not
   carry Zone rules.

   ⚠️ overflow: hidden on a subgrid Zone was measured, not assumed — it clips
   the watermark without disturbing the Zone's inherited column tracks.
   (container-type WOULD break them, which is why Lesson #20 forbids it there;
   overflow creates no layout containment.)
   ============================================================ */

.has-watermark {
  position: relative;
  overflow: hidden;
}

/* Barely there on purpose — the spec caps this at about 5% Signal contrast.
   ⛔ A SOLID token, never `color-mix(… transparent)`. A8 bans transparency in a
   text colour by EFFECT, not by mechanism, and carries no exception for
   decorative or aria-hidden text — the watermark is still a text node.
   Was `color-mix(in srgb, var(--brand-accent) 5%, transparent)`, which
   composited to #1B221E; --brand-secondary is the nearest solid in the frozen
   set and reads as the same quiet texture. Inspection finding 1, 19 Aug 2026. */
.zone-dark .zone-watermark {
  color: var(--brand-secondary);
}


/* ============================================================
   Degrees pricing page — zone colour
   ============================================================ */

/* --- Zone 02: the Degree rails (dark) --- */

.zone-dark .pricing-rails-heading > p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .degree-rail-list li {
  color: var(--text-muted-dark);
}

.zone-dark .degree-rail-list li::before {
  color: var(--brand-accent);
}

/* --- Zone 03: the shared promise (light) --- */

.zone-light .promise-statement {
  color: var(--text-on-light);
}

.zone-light .promise-list,
.zone-light .promise-list > li {
  border-color: var(--grey-light);
}

.zone-light .promise-list > li > span {
  color: var(--brand-primary);
}

.zone-light .promise-close {
  color: var(--text-muted-light);
}

/* --- Zone 04: support path (muted) --- */

.zone-muted .support-path-heading > p:last-child,
.zone-muted .support-path > p:not(.section-label, .display-sm-main, .support-path-tag, .support-path-outcome) {
  color: var(--text-muted-light);
}

.zone-muted .support-path {
  border-top-color: var(--grey-light);
}

.zone-muted .support-path > .display-sm-main {
  color: var(--brand-primary);
}

.zone-muted .support-path-tag {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.zone-muted .support-path-outcome {
  border-top-color: var(--grey-light);
}

/* --- Zone 05: what 360° adds (dark) --- */

.zone-dark .pricing-extras-copy > p:last-child {
  color: var(--text-muted-dark);
}

/* Ink-on-Ink inset, separated by a Dark line — the field is the same ground as
   the Zone, so only the border and a faint wash distinguish it. */
.zone-dark .pricing-booking-inset {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .pricing-booking-head {
  border-bottom-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

.zone-dark .pricing-booking-head span:last-child {
  color: var(--brand-accent);
}

.zone-dark .pricing-booking-inset dl > div {
  border-bottom-color: var(--grey-darkest);
}

.zone-dark .pricing-booking-inset dt {
  color: var(--text-muted-dark);
}

.zone-dark .pricing-booking-inset .is-confirmed dt {
  color: var(--brand-accent);
}

/* --- Zone 06: covered and outside costs (light) ---
   The coverage panel's first outing on a LIGHT Zone; comparison.html uses it on
   dark and booking.html paints its own two contrasting fields. */

.zone-light .pricing-boundary-heading > p:last-child,
.zone-light .degree-coverage-lead,
.zone-light .degree-coverage-list li {
  color: var(--text-muted-light);
}

.zone-light .degree-coverage-panel,
.zone-light .degree-coverage-column + .degree-coverage-column,
.zone-light .degree-coverage-list li {
  border-color: var(--grey-light);
}

.zone-light .degree-coverage-panel {
  background-color: var(--white);
}

.zone-light .degree-coverage-column.is-covered .degree-coverage-list li::before {
  color: var(--brand-primary);
}

/* --- Zone 07: guarantees and charter terms (muted) --- */

.zone-muted .assurance-panel {
  border-color: var(--grey-light);
  background-color: var(--bg-light);
}

.zone-muted .assurance-panel > .display-lg-main {
  color: var(--brand-primary);
}

.zone-muted .assurance-panel > p:last-child,
.zone-muted .assurance-note {
  color: var(--text-muted-light);
}

.zone-muted .assurance-note {
  border-top-color: var(--grey-light);
}


/* ============================================================
   Questions & Contact page — zone colour
   ============================================================ */

/* --- Disclosure state wording --- */

.zone-muted .disclosure-state,
.zone-light .disclosure-state {
  color: var(--text-muted-light);
}

.zone-muted .disclosure-mark,
.zone-light .disclosure-mark {
  color: var(--brand-primary);
}

/* --- Zone 02: the client's part (dark) --- */

.zone-dark .responsibility-lead,
.zone-dark .responsibility-list p {
  color: var(--text-muted-dark);
}

.zone-dark .responsibility-list,
.zone-dark .responsibility-list > li {
  border-color: var(--grey-darkest);
}

.zone-dark .responsibility-list > li > span {
  color: var(--brand-accent);
}

/* --- Zone 03: changes and support (light) --- */

.zone-light .answer-rails-heading > p:last-child,
.zone-light .answer-rail-copy > p {
  color: var(--text-muted-light);
}

.zone-light .answer-rail {
  border-top-color: var(--grey-light);
}

.zone-light .answer-rail > .display-sm-main,
.zone-light .answer-rail-status {
  color: var(--brand-primary);
}

/* --- Zone 05: before and after launch (light) --- */

.zone-light .launch-copy > p:last-child,
.zone-light .launch-stage > p:last-child {
  color: var(--text-muted-light);
}

.zone-light .launch-stage {
  border-color: var(--grey-light);
  background-color: var(--white);
}

.zone-light .launch-stage > .display-sm-main {
  color: var(--brand-primary);
}

/* --- Zone 06: extra systems (dark) --- */

.zone-dark .systems-heading > p:last-child,
.zone-dark .system-field > p {
  color: var(--text-muted-dark);
}

.zone-dark .system-field {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .system-status {
  color: var(--brand-accent);
}

.zone-dark .system-field .icon-dot {
  fill: var(--brand-accent);
}

/* --- Zone 07: the signpost (muted) --- */

.zone-muted .signpost > p {
  color: var(--text-muted-light);
}

.zone-muted .signpost-status {
  color: var(--brand-primary);
}

/* The single divider between the two destinations: an inline edge on the
   second panel above the lock point, which the media block below flips to a
   top edge when they stack. */
@container frame (min-width: 760px) {
  .zone-muted .signpost + .signpost {
    padding-left: var(--gap-2xl);
    border-left: var(--border-thin) solid var(--grey-light);
  }
}

/* --- Zone 08: contact (dark) --- */

.zone-dark .contact-after {
  color: var(--text-muted-dark);
}

.zone-dark .contact-qualification {
  color: var(--brand-accent);
}

.zone-dark .contact-rows > div {
  border-color: var(--grey-darkest);
}

.zone-dark .contact-rows dt {
  color: var(--text-muted-dark);
}

.zone-dark .contact-rows dd a {
  color: var(--text-on-dark);
}

.zone-dark .contact-after {
  border-top-color: var(--grey-darkest);
}

/* The form panel is a Paper surface on the Ink Zone, so everything inside it
   flips to light-ground colours — including the Signal, which must take the
   light-ground accent to keep AA on Paper. */
.zone-dark .contact-form-panel {
  border-color: var(--grey-light);
  color: var(--text-on-light);
  background-color: var(--white);
}

.zone-dark .contact-form-panel .contact-form-intro,
.zone-dark .contact-form-panel .form-privacy,
.zone-dark .contact-form-panel .form-optional {
  color: var(--text-muted-light);
}

.zone-dark .contact-form-panel .form-required {
  color: var(--brand-primary);
}

.zone-dark .contact-form-panel .form-input,
.zone-dark .contact-form-panel .form-textarea {
  border-color: var(--grey-light);
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.zone-dark .contact-form-panel .form-input:focus,
.zone-dark .contact-form-panel .form-textarea:focus {
  border-color: var(--brand-primary);
}

.zone-dark .contact-form-panel .form-status {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
  background-color: var(--bg-muted);
}

.zone-dark .contact-form-panel .form-status.is-error {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

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

/* ============================================================
   FAQ behaviour demo — zone colour (internal page)
   ============================================================ */

.zone-dark .demo-notes-heading > p:last-child,
.zone-dark .demo-notes dd {
  color: var(--text-muted-dark);
}

.zone-dark .demo-notes > div {
  border-top-color: var(--grey-darkest);
}

.zone-dark .demo-notes dt {
  color: var(--brand-accent);
}

/* ============================================================
   Bearings marks — zone colour (internal page)
   ============================================================ */

.zone-light .marks-option,
.zone-light .marks-note {
  border-color: var(--grey-light);
  background-color: var(--white);
}

.zone-light .marks-option > p,
.zone-light .marks-note,
.zone-light .bearing-bearing,
.zone-light .marks-states article > p:last-child,
.zone-light .marks-options-heading > p:last-child,
.zone-light .marks-grid-heading > p:last-child,
.zone-light .marks-states-heading > p:last-child {
  color: var(--text-muted-light);
}

.zone-light .marks-option-featured {
  border-color: var(--brand-primary);
}

.zone-light .marks-scores dt,
.zone-light .marks-verdict {
  color: var(--text-muted-light);
}

.zone-light .marks-scores dd,
.zone-light .marks-verdict {
  border-top-color: var(--grey-light);
}

.zone-light .marks-scores .is-pass { color: var(--brand-primary); }

.zone-muted .marks-grid-heading > p:last-child,
.zone-muted .bearing-bearing,
.zone-muted .marks-sizes article > p:last-child,
.zone-muted .marks-sizes-heading > p:last-child {
  color: var(--text-muted-light);
}

.zone-dark .marks-grid-heading > p:last-child,
.zone-dark .bearing-bearing {
  color: var(--text-muted-dark);
}

/* ============================================================
   About page — zone colour
   ============================================================ */

/* --- Zone 02: why we exist (dark) --- */

.zone-dark .exists-container-stack > p:not(.section-label, .exists-statement, .exists-close) {
  color: var(--text-muted-dark);
}

.zone-dark .exists-close {
  border-top-color: var(--grey-darkest);
  color: var(--brand-accent);
}

/* --- Zone 03: the restaurant analogy (light) --- */

.zone-light .analogy-part {
  border-top-color: var(--grey-light);
}

.zone-light .analogy-part > p:last-child {
  color: var(--text-muted-light);
}

/* Signal Deep on the Sitethreesixty statement only — the other two stay Ink,
   which is what makes the third read as the answer. */
.zone-light .analogy-part-featured .analogy-statement {
  color: var(--brand-primary);
}

.zone-light .analogy-close {
  border-top-color: var(--grey-light);
}

/* --- Zone 04: the model (muted) --- */

.zone-muted .model-copy > p:last-child,
.zone-muted .model-stages p {
  color: var(--text-muted-light);
}

.zone-muted .model-stages,
.zone-muted .model-stages > li {
  border-color: var(--grey-light);
}

.zone-muted .model-stages > li > span {
  color: var(--brand-primary);
}

/* --- Zone 05: the ownership rail (dark) --- */

.zone-dark .ownership-heading > p:last-child,
.zone-dark .ownership-readings p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .ownership-rail {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .ownership-shared {
  border-bottom-color: var(--grey-darkest);
  color: var(--text-muted-dark);
}

/* Signal for the three numerals, Paper for the explanations — spec Zone 05. */
.zone-dark .ownership-readings .display-sm-main,
.zone-dark .ownership-exclusive {
  color: var(--brand-accent);
}

/* --- Zone 06: company standards (light) --- */

.zone-light .standards-heading > p:last-child,
.zone-light .standards-list p {
  color: var(--text-muted-light);
}

.zone-light .standards-list,
.zone-light .standards-list > li {
  border-color: var(--grey-light);
}

.zone-light .standards-list > li > span {
  color: var(--brand-primary);
}

/* --- Zone 07: the founder (muted) --- */

.zone-muted .founder-photo {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
}

.zone-muted .founder-paragraph {
  color: var(--text-muted-light);
}

.zone-muted .founder-caption {
  color: var(--brand-primary);
}

/* --- Zone 08: proof before promise (dark) --- */

.zone-dark .proof-copy > p {
  color: var(--text-muted-dark);
}

.zone-dark .proof-index > div {
  border-color: var(--grey-darkest);
}

.zone-dark .proof-index dd {
  color: var(--text-muted-dark);
}

/* The analogy's divider flips from a top rule to a leading edge above the
   lock point; both take the same light-ground rule colour. */
.zone-light .analogy-part {
  border-left-color: var(--grey-light);
}

/* ============================================================
   Our Work page — zone colour
   Zone numbers below match the current build (our-work.html), not the
   numbering this section originally shipped with — several zones were
   reordered and one (Zone 03, "what the scores mean") was removed outright
   along with the .scores-* it coloured.
   ============================================================ */

/* --- Zone 02: the Curly Tail spotlight (muted) ---
   .evidence-* selectors retired with the ledger they coloured (owner ruling,
   19 Aug 2026 — see containers.css/elements.css for the same note). --- */

.zone-muted .spotlight-location,
.zone-muted .spotlight-summary,
.zone-muted .spotlight-result-before,
.zone-muted .spotlight-result-list dd,
.zone-muted .spotlight-result-close {
  color: var(--text-muted-light);
}

.zone-muted .spotlight-image {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
}

.zone-muted .spotlight-result-figure {
  color: var(--brand-primary);
}

.zone-muted .spotlight-result-close {
  border-top-color: var(--grey-light);
}

/* --- Zone 03: the portfolio (light) --- */

.zone-light .work-heading > p:last-child,
.zone-light .work-trade,
.zone-light .work-rail-score,
.zone-light .work-rail-copy > p:not(.work-status, .work-trade, .work-rail-score) {
  color: var(--text-muted-light);
}

.zone-light .work-rail,
.zone-light .work-rail-image {
  border-color: var(--grey-light);
}

.zone-light .work-rail-image {
  color: var(--text-muted-light);
}

.zone-light .work-status {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* --- Zone 04: not everything, not nothing (dark) ---
   Was Zone 07/muted in the previous build; the guideline specifies Dark for
   this zone and the current HTML uses zone-dark, so its colour rules move
   here rather than staying under .zone-muted. --- */

.zone-dark .research-context-copy > p:not(.section-label),
.zone-dark .research-context-readings p:last-child {
  color: var(--text-muted-dark);
}

.zone-dark .research-context-figure {
  color: var(--brand-accent);
}

/* --- Zone 05: designed for phone and desktop (muted) ---
   Was Zone 06/dark in the previous build; matches the guideline's Muted
   scheme and the current HTML's zone-muted. --- */

.zone-muted .viewports-copy > p:not(.section-label),
.zone-muted .viewports-checklist li,
.zone-muted .viewport-frame figcaption {
  color: var(--text-muted-light);
}

.zone-muted .viewports-checklist li {
  border-top-color: var(--grey-light);
}

/* Paper frames on the Muted Zone — the captures sit on a light surface so
   they read as product photography, not as part of the band. */
.zone-muted .viewport-frame .media-placeholder {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
  background-color: var(--bg-light);
}

/* --- Zone 06: built to order from £22 a month (dark) ---
   Reuses .degrees-container-grid/.degrees-card verbatim from index.html —
   its own zone-dark colour rules already cover every class used here, so
   nothing new is added. See containers.css Zone 06 note. --- */

/* --- Zone 07: test your own website (dark) --- */

.zone-dark .speedtest-copy > p:not(.section-label),
.zone-dark .speedtest-qualification {
  color: var(--text-muted-dark);
}

.zone-dark .speedtest-instrument,
.zone-dark .speedtest-instrument .form-input {
  border-color: var(--grey-darkest);
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.zone-dark .speedtest-instrument .form-input:focus {
  border-color: var(--brand-accent);
}

.zone-dark .speedtest-qualification {
  border-top-color: var(--grey-darkest);
}

/* --- Zone 08: compare everything, then choose (light) ---
   Was zone-dark in the previous build; the current HTML uses zone-light for
   this closing zone (a light zone reads as the natural final beat after
   Zone 07's dark test panel), so its colour rules move to .zone-light. --- */

.zone-light .proof-degree-copy > p:not(.section-label, .proof-degree-qualification),
.zone-light .proof-degree-qualification {
  color: var(--text-muted-light);
}

.zone-light .proof-degree-qualification {
  border-top-color: var(--grey-light);
}

/* ============================================================
   PageSpeed modal — colour
   The panel is its own surface, not a Zone's, so it takes the dark scheme
   directly rather than inheriting one.
   ============================================================ */

.pagespeed-overlay {
  background-color: color-mix(in srgb, var(--bg-dark) 82%, transparent);
}

.pagespeed-panel {
  border-color: var(--grey-darkest);
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
}

.pagespeed-modal-head,
.pagespeed-modal-note,
.pagespeed-explainer > div {
  border-color: var(--grey-darkest);
}

.pagespeed-modal-title {
  color: var(--brand-accent);
}

.pagespeed-close {
  border-color: var(--grey-darkest);
  color: var(--text-on-dark);
  background-color: transparent;
}

.pagespeed-close:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.pagespeed-loading-note,
.pagespeed-explainer dd,
.pagespeed-verify,
.pagespeed-modal-note {
  color: var(--text-muted-dark);
}

.pagespeed-explainer dt {
  color: var(--brand-accent);
}

.pagespeed-progress {
  background-color: var(--grey-darkest);
}

.pagespeed-progress::after {
  background-color: var(--brand-accent);
}

/* The Viewer renders its own light UI, so the frame sits on Paper. */
.pagespeed-frame {
  background-color: var(--bg-light);
}

.pagespeed-verify .text-link,
.pagespeed-modal-note .text-link {
  color: var(--brand-accent);
}

.zone-dark .speedtest-note {
  color: var(--text-muted-dark);
}

/* ============================================================
   Contact modal + enquiry box — colour
   The panel is its own surface, so it takes a scheme directly rather than
   inheriting a Zone's.
   ============================================================ */

.contact-modal-overlay {
  background-color: color-mix(in srgb, var(--bg-dark) 82%, transparent);
}

.contact-modal-panel {
  border-color: var(--grey-light);
  color: var(--text-on-light);
  background-color: var(--white);
}

.contact-modal-head,
.contact-modal-direct {
  border-color: var(--grey-light);
}

.contact-modal-title {
  color: var(--brand-primary);
}

.contact-modal-close {
  border-color: var(--grey-light);
  color: var(--text-on-light);
  background-color: transparent;
}

.contact-modal-close:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.contact-modal-intro,
.contact-modal-direct {
  color: var(--text-muted-light);
}

.contact-modal-panel .form-input,
.contact-modal-panel .form-textarea {
  border-color: var(--grey-light);
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.contact-modal-panel .form-input:focus,
.contact-modal-panel .form-textarea:focus {
  border-color: var(--brand-primary);
}

.contact-modal-panel .form-required {
  color: var(--brand-primary);
}

.contact-modal-panel .form-optional {
  color: var(--text-muted-light);
}

.contact-modal-panel .form-status {
  border-color: var(--grey-light);
  color: var(--text-muted-light);
  background-color: var(--bg-muted);
}

.contact-modal-panel .form-status.is-error {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ⚠️ The modal is OUTSIDE the Framework, so no .zone-* rule reaches it and
   .btn-primary fell back to the UA's grey button. Every other button on the
   site is painted by its Zone; a surface that has no Zone has to paint its own.
   Same reason .pagespeed-panel declares its own scheme. */
.contact-modal-panel .btn-primary {
  border-color: transparent;
  color: var(--white);
  background-color: var(--bg-accent);
}

/* The enquiry box sits on the dark Degrees Zone. */
.zone-dark .enquiry-box {
  border-color: var(--grey-darkest);
  background-color: color-mix(in srgb, var(--bg-light) 2.5%, transparent);
}

.zone-dark .enquiry-box .text-link {
  color: var(--brand-accent);
}

/* ============================================================
   Marquee — the strip reaffirms, it does not shout.
   Owner ruling, 21 Aug: the links reuse .text-link for behaviour
   but never its Torch colour, which would compete with the page's
   real calls to action. Ink at rest on every ground, accent only
   on hover. Colour is fixed at the ZONE layer because the strip
   appears on light, muted and dark.
   ============================================================ */

.zone-muted .marquee-links a {
  color: var(--text-on-light);
}

.zone-dark .marquee-links a {
  color: var(--text-on-dark);
}

.zone-dark .marquee-links a:hover,
.zone-dark .marquee-links a:focus-visible {
  color: var(--brand-accent);
}

.zone-dark .marquee-sep {
  color: var(--text-muted-dark);
}

.zone-light .marquee-links a {
  color: var(--text-on-light);
}

.zone-light .marquee-links a:hover,
.zone-light .marquee-links a:focus-visible,
.zone-muted .marquee-links a:hover,
.zone-muted .marquee-links a:focus-visible {
  color: var(--brand-accent-on-light);
}

/* ============================================================
   What You Get page — zone colour
   Zones 4 and 5 reuse .content-map-steps / .dash-bearings-container-grid /
   .bearings-card unchanged, so no new colour rule is needed for them beyond
   what already exists above for zone-muted/zone-dark. Only the genuinely new
   classes are scoped below.
   ============================================================ */

/* --- Zone 2: from facts to website (dark) --- */

.zone-dark .wyg-facts-line li {
  border-top-color: var(--grey-darkest);
}

.zone-dark .wyg-facts-line li > .label-second {
  color: var(--brand-accent);
}

.zone-dark .wyg-facts-line p {
  color: var(--text-muted-dark);
}

/* --- Zone 3: the website foundation (light) --- */

.zone-light .wyg-ledger li {
  border-top-color: var(--grey-light);
}

.zone-light .wyg-ledger li > .label-second {
  color: var(--brand-primary);
}

.zone-light .wyg-ledger p {
  color: var(--text-muted-light);
}

/* --- Zone 4: 360Dash and Content Map (muted) --- */

.zone-muted .wyg-dash-copy > p:not(.section-label) {
  color: var(--text-muted-light);
}

.zone-muted .wyg-dash-quiet {
  color: var(--text-muted-light);
}

/* --- Zone 6: Degree differences (light) --- */

.zone-light .wyg-degree-rail {
  border-top-color: var(--grey-light);
}

.zone-light .wyg-degree-rail:last-of-type {
  border-bottom-color: var(--grey-light);
}

.zone-light .wyg-degree-rail p {
  color: var(--text-muted-light);
}

.zone-light .wyg-degree-rail .label-sm-second {
  color: var(--text-muted-light);
}

/* --- Zone 7: after launch (muted) --- */

.zone-muted .wyg-after-sequence,
.zone-muted .wyg-after-sequence li {
  border-color: var(--grey-light);
}

.zone-muted .wyg-after-sequence li > .label-second {
  color: var(--brand-primary);
}

.zone-muted .wyg-after-sequence p {
  color: var(--text-muted-light);
}

/* --- Zone 8: moving an existing site (dark) --- */

.zone-dark .wyg-move-line li > .label-second {
  color: var(--brand-accent);
}

.zone-dark .wyg-move-line p {
  color: var(--text-muted-dark);
}

.zone-dark .wyg-move-note {
  color: var(--text-muted-dark);
}

/* --- Zone 9: final action (light, single top rule) ---
   Direction calls for "a single 1px top rule, do not use a full Accent
   field" — .final-cta-zone is reused for padding rhythm (already portable
   across zone-dark/zone-light), this adds only the top rule the spec asks
   for on the light variant, scoped to this page only. */
.wyg-final-zone {
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: var(--grey-light);
}

/* Explore-further links: ink at rest, accent on hover — same "reaffirm, don't
   shout" rule as the marquee. Colour is fixed at the zone layer because the
   zone owns colour and the strip appears on more than one ground. */
.zone-light .explore-links a,
.zone-muted .explore-links a {
  color: var(--text-on-light);
}

.zone-dark .explore-links a {
  color: var(--text-on-dark);
}

.zone-light .explore-links a:hover,
.zone-light .explore-links a:focus-visible,
.zone-muted .explore-links a:hover,
.zone-muted .explore-links a:focus-visible {
  color: var(--brand-accent-on-light);
}

.zone-dark .explore-links a:hover,
.zone-dark .explore-links a:focus-visible {
  color: var(--brand-accent);
}

.zone-light .explore-sep,
.zone-muted .explore-sep {
  color: var(--text-muted-light);
}

.zone-dark .explore-sep {
  color: var(--text-muted-dark);
}

/* ============================================================
   Trade page — article Zone colour
   ============================================================ */

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

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

/* Booking showcase teaser sits on a light Zone — the panel reuses
   .inset-panel, which (like .degrees-card/.pricing-booking-inset before it)
   needs its own zone-scoped border/fill since the Element sets no colour
   of its own. Same fill as .article-cta, so shared on one selector. */
.zone-light .article-cta,
.zone-light .booking-showcase .inset-panel {
  border-color: var(--grey-light);
  background-color: var(--bg-muted);
}

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

.zone-light .share-icon,
.zone-muted .share-icon {
  border-color: var(--grey-light);
  color: var(--text-on-light);
}

.zone-light .share-icon:hover,
.zone-light .share-icon:focus-visible,
.zone-muted .share-icon:hover,
.zone-muted .share-icon:focus-visible {
  border-color: var(--brand-accent-on-light);
}