/* ==========================================================================
   TRU72 — SHARED SURFACE + BUTTON SYSTEM
   --------------------------------------------------------------------------
   Two things live here, shared by all four sites from this one file:
   SECTION 1, the two button styles (D46), and SECTION 2, the SCENERY GREEN
   band. Both were measured in the browser at the sizes and colours they
   actually render at; the figures quoted below are those measurements.

   ==========================================================================
   SECTION 1 — THE TWO BUTTONS (D46)
   ==========================================================================
   TWO button styles, both shipping, on all four sites, from this one file.

     GOLD   fill ANTIQUE GOLD #C39954, label INK #3D3F3F
            MEASURED 4.04:1  (the 3.1:1 in the worksheet is INK on the
            DROPPED gold-aged that D42 removed; on the approved ANTIQUE GOLD the
            real figure is 4.04:1 — still below 4.5:1, so the rule is the
            same either way)
            => WCAG AA LARGE TEXT ONLY.  Large text is 24px, or 18.66px at
            weight 700.  Every gold button below is locked to 20px/700
            (19px/700 under 600px), so it clears the bold threshold at its
            ACTUAL rendered size, not just in intent.
            Gold is the PRIMARY call to action: the hero CTA and the big
            banner CTA.

     INK    fill INK #3D3F3F, label PAPER #FFF6DC, 9.8:1 — any size.
            Everything secondary, everything small, and every gold
            candidate that lives somewhere too tight to size up.

   WHERE GOLD IS **NOT** USED, DELIBERATELY  (D46: do not shrink the gold
   one — use ink there instead)

     .header-cta / .nav-cta     the sticky header bar. A 20px label breaks
                                the one-line header at 1200px and pushes the
                                logo off at 375px.
     .mobile-sticky             the two-up sticky mobile bar. Two 20px
                                labels do not fit 375px without wrapping the
                                bar to two rows over the page content.
     .market-actions            the booking card's 10px stacked buttons.
     .trucomfort-actions,
     .product-actions,
     .cc-mention-actions,
     .services-foot-actions,
     .card-actions, .btn-stack  dense card footers, two buttons per card.
     .cta-row, .inline-cta-buttons
                                inline callouts inside a two-column band —
                                secondary by role, and narrow by layout.
     every .btn-outline,
     .btn-secondary, .btn-call  secondary by definition; they stay outlined.

   LOAD ORDER — this sheet loads LAST on every page, after the per-site
   component sheet, so it is the final word on the primary CTA:

       tru72-tokens.css -> tru72-skin-<site>.css -> inline <style>
         -> tru72-<site>-components.css -> THIS FILE

   Colour comes only from the five tokens in tru72-tokens.css. No new hex.
   ========================================================================== */

:root {
  /* The gold button's label size. Both values clear WCAG's bold large-text
     threshold (18.66px @ 700). Do not lower either one. */
  --t72-cta-size:        20px;
  --t72-cta-size-narrow: 19px;
  --t72-cta-weight:      700;
  --t72-cta-track:       .06em;
  --t72-cta-pad:         17px 30px;
  --t72-cta-pad-narrow:  15px 22px;
}

/* --------------------------------------------------------------------------
   THE GOLD PRIMARY
   --------------------------------------------------------------------------
   `.t72-cta` is the explicit opt-in for new markup. The selectors beside it
   are the existing primary CTAs on the four sites' built pages:

     NC          .hero-actions / .hero-cta / .hero-seal-actions
                 .final-cta-actions / .mid-cta-actions
                 .cc-strip-actions / .featured-cta-row
     OR, NV,
     brand       .hero-cta / .hero-cta-row  (the filled .btn-primary)
                 .final-cta-buttons         (the filled .btn-tan/.btn-primary)

   The second button in each of those rows is the outline/call twin and is
   excluded — one gold button per row, which is what "primary" means.
   -------------------------------------------------------------------------- */
.t72-cta,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary),
.hero-cta      > .btn-gold,
.hero-seal-actions   > .btn-gold,
.final-cta-actions   > .btn-gold,
.mid-cta-actions     > .btn-gold,
.cc-strip-actions    > .btn-gold,
.featured-cta-row    > .btn-gold,
.hero-cta      > .btn-primary,
.hero-cta-row  > .btn-primary,
.final-cta-buttons > .btn-primary,
.final-cta-buttons > .btn-tan {
  background: var(--t72-gold) !important;
  color: var(--t72-ink) !important;
  border: 1px solid var(--t72-gold) !important;

  /* THE SIZE IS THE ACCESSIBILITY ARGUMENT. It is set here, with the fill,
     so a gold fill can never be applied without the size that licenses it. */
  font-size: var(--t72-cta-size) !important;
  font-weight: var(--t72-cta-weight) !important;
  letter-spacing: var(--t72-cta-track) !important;
  line-height: 1.15 !important;
  padding: var(--t72-cta-pad) !important;
  text-transform: uppercase;

  /* Sizing up the label makes it long. Let it wrap rather than push the page
     sideways; nothing here is nowrap any more. */
  white-space: normal !important;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
}

/* The label colour some pages set on a child span/strong must follow the
   button, or a linen/green label lands on gold (2.2:1 and 2.6:1). */
.t72-cta *,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary) *,
.hero-cta      > .btn-gold *,
.hero-seal-actions   > .btn-gold *,
.final-cta-actions   > .btn-gold *,
.mid-cta-actions     > .btn-gold *,
.cc-strip-actions    > .btn-gold *,
.featured-cta-row    > .btn-gold *,
.hero-cta      > .btn-primary *,
.hero-cta-row  > .btn-primary *,
.final-cta-buttons > .btn-primary *,
.final-cta-buttons > .btn-tan * {
  color: var(--t72-ink) !important;
  fill: currentColor;
  stroke: currentColor;
}

/* HOVER — gold hands over to the ink button. PAPER on INK is 9.8:1, so the
   hover state is more legible than the rest state, never less. */
.t72-cta:hover, .t72-cta:focus-visible,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary):hover,
.hero-cta      > .btn-gold:hover,
.hero-seal-actions   > .btn-gold:hover,
.final-cta-actions   > .btn-gold:hover,
.mid-cta-actions     > .btn-gold:hover,
.cc-strip-actions    > .btn-gold:hover,
.featured-cta-row    > .btn-gold:hover,
.hero-cta      > .btn-primary:hover,
.hero-cta-row  > .btn-primary:hover,
.final-cta-buttons > .btn-primary:hover,
.final-cta-buttons > .btn-tan:hover {
  background: var(--t72-ink) !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-ink) !important;
}
.t72-cta:hover *, .t72-cta:focus-visible *,
.hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary):hover *,
.hero-cta      > .btn-gold:hover *,
.hero-seal-actions   > .btn-gold:hover *,
.final-cta-actions   > .btn-gold:hover *,
.mid-cta-actions     > .btn-gold:hover *,
.cc-strip-actions    > .btn-gold:hover *,
.featured-cta-row    > .btn-gold:hover *,
.hero-cta      > .btn-primary:hover *,
.hero-cta-row  > .btn-primary:hover *,
.final-cta-buttons > .btn-primary:hover *,
.final-cta-buttons > .btn-tan:hover * {
  color: var(--t72-paper) !important;
}

/* --------------------------------------------------------------------------
   THE INK BUTTON — explicit utility, for new markup that needs a secondary
   or a small button. The four sites' existing ink buttons are unchanged and
   keep coming from their own component sheets.
   -------------------------------------------------------------------------- */
.t72-btn-ink {
  background: var(--t72-ink);
  color: var(--t72-paper);
  border: 1px solid var(--t72-ink);
  text-decoration: none;
}
.t72-btn-ink:hover, .t72-btn-ink:focus-visible {
  background: var(--t72-green);
  border-color: var(--t72-green);
  color: var(--t72-paper);       /* 5.2:1 */
}

/* --------------------------------------------------------------------------
   FOCUS — one ring that stays visible on BOTH surfaces
   --------------------------------------------------------------------------
   A gold CTA sits on paper in a hero and on ink in a final-CTA band. A single
   INK ring disappears on the ink band and a single PAPER ring disappears on
   paper, so the ring is drawn twice: a PAPER halo immediately around the
   button (9.7:1 against an ink band) with an INK outline outside it (12.1:1
   against a paper band). One of the two is always the contrasting one.
   -------------------------------------------------------------------------- */
.t72-cta:focus-visible,
.hero-actions  > .btn:focus-visible,
.hero-cta      > .btn-gold:focus-visible,
.hero-seal-actions   > .btn-gold:focus-visible,
.final-cta-actions   > .btn-gold:focus-visible,
.mid-cta-actions     > .btn-gold:focus-visible,
.cc-strip-actions    > .btn-gold:focus-visible,
.featured-cta-row    > .btn-gold:focus-visible,
.hero-cta      > .btn-primary:focus-visible,
.hero-cta-row  > .btn-primary:focus-visible,
.final-cta-buttons > .btn-primary:focus-visible,
.final-cta-buttons > .btn-tan:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* Every other focusable thing keeps a visible ring too. */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .t72-btn-ink:focus-visible {
  outline: 2px solid var(--t72-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS
   --------------------------------------------------------------------------
   19px/700 still clears the bold large-text threshold (18.66px). The padding
   comes in and the row goes full width so a long label wraps inside the
   button instead of widening the page.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --t72-cta-size: var(--t72-cta-size-narrow);
    --t72-cta-pad:  var(--t72-cta-pad-narrow);
  }
  .hero-actions, .hero-cta, .hero-cta-row,
  .final-cta-actions, .final-cta-buttons, .mid-cta-actions,
  .cc-strip-actions, .hero-seal-actions, .featured-cta-row {
    flex-wrap: wrap;
  }
  .t72-cta,
  .hero-actions  > .btn:not(.btn-outline):not(.btn-outline-light):not(.btn-call):not(.btn-secondary),
  .hero-cta      > .btn-gold,
  .hero-seal-actions   > .btn-gold,
  .final-cta-actions   > .btn-gold,
  .mid-cta-actions     > .btn-gold,
  .cc-strip-actions    > .btn-gold,
  .featured-cta-row    > .btn-gold,
  .hero-cta      > .btn-primary,
  .hero-cta-row  > .btn-primary,
  .final-cta-buttons > .btn-primary,
  .final-cta-buttons > .btn-tan {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   SECTION 2 — THE SCENERY GREEN BAND
   --------------------------------------------------------------------------
   SCENERY GREEN #696859 is a brand colour that was doing almost nothing: it
   carried muted type and nothing else. It is now a SURFACE, so a long page
   stops alternating only PAPER and INK.

   MEASURED, on SCENERY GREEN as a ground:

       PAPER   #FFF6DC   5.22:1   passes AA at every size   <- the ONLY type
       GOLD    #C39954   2.15:1   fails at every size
       INK     #3D3F3F   1.88:1   fails at every size
       LINEN   #CBC0AA   3.13:1   fails small text
       PAPER at 82% over green    4.13:1   fails small text

   So on a green band EVERY type colour is solid PAPER. The last two lines are
   the trap: Oregon's dark bands carry LINEN eyebrows and PAPER at 0.5-0.85
   alpha, both of which pass on INK and fail on GREEN. The blanket rule below
   therefore forces solid PAPER on every descendant and kills the alpha - it
   is what makes the band safe, not a tidy-up.

   AND NO GOLD ON GREEN, as type OR as a rule: 2.15:1. Where a green band
   needs a hairline it uses --t72-rule-on-green, which is PAPER at 42% - the
   same pigment as the type, not a third colour.

   THE BANDS, and why each one:

     .mid-cta      NC   8 sections. A mid-page CTA band that shipped INK,
                        sitting between an INK "discipline" band and an INK
                        "final-cta". Three ink bands in a row became one ink,
                        one green, one ink. Text and buttons only - no cards
                        inside it, which is what makes the blanket rule safe.
     .cc-mention   NC   14 sections. The Tru Comfort strip, which shipped INK
                        directly above the INK final-cta. Same shape: a
                        heading, a paragraph and one button.
     .final-cta    the brand hub, 4 sections — and ONLY the hub: Oregon,
                        Nevada and NC all render .t72c-final-cta, which the
                        component sheet already paints SCENERY GREEN. The hub
                        has its own stylesheet and was untouched by Phase 14,
                        so its closing band was still INK directly above an INK
                        footer. The reference's own .final-cta is --ink-soft,
                        i.e. green. Text and one button, no cards.  (Phase 15)
     .trust-strip  OR, NV, brand - 97 sections. The stat strip under the
                        hero, which shipped INK immediately below the PAPER
                        hero and above a PAPER-tint band. Four cells of type
                        and a hairline divider. MEASURED: 0 of the 97 contain
                        a button, so it stays a pure type surface.

     .t72-band-green    the opt-in class for new markup.

   NOT converted: .hero stays PAPER. The point is to break up a run of
   identical bands, not to recolour every dark band. (.final-cta WAS on that
   not-converted list until Phase 15 read the reference's own declaration for
   it — `background: var(--ink-soft)` — and found it had been green all along.)
   ========================================================================== */

:root {
  /* A hairline for a green band: PAPER at 42%. No new pigment, and it is
     never used for type. */
  --t72-rule-on-green: rgba(255, 246, 220, .42);
}

.t72-band-green,
.mid-cta,
.cc-mention,
.final-cta,
.trust-strip {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);   /* NOT linen - linen is 3.13:1 here */
  --t72-rule: var(--t72-rule-on-green);
  --t72-rule-strong: var(--t72-rule-on-green);
  --t72-rule-on-ink: var(--t72-rule-on-green);
}

/* Every descendant that is not a button takes SOLID PAPER. This overrides the
   inline `color: rgba(255,246,220,.82)` and the LINEN eyebrows the pages set
   for an INK ground, both of which fail on green. The gold CTA's own rules
   are (0,2,0) and outrank this (0,1,0), so a gold button keeps its INK label
   whatever the source order. */
.t72-band-green *,
.mid-cta *,
.cc-mention *,
.final-cta *,
.trust-strip * {
  color: var(--t72-paper) !important;
  opacity: 1;
}

/* Hairlines, dividers and keylines inside a green band: PAPER at 42%.
   Never gold - 2.15:1. */
.t72-band-green .eyebrow::before, .t72-band-green .eyebrow::after,
.mid-cta .eyebrow::before, .mid-cta .eyebrow::after,
.cc-mention .eyebrow::before, .cc-mention .eyebrow::after,
.trust-strip .eyebrow::before, .trust-strip .eyebrow::after,
.mid-cta .mid-cta-eyebrow::before, .cc-mention .cc-mention-eyebrow::before,
.trust-strip .trust-cell-rule,
.t72-band-green hr, .mid-cta hr, .cc-mention hr, .trust-strip hr {
  background: var(--t72-rule-on-green) !important;
  border-color: var(--t72-rule-on-green) !important;
  color: var(--t72-rule-on-green) !important;
}
.t72-band-green .trust-cell, .trust-strip .trust-cell,
.mid-cta .mid-cta-inner, .cc-mention .cc-mention-inner {
  border-color: var(--t72-rule-on-green) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS ON A GREEN BAND
   --------------------------------------------------------------------------
   An INK button on green is 1.88:1 against the band - it disappears. So:

     primary    -> the GOLD button. Its own legibility is INK on GOLD, 4.04:1
                   at 20px/700, and that figure does not change with the
                   colour behind it. Gold vs green is 2.68:1 as a boundary, so
                   the gold button also carries a PAPER keyline (5.22:1) to
                   meet the 3:1 non-text requirement for a UI component.
     secondary  -> outline: transparent fill, PAPER label, PAPER border.
                   5.22:1 both ways.
   -------------------------------------------------------------------------- */
.t72-band-green .btn-gold, .t72-band-green .btn-primary, .t72-band-green .t72-cta,
.mid-cta .btn-gold, .mid-cta .btn-primary,
.final-cta .btn-gold, .final-cta .btn-primary, .final-cta .t72-cta,
.cc-mention .btn-gold, .cc-mention .btn-primary {
  background: var(--t72-gold) !important;
  color: var(--t72-ink) !important;
  border: 1px solid var(--t72-gold) !important;
  box-shadow: 0 0 0 1px var(--t72-paper) !important;   /* 5.22:1 keyline */
  font-size: var(--t72-cta-size) !important;
  font-weight: var(--t72-cta-weight) !important;
  letter-spacing: var(--t72-cta-track) !important;
  line-height: 1.15 !important;
  padding: var(--t72-cta-pad) !important;
  white-space: normal !important;
  max-width: 100%;
}
.t72-band-green .btn-gold *, .t72-band-green .btn-primary *, .t72-band-green .t72-cta *,
.mid-cta .btn-gold *, .mid-cta .btn-primary *,
.final-cta .btn-gold *, .final-cta .btn-primary *, .final-cta .t72-cta *,
.cc-mention .btn-gold *, .cc-mention .btn-primary * {
  color: var(--t72-ink) !important;
}
.t72-band-green .btn-gold:hover, .t72-band-green .btn-primary:hover,
.mid-cta .btn-gold:hover, .mid-cta .btn-primary:hover,
.cc-mention .btn-gold:hover, .cc-mention .btn-primary:hover {
  background: var(--t72-ink) !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-paper) !important;   /* keeps the edge at 5.22:1 */
}
.t72-band-green .btn-gold:hover *, .mid-cta .btn-gold:hover *,
.cc-mention .btn-gold:hover *, .t72-band-green .btn-primary:hover *,
.mid-cta .btn-primary:hover *, .cc-mention .btn-primary:hover * {
  color: var(--t72-paper) !important;
}

/* Everything secondary on a green band is the light outline. This catches
   .btn-outline, whose INK label and INK border are 1.88:1 on green. */
.t72-band-green .btn-outline, .t72-band-green .btn-outline-light,
.t72-band-green .btn-secondary, .t72-band-green .btn-call,
.mid-cta .btn-outline, .mid-cta .btn-outline-light,
.mid-cta .btn-secondary, .mid-cta .btn-call,
.cc-mention .btn-outline, .cc-mention .btn-outline-light,
.cc-mention .btn-secondary, .cc-mention .btn-call,
.trust-strip .btn-outline, .trust-strip .btn-secondary, .trust-strip .btn-call {
  background: transparent !important;
  color: var(--t72-paper) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-outline:hover, .t72-band-green .btn-outline-light:hover,
.t72-band-green .btn-secondary:hover, .t72-band-green .btn-call:hover,
.mid-cta .btn-outline:hover, .mid-cta .btn-outline-light:hover,
.mid-cta .btn-secondary:hover, .mid-cta .btn-call:hover,
.cc-mention .btn-outline:hover, .cc-mention .btn-outline-light:hover,
.cc-mention .btn-secondary:hover, .cc-mention .btn-call:hover {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-outline:hover *, .mid-cta .btn-outline:hover *,
.cc-mention .btn-outline:hover *, .t72-band-green .btn-outline-light:hover *,
.mid-cta .btn-outline-light:hover *, .cc-mention .btn-outline-light:hover *,
.mid-cta .btn-call:hover *, .cc-mention .btn-call:hover * {
  color: var(--t72-ink) !important;
}

/* A paper-filled button on green keeps its INK label (12.1:1) and reads
   against the band at 5.22:1. */
.t72-band-green .btn-tan, .t72-band-green .btn-ghost-cream,
.t72-band-green .btn-schedule,
.mid-cta .btn-tan, .mid-cta .btn-ghost-cream, .mid-cta .btn-schedule,
.cc-mention .btn-tan, .cc-mention .btn-ghost-cream, .cc-mention .btn-schedule,
.trust-strip .btn-tan, .trust-strip .btn-ghost-cream, .trust-strip .btn-schedule {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.t72-band-green .btn-tan *, .mid-cta .btn-tan *, .cc-mention .btn-tan *,
.trust-strip .btn-tan *, .t72-band-green .btn-schedule *,
.mid-cta .btn-schedule *, .cc-mention .btn-schedule *, .trust-strip .btn-schedule * {
  color: var(--t72-ink) !important;
}

/* The focus ring on a green band: the PAPER halo is the visible one (5.22:1
   against green), with the INK outline outside it. */
.t72-band-green a:focus-visible, .t72-band-green button:focus-visible,
.mid-cta a:focus-visible, .mid-cta button:focus-visible,
.cc-mention a:focus-visible, .cc-mention button:focus-visible,
.trust-strip a:focus-visible, .trust-strip button:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* ==========================================================================
   SECTION 3 — THE MEASURED CONTRAST FIXES
   --------------------------------------------------------------------------
   Every rule below closes a failure that was MEASURED in a browser, on the
   built page, at the size and colour it actually renders — not read off the
   source. The audit walked every text node on all 45 NC URLs, 41 Oregon URLs,
   the brand hub and the unpublished fourth site, composited each colour
   through its ancestors' alpha and gradients, and compared against 4.5:1 (or 3:1 for
   large text). These were the only things it found.

   TWO CAUSES, over and over:

     1. A colour that passes at full strength, faded with opacity or an alpha
        until it does not. Nothing here changes a hue; it removes a fade, or
        swaps to --t72-label, which already resolves to the right colour for
        whichever surface the element sits on (SCENERY GREEN on paper 5.22:1,
        LINEN on ink 5.7:1, PAPER on a green band 5.22:1).

     2. LINEN used as small type on PAPER — 1.67:1. LINEN is a type colour for
        INK grounds only. On paper it goes to --t72-label.

   | selector                    | was                        | now     |
   |-----------------------------|----------------------------|---------|
   | .sep (breadcrumb)           | LINEN on paper      1.67:1 | 5.22:1  |
   | .caret (nav arrow)          | GREEN at 80%        3.48:1 | 5.22:1  |
   | .pillar-number              | GREEN at 70%        2.88:1 | 5.22:1  |
   | .chapter-num                | GREEN at 85%        3.83:1 | 5.22:1  |
   | .hero-jump-list .count      | GREEN at 85%        3.70:1 | 5.01:1  |
   | .hero-note                  | GREEN at 85%        3.83:1 | 5.22:1  |
   | .row-note, .price-unit      | PAPER at 55% on ink 4.23:1 | 5.70:1  |
   | .footer-brand .meta         | PAPER at 50% on ink 3.78:1 | 5.70:1  |
   | .footer-legal-nav span      | PAPER at 32% on ink 2.45:1 | 5.70:1  |
   | .strikethrough              | PAPER at 50% on ink 3.78:1 | 5.70:1  |
   | .state-label (the map)      | PAPER at 45% on ink 3.37:1 | 5.70:1  |
   | .btn at reduced opacity     | INK at 70% on paper 4.23:1 | 12.1:1  |
   | .locations-cta .loc-card p  | PAPER at 75% on a paper    | 5.55:1  |
   |                             | wash over green     3.31:1 |         |

   The last one is the only structural change: the card on that green band
   carried a 7%-PAPER wash, which lightened the ground under its own paper
   type. The wash becomes 12% INK, so the card still separates from the band
   but separates DOWNWARD, and the paper type gains contrast instead of
   losing it.

   And on the fourth site's /service-area/ page, three more of the same kind:
   .county-label (PAPER at 50% on ink, 3.62:1), and the .cell.area and
   .cell.time table headings, which were INK on INK (invisible, 1:1) and
   SCENERY GREEN on INK (1.88:1). All three take --t72-label, 5.7:1.

   NOT a failure, and deliberately left alone: .neighbor-cta on the NC city
   pages renders at opacity 0 and reveals on hover. Invisible text is not a
   contrast case, and at its revealed opacity it measures 5.22:1.
   ========================================================================== */

/* --- 1. LINEN is never small type on PAPER ------------------------------- */
.sep, .breadcrumb .sep, .breadcrumbs .sep,
.tag, .map-tag, .rating-meta {
  color: var(--t72-label, var(--t72-green)) !important;
}

/* --- 2. Fades removed. The colour underneath already passes. ------------- */
.caret, .nav-item .caret, .nav-link .caret,
.pillar-number, .chapter-num,
.hero-jump-list .count, .hero-note {
  opacity: 1 !important;
}
.caret, .nav-item .caret, .nav-link .caret {
  color: var(--t72-label, var(--t72-green)) !important;
}

/* PHASE 4c. The rule above is right for the desktop nav, which sits on PAPER
   (5.22:1). Below 720px the same caret moves into the NC mobile drawer, and
   `.nav-links` there is `background: var(--ink)` — SCENERY GREEN on INK is
   1.88:1. Phase 4b's audit never saw it because it measured pages as loaded
   and the drawer is closed until the toggle is pressed; a closed drawer's
   caret has a 0x0 box, so it is not a text node anyone can fail.
   Measured with the drawer open at 375px: 1.88:1 before, 9.83:1 after. */
@media (max-width: 720px) {
  .nav-links .caret,
  .nav-links .nav-item .caret,
  .nav-links .nav-link .caret {
    color: var(--t72-paper, #FFF6DC) !important;
  }
}

/* A button is never faded. At 70% its INK label drops to 4.23:1. */
.btn, a[class*="btn-"], button[class*="btn-"] {
  opacity: 1 !important;
}

/* --- 3. Alpha-on-INK type takes the surface's own label colour ----------- */
.row-note, .price-unit,
.footer-brand .meta, .footer-legal-nav span,
.strikethrough, .seal-stat .strikethrough,
.state-label, .state-label.or, .state-label.wa {
  color: var(--t72-label, var(--t72-linen)) !important;
  opacity: 1 !important;
}

/* --- 4. The card on the green locations band separates downward ---------- */
.locations-cta .loc-card {
  background: rgba(61, 63, 63, .12) !important;   /* INK wash, not PAPER */
}
.locations-cta .loc-card p,
.locations-cta .loc-card li,
.locations-cta .loc-card span:not([class*="btn"]) {
  color: var(--t72-paper) !important;
  opacity: 1 !important;
}

/* --- 5. The fourth site's /service-area/ page --------------------------- */
.county-label {
  color: var(--t72-label, var(--t72-linen)) !important;
  opacity: 1 !important;
}
/* The response table's header row is an INK band; its body rows are
   transparent over PAPER. One --t72-label covered both and was wrong on one
   of them, so each takes the colour its own ground needs. */
.response-row.header .cell { color: var(--t72-linen) !important; }   /* 5.7:1  */
.response-row:not(.header) .cell { color: var(--t72-ink) !important; } /* 12.1:1 */

/* ==========================================================================
   SECTION 4 — ONE LAYOUT FIX
   --------------------------------------------------------------------------
   MEASURED: the fourth site's /about/ page scrolled 11px sideways at 375px.
   Its chapter list is a CSS grid, and a grid item defaults to min-width:auto, which
   refuses to shrink below its widest unbreakable content. min-width:0 is the
   standard release valve; it changes nothing at any width where the content
   already fits.
   ========================================================================== */
@media (max-width: 1080px) {
  .chapter, .chapter-anchor, .chapter-body { min-width: 0; }
  .chapter-body p, .chapter-body h3, .chapter-body .pullquote { overflow-wrap: break-word; }
}

/* ==========================================================================
   SECTION 5 — THE REST OF THE --ink-soft SURFACES               (Phase 15)
   --------------------------------------------------------------------------
   D84's first misreading, finished. The live T. Byrd's site names its warm
   olive --ink-soft, and it is #696859 — SCENERY GREEN, one of the approved
   five. Read as "a shade of ink" it was painted #3D3F3F, which silently took
   the green out of five surfaces at once. Phase 14 put the COMPONENT surfaces
   back (the booking card, the stat band, the promises band, the final CTA and
   the city-page triage cards, all in tru72-components.css). What was left was
   the hand-written bands on Oregon, Nevada and the hub, which no component
   renders and which Phase 14 explicitly did not reach.

   MEASURED ON THE REFERENCE, by reading which of its bands declare
   background: var(--ink-soft):

     index.html            .booking-card  .trust-band  .promises  .final-cta
     hvac-raleigh-nc/      + .intent-row  .area-cell.parent
     service-areas-charlotte/   .recovery
     faqs/                 .recovery
     — and LINEN on        .reviews  .service-area  .routing  .faq
     — and INK on          .cardinal-section, the membership feature band
     — and INK on the CHROME: .utility, .footer, .mobile-sticky. Those were
       never the misreading and they are not touched.

   OUR BANDS THAT ANSWER TO THOSE, and the evidence for each:

     .locations       Oregon's state landing page. Two market panels, each with
                      a city, an address, a phone and a Schedule control — the
                      reference's .booking-card down to the shape. It was PAPER.
     .locations-cta   the same device on five Oregon leaf pages. It was already
                      SCENERY GREEN on two of them (--green-ink) and INK on
                      three (--navy) — the misreading, visible as an
                      inconsistency inside one site.
     .cta-band        the sitemap page's closing call to action: a heading, a
                      line and nothing else. .final-cta by another name, and it
                      was INK.
     .reviews         LINEN, not green. The reference puts its reviews on linen
                      with PAPER cards floating on it, and that is one of the
                      two big mid-page linen bands that give its pages their
                      middle. Ours was PAPER on Oregon and PAPER-WARM on the NC
                      city pages, where it also made a warm run of three with
                      .t72c-rebate-sec above it.

   WHAT IS DELIBERATELY NOT CONVERTED

     .mission-seal-strip  stays INK. Dark is the occasional NARROW band that
                          breaks the page, and on the Oregon landing page this
                          is the one that does it.
     .tru-comfort-block   GONE (Phase 16, D88). It was the Oregon landing's
                          Tru Comfort CARD, a PAPER-WARM half-band hanging off
                          the .t72c-prob-sec above it. The same content is now
                          the shared INK feature band .t72c-tc-sec, which is
                          what North Carolina and the reference both use.
     .hd-trust            stays PAPER-WARM, registered for the same reason.
   ========================================================================== */

/* -- A GREEN BAND WHOSE CARDS ARE RECESSED PANELS -------------------------
   .t72-band-green's blanket * { color: PAPER } is safe only on a band of pure
   type. These two hold light cards, so they take the reference's other shape
   instead: the card becomes a translucent INK recess in the green — the same
   device as the booking card's market panels — and PAPER type sits on that.
   MEASURED: INK at 12% over SCENERY GREEN resolves to about #5F5E51, on which
   PAPER is 5.55:1, so the card separates from the band and the type gains
   contrast rather than losing it.
   -------------------------------------------------------------------------- */
.t72-band-green-panels,
.locations,
.locations-cta {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);
  --t72-rule: var(--t72-rule-on-green);
  --t72-rule-strong: var(--t72-rule-on-green);
  --t72c-display-soft: var(--t72-paper);
}
.t72-band-green-panels :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address),
.locations :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address),
.locations-cta :is(h1,h2,h3,h4,p,span,li,div,em,strong,time,address) {
  color: var(--t72-paper) !important;
  opacity: 1;
}
/* The recess. .loc-card is the leaf-page card and was already handled in
   SECTION 3; .loc-card-mini is the Oregon landing page's. Same treatment. */
.t72-band-green-panels .card,
.locations .loc-card-mini,
.locations-cta .loc-card {
  background: rgba(61, 63, 63, .12) !important;
  border-color: var(--t72-rule-gold-soft) !important;
}
.locations .loc-card-mini:hover, .locations-cta .loc-card:hover {
  border-color: var(--t72-rule-gold) !important;
}
/* Eyebrow hairlines: PAPER at 42%, never gold — 2.15:1 on green. */
.locations .eyebrow::before, .locations .eyebrow::after,
.locations-cta .eyebrow::before, .locations-cta .eyebrow::after,
.t72-band-green-panels .eyebrow::before, .t72-band-green-panels .eyebrow::after {
  background: var(--t72-rule-on-green) !important;
}
/* A control on a green band. 13px is far under the 18.66px bold that licenses
   a gold fill, so this is the PAPER fill with an INK label: 12.1:1 inside the
   button, 5.22:1 against the band. */
.locations .city-schedule-btn, .locations-cta .city-schedule-btn,
.t72-band-green-panels .city-schedule-btn {
  background: var(--t72-paper) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-paper) !important;
}
.locations .city-schedule-btn:hover, .locations-cta .city-schedule-btn:hover {
  background: var(--t72-linen) !important;
  color: var(--t72-ink) !important;
  border-color: var(--t72-linen) !important;
}
.locations .city-explore-link, .locations-cta .city-explore-link,
.locations .city-explore-link:hover, .locations-cta .city-explore-link:hover {
  color: var(--t72-paper) !important;
}
.locations a:focus-visible, .locations-cta a:focus-visible,
.t72-band-green-panels a:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px var(--t72-paper) !important;
}

/* -- A PLAIN GREEN BAND, THE SAME SHAPE AS SECTION 2's LIST --------------- */
.cta-band {
  background: var(--t72-green) !important;
  background-image: none !important;
  color: var(--t72-paper) !important;
  --t72-label: var(--t72-paper);
  --t72-rule: var(--t72-rule-on-green);
  --t72c-display-soft: var(--t72-paper);
  border-top: 1px solid var(--t72-rule-gold);
  border-bottom: 1px solid var(--t72-rule-gold);
}
.cta-band * { color: var(--t72-paper) !important; opacity: 1; }
.cta-band .eyebrow::before, .cta-band .eyebrow::after, .cta-band hr {
  background: var(--t72-rule-on-green) !important;
}

/* -- THE LINEN REVIEWS BAND ----------------------------------------------
   On flat LINEN #CBC0AA only INK clears AA: INK 5.89:1, SCENERY GREEN 3.13:1,
   ANTIQUE GOLD 1.46:1, PAPER 1.67:1. So every type colour resolves to INK and
   the hierarchy is carried by size and weight, exactly as the LINEN bands in
   tru72-components.css already do. The review widget is a third-party iframe
   and keeps its own light ground, which is what the reference's PAPER review
   cards on linen look like anyway.
   -------------------------------------------------------------------------- */
.t72-band-linen,
.reviews {
  background: var(--t72-linen) !important;
  background-image: none !important;
  color: var(--t72-ink) !important;
  --t72-label: var(--t72-ink);
  --t72c-display-soft: var(--t72-ink);
}
.t72-band-linen :is(h1,h2,h3,h4,p,span,li,div,em,strong,a,time,summary),
.reviews :is(h1,h2,h3,h4,p,span,li,div,em,strong,a,time,summary) {
  color: var(--t72-ink) !important;
  opacity: 1;
}
/* A card on linen goes PAPER, which is the reference's own arrangement, and
   INK on PAPER is 12.1:1. */
.t72-band-linen .card, .reviews .review-card {
  background: var(--t72-paper) !important;
  border-color: var(--t72-rule-strong) !important;
}
/* The stars are decoration, but ANTIQUE GOLD on linen is 1.46:1 — they would
   be invisible rather than decorative, so they take INK like everything else.
   The rating number beside them carries the meaning either way. */
.reviews .stars, .reviews .rating-summary .stars { color: var(--t72-ink) !important; }
.t72-band-linen .eyebrow::before, .t72-band-linen .eyebrow::after,
.reviews .eyebrow::before, .reviews .eyebrow::after {
  background: var(--t72-rule-strong) !important;
}
.reviews a:focus-visible, .t72-band-linen a:focus-visible {
  outline: 2px solid var(--t72-ink) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   SECTION 6 — THE ITALIC DISPLAY LINE ON A HAND-WRITTEN HEADING  (Phase 15)
   --------------------------------------------------------------------------
   tru72-components.css styles .t72c-h1 em and .t72c-h em, which covers every
   heading a component renders — 917 on Oregon alone. It does not cover the
   headings a page writes itself, and tools/display_em.py marks those up too,
   so without this rule they would come out as an inline italic run inside the
   uppercase line rather than as a second line under it.

   THE COLOUR IS --t72-label, NOT GOLD-AGED. --t72-label is declared beside
   every surface's background by the per-site sheets, and it already resolves
   to something that passes AT ANY SIZE on every ground:

       on PAPER and the two tints   SCENERY GREEN   5.23 / 4.79 / 4.57:1
       on INK                       LINEN           5.89:1
       on a SCENERY GREEN band      PAPER           5.23:1
       on LINEN                     INK             5.89:1

   A hand-written band does not declare --t72c-display-soft and this rule
   cannot know its ground, so it takes the colour that is safe on all of them.
   GOLD-AGED needs a PAPER ground AND 24px and neither can be proven here —
   which is the condition audit check 14b exists to enforce. The component
   headings, where both ARE proven, carry the gold.
   ========================================================================== */
:is(h1, h2):not([class*="t72c-h"]) > em {
  display: block;
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .78em;
  line-height: 1.12;
  margin-top: .12em;
  color: var(--t72-label, var(--t72-green));
}

/* ==========================================================================
   SECTION 7 — TWO MORE LAYOUT FIXES, BOTH MEASURED AT 375px   (Phase 15)
   --------------------------------------------------------------------------
   1. THE LEGAL PAGES' TABLE OF CONTENTS.  `.legal-body .container` is a
      `240px 1fr` grid with the contents list in the fixed column. Oregon's
      pages carry a media query that stacks it; Nevada's /privacy/ does not, so
      at 375px the fixed 240px column ate the width, the content column
      computed to 0px and its list items rendered outside the page — the
      document measured 530px against a 375px viewport. Stacking is what every
      other legal page on every other site already does, so it goes here once
      rather than into the one page that is missing it.

   2. A GRID ITEM THAT WILL NOT SHRINK.  min-width: 0 is applied at the two
      components that needed it (the stat band and the card grids, in
      tru72-components.css). This is the same release valve for the
      hand-written grids, which no component owns.

   MEASURED AFTER, at 375px, on all 208 pages of the four sites:
   0 pages with horizontal scroll, 0 WCAG AA failures.
   ========================================================================== */
@media (max-width: 900px) {
  /* !important because the legal pages carry their own <style> AFTER this
     sheet's <link> — measured, not assumed: the rule matched, tied on
     specificity and lost on source order, and the grid stayed 240px 7px. */
  .legal-body .container { grid-template-columns: 1fr !important; gap: 36px !important; }
  .legal-toc { position: static; }
  .legal-article, .legal-article section, .legal-body ul, .legal-body ol {
    min-width: 0;
  }
  .legal-body li, .legal-body p, .legal-body dd { overflow-wrap: break-word; }
}