/* ==========================================================================
   TRU72 — THE SHARED COMPONENT SET  (Phase 6)
   --------------------------------------------------------------------------
   Every component in components.py renders classes from this one sheet, on all
   four sites. It loads LAST, after tru72-surfaces.css, and build.py adds the
   link only to pages that actually use a component — so nothing here can move
   a pixel on a page that has not been converted yet.

   THE THREE CONSTRAINTS, AND WHERE EACH ONE IS ENFORCED

   1. COLOUR — D42's five, and nothing else. There is not one hex literal in
      this file. Every colour is var(--t72-ink | --t72-green | --t72-gold |
      --t72-linen | --t72-paper), the two LINEN-in-PAPER surface tints, or one
      of the rule tokens. A sixth colour cannot be introduced here without
      first being introduced in tru72-tokens.css, which is the switch.

   2. TYPE — D43's two faces. --t72-font-display (Friz Quadrata, falling back
      to Fraunces until the webfont licence is bought) for headings and display
      numerals; --t72-font-body (Fraunces) for everything else. No third face.

   3. BUTTONS — D46. This sheet styles .t72c-btn's SHAPE only: padding, border,
      radius, focus. The gold FILL and the 20px/700 that licenses it at 4.04:1
      come from .t72-cta in tru72-surfaces.css, in a single declaration block,
      with !important. A component asking for a gold button gets the size with
      it, whatever it does here. .t72c-btn-ink is PAPER on INK at 9.7:1 and is
      legible at any size, which is why every dense or narrow slot uses it.

   ACCESSIBILITY THAT IS STRUCTURAL RATHER THAN OPTIONAL
   - .t72c-sr is the visually-hidden class used for table captions and the
     headings that label a band which has no visible title. It is never used to
     hide something a sighted user needs.
   - Focus is visible everywhere: a 3px ANTIQUE GOLD ring with a 2px offset, on
     paper and on ink, on links, buttons, summaries and jump links. :focus (not
     only :focus-visible) on the controls, so keyboard and assistive-tech focus
     both show.
   - Every interactive target is at least 44px tall at 375px.
   - prefers-reduced-motion removes the two transitions in the file.

   375px: every grid is a single column below 720px, every table scrolls inside
   its own wrapper rather than widening the page, and the gutter drops to
   --t72-gutter-mobile. There is no fixed width anywhere in this sheet.
   ========================================================================== */

/* ==========================================================================
   THE SURFACE CONTRACT                                        (Phase 8, fix 1)
   --------------------------------------------------------------------------
   THE BUG THIS REPLACES. Every text colour in this sheet used to name a token
   directly, and every dark band then had to re-state that colour through a
   descendant selector — `.t72c-hero a { color: … }`, `.t72c-hero .t72c-note
   { color: … }`, and so on: eight separate hand-maintained selector lists.
   That works only while a band is one flat surface. It is wrong the moment a
   component puts a PAPER card on an INK band, because the band's descendant
   selector reaches straight through the card and paints on-INK text on PAPER.

   It happened. `hero-booking`'s market card (`.t72c-book`) is a PAPER card on
   the INK hero. `.t72c-hero a` painted the two market names PAPER-on-PAPER —
   measured 1.00:1, literally invisible — and `.t72c-hero .t72c-note` took the
   card's footnote to 1.67:1. The sheet already carried a one-off exception for
   headings (`.t72c-hero .t72c-book :is(h2, h3)`), which is the tell: the
   pattern needed a hand-written exception per selector, so the next component
   to nest a surface would have reintroduced the fault with no warning.

   THE FIX. A band no longer states colours for its descendants. It states what
   KIND OF SURFACE it is, once, as the variables below, and every colour rule in
   this file reads a variable. Variables inherit, so a nested surface redeclares
   them once — see the PAPER ISLAND block — and everything inside it follows
   automatically. A component cannot inherit the wrong surface's colour any
   more, because no rule reaches past a surface boundary.

   THE ROLES, and the measured pair each one resolves to (WCAG 2.1):
     --t72c-fg          body copy          INK on PAPER 12.1:1 · LINEN on INK 5.7:1
     --t72c-fg-muted    secondary copy     GREEN 5.2:1         · LINEN 5.7:1
     --t72c-fg-strong   links, emphasis    INK 12.1:1          · PAPER 9.7:1
     --t72c-display     headings >= 25px   INK 12.1:1          · GOLD 4.0:1 (large only)
     --t72c-accent      small labels       GREEN 5.2:1         · LINEN 5.7:1
     --t72c-rule-soft   hairlines
   GOLD is never --t72c-fg / -muted / -accent on either surface: 2.4:1 on PAPER
   at every size, 4.0:1 on INK, which licenses it for display type only. That is
   why --t72c-display is a separate role from --t72c-fg-strong, and why
   .t72c-h3 (19-22px) reads -fg-strong rather than -display.

   ADDING A COMPONENT: read a variable, never a --t72-type-* token directly.
   NESTING A SURFACE: give the element .t72c-island (PAPER) and nothing else is
   needed. tools/audit_phase5.py check 14 fails the build if either is broken.
   ========================================================================== */

/* -- the band -------------------------------------------------------------- */
.t72c {
  /* PAPER is the default surface. */
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-deep);
  --t72c-means-bg:          var(--t72-paper-warm);

  padding: 72px 0;
  background: var(--t72-paper);
  color: var(--t72c-fg-strong);
  font-family: var(--t72-font-body);
}
.t72c-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--t72-gutter, 40px);
}
.t72c + .t72c { border-top: 1px solid var(--t72-rule); }

/* Alternating surfaces so a long page does not read as one slab. Both tints
   are LINEN mixed into PAPER (tokens file), so neither is a new pigment. */
.t72c-signs-sec, .t72c-process-sec, .t72c-plan-sec, .t72c-rel-sec,
.t72c-prob-sec { background: var(--t72-paper-warm); }
.t72c-compare-sec, .t72c-rebate-sec, .t72c-faq-sec, .t72c-areas-sec,
.t72c-jump-sec { background: var(--t72-paper-deep); }

/* Dark bands. PAPER and LINEN on INK measure 9.7:1 and 5.7:1.
   THIS IS THE ONLY PLACE A DARK BAND STATES A COLOUR. It declares the surface;
   the rules further down read it. Adding a band to this list is all that is
   needed to make every component inside it legible — which is why
   .t72c-trust-sec and .t72c-seal-sec are here even though their current
   contents happen to colour themselves: before Phase 8 they were absent from
   six of the eight on-INK selector lists, so a heading, a deck, a link or an
   ink button dropped into either one would have rendered INK-on-INK. */
.t72c-hero, .t72c-trust-sec, .t72c-method-sec, .t72c-final-cta,
.t72c-seal-sec, .t72c-inline-cta, .t72c-mgr-sec {
  --t72c-fg:                var(--t72-type-on-ink);
  --t72c-fg-muted:          var(--t72-type-on-ink);
  --t72c-fg-strong:         var(--t72-type-on-ink-strong);
  --t72c-display:           var(--t72-display-on-ink);
  --t72c-accent:            var(--t72-type-on-ink);
  --t72c-rule-soft:         var(--t72-rule-on-ink);
  --t72c-btn-ink-bg:        var(--t72-paper);
  --t72c-btn-ink-fg:        var(--t72-ink);
  --t72c-btn-ink-hover:     var(--t72-linen);
  --t72c-btn-outline-fg:    var(--t72-paper);
  --t72c-btn-outline-bd:    var(--t72-rule-on-ink);
  --t72c-btn-outline-hover: var(--t72-rule-on-ink);
  --t72c-means-bg:          transparent;

  background: var(--t72-ink);
  color: var(--t72c-fg-strong);
  border-top: 1px solid var(--t72-rule-gold);
}
.t72c-trust-sec, .t72c-seal-sec { padding: 40px 0; }

/* -- PAPER ISLANDS --------------------------------------------------------
   A PAPER surface sitting inside a band of a different colour. It redeclares
   the contract and everything within it follows — no per-selector exception is
   written anywhere else in this file, and none should be.

   `.t72c-island` is the hook a NEW component uses: put the class on the card
   and it is done. `.t72c-book` (hero-booking's market card) and the comparison
   table's "us" column carry it implicitly so existing markup needs no change.
   -------------------------------------------------------------------------- */
.t72c-island, .t72c-book, .t72c-table .t72c-us {
  --t72c-fg:                var(--t72-type-on-paper);
  --t72c-fg-muted:          var(--t72-type-on-paper-muted);
  --t72c-fg-strong:         var(--t72-type-on-paper);
  --t72c-display:           var(--t72-type-on-paper);
  --t72c-accent:            var(--t72-type-on-paper-muted);
  --t72c-rule-soft:         var(--t72-rule);
  --t72c-btn-ink-bg:        var(--t72-ink);
  --t72c-btn-ink-fg:        var(--t72-paper);
  --t72c-btn-ink-hover:     var(--t72-green);
  --t72c-btn-outline-fg:    var(--t72-ink);
  --t72c-btn-outline-bd:    var(--t72-rule-strong);
  --t72c-btn-outline-hover: var(--t72-paper-deep);
  --t72c-means-bg:          var(--t72-paper-warm);

  color: var(--t72c-fg-strong);
}

/* -- headings -------------------------------------------------------------- */
.t72c-h1, .t72c-h, .t72c-h3 {
  font-family: var(--t72-font-display);
  font-weight: 700;
  letter-spacing: var(--t72-track-display, .005em);
  line-height: 1.08;
  margin: 0 0 18px;
  text-wrap: balance;
  /* Stated, not inherited. Each of the four sites has its own global
     `h1,h2,h3 { color: ... }` in a page's inline <style>, and a component has
     to look the same on all four. */
}
/* .t72c-h1 (32px min) and .t72c-h (25px min) are the only headings large
   enough to carry ANTIQUE GOLD on INK at 4.0:1. --t72c-display is GOLD on a
   dark band and INK on PAPER, so one rule covers both. */
.t72c-h1, .t72c-h { color: var(--t72c-display); }
.t72c-h1 { font-size: clamp(32px, 5vw, 58px); }
.t72c-h  { font-size: clamp(25px, 3.1vw, 38px); }
/* Every other heading — .t72c-h3 at 19-22px, and any unclassed h2..h6 a
   component emits — is under the 24px that licenses gold, so it takes the
   surface's strong text colour: PAPER on INK 9.7:1, INK on PAPER 12.1:1.
   The :not()s exclude the two display classes above without out-specifying
   them by accident. */
.t72c-h3,
.t72c :is(h2, h3, h4, h5, h6):not(.t72c-h):not(.t72c-h1) { color: var(--t72c-fg-strong); }
.t72c-h3 { font-size: clamp(19px, 1.7vw, 22px); }

.t72c-deck {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--t72c-fg);
}
.t72c-eyebrow {
  font-family: var(--t72-font-label);
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  /* 13px, so never gold: 2.43:1 on PAPER, and 4.0:1 on INK licenses 18.66px
     bold at the smallest. GREEN 5.2:1 / LINEN 5.7:1. */
  color: var(--t72c-accent);
  margin: 0 0 14px;
}
.t72c-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -- links and focus ------------------------------------------------------- */
/* One rule, both surfaces. This used to be `color: inherit` plus a five-band
   on-INK override, and the override was what painted PAPER links onto the
   hero's PAPER booking card at 1.00:1. */
.t72c a { color: var(--t72c-fg-strong); }
.t72c :is(a, summary, button):focus,
.t72c :is(a, summary, button):focus-visible {
  outline: 3px solid var(--t72-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -- buttons: SHAPE only. D46's gold fill + size come from tru72-surfaces.css */
.t72c-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 26px 0 0;
}
.t72c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 15px 28px;
  border-radius: var(--t72-radius, 2px);
  font-family: var(--t72-font-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
/* NOTE THE `.t72c ` PREFIX ON EVERY BUTTON COLOUR RULE BELOW. It is not
   decoration. `.t72c a` above is specificity 0-1-1 and `.t72c-btn-ink` on its
   own is 0-1-0, so the band's colour used to win: an ink button on a PAPER
   band came out INK-on-INK and the label was invisible. Measured 1.00:1 in the
   browser. Prefixing takes these to 0-2-0.

   The INVERSION is now the surface's business, not a band list. A button
   inside a PAPER ISLAND on the INK hero gets the PAPER-band treatment, which
   the old five-band lists could not express: it would have rendered an ink
   button PAPER-on-PAPER (invisible border, invisible outline label). Both
   directions measure PAPER-against-INK at 9.7:1. */
.t72c .t72c-btn-ink {
  background: var(--t72c-btn-ink-bg);
  color: var(--t72c-btn-ink-fg);
  border: 1px solid var(--t72c-btn-ink-bg);
  font-size: 15px;
}
.t72c .t72c-btn-ink:hover {
  background: var(--t72c-btn-ink-hover); border-color: var(--t72c-btn-ink-hover);
}
.t72c .t72c-btn-outline {
  background: transparent;
  color: var(--t72c-btn-outline-fg);
  border: 1px solid var(--t72c-btn-outline-bd);
  font-size: 15px;
}
.t72c .t72c-btn-outline:hover { background: var(--t72c-btn-outline-hover); }

.t72c-note {
  font-size: 14px; line-height: 1.45; margin: 12px 0 0;
  color: var(--t72c-fg-muted);
}
.t72c-fineprint {
  font-size: 14px; line-height: 1.5; margin: 14px 0 0;
  color: var(--t72c-fg-muted); max-width: 70ch;
}

/* -- "What it means:" — the Oregon translation device, spec §1.3 DO #5 ------ */
.t72c-means {
  margin: 14px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--t72-gold);
  /* On a dark band --t72c-means-bg is `transparent`, so this reads
     PAPER-on-INK at 9.7:1 rather than the warm tint. */
  background: var(--t72c-means-bg);
  color: var(--t72c-fg-strong);
  font-size: 16px; line-height: 1.55;
  max-width: 70ch;
}
.t72c-means-label {
  font-family: var(--t72-font-label);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 13px;
  display: inline-block; margin-right: 6px;
  /* 13px, far under the 18.66px bold that licenses gold on ink, so this is
     GREEN 5.2:1 / LINEN 5.7:1 and never gold's 4.04:1. */
  color: var(--t72c-accent);
}
.t72c-claim { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; margin: 0 0 10px; }
.t72c-evidence {
  font-family: var(--t72-font-mono, var(--t72-font-body));
  font-size: 15px; line-height: 1.6; margin: 0 0 4px;
  color: var(--t72c-fg-muted);
}
.t72c-means-block { padding: 0; background: none; }

/* -- 1. hero with the booking card ----------------------------------------- */
.t72c-hero { padding: 84px 0 76px; }
.t72c-hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 52px; align-items: start; }
.t72c-hero-stats { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.t72c-hero-stats li { display: flex; flex-direction: column; }
.t72c-stat-n {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(27px, 2.6vw, 34px); color: var(--t72c-display); line-height: 1;
}
.t72c-stat-l {
  font-size: 14px; letter-spacing: .04em; margin-top: 6px; color: var(--t72c-fg);
}
/* -- the hero's right-hand column: booking card and/or photograph ---------- */
.t72c-hero-aside { display: grid; gap: 28px; align-content: start; }
.t72c-hero-solo { grid-template-columns: 1fr; }
.t72c-hero-solo .t72c-hero-copy .t72c-deck { max-width: 72ch; }
/* Photographs carry a gold keyline, the same hairline the booking card uses.
   No fixed height: these are supplied photographs of unknown aspect ratio, and
   the width/height attributes on the tag reserve the space. */
.t72c-hero-photo img, .t72c-story-photo img, .t72c-photo-strip-item img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--t72-rule-gold);
  border-radius: var(--t72-radius, 2px);
}

/* THE PAPER ISLAND that started all this. Its colour contract is declared in
   the PAPER ISLAND block above; this rule is geometry only. */
.t72c-book {
  background: var(--t72-paper);
  border: 1px solid var(--t72-gold);
  border-radius: var(--t72-radius, 2px);
  padding: 28px 26px 26px;
  box-shadow: var(--t72-shadow-deep, none);
}
.t72c-book-h {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: 23px; line-height: 1.12; margin: 0 0 6px;
}
.t72c-book-deck { font-size: 15px; line-height: 1.5; margin: 0 0 18px; color: var(--t72c-fg-muted); }
.t72c-mkts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.t72c-mkt-link {
  display: block; text-decoration: none;
  border: 1px solid var(--t72-rule-strong);
  border-radius: var(--t72-radius, 2px);
  padding: 15px 16px; min-height: 48px;
  background: var(--t72-paper-warm);
  transition: border-color .15s ease;
}
.t72c-mkt-link:hover { border-color: var(--t72-gold); }
.t72c-mkt-name {
  display: inline-block; font-family: var(--t72-font-display);
  font-weight: 700; font-size: 20px; line-height: 1.15;
}
.t72c-mkt-rating { float: right; font-size: 14px; color: var(--t72c-fg-muted); }
.t72c-mkt-serving { display: block; font-size: 14px; line-height: 1.45; margin-top: 4px; color: var(--t72c-fg-muted); }
.t72c-mkt-go {
  display: block; margin-top: 8px;
  font-family: var(--t72-font-label); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t72c-accent);
}
.t72c-mkt-note { font-size: 13px; margin: 6px 0 0; color: var(--t72c-fg-muted); }

/* -- 2. intent triage ------------------------------------------------------ */
.t72c-triage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.t72c-triage-card {
  background: var(--t72-paper); border: 1px solid var(--t72-rule);
  border-top: 3px solid var(--t72-gold);
  border-radius: var(--t72-radius, 2px); padding: 26px 24px 24px;
  display: flex; flex-direction: column;
}
.t72c-triage-h { font-family: var(--t72-font-display); font-weight: 700; font-size: clamp(21px, 2vw, 26px); line-height: 1.12; margin: 0 0 10px; }
.t72c-triage-body { font-size: 16px; line-height: 1.55; margin: 0; }
.t72c-triage-card .t72c-actions { margin-top: auto; padding-top: 18px; }

/* -- 3. trust band + credential row ---------------------------------------- */
.t72c-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 34px; }
.t72c-trust-item { display: flex; flex-direction: column; min-width: 120px; }
.t72c-trust-n {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1; color: var(--t72c-display);
}
.t72c-trust-l { font-size: 14px; line-height: 1.4; margin-top: 6px; color: var(--t72c-fg); }
.t72c-creds {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--t72c-rule-soft);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14px; color: var(--t72c-fg);
}

/* -- 5. signs / 6. routing / 22. problems / 21. services -------------------- */
.t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs, .t72c-rels, .t72c-brands,
.t72c-promises, .t72c-plans {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.t72c-signs { grid-template-columns: repeat(3, 1fr); }
.t72c-promises { grid-template-columns: repeat(5, 1fr); }
.t72c-plans { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.t72c-sign, .t72c-route, .t72c-prob, .t72c-svc, .t72c-rel, .t72c-brand,
.t72c-promise, .t72c-plan {
  background: var(--t72-paper); border: 1px solid var(--t72c-rule-soft);
  border-radius: var(--t72-radius, 2px); padding: 24px 22px;
  display: flex; flex-direction: column;
}
.t72c-sign-h, .t72c-route-h, .t72c-prob-h, .t72c-svc-h, .t72c-rel-h,
.t72c-brand-h, .t72c-promise-h, .t72c-plan-h {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.15; margin: 0 0 9px;
}
.t72c-sign-b, .t72c-route-b, .t72c-prob-b, .t72c-svc-b, .t72c-rel-b,
.t72c-brand-b, .t72c-promise-b, .t72c-plan-b {
  font-size: 15.5px; line-height: 1.55; margin: 0;
}
.t72c-sign .t72c-actions, .t72c-route .t72c-actions, .t72c-svc .t72c-actions,
.t72c-plan .t72c-actions { margin-top: auto; padding-top: 16px; }
/* A heading that IS the link is the card's tap target, so it has to be one:
   measured at 375px a bare 20px heading link came out 23px tall, under WCAG
   2.5.8's 24px minimum. The padding takes it past 44px. */
.t72c-rel-h a, .t72c-svc-h a, .t72c-prob-h a {
  display: block; padding: 11px 0; min-height: 44px;
}
.t72c-rel-h, .t72c-svc-h, .t72c-prob-h { margin-bottom: 0; }
.t72c-svc-n {
  font-family: var(--t72-font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; display: block; margin-bottom: 8px;
  color: var(--t72c-fg-muted);             /* 5.2:1 — gold at 15px is 2.43:1 */
}
/* Local story — the neighbourhood / per-city leaf's prose block. Measured
   line length, because these pages are long on purpose. */
.t72c-story { max-width: 74ch; }
.t72c-story-p { font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.t72c-story-p:last-child { margin-bottom: 0; }
.t72c-story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.t72c-story-solo { grid-template-columns: 1fr; }
.t72c-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 32px 0 0; }
@media (max-width: 880px) {
  .t72c-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .t72c-photo-strip { grid-template-columns: 1fr; gap: 18px; }
}

.t72c-svc-tag, .t72c-brand-role {
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t72c-accent); margin: 0 0 8px;
}
.t72c-creed {
  font-style: italic; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.35;
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--t72-rule-gold);
  text-align: center;
}

/* -- 7 + 12. tables -------------------------------------------------------- */
.t72c-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t72c-table {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: 16px; line-height: 1.5; min-width: 520px;
}
.t72c-table th, .t72c-table td {
  padding: 15px 18px; border-bottom: 1px solid var(--t72-rule); vertical-align: top;
}
.t72c-table thead th {
  font-family: var(--t72-font-label); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid var(--t72-gold);
  color: var(--t72c-accent);
}
.t72c-table tbody th { font-weight: 600; }
.t72c-table .t72c-us { background: var(--t72-paper); }
.t72c-table thead .t72c-us { color: var(--t72c-fg-strong); }
.t72c-rebates { min-width: 560px; }

/* -- 8. method / 10. process ----------------------------------------------- */
.t72c-method, .t72c-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: t72c-step;
  display: grid; gap: 22px;
}
.t72c-method { grid-template-columns: repeat(3, 1fr); }
.t72c-steps { grid-template-columns: repeat(5, 1fr); }
.t72c-method-step, .t72c-step { counter-increment: t72c-step; }
.t72c-method-step::before, .t72c-step::before {
  content: counter(t72c-step, decimal-leading-zero);
  display: block; font-family: var(--t72-font-display); font-weight: 700;
  font-size: 15px; letter-spacing: .1em;
  color: var(--t72c-fg-muted);             /* GREEN 5.2:1 / LINEN 5.7:1 at 15px */
  padding-bottom: 10px; margin-bottom: 12px;
  /* The gold stays, as the RULE. D42: gold is decoration, not type. */
  border-bottom: 1px solid var(--t72-rule-gold);
}
.t72c-step { background: var(--t72-paper); border: 1px solid var(--t72-rule); padding: 22px 20px; }
.t72c-method-h, .t72c-step-h {
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.15; margin: 0 0 9px;
}
.t72c-method-b, .t72c-step-b { font-size: 15.5px; line-height: 1.55; margin: 0 0 8px; }

/* -- 14. manager card ------------------------------------------------------ */
.t72c-mgr { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: start; }
.t72c-mgr-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--t72-rule-gold); border-radius: var(--t72-radius, 2px); }
.t72c-mgr-name { font-family: var(--t72-font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; margin: 0 0 14px; color: var(--t72c-display); }
.t72c-mgr-role { display: block; font-family: var(--t72-font-label); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t72c-accent); margin-top: 6px; }
.t72c-mgr-b { font-size: 16.5px; line-height: 1.6; margin: 0 0 14px; color: var(--t72c-fg-strong); }
.t72c-mgr-acc { font-size: 17px; line-height: 1.5; margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--t72-gold); color: var(--t72c-fg-strong); }

/* -- 15 + 16. CTAs --------------------------------------------------------- */
.t72c-inline-cta { padding: 46px 0; }
.t72c-final-cta { padding: 76px 0; text-align: center; }
.t72c-final-cta .t72c-deck, .t72c-final-cta .t72c-h { margin-left: auto; margin-right: auto; }
.t72c-final-cta .t72c-actions { justify-content: center; }
.t72c-phones { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 46px; justify-content: center; }
.t72c-phone-city { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--t72c-accent); font-family: var(--t72-font-label); }
.t72c-phone { display: inline-block; min-height: 44px; font-family: var(--t72-font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); color: var(--t72c-display); text-decoration: none; margin-top: 4px; }
.t72c-phone:hover { text-decoration: underline; }

/* -- 17 + 18. FAQ ---------------------------------------------------------- */
.t72c-faqs { border-top: 1px solid var(--t72c-rule-soft); max-width: 900px; }
.t72c-faq-item { border-bottom: 1px solid var(--t72c-rule-soft); }
.t72c-faq-q {
  cursor: pointer; list-style: none;
  padding: 19px 44px 19px 0; min-height: 44px; position: relative;
  font-family: var(--t72-font-display); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3;
}
.t72c-faq-q::-webkit-details-marker { display: none; }
.t72c-faq-q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--t72-font-display); font-size: 24px; color: var(--t72c-accent);
}
.t72c-faq-item[open] .t72c-faq-q::after { content: "\2212"; }
.t72c-faq-a { padding: 0 0 20px; max-width: 74ch; }
.t72c-faq-a p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.t72c-faq-a p:last-child { margin-bottom: 0; }
.t72c-jumps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.t72c-jump {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px;
  border: 1px solid var(--t72-rule-strong); border-radius: var(--t72-radius, 2px);
  background: var(--t72-paper); text-decoration: none;
  font-family: var(--t72-font-label); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.t72c-jump:hover { border-color: var(--t72-gold); }

/* -- 19 + 20. service areas and the SEO paragraph -------------------------- */
.t72c-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 18px; font-size: 15.5px; }
.t72c-areas li { padding: 6px 0; border-bottom: 1px solid var(--t72c-rule-soft); }
.t72c-areas a { min-height: 44px; display: flex; align-items: center; }
.t72c-areas-more { margin: 26px 0 0; font-size: 16px; line-height: 1.55; }
.t72c-seo { max-width: 80ch; }
.t72c-seo p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; color: var(--t72c-fg-muted); }
.t72c-seo-sec { padding: 40px 0; }

/* -- 23. enrol cards ------------------------------------------------------- */
.t72c-plan { border-top: 3px solid var(--t72-rule-strong); }
.t72c-best { border-top-color: var(--t72-gold); }
.t72c-bestflag {
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t72c-accent); margin: 0 0 8px;
}
.t72c-plan-price { font-family: var(--t72-font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; margin: 0 0 12px; }
.t72c-includes { margin-top: 30px; }
.t72c-includes ul { margin: 0; padding-left: 20px; }
.t72c-includes li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }

/* -- 24. financing --------------------------------------------------------- */
.t72c-fin { margin: 0 0 18px; padding-left: 20px; }
.t72c-fin li { font-size: 16.5px; line-height: 1.6; margin-bottom: 10px; max-width: 70ch; }
.t72c-fin-lender { font-size: 16.5px; line-height: 1.6; margin: 0 0 8px; }
/* The partner's own mark. Constrained rather than sized: it is a supplied
   logo file and the component does not know its aspect ratio. */
.t72c-fin-logo { margin: 4px 0 30px; }
.t72c-fin-logo img { display: block; max-width: 260px; width: 100%; height: auto; }
.t72c-fin-groups {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 44px;
  margin: 0 0 10px; max-width: 900px;
}
.t72c-fin-group .t72c-fin { margin-bottom: 0; }
@media (max-width: 720px) { .t72c-fin-groups { grid-template-columns: 1fr; gap: 18px; } }

/* -- 26. closing seal ------------------------------------------------------ */
.t72c-seal-sec { text-align: center; }
.t72c-seal-mark { display: inline-block; margin: 0 auto 14px; height: auto; }
.t72c-seal { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-family: var(--t72-font-display); font-weight: 700; font-size: clamp(19px, 2vw, 26px); letter-spacing: var(--t72-track-display, .005em); color: var(--t72c-display); }

/* ==========================================================================
   NARROW. Two breakpoints, and every grid ends up single-column by 560px.
   Checked at 375 x 812: no horizontal scroll, every tap target >= 44px.
   ========================================================================== */
@media (max-width: 1080px) {
  .t72c-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .t72c-steps { grid-template-columns: repeat(3, 1fr); }
  .t72c-promises { grid-template-columns: repeat(3, 1fr); }
  .t72c-areas { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 880px) {
  .t72c { padding: 52px 0; }
  .t72c-hero { padding: 58px 0 52px; }
  .t72c-wrap { padding: 0 var(--t72-gutter-mobile, 22px); }
  .t72c-triage, .t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method { grid-template-columns: repeat(2, 1fr); }
  .t72c-steps, .t72c-promises { grid-template-columns: repeat(2, 1fr); }
  .t72c-areas { grid-template-columns: repeat(3, 1fr); }
  .t72c-mgr { grid-template-columns: 1fr; gap: 24px; }
  .t72c-mgr-photo { max-width: 240px; }
}
@media (max-width: 560px) {
  .t72c-triage, .t72c-signs, .t72c-routes, .t72c-probs, .t72c-svcs,
  .t72c-rels, .t72c-brands, .t72c-method, .t72c-steps, .t72c-promises,
  .t72c-plans { grid-template-columns: 1fr; }
  .t72c-areas { grid-template-columns: repeat(2, 1fr); }
  .t72c-hero-stats { gap: 22px; }
  .t72c-actions { gap: 10px; }
  .t72c-actions > .t72c-btn { width: 100%; }
  .t72c-trust { gap: 18px 24px; }
  .t72c-phones { gap: 18px; flex-direction: column; }
  .t72c-mkt-rating { float: none; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .t72c-btn, .t72c-mkt-link { transition: none; }
}

@media print {
  /* Print flattens every surface to white, so the surface contract has to be
     re-declared or an INK band would print LINEN-on-white at 2.6:1. */
  .t72c {
    padding: 18px 0; background: none;
    --t72c-fg: var(--t72-ink); --t72c-fg-muted: var(--t72-ink);
    --t72c-fg-strong: var(--t72-ink); --t72c-display: var(--t72-ink);
    --t72c-accent: var(--t72-ink); --t72c-rule-soft: var(--t72-rule);
    --t72c-means-bg: transparent;
    color: var(--t72-ink);
  }
  .t72c-faq-a { display: block; }
}