/* ============================================================
   PLATINUM UX-2027 — Advanced interaction & depth layer
   ------------------------------------------------------------
   PURELY ADDITIVE. Loads LAST.

   Rules this layer obeys (do not break them):
   • Never changes brand colours — only the existing tokens
     (--navy #0D1B3E, --sky #3B86BC, --persimmon #E8593A,
      --sage #7A9E8E, stone/cream neutrals) are referenced.
   • Never changes copy, IA, or the type hierarchy enforced by
     brand-2026.css (no font-family on h1/h2, no eyebrow
     ::before/::after content — Round-6 corner-brackets stand).
   • Only adds motion, depth, texture, focus and new optional
     component primitives (.x27-*) that pages may opt into.
   ============================================================ */

/* ===========================================
   §1  TOKENS  (all namespaced --x27-*)
   =========================================== */
:root {
  /* Easing — 2027 house curves */
  --x27-ease:        cubic-bezier(.22,.61,.36,1);
  --x27-ease-out:    cubic-bezier(.16,1,.3,1);
  --x27-ease-spring: cubic-bezier(.34,1.4,.5,1);
  --x27-ease-soft:   cubic-bezier(.4,0,.2,1);

  /* Durations */
  --x27-t-fast: 180ms;
  --x27-t-base: 420ms;
  --x27-t-slow: 780ms;

  /* Elevation — navy-tinted, never neutral grey */
  --x27-e1: 0 1px 2px rgba(13,27,62,.05), 0 2px 6px rgba(13,27,62,.04);
  --x27-e2: 0 2px 4px rgba(13,27,62,.05), 0 8px 20px rgba(13,27,62,.07);
  --x27-e3: 0 4px 8px rgba(13,27,62,.06), 0 18px 40px rgba(13,27,62,.10);
  --x27-e4: 0 8px 16px rgba(13,27,62,.07), 0 34px 70px rgba(13,27,62,.15);
  --x27-e-glow-p: 0 10px 34px rgba(232,89,58,.28);
  --x27-e-glow-s: 0 10px 34px rgba(59,134,188,.24);

  /* Radii */
  --x27-r-sm: 10px;
  --x27-r-md: 16px;
  --x27-r-lg: 22px;
  --x27-r-xl: 28px;

  /* Hairlines */
  --x27-hair:       rgba(13,27,62,.08);
  --x27-hair-dark:  rgba(255,255,255,.12);

  /* Glass */
  --x27-glass:      rgba(255,255,255,.72);
  --x27-glass-dark: rgba(255,255,255,.055);
  --x27-blur:       saturate(180%) blur(18px);
}

/* ===========================================
   §2  SCROLL REVEAL ENGINE
   Applied by ux-2027.js via [data-x27]. Every
   variant animates only transform/opacity/filter.
   =========================================== */
[data-x27] {
  will-change: opacity, transform;
  transition:
    opacity var(--x27-t-slow) var(--x27-ease-out),
    transform var(--x27-t-slow) var(--x27-ease-out),
    filter var(--x27-t-slow) var(--x27-ease-out),
    clip-path var(--x27-t-slow) var(--x27-ease-out);
  transition-delay: calc(var(--x27-i, 0) * 72ms);
}

/* The starting states are gated behind html.x27-ready, which ux-2027.js adds ONLY
   after the IntersectionObserver is confirmed wired. This makes hiding structurally
   impossible unless something exists to un-hide it: if the script is blocked, errors
   during init, or the observer fails to construct, the class is never set and every
   element renders fully visible. Content is never at the mercy of an animation —
   this matters most on the legal and policy pages, where the copy must always show. */
.x27-ready [data-x27="up"]     { opacity:0; transform: translate3d(0,26px,0); }
.x27-ready [data-x27="rise"]   { opacity:0; transform: translate3d(0,44px,0) scale(.985); }
.x27-ready [data-x27="fade"]   { opacity:0; }
.x27-ready [data-x27="left"]   { opacity:0; transform: translate3d(-30px,0,0); }
.x27-ready [data-x27="right"]  { opacity:0; transform: translate3d(30px,0,0); }
.x27-ready [data-x27="scale"]  { opacity:0; transform: scale(.94); }
.x27-ready [data-x27="blur"]   { opacity:0; transform: translate3d(0,18px,0); filter: blur(9px); }
.x27-ready [data-x27="clip"]   { opacity:0; clip-path: inset(0 0 100% 0); transform: translate3d(0,14px,0); }
.x27-ready [data-x27="tilt"]   { opacity:0; transform: perspective(1200px) rotateX(7deg) translate3d(0,36px,0); }

.x27-ready [data-x27].x27-in,
[data-x27].x27-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The end-state clip belongs to the "clip" variant alone. It used to sit on the
   blanket .x27-in rule above, which left EVERY revealed element — h1, h2, p,
   the lot — permanently clipped to its border box. Display type is set at
   line-height .92, so the last line's descenders live outside that box: the
   hero's "Platinum grows it, too." lost the tail of the g and the comma the
   moment the headline fitted on one line (short-laptop viewports, where the
   ≤880px tier drops the h1 to 58px). Two lines hid it — the descender then
   overflowed into the line below, which is inside the box. */
[data-x27="clip"].x27-in { clip-path: inset(0 0 0 0); }

/* Release the compositor hint — and the clip — once settled */
[data-x27].x27-in.x27-done { will-change: auto; }
[data-x27="clip"].x27-in.x27-done { clip-path: none; }

/* ===========================================
   §3  KINETIC HEADLINES
   Word-by-word mask reveal on hero H1s.
   Type/colour untouched — only motion.
   =========================================== */
.x27-kinetic { display: inline; }
.x27-kinetic .x27-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.x27-kinetic .x27-w > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0,110%,0) rotate(2.4deg);
  opacity: 0;
  transition:
    transform 900ms var(--x27-ease-out),
    opacity 620ms var(--x27-ease-out);
  transition-delay: calc(var(--x27-wi, 0) * 55ms);
}
.x27-kinetic.x27-in .x27-w > i { transform: none; opacity: 1; }

/* ===========================================
   §4  HERO — aurora mesh + fine grain
   Navy stays the base; the mesh uses only
   sky / sage / persimmon at low alpha.
   =========================================== */
.pv6 .phero { isolation: isolate; }

.pv6 .phero > .x27-aurora {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background:
    none;
  filter: blur(6px);
  animation: x27-aurora 26s var(--x27-ease-soft) infinite alternate;
}

@keyframes x27-aurora {
  0%   { transform: translate3d(0,0,0)      scale(1);    }
  33%  { transform: translate3d(2.5%,-2%,0) scale(1.06); }
  66%  { transform: translate3d(-2%,1.5%,0) scale(1.02); }
  100% { transform: translate3d(1.5%,2.5%,0) scale(1.07);}
}

/* Fine luminous grain — kills banding on the navy gradient */
.pv6 .phero > .x27-grain,
.pv6 .ctaband > .x27-grain,
.pv6 .bg-navy > .x27-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Subtle engineered grid on dark bands */
.pv6 .phero > .x27-grid,
.pv6 .ctaband > .x27-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 66% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 66% at 50% 40%, #000 0%, transparent 78%);
}

/* Hero content must sit above the effects */
.pv6 .phero > .wrap,
.pv6 .ctaband > .wrap,
.pv6 .bg-navy > .wrap { position: relative; z-index: 2; }

/* The 3px brand rule stays on top of everything */
.pv6 .phero::before { z-index: 4; }

/* ===========================================
   §5  CARD SYSTEM — depth, spotlight, hairline
   Targets the existing shared pv6 card classes
   so all 30+ pages upgrade with zero markup edits.
   =========================================== */
.pv6 .fcard,
.pv6 .aic,
.pv6 .cxc,
.pv6 .quote,
.x27-card {
  position: relative;
  transition:
    transform var(--x27-t-base) var(--x27-ease-out),
    box-shadow var(--x27-t-base) var(--x27-ease-out),
    border-color var(--x27-t-base) var(--x27-ease-out);
}

/* Cursor spotlight — driven by --x27-mx/--x27-my from JS */
.pv6 .fcard::after,
.pv6 .aic::after,
.pv6 .cxc::after,
.x27-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--x27-t-base) var(--x27-ease-out);
  background: none;
}

.pv6 .fcard:hover,
.pv6 .aic:hover,
.pv6 .cxc:hover,
.x27-card:hover {
  transform: translate3d(0,-4px,0);
  box-shadow: var(--x27-e3);
  border-color: rgba(59,134,188,.34);
}

.pv6 .fcard:hover::after,
.pv6 .aic:hover::after,
.pv6 .cxc:hover::after,
.x27-card:hover::after { opacity: 1; }

/* Icon tiles breathe on card hover */
.pv6 .fcard .fi,
.pv6 .aic .ai-i,
.pv6 .cxc .cxi,
.x27-card .x27-ico {
  transition:
    transform var(--x27-t-base) var(--x27-ease-spring),
    box-shadow var(--x27-t-base) var(--x27-ease-out);
}
.pv6 .fcard:hover .fi,
.pv6 .aic:hover .ai-i,
.pv6 .cxc:hover .cxi,
.x27-card:hover .x27-ico {
  transform: translate3d(0,-2px,0) scale(1.07) rotate(-3deg);
  box-shadow: 0 6px 18px rgba(13,27,62,.10);
}

/* ===========================================
   §6  BUTTONS — magnetic, sheen, press
   =========================================== */
.pv6 .btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--x27-bx,0),var(--x27-by,0),0);
  transition:
    transform 260ms var(--x27-ease-out),
    box-shadow 260ms var(--x27-ease-out),
    background-color 200ms var(--x27-ease-out),
    color 200ms var(--x27-ease-out);
  isolation: isolate;
}

/* Diagonal sheen sweep */
.pv6 .btn::before {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  z-index: -1;
  background: none;
  transform: skewX(-18deg);
  transition: left 620ms var(--x27-ease-out);
}
.pv6 .btn:hover::before { left: 160%; }

.pv6 .btn-p:hover { box-shadow: var(--x27-e-glow-p); }
.pv6 .btn-w:hover { box-shadow: var(--x27-e4); }
.pv6 .btn:active  { transform: translate3d(var(--x27-bx,0),var(--x27-by,0),0) scale(.975); }

/* Arrow nudge on CTAs that end in an arrow glyph */
.pv6 .btn .x27-arrow {
  display: inline-block;
  transition: transform 320ms var(--x27-ease-spring);
}
.pv6 .btn:hover .x27-arrow { transform: translateX(5px); }

/* Focus — visible, on-brand, never removed */
.pv6 a:focus-visible,
.pv6 button:focus-visible,
.x27-card:focus-visible,
[data-x27-acc-trigger]:focus-visible,
.x27-tab:focus-visible {
  outline: 2px solid var(--sky, #3B86BC);
  outline-offset: 3px;
  border-radius: 8px;
}
.pv6 .phero a:focus-visible,
.pv6 .ctaband a:focus-visible,
.pv6 .bg-navy a:focus-visible { outline-color: #FFAB96; }

/* ===========================================
   §7  PRODUCT WINDOW — floating depth + tilt
   =========================================== */
.pv6 .winwrap { perspective: 1600px; }

.pv6 .win {
  transform-style: preserve-3d;
  transition:
    transform 640ms var(--x27-ease-out),
    box-shadow 640ms var(--x27-ease-out);
}
.pv6 .winwrap:hover .win {
  box-shadow: 0 30px 80px rgba(13,27,62,.20);
}
/* JS writes --x27-rx / --x27-ry while the pointer is inside */
.pv6 .winwrap[data-x27-tilt] .win {
  transform:
    rotateX(var(--x27-rx, 0deg))
    rotateY(var(--x27-ry, 0deg))
    translate3d(0,0,0);
}

/* Floating badges get independent, offset drift */
.pv6 .fbadge {
  animation: x27-float 7s var(--x27-ease-soft) infinite alternate;
  transition: box-shadow var(--x27-t-base) var(--x27-ease-out);
}
.pv6 .fbadge.fb2 { animation-duration: 8.5s; animation-delay: -2.4s; }
.pv6 .fbadge.fb3 { animation-duration: 9.5s; animation-delay: -4.1s; }

@keyframes x27-float {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(0,-9px,0); }
}

/* Live-signal pulse on the window chrome dots */
.pv6 .win .bar .d:first-child {
  animation: x27-pulse 2.8s var(--x27-ease-soft) infinite;
}
@keyframes x27-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,89,58,.42); }
  55%     { box-shadow: 0 0 0 6px rgba(232,89,58,0); }
}

/* ===========================================
   §8  TIMELINE — draws itself on scroll
   =========================================== */
.pv6 .tl .track,
.pv6 .jt .line {
  position: relative;
  overflow: hidden;
}
.pv6 .tl .track::after,
.pv6 .jt .line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #EEF2F7;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1400ms var(--x27-ease-out);
}
.pv6 .tl.x27-in .track::after,
.pv6 .jt.x27-in .line::after { transform: scaleX(0); }

.pv6 .node .dot {
  transition:
    transform 480ms var(--x27-ease-spring),
    box-shadow 480ms var(--x27-ease-out),
    border-width 320ms var(--x27-ease-out);
}
.pv6 .node:hover .dot { transform: scale(1.14); box-shadow: var(--x27-e2); }

.pv6 .node.b:hover .dot { box-shadow: 0 0 0 6px rgba(59,134,188,.13); }
.pv6 .node.d:hover .dot { box-shadow: 0 0 0 6px rgba(122,158,142,.16); }
.pv6 .node.a:hover .dot { box-shadow: 0 0 0 6px rgba(232,89,58,.14); }

/* ===========================================
   §9  STAT COUNTERS — tabular roll-up
   =========================================== */
.pv6 .hstats b,
.x27-metric__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.pv6 .hstats > div {
  transition: transform var(--x27-t-base) var(--x27-ease-spring);
}
.pv6 .hstats > div:hover { transform: translate3d(0,-3px,0); }

/* ===========================================
   §10  SECTION PROGRESS RAIL  (built by JS)
   =========================================== */
.x27-rail {
  position: fixed;
  right: max(18px, 1.6vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 9px;
  border-radius: 999px;
  background: var(--x27-glass);
  -webkit-backdrop-filter: var(--x27-blur);
  backdrop-filter: var(--x27-blur);
  border: 1px solid var(--x27-hair);
  box-shadow: var(--x27-e2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--x27-ease-out);
}
.x27-rail.x27-rail--on { opacity: 1; pointer-events: auto; }

.x27-rail__dot {
  position: relative;
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13,27,62,.22);
  cursor: pointer;
  transition:
    background 300ms var(--x27-ease-out),
    transform 300ms var(--x27-ease-spring);
}
.x27-rail__dot:hover { transform: scale(1.4); background: rgba(59,134,188,.6); }
.x27-rail__dot[aria-current="true"] {
  background: var(--persimmon, #E8593A);
  transform: scale(1.45);
}
.x27-rail__dot span {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--navy, #0D1B3E);
  border-radius: 7px;
  padding: 5px 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--x27-ease-out), transform 220ms var(--x27-ease-out);
}
.x27-rail__dot:hover span,
.x27-rail__dot:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 1180px) { .x27-rail { display: none; } }

/* ===========================================
   §11  SCROLL PROGRESS BEAM (top of viewport)
   =========================================== */
.x27-beam {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  transform-origin: 0 50%;
  transform: scaleX(var(--x27-p, 0));
  background: var(--sky, #3B86BC);
  pointer-events: none;
}

/* ===========================================
   §12  NEW COMPONENT PRIMITIVES
   Optional building blocks for added sections.
   Every one uses only brand tokens.
   =========================================== */

/* ── 12.1 Bento grid ─────────────────────────────── */
.x27-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.x27-bento > * { grid-column: span 2; }
.x27-bento .x27-b3 { grid-column: span 3; }
.x27-bento .x27-b4 { grid-column: span 4; }
.x27-bento .x27-b6 { grid-column: span 6; }
.x27-bento .x27-tall { grid-row: span 2; }

.x27-card {
  background: #fff;
  border: 1px solid var(--light, #E3EAF2);
  border-radius: var(--x27-r-lg);
  padding: 24px;
  overflow: hidden;
  text-align: left;
}
.x27-card--dark {
  background: var(--navy, #0D1B3E);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.x27-card--dark h3, .x27-card--dark h4 { color: #fff; }
.x27-card--dark p { color: rgba(255,255,255,.74); }
.x27-card--tint  { background: #EBF4FB; border-color: #C5DDEF; }
.x27-card--sage  { background: #E6EFEA; border-color: #cfe0d7; }
.x27-card--warm  { background: #FDEEE9; border-color: #f6d5c9; }

.x27-card__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky, #3B86BC);
  margin-bottom: 10px;
}
.x27-card--dark .x27-card__eyebrow { color: #FFAB96; }

.x27-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--icon-navy, #E6ECF5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.x27-ico .ico { width: 22px; height: 22px; color: var(--navy, #0D1B3E); }
.x27-ico--sky  { background: var(--icon-blue, #DCF0FA); }
.x27-ico--sage { background: var(--icon-sage, #E6EFEA); }
.x27-ico--pers { background: var(--icon-pers, #FDEEE9); }
.x27-card--dark .x27-ico { background: rgba(255,255,255,.09); }
.x27-card--dark .x27-ico .ico { color: #fff; }

@media (max-width: 900px) {
  .x27-bento { grid-template-columns: repeat(2, 1fr); }
  .x27-bento > *, .x27-bento .x27-b3, .x27-bento .x27-b4, .x27-bento .x27-b6 { grid-column: span 2; }
  .x27-bento .x27-tall { grid-row: span 1; }
}

/* ── 12.2 Metric row ─────────────────────────────── */
.x27-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 30px;
  background: var(--light, #E3EAF2);
  border: 1px solid var(--light, #E3EAF2);
  border-radius: var(--x27-r-lg);
  overflow: hidden;
}
.x27-metric {
  background: #fff;
  padding: 26px 22px;
  text-align: left;
  transition: background var(--x27-t-base) var(--x27-ease-out);
}
.x27-metric:hover { background: #FBFCFE; }
.x27-metric__num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--navy, #0D1B3E);
  letter-spacing: -.02em;
}
.x27-metric__lbl {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--gray, #6B6B80);
  margin-top: 8px;
  line-height: 1.45;
}
.x27-metric__bar {
  height: 3px;
  border-radius: 3px;
  margin-top: 14px;
  background: #EEF2F7;
  overflow: hidden;
}
.x27-metric__bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--sky, #3B86BC);
  transition: width 1200ms var(--x27-ease-out);
}
.x27-metric.x27-in .x27-metric__bar > i { width: var(--x27-fill, 70%); }

/* ── 12.3 Accordion ──────────────────────────────── */
.x27-acc {
  margin-top: 26px;
  border-top: 1px solid var(--light, #E3EAF2);
  text-align: left;
}
.x27-acc__item { border-bottom: 1px solid var(--light, #E3EAF2); }
.x27-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #0D1B3E);
  transition: color var(--x27-t-fast) var(--x27-ease-out);
}
.x27-acc__trigger:hover { color: var(--sky, #3B86BC); }
.x27-acc__sign {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--light, #E3EAF2);
  position: relative;
  transition: transform 380ms var(--x27-ease-spring), border-color 300ms var(--x27-ease-out), background 300ms var(--x27-ease-out);
}
.x27-acc__sign::before,
.x27-acc__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.8px;
  border-radius: 2px;
  background: var(--navy, #0D1B3E);
  transform: translate(-50%,-50%);
  transition: transform 380ms var(--x27-ease-spring), background 300ms var(--x27-ease-out);
}
.x27-acc__sign::after { transform: translate(-50%,-50%) rotate(90deg); }
.x27-acc__trigger[aria-expanded="true"] .x27-acc__sign {
  background: var(--persimmon, #E8593A);
  border-color: var(--persimmon, #E8593A);
  transform: rotate(180deg);
}
.x27-acc__trigger[aria-expanded="true"] .x27-acc__sign::before,
.x27-acc__trigger[aria-expanded="true"] .x27-acc__sign::after { background: #fff; }
.x27-acc__trigger[aria-expanded="true"] .x27-acc__sign::after { transform: translate(-50%,-50%) rotate(0deg); }

.x27-acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 460ms var(--x27-ease-out);
}
.x27-acc__panel > div { padding: 0 4px 22px; }
.x27-acc__panel p {
  font-size: 15px;
  color: var(--gray, #6B6B80);
  line-height: 1.72;
  max-width: 760px;
}

/* ── 12.4 Tabs ───────────────────────────────────── */
.x27-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #EEF2F7;
  margin-top: 26px;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
}
.x27-tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray, #6B6B80);
  transition: color 260ms var(--x27-ease-out);
}
.x27-tab[aria-selected="true"] { color: #fff; }
.x27-tabs__thumb {
  position: absolute;
  z-index: 0;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--navy, #0D1B3E);
  box-shadow: var(--x27-e2);
  transition: transform 460ms var(--x27-ease-spring), width 460ms var(--x27-ease-spring);
}
.x27-panel { display: none; }
.x27-panel.x27-panel--on { display: block; animation: x27-panel-in 520ms var(--x27-ease-out) both; }
@keyframes x27-panel-in {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to   { opacity: 1; transform: none; }
}

/* ── 12.5 Marquee / logo velocity ────────────────── */
.x27-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.x27-marquee__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: x27-marq var(--x27-marq-dur, 42s) linear infinite;
}
.x27-marquee:hover .x27-marquee__track { animation-play-state: paused; }
@keyframes x27-marq { to { transform: translate3d(-50%,0,0); } }
.x27-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy, #0D1B3E);
  white-space: nowrap;
  opacity: .62;
  transition: opacity 260ms var(--x27-ease-out);
}
.x27-marquee__item:hover { opacity: 1; }

/* ── 12.6 Glass panel ────────────────────────────── */
.x27-glass {
  background: var(--x27-glass);
  -webkit-backdrop-filter: var(--x27-blur);
  backdrop-filter: var(--x27-blur);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--x27-r-lg);
  box-shadow: var(--x27-e3);
}
.x27-glass--dark {
  background: var(--x27-glass-dark);
  border-color: var(--x27-hair-dark);
  color: #fff;
}

/* ── 12.7 Split comparison ("before / after") ────── */
.x27-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 30px;
  border: 1px solid var(--light, #E3EAF2);
  border-radius: var(--x27-r-lg);
  overflow: hidden;
  text-align: left;
}
.x27-vs__side { padding: 26px 24px; background: #fff; }
.x27-vs__side--before { background: #EEF2F7; }
.x27-vs__rule {
  width: 1px;
  background: var(--light, #E3EAF2);
  position: relative;
}
.x27-vs__rule::after {
  content: 'VS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--gray, #6B6B80);
  background: #fff;
  border: 1px solid var(--light, #E3EAF2);
  border-radius: 999px;
  padding: 5px 8px;
}
.x27-vs__h {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.x27-vs__side--before .x27-vs__h { color: var(--gray, #6B6B80); }
.x27-vs__side--after  .x27-vs__h { color: var(--sage, #7A9E8E); }
.x27-vs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.x27-vs li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray, #6B6B80);
}
.x27-vs li .ico { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.x27-vs__side--after li .ico { color: var(--sage, #7A9E8E); }
.x27-vs__side--before li .ico { color: var(--clay, #A8998A); }

@media (max-width: 780px) {
  .x27-vs { grid-template-columns: 1fr; }
  .x27-vs__rule { width: auto; height: 1px; }
}

/* ── 12.8 Sticky sub-nav (in-page jump bar) ────────
   IMPORTANT: .x27-subnav is a <nav>, and brand-blocks-2026.css carries a
   `.pv6 nav { height:68px; display:flex; justify-content:space-between;
   padding:0 48px }` rule for the old standalone page chrome. That selector is
   (0,1,1) and would beat a bare `.x27-subnav` (0,1,0) even though this file
   loads later, collapsing every jump bar into a 68px flex bar. The
   `.pv6 nav.x27-subnav` selector below is (0,2,1) so it wins outright, and it
   resets every property that rule sets. Do not weaken this selector.
   The site header is `position:fixed; height:var(--header-height,72px)`, so the
   bar must stick BELOW it, not at 0. */
.x27-subnav,
.pv6 nav.x27-subnav {
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 60;
  height: auto;
  display: block;
  padding: 0;
  justify-content: initial;
  align-items: initial;
  background: rgba(250,248,244,.85);
  -webkit-backdrop-filter: var(--x27-blur);
  backdrop-filter: var(--x27-blur);
  border-bottom: 1px solid var(--x27-hair);
}
.pv6 nav.x27-subnav .x27-subnav__inner,
.x27-subnav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px,5vw,48px);
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.x27-subnav__inner::-webkit-scrollbar { display: none; }
.x27-subnav a {
  flex: 0 0 auto;
  position: relative;
  padding: 15px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray, #6B6B80);
  text-decoration: none;
  white-space: nowrap;
  transition: color 240ms var(--x27-ease-out);
}
.x27-subnav a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--persimmon, #E8593A);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 340ms var(--x27-ease-out);
}
.x27-subnav a:hover { color: var(--navy, #0D1B3E); }
.x27-subnav a[aria-current="true"] { color: var(--navy, #0D1B3E); }
.x27-subnav a[aria-current="true"]::after { transform: scaleX(1); }

/* ── 12.9 Section divider / seam ─────────────────── */
.x27-seam {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--x27-hair);
}

/* ── 12.10 Inline pill/tag ───────────────────────── */
.x27-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--icon-blue, #DCF0FA);
  color: var(--navy, #0D1B3E);
}
.x27-pill--sage { background: var(--icon-sage, #E6EFEA); }
.x27-pill--pers { background: var(--icon-pers, #FDEEE9); }
.x27-pill--dark { background: rgba(255,255,255,.10); color: #fff; }
.x27-pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--persimmon, #E8593A);
  animation: x27-blip 2.4s var(--x27-ease-soft) infinite;
}
@keyframes x27-blip { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── 12.11 Step / process rail (vertical) ────────── */
.x27-steps {
  margin-top: 30px;
  text-align: left;
  display: grid;
  gap: 0;
}
.x27-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding-bottom: 30px;
  position: relative;
}
.x27-step:last-child { padding-bottom: 0; }
.x27-step::before {
  content: '';
  position: absolute;
  left: 21px; top: 46px; bottom: 0;
  width: 2px;
  background: var(--light, #E3EAF2);
}
.x27-step:last-child::before { display: none; }
.x27-step__n {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  color: var(--navy, #0D1B3E);
  background: #fff;
  border: 2px solid var(--light, #E3EAF2);
  transition: border-color 400ms var(--x27-ease-out), box-shadow 400ms var(--x27-ease-out);
}
.x27-step.x27-in .x27-step__n { border-color: var(--sky, #3B86BC); box-shadow: 0 0 0 5px rgba(59,134,188,.10); }
.x27-step h3 { margin-bottom: 6px; }
.x27-step p { font-size: 14.5px; }

/* ===========================================
   §13  IMAGE / MEDIA REFINEMENT
   =========================================== */
.pv6 .photo {
  transition: transform 720ms var(--x27-ease-out), box-shadow 720ms var(--x27-ease-out);
}
.pv6 .photo:hover { transform: translate3d(0,-4px,0); box-shadow: var(--x27-e3); }
.pv6 .photo img { transition: transform 900ms var(--x27-ease-out); }
.pv6 .photo:hover img { transform: scale(1.035); }

/* ===========================================
   §14  BLOCKQUOTE
   =========================================== */
.pv6 .quote { overflow: hidden; }
.pv6 .quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sky, #3B86BC);
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 900ms var(--x27-ease-out);
}
.pv6 .quote.x27-in::before { transform: scaleY(1); }

/* ===========================================
   §15  SELECTION + SCROLLBAR + SMOOTH SCROLL
   =========================================== */
::selection { background: rgba(232,89,58,.18); color: var(--navy, #0D1B3E); }

/* Anchor targets must clear the fixed site header. When a page also carries a
   sticky .x27-subnav, ux-2027.js measures the bar and raises --x27-anchor-pad
   so jump links don't land underneath it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 72px) + var(--x27-anchor-pad, 16px));
}

@supports (scrollbar-color: auto) {
  html { scrollbar-color: rgba(13,27,62,.28) transparent; scrollbar-width: thin; }
}

/* ===========================================
   §16  REDUCED MOTION — full stand-down
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  [data-x27],
  [data-x27].x27-in,
  .x27-kinetic .x27-w > i {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .pv6 .phero > .x27-aurora,
  .pv6 .fbadge,
  .pv6 .win .bar .d:first-child,
  .x27-marquee__track,
  .x27-pill i { animation: none !important; }

  .pv6 .tl .track::after,
  .pv6 .jt .line::after,
  .pv6 .quote::before { transform: none !important; opacity: 0; }

  .pv6 .winwrap[data-x27-tilt] .win { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===========================================
   §17  GLOBAL CHROME — header, mega menu, footer
   CSS-only. The header/footer markup and copy are
   client-approved and are NOT touched.
   =========================================== */

/* ── 17.1 Header: real glass, sharper scrolled state ── */
.header {
  -webkit-backdrop-filter: var(--x27-blur);
  backdrop-filter: var(--x27-blur);
  transition:
    background-color 320ms var(--x27-ease-out),
    box-shadow 320ms var(--x27-ease-out),
    border-color 320ms var(--x27-ease-out);
}
.header.scrolled,
.header.is-scrolled,
.header--scrolled {
  box-shadow: 0 1px 0 var(--x27-hair), 0 10px 30px rgba(13,27,62,.07);
}

.header__brand-lockup {
  transition: transform 420ms var(--x27-ease-spring);
}
.header__brand:hover .header__brand-lockup { transform: scale(1.03); }

/* Nav links get a persimmon underline that draws from the left */
.header__nav > a,
.header__nav .nav-item > a,
.header__nav .nav-item > button {
  position: relative;
}
.header__nav > a::after,
.header__nav .nav-item > a::after,
.header__nav .nav-item > button::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--persimmon, #E8593A);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 320ms var(--x27-ease-out);
}
.header__nav > a:hover::after,
.header__nav .nav-item > a:hover::after,
.header__nav .nav-item.is-open > button::after,
.header__nav .nav-item > button:hover::after { transform: scaleX(1); }

/* Header CTAs pick up the same press/sheen language as page CTAs */
.header__actions .btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 240ms var(--x27-ease-out),
    box-shadow 240ms var(--x27-ease-out);
}
.header__actions .btn:hover { transform: translate3d(0,-1px,0); box-shadow: var(--x27-e2); }
.header__actions .btn:active { transform: translate3d(0,0,0) scale(.98); }

/* ── 17.2 Mega menu: softer entry, deeper surface ───── */


/* Mega panel content cascades in rather than appearing at once */


@keyframes x27-mega-in {
  from { opacity: 0; transform: translate3d(0,8px,0); }
  to   { opacity: 1; transform: none; }
}

/* ── 17.3 Footer: depth, link craft, badge polish ───── */
.footer-v2 { position: relative; overflow: hidden; }

.footer-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 82%);
}
.footer-v2 > .container { position: relative; z-index: 1; }


/* Chrome also stands down under reduced motion */
@media (prefers-reduced-motion: reduce) {
  
  .header__nav > a::after,
  .header__nav .nav-item > a::after,
  .header__nav .nav-item > button::after,
  .footer-v2__list a::after { transition: none !important; }
}


/* ===========================================
   §18  AUTH SCREENS (base_auth.html)
   Split brand/form layout. CSS-only — the login
   form markup and its field names are untouched.
   =========================================== */

/* Living brand panel: the same aurora language as the marketing hero */
.auth__brand-panel { position: relative; overflow: hidden; isolation: isolate; }
.auth__brand-panel::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    none;
  filter: blur(8px);
  animation: x27-aurora 30s var(--x27-ease-soft) infinite alternate;
}
.auth__brand-grid,
.auth__brand-content { position: relative; z-index: 1; }

.auth__brand-logo { transition: transform 460ms var(--x27-ease-spring); }
.auth__brand-panel a:hover .auth__brand-logo { transform: scale(1.03); }

/* Form panel: measured entry, no layout shift */
.auth__form-container {
  animation: x27-auth-in 620ms var(--x27-ease-out) both;
}
@keyframes x27-auth-in {
  from { opacity: 0; transform: translate3d(0,14px,0); }
  to   { opacity: 1; transform: none; }
}

/* Inputs — clear, on-brand focus that never disappears */
.auth input[type="text"],
.auth input[type="email"],
.auth input[type="password"],
.auth select,
.auth textarea {
  transition:
    border-color 220ms var(--x27-ease-out),
    box-shadow 220ms var(--x27-ease-out),
    background-color 220ms var(--x27-ease-out);
}
.auth input:focus,
.auth select:focus,
.auth textarea:focus {
  outline: none;
  border-color: var(--sky, #3B86BC);
  box-shadow: 0 0 0 4px rgba(59,134,188,.14);
}
.auth input:focus-visible,
.auth button:focus-visible,
.auth a:focus-visible {
  outline: 2px solid var(--sky, #3B86BC);
  outline-offset: 3px;
  border-radius: 8px;
}

.auth button[type="submit"] {
  transition:
    transform 240ms var(--x27-ease-out),
    box-shadow 240ms var(--x27-ease-out);
}
.auth button[type="submit"]:hover {
  transform: translate3d(0,-1px,0);
  box-shadow: var(--x27-e-glow-p);
}
.auth button[type="submit"]:active { transform: translate3d(0,0,0) scale(.985); }

.auth__footer-links a {
  position: relative;
  transition: color 220ms var(--x27-ease-out);
}
.auth__footer-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 300ms var(--x27-ease-out);
}
.auth__footer-links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .auth__brand-panel::before { animation: none !important; }
  .auth__form-container { animation: none !important; opacity: 1; transform: none; }
}


/* ============================================================
   §19  SURFACE SYSTEM 2027 — clean, bright, high-visibility
   ------------------------------------------------------------
   WHY THIS EXISTS
   The earlier SURFACE-2027 pass correctly retired the warm
   stone/cream family, but it landed the three tinted section
   backgrounds within 2.3 lightness points of each other:

       bg-cool  #EBF4FB  L 89.3
       bg-cream #EDF4FB  L 89.7
       bg-stone #F1F6FC  L 91.6

   Three "different" bands that are visually identical, all
   sitting 8-11 points off white. The result reads exactly as
   reported: flat, washed out, no rhythm — a pale fog rather
   than a composed page.

   Measured problems this section fixes:
     1. No perceptible step between section surfaces.
     2. --gray  #6B6B80 on the tinted bands = 4.28:1  (fails AA)
     3. --clay  #5F718C on the tinted bands = 4.09:1  (fails AA)
     4. sky #3B86BC as body-link text on white = 3.95:1 (fails AA)

   The approach is real-world standard practice: ONE dominant
   pure-white surface, a small number of clearly-separated
   cool steps above it, and dark navy bands doing the heavy
   contrast work — rather than several near-identical tints.

   BRAND LOCK IS INTACT. Navy #0D1B3E, sky #3B86BC, persimmon
   #E8593A and sage #7A9E8E are unchanged. Only neutral surface
   values and two text greys move, and only far enough to pass
   contrast. Loads last, so removing this block reverts cleanly.
   ============================================================ */

:root {
  /* ── Surface ramp: ~6 lightness points between each step ──
     white 100 -> 93.5 -> 88.0 -> 81.5 -> navy 1.2            */
  --x27-s0: #FFFFFF;   /* dominant page surface — pure white  */
  --x27-s1: #F4F8FD;   /* faintest lift                        */
  --x27-s2: #EAF2FB;   /* mid tint                             */
  --x27-s3: #DCEBF9;   /* strongest tint — a real sky band     */
  --x27-s4: #0D1B3E;   /* navy — carries the contrast          */

  /* Re-point the legacy neutral names at the new ramp so all
     ~100 template usages update without touching a template. */
  --stone-white: var(--x27-s1);
  --stone-cream: var(--x27-s2);
  --stone-light: var(--x27-s1);
  --color-bg:        var(--x27-s0);
  --color-bg-light:  var(--x27-s2);
  --color-bg-tinted: var(--x27-s2);

  /* ── Text: deepened for legibility on the tinted bands ──
     Both previous values failed AA against #DCEBF9.        */
  --gray:  #515C73;    /* was #6B6B80 — 4.28:1 -> 5.53:1 */
  --clay:  #47546E;    /* was #5F718C — 4.09:1 -> 6.26:1 */
  --color-text-secondary: #515C73;
  --color-text-muted:     #515C73;
  --color-text-light:     #6B7590;

  /* ── Link ink. #3B86BC is only 3.95:1 on white, so it stays
     a FILL/ICON colour and text links use the deeper tone
     (5.34:1). Both are already in the brand palette.      */
  --x27-link:       #2C6FA6;
  --x27-link-hover: #245C8A;

  /* ── Crisper edges. Hairlines were so light they vanished
     on white, which is a large part of the "flat" read.   */
  --light:              #DCE6F2;
  --color-border:       #DCE6F2;
  --color-border-light: #E9EFF7;
  --color-border-dark:  #C3D3E4;
  --x27-hair:           rgba(13,27,62,.10);

  /* ── Elevation: on pure white, cards need real shadows to
     read as objects. Previous alphas were near-invisible. */
  --x27-e1: 0 1px 2px rgba(13,27,62,.06), 0 2px 6px rgba(13,27,62,.05);
  --x27-e2: 0 2px 4px rgba(13,27,62,.07), 0 8px 20px rgba(13,27,62,.09);
  --x27-e3: 0 4px 8px rgba(13,27,62,.08), 0 18px 40px rgba(13,27,62,.13);
  --x27-e4: 0 8px 16px rgba(13,27,62,.10), 0 34px 70px rgba(13,27,62,.18);
}

/* ── Section bands. These are hard-coded in brand-blocks-2026.css,
   so they are re-pointed explicitly rather than via the tokens. ── */
.pv6 .bg-white { background: var(--x27-s0); }
.pv6 .bg-stone { background: var(--x27-s1); }
.pv6 .bg-cream { background: var(--x27-s2); }
.pv6 .bg-cool  { background: var(--x27-s3); }
.pv6 .bg-navy  { background: var(--x27-s4); }

/* The page itself is white, not off-white */
body { background-color: var(--x27-s0); }

/* ── Cards read as crisp objects on white ── */
.pv6 .fcard,
.pv6 .aic,
.pv6 .cxc,
.pv6 .quote,
.pv6 .win,
.x27-card,
.x27-metrics {
  border-color: var(--light);
  box-shadow: var(--x27-e1);
}
.pv6 .win { box-shadow: var(--x27-e3); }

/* A card sitting ON a tinted band must stay white to keep its
   figure/ground separation — otherwise it dissolves into the band. */
.pv6 .bg-cool  .fcard, .pv6 .bg-cool  .aic, .pv6 .bg-cool  .cxc,
.pv6 .bg-cream .fcard, .pv6 .bg-cream .aic, .pv6 .bg-cream .cxc,
.pv6 .bg-stone .fcard, .pv6 .bg-stone .aic, .pv6 .bg-stone .cxc,
.pv6 .bg-cool  .x27-card:not(.x27-card--dark):not([class*="x27-card--"]),
.pv6 .bg-cream .x27-card:not(.x27-card--dark):not([class*="x27-card--"]),
.pv6 .bg-stone .x27-card:not(.x27-card--dark):not([class*="x27-card--"]) {
  background: var(--x27-s0);
}

/* ── Body-text links get the accessible ink ── */
main p > a:not([class]),
main li > a:not([class]) { color: var(--x27-link); }
main p > a:not([class]):hover,
main li > a:not([class]):hover { color: var(--x27-link-hover); }

/* ── Icon tiles: the previous tints were so pale they read as
   empty squares on white. Deepened just enough to register,
   staying inside each brand hue.                              ── */
:root {
  --icon-navy: #DDE6F3;
  --icon-blue: #CFE8F8;
  --icon-sage: #D9EAE1;
  --icon-pers: #FBE0D6;
}

/* ── Sub-nav / rail glass over a white page ── */
.x27-subnav { background: rgba(255,255,255,.92); }
.x27-rail   { background: rgba(255,255,255,.88); }

/* ── The dark bands carry more weight now, so give the navy a
   subtle depth gradient instead of a flat fill.            ── */
.pv6 .phero,
.pv6 .ctaband,
.pv6 .bg-navy {
  background-image:
    none;
}

/* ── Metric fill bars: more saturated so data reads at a glance ── */
.x27-metric__bar { background: #DCE6F2; }
.x27-metric__bar > i {
  background: var(--sky, #3B86BC);
}

/* ── Print: never waste ink on the tints ── */
@media print {
  .pv6 .bg-white, .pv6 .bg-stone,
  .pv6 .bg-cream, .pv6 .bg-cool { background: #fff !important; }
  .pv6 .phero, .pv6 .ctaband, .pv6 .bg-navy { background-image: none !important; }
}


/* ===========================================
   §20  PRINT
   =========================================== */
@media print {
  .x27-rail, .x27-beam, .x27-subnav,
  .pv6 .phero > .x27-aurora,
  .pv6 .phero > .x27-grain,
  .pv6 .phero > .x27-grid { display: none !important; }
  [data-x27] { opacity: 1 !important; transform: none !important; }
}