/* Yukon Tire Centre — Rewards
   Tokens are DESIGN.md verbatim. Two registers, deliberately not blended:
   .page--router  = "Aurora Over the Yard" (ACIO-built front door)
   .page--portal  = plain utility, mimicking the live GiveX portal per Cal's
                    2026-08-20 instruction.
   Source of every value: clients/yukontire-rewards/brand/DESIGN.md */

/* Open Sans, self-hosted. The live portal self-hosts the same family (v15
   latin, faces 400/400i/600/700); this is the v44 variable cut, one file for
   the whole 400-700 range. SIL OFL — safe to redistribute. Self-hosted rather
   than pulled from a font CDN so the page makes no third-party request. */
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Reds — recorded source-faithful per surface. Never averaged. */
  --integra-red: #ee3124;
  --card-red: #c9010c;
  --portal-red: #bc2e0f;
  --portal-red-deep: #82210c;

  /* Neutrals */
  --rich-black: #231f20;
  --card-black: #060606;
  --portal-ink: #0f0f0f;
  --portal-ink-soft: #222222;
  --portal-ground: #1a1a1a;
  --portal-surface: #ffffff;
  --portal-hairline: #e0e0e0;
  --steel-grey: #474747;
  --footer-graphite: #2f2f2f;
  --footer-link: #cfcfcf;

  /* Aurora — candidate-derived (S7, unmerged). Atmosphere only.
     The two greens are no longer painted anywhere (Tony, 2026-09-24); kept
     as recorded values so the provenance chain in DESIGN.md stays intact. */
  --aurora-green: #084838;
  --aurora-green-lift: #105040;
  --aurora-dusk: #283048;

  /* Dark content register — subpages, Tony's revision round 2 (2026-09-24).
     Grounds are the existing card-black / portal-ink values re-cast as page
     and panel, so the portal's tonal-layering logic survives inverted.
     The accent is integra-red, NOT portal-red: on any of these grounds
     portal-red measures 2.9-3.4:1 and fails AA for body text, while
     integra-red clears it at 4.66:1. The Three Reds Rule is satisfied too —
     these pages no longer mimic the white portal, so they take the router's
     red rather than the portal's. */
  --dark-ground: #060606;
  --dark-surface: #0f0f0f;
  --dark-text: #f2f2f2;
  --dark-text-soft: #c9c9c9;
  --dark-hairline: rgba(255, 255, 255, 0.14);

  --font: "Open Sans", Arial, sans-serif;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --container: 1320px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Accessibility floor — survives both registers. */
:focus-visible {
  outline: 2px solid var(--integra-red);
  outline-offset: 3px;
  border-radius: 2px;
}

.page--portal :focus-visible {
  outline-color: var(--portal-ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--portal-surface);
  color: var(--portal-ink);
  padding: 12px 20px;
  z-index: 100;
  border-radius: var(--r-lg);
}

.skip-link:focus {
  left: 20px;
  top: 20px;
}

/* ==========================================================================
   Masthead — shared. White plate, because the lockup's "Truly Local" half is
   rich-black and cannot sit on a dark ground (DESIGN.md, Two-Colour Mark Rule).
   ========================================================================== */
.masthead {
  background: var(--portal-surface);
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.12);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}

.masthead__logo {
  display: inline-block;
  max-width: 220px;
}

.masthead__logo img {
  display: block;
  width: 100%;
  max-height: 170px;
}

.masthead__parent {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-grey);
  margin: 0;
}

/* ==========================================================================
   Masthead, brand register — Tony's revision round 2 (2026-09-24): the YTC
   stacked lockup left-aligned on the white header ground DESIGN.md specifies
   (Navigation, S5), a hairline rule, then a row of three partner marks.

   White ground, not dark: DESIGN.md's Two-Colour Mark Rule — the Integra
   lockup's second colour is rich-black and cannot sit on a dark ground
   without forcing an outline the rule forbids.

   The partner marks are sized by HEIGHT, not width, so three marks with
   three different natural widths still read as one row. The two Integra
   SVGs share a viewBox height, so equal CSS height puts their wordmarks at
   identical optical scale.
   ========================================================================== */
.masthead--brand {
  background: var(--portal-surface);
  /* The one real shadow in the client's system (DESIGN.md, Elevation). */
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.12);
}

.masthead--brand .masthead__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 26px;
  padding-bottom: 22px;
}

.masthead__lockup {
  display: inline-block;
  width: 300px;
}

.masthead__lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.rule--masthead {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--portal-hairline);
  margin: 0;
}

.masthead__partners {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.masthead__partner {
  display: inline-flex;
  align-items: center;
}

.masthead__partner img {
  display: block;
  height: 64px;
  width: auto;
}

.masthead__partner--card img {
  border-radius: var(--r-lg);
}

/* ==========================================================================
   Router — "Aurora Over the Yard"
   ========================================================================== */
.page--router {
  background: var(--card-black);
  color: #f2f2f2;
}

.aurora {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The aurora itself: two soft chromatic washes over the black ground. No
   candidate artwork is shipped — only the colours sampled from it. */
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -30% -15% auto -15%;
  height: 125%;
  pointer-events: none;
}

/* Green removed at Tony's direction (revision round 2, 2026-09-24). The
   aurora colours were always candidate-derived and explicitly not approved
   brand (DESIGN.md, "Tertiary — aurora"), and the route cards now carry the
   real aurora in Tony's photography, so the hero does not need to imitate
   it. What is left is a neutral dusk depth: enough to stop the hero ending
   in dead black, with no colour that pretends to be a brand value. */
.aurora::before {
  background: radial-gradient(70% 46% at 50% 0%, rgba(40, 48, 72, 0.55) 0%, rgba(40, 48, 72, 0) 72%);
  filter: blur(46px);
  opacity: 0.7;
}

/* Faint neutral horizon lift at the base so the hero resolves into the page. */
.aurora::after {
  background: radial-gradient(120% 40% at 50% 100%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(46px);
  opacity: 0.9;
}

.aurora__inner {
  position: relative;
  padding: 76px 20px 52px;
  text-align: center;
}

.aurora h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.aurora__lede {
  font-size: 18px;
  margin: 0 auto;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.82);
}

/* Four service pillars — always four, always these four. */
.pillars {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
}

.pillars li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 18px;
}

.pillars li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

/* Router cards */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 48px 0 64px;
}

.route {
  display: flex;
  flex-direction: column;
  background: #101012 no-repeat center / cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 28px 26px 26px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    background 0.2s var(--ease);
}

/* Photo backgrounds — Tony's shop/loyalty-card renders, faded with a dark
   gradient (baked into the exported file, verified >=4.5:1 contrast against
   the white route text) so the card copy stays readable. */
.route--store {
  background-image: url("/assets/route-mechanical.jpg");
  background-image: image-set(
    url("/assets/route-mechanical.webp") type("image/webp"),
    url("/assets/route-mechanical.jpg") type("image/jpeg")
  );
}

.route--rewards {
  background-image: url("/assets/route-rewards.jpg");
  background-image: image-set(
    url("/assets/route-rewards.webp") type("image/webp"),
    url("/assets/route-rewards.jpg") type("image/jpeg")
  );
}

/* Hover only where a hover exists. On touch the card is pressed, not hovered,
   and a sticky hover state after a tap reads as a stuck card. */
@media (hover: hover) and (pointer: fine) {
  .route:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
  }
}

.route:active {
  transform: scale(0.985);
  transition-duration: 0.12s;
}

/* align-self matters: .route is a flex column, so a plain inline-block child
   stretches to the full card width and the lockup's white plate becomes a
   slab across the photo instead of a badge sitting on it. */
.route__lockup {
  display: inline-block;
  align-self: flex-start;
  background: var(--portal-surface);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin: 0 0 14px;
}

.route__lockup img {
  display: block;
  width: 180px;
  height: auto;
}

.route__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--integra-red);
  margin: 0 0 10px;
}

/* The rewards card points at the portal, so it carries the portal's own red —
   source-faithful per surface, per Tony's 2026-09-09 ruling. */
.route--rewards .route__eyebrow {
  color: #f0573a;
}

.route h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.25;
}

.route p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.72);
}

.route__go {
  margin-top: auto;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.route__go::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .route:hover .route__go::after {
    transform: translateX(4px);
  }
}

.route__meta {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   Content register — dark, Tony's revision round 2 (2026-09-24).

   NOTE: this replaces the white "mimic the live GiveX portal" treatment that
   DESIGN.md records as Cal's 2026-08-20 instruction ("utility at the desk").
   That instruction has not been withdrawn by Cal — this is Tony's direction
   for review, and the conflict is flagged rather than quietly resolved.
   Everything else the portal contributes (the Inset-Lighten hover, the 2px
   press, the 14px base, the 5px corner) is kept exactly.
   ========================================================================== */
.page--portal {
  background: var(--dark-ground);
  color: var(--dark-text);
}

.page--portal main {
  background: var(--dark-surface);
}

.page--portal .content {
  padding: 44px 20px 56px;
}

/* Focus ring has to invert too — portal-ink on a near-black ground is
   invisible, which would silently drop the keyboard-accessibility floor. */
.page--portal :focus-visible {
  outline-color: var(--integra-red);
}

.breadcrumb {
  font-size: 13px;
  color: var(--dark-text-soft);
  margin: 0 0 18px;
}

.breadcrumb a {
  color: var(--integra-red);
  text-decoration: underline;
}

.breadcrumb a:hover {
  text-decoration: none;
}

.breadcrumb__sep {
  margin: 0 6px;
  color: var(--dark-text-soft);
}

.page--portal h1 {
  font-size: 33px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.page--portal .subtitle {
  font-size: 18px;
  color: var(--dark-text-soft);
  margin: 0 0 28px;
}

.page--portal h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 32px 0 10px;
}

/* The one red device on these pages: a short bar marking each section start.
   These documents are genuinely sectioned (numbered policy clauses), so the
   marker encodes real structure rather than decorating the heading. */
.page--portal .content h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--integra-red);
  margin: 0 0 12px;
}

/* Scoped to .content deliberately. An unscoped `.page--portal p` also caught
   the footer paragraph and capped it at 72ch, which knocked the centred footer
   line off-centre; an unscoped `.page--portal a` outranked `.btn` and painted
   the button's label in the button's own background colour. Keep both scoped,
   and keep .btn excluded from the link rule. */
.page--portal .content p {
  margin: 0 0 14px;
}

.page--portal .content ol {
  margin: 0 0 28px;
  padding-left: 1.4em;
}

.page--portal .content ol li {
  margin: 0 0 14px;
  padding-left: 0.3em;
}

.page--portal .content ol li:last-child {
  margin-bottom: 0;
}

/* Underlined by default, underline drops on hover — the inverse of the usual
   convention, and what the portal does (DESIGN.md, Links). Kept. */
.page--portal .content a:not(.btn) {
  color: var(--integra-red);
  text-decoration: underline;
}

.page--portal .content a:not(.btn):hover {
  color: #ff6a5c;
  text-decoration: none;
}

.rule {
  border: 0;
  border-top: 1px solid var(--dark-hairline);
  margin: 28px 0;
}

/* Products & Services — two columns, one per location (history page).
   Section headings are h2 (red bar), column names and history years are h3. */
.page--portal .content h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 28px 0 8px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 8px;
}

.svc {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
}

/* White plate, as on the router cards: the Integra marks carry rich-black
   and cannot sit directly on a dark ground (Two-Colour Mark Rule). */
.svc__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 120px;
  width: 220px;
  max-width: 100%;
  background: var(--portal-surface);
  border-radius: var(--r-lg);
  padding: 6px 14px;
}

.svc__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.svc__logo .svc__logo-wide {
  width: 100%;
}

.page--portal .content .svc h3 {
  margin: 20px 0 2px;
  font-size: 22px;
}

.page--portal .content .svc__addr {
  color: var(--dark-text-soft);
  margin: 0 0 14px;
}

.svc__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.svc__list li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-top: 1px solid var(--dark-hairline);
}

.svc__list li:last-child {
  border-bottom: 1px solid var(--dark-hairline);
}

.svc__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 6px;
  height: 6px;
  background: var(--integra-red);
}

.svc__map {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 760px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* Buttons — the portal's Inset-Lighten hover and 2px press, verbatim. The
   ground moves to integra-red with the rest of the dark register; the two
   interaction rules are untouched. */
.btn {
  display: inline-block;
  background-color: var(--integra-red);
  color: #fff;
  font: 400 14px/1.5 var(--font);
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-lg);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.btn:active {
  position: relative;
  top: 2px;
}

.btn--second {
  background-color: var(--steel-grey);
}

/* Pending notice — this is a shell. Nothing here pretends to be policy text. */
.pending {
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  padding: 20px 22px;
  margin: 0 0 28px;
}

.pending__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--integra-red);
  margin: 0 0 8px;
}

.pending p {
  margin: 0 0 10px;
}

.pending p:last-child {
  margin-bottom: 0;
}

/* Placeholder blocks stand in for structure without inventing wording. */
.placeholder {
  max-width: 72ch;
}

.skeleton {
  max-width: 72ch;
}

.skeleton__bar {
  height: 12px;
  border-radius: var(--r-sm);
  background: #ececec;
  margin-bottom: 12px;
}

.skeleton__bar--title {
  height: 18px;
  width: 42%;
  background: #e0e0e0;
  margin-bottom: 18px;
}

.skeleton__bar--short {
  width: 62%;
}

.faq-shell {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-shell li {
  border-bottom: 1px solid var(--dark-hairline);
  padding: 18px 0;
}

.faq-shell h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}

.faq-shell summary {
  cursor: pointer;
  list-style: none;
}

.faq-shell summary::-webkit-details-marker {
  display: none;
}

.faq-shell summary h3 {
  display: inline;
  margin: 0;
}

.faq-shell summary h3::before {
  content: "+ ";
  color: var(--integra-red);
  font-weight: 700;
}

/* Literal glyph, not "\2212 " — in a CSS escape the trailing space is eaten
   as the hex terminator, so the minus rendered flush against the question
   while the "+" rows kept their gap. */
.faq-shell details[open] summary h3::before {
  content: "− ";
}

.faq-shell details p,
.faq-shell details ul {
  margin: 12px 0 0;
}

.faq-shell details ul {
  padding-left: 20px;
}

/* ==========================================================================
   Footer — shared, graphite band from the live portal
   ========================================================================== */
.site-footer {
  background: var(--footer-graphite);
  color: #fff;
  padding: 48px 0;
}

.site-footer__nav {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  text-align: center;
}

.site-footer__nav li {
  display: inline;
  line-height: 100%;
  padding: 0 14px;
}

.site-footer__nav li + li {
  border-left: 2px solid #666;
}

.site-footer a {
  color: var(--footer-link);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  margin: 0 0 22px;
}

.site-footer__social-group {
  text-align: center;
}

.site-footer__social-label {
  display: block;
  font-size: 13px;
  color: #9a9a9a;
  margin-bottom: 4px;
}

.site-footer__social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social li {
  display: inline;
  padding: 0 7px;
}

/* Glyphs inherit the footer link colour, so they sit desaturated on the
   graphite band and lift to white on hover/focus like the text links. */
.site-footer__social a {
  padding: 8px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: #fff;
  text-decoration: none;
}

.site-footer__icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.site-footer__legal {
  text-align: center;
  font-size: 13px;
  color: #9a9a9a;
  margin: 0;
}

@media (max-width: 600px) {
  .aurora__inner {
    padding: 40px 20px 36px;
  }

  /* Lockup and parent name stack; side by side they collide at 390px. */
  .masthead__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .masthead__logo {
    max-width: 170px;
  }

  .masthead__lockup {
    width: 210px;
  }

  .masthead__partners {
    gap: 18px;
  }

  /* Still one height for all three, so the row stays a set when it shrinks. */
  .masthead__partner img {
    height: 46px;
  }

  .routes {
    padding: 28px 0 44px;
  }

  .route {
    padding: 22px 20px 20px;
  }


  /* Four pillars become a 2x2 block rather than wrapping. Wrapping left the
     orphaned fourth item carrying a leading divider — a stray vertical rule
     with nothing to its left. */
  .pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 330px;
    margin: 24px auto 0;
    row-gap: 10px;
  }

  .pillars li {
    padding: 4px 12px;
  }

  .pillars li:nth-child(odd) {
    border-left: 0;
  }

  .pillars li:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
  }

  .site-footer__nav li {
    padding: 0 10px;
  }

  .site-footer a {
    padding: 8px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route,
  .route__go::after {
    transition-property: background, border-color;
  }

  .route:hover,
  .route:active,
  .route:hover .route__go::after {
    transform: none;
  }
}

/* ==========================================================================
   Floating "Top" button — shared across all four content pages.
   ========================================================================== */
.top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--integra-red);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.top-btn:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .top-btn {
    transition: none;
  }
}

/* ==========================================================================
   Print — the dark content register was built for screen only. Print keeps
   the same structure (heading marker, breadcrumb, buttons) but forces
   black-on-white so a printed FAQ/privacy/terms page is actually legible on
   paper instead of dark text-on-dark-ink. The Top button and masthead
   partner row serve no purpose on a printed page.
   ========================================================================== */
@media print {
  .top-btn {
    display: none !important;
  }

  .masthead__partners {
    display: none;
  }

  .page--portal {
    background: #fff;
    color: #000;
  }

  .page--portal main {
    background: #fff;
  }

  .page--portal .subtitle,
  .breadcrumb,
  .breadcrumb__sep {
    color: #333;
  }

  .breadcrumb a,
  .page--portal .content a:not(.btn) {
    color: #000;
    text-decoration: underline;
  }

  .page--portal .content h2::before {
    background: #000;
  }

  .rule,
  .rule--masthead {
    border-color: #ccc;
  }

  .btn {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  }

  .svc {
    background: #fff;
    border-color: #ccc;
  }

  .svc__list li,
  .svc__list li:last-child {
    border-color: #ccc;
  }

  .svc__list li::before {
    background: #000;
  }

  .pending {
    border-color: #000;
    background: #fff;
  }
}


/* Coming Soon — rewards card held until the GiveX portal is customer-ready
   (Cal, 2026-10-01: "I think we should start with the Coming Soon.").
   Not a link: no hover lift, no arrow, no press. */
.route--soon { position: relative; cursor: default; }
.route--soon:hover, .route--soon:active { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.12); }
.route__soon {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--portal-red); /* white on #bc2e0f = 5.9:1 (AA); white on integra-red is only 4.1:1 */
  border-radius: var(--r-sm);
  padding: 5px 10px;
  margin: 0 0 16px;
}
.route__go--soon { color: rgba(255, 255, 255, 0.9); }
.route__go--soon::after { content: none; }