/* ===== premium.css ===== */
/* =====================================================================
   LYD AssistOS — premium preview layer
   Loaded AFTER the compiled bundle. Unlayered on purpose: in this static
   preview it must beat both the bundle's unlayered rules and its utilities.
   Port to the Astro source via @theme / @layer per the approved plan.
   ===================================================================== */

:root {
  --color-lyd-deep: #0f2e38;
  --color-lyd-deep-800: #0a2129;
  --color-lyd-deep-600: #17495a;
  --color-lyd-deep-400: #2e7488;
  --color-lyd-dark-body: #b8c9d1;
  --color-lyd-secondary: #4e565b;
  --color-lyd-gold-ink: #7d5f14;
  --color-lyd-line-strong: #b9c0c9;
  --lift-1: inset 0 1px 0 #ffffffa6, 0 1px 2px #20282d0f, 0 5px 10px -3px #20282d14, 0 14px 26px -10px #20282d1a;
  --lift-2: inset 0 1px 0 #ffffffb3, 0 2px 3px #20282d12, 0 9px 18px -5px #20282d1a, 0 26px 44px -16px #20282d24;
  --lift-3: inset 0 1px 0 #ffffffbf, 0 3px 5px #20282d14, 0 14px 26px -6px #20282d1f, 0 38px 60px -20px #20282d2e;
  --lift-hero: 0 20px 60px rgba(0, 0, 0, 0.28);
  --text-display-1: clamp(3rem, 6.4vw, 4.75rem);
  --text-display-2: clamp(2.125rem, 3.8vw, 3.25rem);
  --text-display-3: clamp(1.5rem, 2.2vw, 2rem);
  --text-display-interior: clamp(2.5rem, 5vw, 3.75rem);
  --text-lede: clamp(1.125rem, 2.5vw, 1.5rem);
  --band-y: clamp(4rem, 8vw, 7rem);
  --band-y-tight: clamp(2.75rem, 5vw, 4rem);
}

/* ---------- utilities for the new tokens (the compiled bundle has none) ---------- */
.bg-lyd-deep { background-color: var(--color-lyd-deep); } .bg-lyd-deep-800 { background-color: var(--color-lyd-deep-800); } .bg-lyd-deep-600 { background-color: var(--color-lyd-deep-600); }
.text-lyd-deep { color: var(--color-lyd-deep); } .text-lyd-deep-400 { color: var(--color-lyd-deep-400); } .text-lyd-dark-body { color: var(--color-lyd-dark-body) !important; }
.text-lyd-secondary { color: var(--color-lyd-secondary); } .text-lyd-gold-ink { color: var(--color-lyd-gold-ink); } .border-lyd-line-strong { border-color: var(--color-lyd-line-strong); }

/* ---------- decorative clutter off ---------- */
#aurora, #scroll-progress, .lyd-blob, span[data-drift], [class*="blur-3xl"], [class*="blur-2xl"] { display: none !important; }
.pin-over, .pin-over[data-page-tone] { background: var(--color-lyd-cream) !important; transition: none !important; }

/* ---------- true white restored; one secondary text token ---------- */
header .bg-white, main .bg-white, footer .bg-white { background-color: #fff; }
main [class*="text-lyd-ink/6"], main .text-lyd-muted, main [class*="text-lyd-muted/"], .text-lyd-muted { color: var(--color-lyd-secondary); }
main [class*="text-lyd-ink/7"], main [class*="text-lyd-ink/8"] { color: var(--color-lyd-ink); opacity: 0.9; }

/* ---------- type: three display steps, real weights ---------- */
h1.font-display, main h1.font-display, main section[class] h1.font-display:not([class*="text-xs"]) {
  font-size: var(--text-display-1) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.02 !important; max-width: 22ch;
}
main > section:first-of-type h1.font-display.hero-interior-h1 { font-size: var(--text-display-interior) !important; line-height: 1.04 !important; }
h2.font-display, main h2.font-display, main section[class] h2.font-display:not([class*="text-xs"]) {
  font-size: var(--text-display-2) !important; font-weight: 600 !important; letter-spacing: -0.025em !important; line-height: 1.06 !important;
}
h2.font-display.text-lg, h2.font-display.text-xl, h2.font-display.text-2xl, h2.font-display.text-base { font-size: 1.25rem !important; line-height: 1.3 !important; font-weight: 500 !important; }
h3.font-display, .leaks__title, .hscroll__panel h3 { font-family: var(--font-display); font-size: var(--text-display-3) !important; font-weight: 600 !important; letter-spacing: -0.015em; line-height: 1.12 !important; }
main h3:not(.font-display), main h4 { font-weight: 600; letter-spacing: -0.005em; }
.text-lede, main > section.hero-interior p.text-2xl { font-size: var(--text-lede) !important; line-height: 1.45 !important; color: var(--color-lyd-secondary); }
main h1.font-display:not(.text-white), main h2.font-display, main h3.font-display { color: var(--color-lyd-ink); }
.tabular, [data-count-to], .pipe__time, .price, [class*="text-4xl"] { font-variant-numeric: tabular-nums; }

/* headings left by default (the bundle's :has() centring rule is neutralised here) */
main h1:not([class*="text-center"]), main h2:not([class*="text-center"]), main h1:not([class*="text-center"]) + p, main h2:not([class*="text-center"]) + p { text-align: inherit; }
.td-kicker, main :has(> h1) > .td-kicker, main :has(> h2) > .td-kicker { text-align: left; margin-left: 0; margin-right: 0; }
.text-center > .td-kicker, .text-center .td-kicker { margin-left: auto; margin-right: auto; }

/* ---------- kicker: accent rule replaces the square dot (Carex transfer) ---------- */
.td-kicker { color: var(--color-lyd-secondary); font-size: 0.6875rem; letter-spacing: 0.14em; font-weight: 600; gap: 0.75rem; }
.td-kicker::before { width: 1.75rem !important; height: 2px !important; border-radius: 1px; background: var(--color-lyd-yellow-deep); }
.td-kicker-light { color: rgba(255, 255, 255, 0.8); }
.td-kicker-light::before { background: var(--color-lyd-yellow); }

/* ---------- bands ---------- */
main section[class], main > section { padding-top: var(--band-y); padding-bottom: var(--band-y); }
main > section:first-of-type { padding-top: clamp(8.5rem, 14vw, 11rem); }
main section.band-tight { padding-top: var(--band-y-tight); padding-bottom: var(--band-y-tight); }
main section.band-loose { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
main section[data-band] { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
main section[data-band] > .band-inner { margin: 0 auto; max-width: 80rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { main section[data-band] > .band-inner { padding-left: 2rem; padding-right: 2rem; } }
main section[data-band="surface"] { background: var(--color-lyd-surface); border-top: 1px solid var(--color-lyd-line); border-bottom: 1px solid var(--color-lyd-line); }
main section[data-band="deep"], main section.hscroll[data-band="deep"] { background: var(--color-lyd-deep); color: #fff; }
main section[data-band="deep"] + section[data-band="deep"] { border-top: 1px solid rgba(255, 255, 255, 0.1); }
main section[data-band="deep"] :is(h1, h2, h3, h4, .font-display, strong, th) { color: #fff; }
main section[data-band="deep"] :is(p, li, dd, figcaption, small, td, .text-lyd-muted, [class*="text-lyd-ink"], [class*="text-lyd-muted"]) { color: var(--color-lyd-dark-body); }
main section[data-band="deep"] .td-kicker { color: var(--color-lyd-dark-body); }
main section[data-band="deep"] .td-kicker::before { background: var(--color-lyd-yellow); }
main section[data-band="deep"] .text-lyd-ink, main section[data-band="deep"] .text-lyd-ink\/70 { color: #fff; }

/* ---------- cards + elevation ---------- */
main [data-slot="card"], main .faq-item, main .card-lyd {
  background: #fff; border: 1px solid var(--color-lyd-line-strong); border-radius: 1.5rem; box-shadow: var(--lift-1);
  transition: box-shadow 0.28s, transform 0.28s;
}
main [data-slot="card"] { --tw-ring-color: transparent; box-shadow: var(--lift-1); }
main [data-lift="2"], main [data-slot="card"][data-lift="2"] { box-shadow: var(--lift-2); }
main [data-lift="3"], main [data-slot="card"][data-lift="3"] { box-shadow: var(--lift-3); }
main [data-lift]:hover { box-shadow: var(--lift-3); transform: translateY(-3px); }
main [data-lift="static"]:hover { transform: none; }
main [data-elevate="hero"], main [data-elevate="hero"][data-slot="card"] { box-shadow: var(--lift-hero) !important; background: #fff !important; border: 0; border-radius: 1.25rem; transform: none !important; }
main [data-slot="card"].bg-lyd-blue, main .bg-lyd-blue[data-slot="card"] { background: var(--color-lyd-blue); border-color: var(--color-lyd-blue-deep); }
main [data-slot="card"].bg-lyd-yellow, main [data-slot="card"][class*="bg-lyd-yellow"] { background: var(--color-lyd-yellow); border-color: var(--color-lyd-yellow-deep); }
main section[data-band="deep"] [data-slot="card"], main section[data-band="deep"] .card-lyd, .card-deep {
  background: var(--color-lyd-deep-600) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff; box-shadow: none !important;
}
main section[data-band="deep"] [data-slot="card"]:hover, .card-deep:hover { border-color: rgba(255, 255, 255, 0.28) !important; transform: none; }
main section[data-band="deep"] [data-slot="card"] .bg-lyd-blue, main section[data-band="deep"] [data-slot="card"] .bg-lyd-yellow, main section[data-band="deep"] [data-slot="card"] .bg-white { background: rgba(255, 255, 255, 0.1); color: #fff; }
/* any light panel that lands inside a deep band becomes a deep-600 card; discs/pills keep yellow */
main section[data-band="deep"] :is(.bg-white, .bg-lyd-surface, .bg-lyd-blue, .bg-lyd-yellow, .proof-card, .carousel-card):not(.btn):not(.chip):not([class*="rounded-full"]):not(.pipe__frame):not(.pipe__frame *):not(.badge-tier):not(.inline-flex) {
  background: var(--color-lyd-deep-600) !important; color: #fff; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important;
}
main section[data-band="deep"] :is(.bg-white, .bg-lyd-surface, .bg-lyd-blue, .bg-lyd-yellow, .proof-card):not(.pipe__frame *) :is(h2, h3, h4, strong, .font-display) { color: #fff; }
main section[data-band="deep"] :is(.bg-white, .bg-lyd-surface, .bg-lyd-blue, .bg-lyd-yellow, .proof-card):not(.pipe__frame *) :is(p, li, span:not([class*="rounded-full"]), small, div) { color: var(--color-lyd-dark-body); }
main section[data-band="deep"] :is(.bg-white, .bg-lyd-blue, .bg-lyd-yellow)[class*="rounded-full"], main section[data-band="deep"] .bg-lyd-yellow-deep[class*="rounded-full"], main section[data-band="deep"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep).inline-flex { background: var(--color-lyd-yellow-deep) !important; color: var(--color-lyd-ink) !important; }
main section[data-band="deep"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep).inline-flex * { color: var(--color-lyd-ink) !important; }
main section[data-band="deep"] .proof-card :is(.bg-white, .bg-lyd-blue, .bg-lyd-yellow, .bg-lyd-yellow-deep)[class*="h-1"] { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
main section[data-band="deep"] .border-lyd-line, main section[data-band="deep"] [class*="border-lyd-line"], main section[data-band="deep"] [class*="divide-lyd-line"] > * { border-color: rgba(255, 255, 255, 0.14) !important; }
main section[data-band="deep"] .bg-lyd-line, main section[data-band="deep"] [data-slot="separator"] { background-color: rgba(255, 255, 255, 0.14) !important; }
main section[data-band="deep"] .text-lyd-yellow-deep, main section[data-band="deep"] svg[class*="text-lyd-yellow"] { color: var(--color-lyd-yellow-deep) !important; }

/* generic panels with padding keep a soft radius */
main [class*="bg-lyd-yellow"][class*="p-"], main [class*="bg-lyd-blue"][class*="p-"], main [class*="bg-white"][class*="p-"], main [class*="bg-lyd-surface"][class*="p-"] { border-radius: 1.5rem; }
main [class*="p-10"][class*="bg-lyd-"], main [class*="p-14"][class*="bg-lyd-"] { border-radius: 1.5rem; }

/* ---------- buttons: single anchors, four variants ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.875rem 1.5rem; border-radius: 999px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s; cursor: pointer; }
.btn-primary-light { background: var(--color-lyd-ink); color: #fff; }
.btn-primary-light:hover { background: #2b353b; }
.btn-primary-dark { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); }
.btn-primary-dark:hover { background: var(--color-lyd-yellow-deep); }
.btn-ghost-light { border: 1px solid rgba(32, 40, 45, 0.28); color: var(--color-lyd-ink); background: transparent; }
.btn-ghost-light:hover { border-color: var(--color-lyd-ink); }
.btn-ghost-dark { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; background: transparent; }
.btn-ghost-dark:hover { border-color: #fff; }
.btn:focus-visible { outline: 2px solid var(--color-lyd-deep-400); outline-offset: 2px; }
main section[data-band="deep"] .btn:focus-visible { outline-color: var(--color-lyd-yellow-deep); }
main section[data-band="deep"] .btn-primary-light { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); }
main section[data-band="deep"] .btn-ghost-light { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
/* legacy anchor buttons that stay in the markup */
main a.bg-primary, main a.bg-lyd-ink[class*="px-"] { background: var(--color-lyd-ink); color: #fff; border-radius: 999px; }
main a.bg-lyd-yellow[class*="px-"] { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); border-radius: 999px; }
main a.bg-lyd-yellow[class*="px-"]:hover { background: var(--color-lyd-yellow-deep); }
header a[class*="bg-lyd-yellow"] { background: var(--color-lyd-yellow); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.625rem; border-radius: 999px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.chip-outline { border: 1px solid var(--color-lyd-line-strong); color: var(--color-lyd-ink); }
.chip-info { background: var(--color-lyd-blue); color: var(--color-lyd-deep); }
.chip-success { background: var(--color-lyd-yellow-deep); color: var(--color-lyd-deep); }
.chip-deep { background: var(--color-lyd-deep); color: #fff; }
.chip-yellow { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); }

/* ---------- marks (ticks, numerals) legible on light ---------- */
main .text-lyd-yellow-deep:not(.btn), main svg.text-lyd-yellow-deep, main [class*="text-lyd-yellow"]:not([class*="bg-"]) { color: var(--color-lyd-gold-ink); }
main .leaks__numeral, main .numeral, main [class*="text-lyd-ink/25"], main [class*="text-lyd-ink/3"] { color: var(--color-lyd-gold-ink) !important; opacity: 1 !important; }
main section[data-band="deep"] .leaks__numeral, main section[data-band="deep"] .numeral, main section[data-band="deep"] [class*="text-lyd-ink/25"], main section[data-band="deep"] .text-lyd-yellow-deep, main section[data-band="deep"] [class*="text-lyd-yellow"] { color: var(--color-lyd-yellow-deep) !important; }
main .bg-lyd-yellow-deep.rounded-full, main .bg-lyd-yellow.rounded-full { background: var(--color-lyd-yellow-deep); color: var(--color-lyd-ink); }

/* ---------- nav ---------- */
header { border-bottom-color: var(--color-lyd-line-strong); }
header .nav-link { color: var(--color-lyd-secondary); position: relative; padding-bottom: 0.15rem; }
header .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.45rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
header .nav-link:hover { color: var(--color-lyd-ink); }
header .nav-link[aria-current="page"] { color: var(--color-lyd-ink); }
header .nav-link[aria-current="page"]::after, header .nav-link:hover::after { transform: scaleX(1); }
#lang-toggle, #lang-current-label { color: var(--color-lyd-secondary); }

/* ---------- hero ---------- */
main > section:first-of-type .hero-scrim { background: linear-gradient(100deg, rgba(15, 46, 56, 0.93) 0%, rgba(15, 46, 56, 0.8) 38%, rgba(15, 46, 56, 0.45) 68%, rgba(15, 46, 56, 0.28) 100%) !important; }
main > section:first-of-type mark, main > section:first-of-type .hl, main mark { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); border-radius: 0.3rem; padding: 0 0.15em; }
main [data-elevate="hero"] .bg-lyd-yellow { background: var(--color-lyd-yellow-deep); }

/* ---------- Six things: static ledger ---------- */
.leaks-grid { display: grid; gap: 0; border-top: 1px solid var(--color-lyd-line); margin-top: 1rem; }
@media (min-width: 768px) { .leaks-grid { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
@media (min-width: 1024px) { .leaks-grid { grid-template-columns: repeat(3, 1fr); } }
.leaks-grid .leaks__slide { display: block !important; text-align: left; max-width: none; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--color-lyd-line); animation: none; }
.leaks-grid .leaks__numeral { color: var(--color-lyd-gold-ink); }
.leaks-grid .leaks__title { margin-top: 0.9rem; font-size: 1.375rem !important; line-height: 1.25 !important; font-weight: 600 !important; }
.leaks-grid .leaks__body { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.6; max-width: none; color: var(--color-lyd-secondary); }
.leaks__stage.leaks-grid { min-height: 0 !important; display: grid !important; place-items: stretch; }
.leaks-grid .leaks__title .marker, .leaks-grid .leaks__title .marker-blue { background-image: none; padding: 0; }
.leaks-grid .leaks__slide > * { margin-left: 0; margin-right: 0; }

/* ---------- Ecosystem (hscroll) on deep ---------- */
main section.hscroll[data-band="deep"] .hscroll__stage, main section.hscroll[data-band="deep"] .hscroll__runway { background: var(--color-lyd-deep); }
main section.hscroll[data-band="deep"] .hscroll__panel { background: var(--color-lyd-deep-600) !important; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none !important; border-radius: 1.5rem; }
main section.hscroll[data-band="deep"] .hscroll__panel :is(p, span:not(.font-display)) { color: var(--color-lyd-dark-body); }
main section.hscroll[data-band="deep"] .hscroll__panel :is(h2, h3, .font-display) { color: #fff; }
main section.hscroll[data-band="deep"] .hscroll__panel [class*="text-5xl"] { color: var(--color-lyd-yellow-deep) !important; opacity: 1 !important; }
main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow { background: transparent !important; color: var(--color-lyd-yellow) !important; padding: 0; border-radius: 0; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.6875rem; }
main section.hscroll[data-band="deep"] .hscroll__panel :is(.bg-lyd-blue, .bg-lyd-yellow, .bg-white) { background: transparent !important; }
main section.hscroll[data-band="deep"] .hscroll__panel [class*="text-lyd-ink/6"], main section.hscroll[data-band="deep"] .hscroll__panel [class*="tracking-"] { color: var(--color-lyd-dark-body) !important; }
main .replaces-grid .carousel-card { flex-basis: calc(33.333% - 0.7rem); }
@media (max-width: 1023px) { main .replaces-grid .carousel-card { flex-basis: calc(50% - 0.5rem); } }
@media (max-width: 639px) { main .replaces-grid .carousel-card { flex-basis: 100%; } }
main section.hscroll[data-band="deep"] .hscroll__bar { background: rgba(255, 255, 255, 0.18); }
main section.hscroll[data-band="deep"] .hscroll__bar > * { background: var(--color-lyd-yellow); }
@media (max-width: 1023px) {
  main .hscroll__panel { display: flex !important; flex-direction: column !important; overflow: hidden; }
  main .hscroll__panel > .hidden.lg\:block { display: block !important; width: 100% !important; height: 15rem; flex: none; order: -1; }
  main .hscroll__panel > .hidden.lg\:block img { display: block; height: 100%; width: 100%; object-fit: cover; clip-path: none !important; transform: none !important; opacity: 1 !important; }
  main .hscroll__panel > .flex { width: 100% !important; }
  main .hscroll__panel > .flex p { max-width: none; }
}

@media (min-width: 1024px) { main .hscroll__runway { height: 300vh !important; } }
main [data-lift]:not([data-slot="card"]) { border-radius: 1.5rem; box-shadow: var(--lift-1); transition: box-shadow 0.28s, transform 0.28s; }

/* ---------- Referral race rows ---------- */
main .race-row.bg-lyd-yellow, main .bg-lyd-yellow.race-win { background: var(--color-lyd-yellow-deep); }

/* ---------- AEO phone mock: dark surfaces are one family ---------- */
main .bg-lyd-ink.rounded-\[1\.75rem\], main [class*="bg-lyd-ink"][class*="rounded-"], main .phone-mock { background: var(--color-lyd-deep-800) !important; }

/* ---------- Enquiries pipeline as product frame ---------- */
main .pipe__frame { background: #fff !important; border: 1px solid var(--color-lyd-line-strong) !important; border-radius: 1.25rem !important; box-shadow: var(--lift-3) !important; overflow: hidden; }
main .pipe__chrome { background: var(--color-lyd-deep) !important; color: #fff; padding: 0.75rem 1.25rem; }
main .pipe__chrome .pipe__title { color: #fff; }
main .pipe__chrome .pipe__sample { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; }
main section[data-band="deep"] .pipe__caption { color: var(--color-lyd-dark-body); }
main section[data-band="deep"] .pipe__table :is(td, th, span, small) { color: var(--color-lyd-ink); }
main section[data-band="deep"] .pipe__table th[scope="col"] { color: var(--color-lyd-secondary); }
main section[data-band="deep"] .pipe__table .pipe__suburb, main section[data-band="deep"] .pipe__table .pipe__time { color: var(--color-lyd-secondary); }
main section[data-band="deep"] .pipe__auto, main section[data-band="deep"] .pipe__auto * { color: var(--color-lyd-ink); }
main section[data-band="deep"] .pipe__auto-item svg { color: var(--color-lyd-gold-ink); }
main .pipe__status.is-new { background: #fff; border: 1px solid var(--color-lyd-line-strong); color: var(--color-lyd-ink); }
main .pipe__status.is-assigned { background: var(--color-lyd-blue); color: var(--color-lyd-deep); }
main .pipe__status.is-booked { background: var(--color-lyd-yellow-deep); color: var(--color-lyd-deep); }

/* ---------- pricing tiers ---------- */
main .card-elevate, main .card-elevate[data-slot="card"] { background: var(--color-lyd-deep) !important; border-color: var(--color-lyd-deep) !important; color: #fff; box-shadow: var(--lift-3) !important; }
@media (min-width: 1024px) { main .card-elevate { margin-top: -1rem; margin-bottom: 1rem; } }
main .card-elevate :is(h3, h2, .font-display, .text-4xl, span.text-xl, .text-3xl) { color: #fff; }
main .card-elevate :is(p, li, span, div) { color: var(--color-lyd-dark-body); }
main .card-elevate :is(.text-4xl, .text-xl, .font-semibold, strong) { color: #fff; }
main .card-elevate svg { color: var(--color-lyd-yellow-deep); }
main .card-elevate .bg-lyd-yellow, main .card-elevate .bg-lyd-yellow-deep { background: rgba(255, 255, 255, 0.12); }
main .card-elevate hr, main .card-elevate [role="separator"], main .card-elevate .border-lyd-line, main .card-elevate .bg-lyd-line { border-color: rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.14); }
main .card-elevate .btn-primary-light, main .card-elevate a.bg-primary, main .card-elevate a.bg-lyd-ink { background: var(--color-lyd-yellow) !important; color: var(--color-lyd-ink) !important; }
main .card-elevate .chip-most-popular, main .badge-tier { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.75rem; border-radius: 999px; background: var(--color-lyd-yellow); color: var(--color-lyd-ink) !important; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
main .card-elevate .card-topbar { display: none; }

/* ---------- FAQ as hairline list ---------- */
main .faq-list [data-slot="card"], main .faq-hairline { background: transparent; border: 0; border-top: 1px solid var(--color-lyd-line); border-radius: 0; box-shadow: none; }

/* ---------- estimator disabled state: still legible (AA) ---------- */
main .est-addon[data-disabled], main .est-platform[data-disabled], main .est-website[data-disabled], main #est-ads-block[data-disabled] { opacity: 0.82 !important; filter: grayscale(1); }
main .text-display-2 { font-size: var(--text-display-2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; }

/* ---------- comparison / data tables ---------- */
main table thead th { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-lyd-secondary); font-weight: 500; }
main .overflow-x-auto { scrollbar-gutter: stable; }

/* ---------- footer: deep ---------- */
footer.footer-deep, footer.footer-full.footer-deep { background: var(--color-lyd-deep) !important; border-top: 0 !important; color: #fff; }
footer.footer-deep :is(h2, h3, h4, strong) { color: #fff; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
footer.footer-deep :is(p, li, span, address, small, td) { color: var(--color-lyd-dark-body); }
footer.footer-deep a { color: var(--color-lyd-dark-body); }
footer.footer-deep a:hover { color: #fff; }
footer.footer-deep .border-lyd-line, footer.footer-deep .border-t, footer.footer-deep .border-b, footer.footer-deep [class*="divide-"] > * { border-color: rgba(255, 255, 255, 0.14) !important; }
footer.footer-deep .footer-legal { background: var(--color-lyd-deep-800); }
footer.footer-deep .footer-legal p, footer.footer-deep .footer-legal a { font-size: 0.8125rem; }
footer.footer-deep [class*="rounded-full"][class*="border"] { border-color: rgba(255, 255, 255, 0.28) !important; color: #fff; }
footer.footer-deep svg { color: #fff; }
footer.footer-deep img.footer-logo-lyd { height: 3rem; }
footer.footer-deep img.footer-logo-shark { height: 1.9rem; }
footer.footer-deep img.footer-logo-ndis { height: 2.25rem; }
footer.footer-deep [class*="bg-lyd-ink"], footer.footer-deep .bg-lyd-yellow, footer.footer-deep .bg-lyd-surface, footer.footer-deep .bg-white { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
footer.footer-deep .btn-primary-light, footer.footer-deep a.bg-lyd-ink { background: var(--color-lyd-yellow) !important; color: var(--color-lyd-ink) !important; }
footer.footer-deep .goog-te-gadget, footer.footer-deep .goog-te-gadget * { color: var(--color-lyd-dark-body) !important; }

/* ---------- closing band ---------- */
main section.closing-band[data-band="deep"] > .band-inner > [class*="grid"] { background: transparent !important; padding: 0 !important; }
main section.closing-band .contact-card { background: var(--color-lyd-deep-600) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff; box-shadow: none !important; border-radius: 1.5rem; }
main section.closing-band .contact-card :is(p, li, span, a) { color: var(--color-lyd-dark-body); }
main section.closing-band .contact-card :is(.text-2xl, .text-3xl, .font-display, strong, a.text-lyd-ink) { color: #fff; }
main section.closing-band .contact-card [class*="border-"] { border-color: rgba(255, 255, 255, 0.14) !important; }
main :is(section.closing-band, section[data-section="proof"], section[data-section="whynow"]) .watermark { position: absolute; right: -4rem; top: -4.5rem; bottom: auto; width: 36rem; opacity: 0.12; pointer-events: none; user-select: none; z-index: 0; }
main section.closing-band .band-inner { position: relative; z-index: 1; }
main section.closing-band { position: relative; overflow: hidden; }
main section.closing-band .bg-lyd-yellow.p-10, main section.closing-band .bg-lyd-blue, main section.closing-band .bg-white, main section.closing-band .bg-lyd-surface { background: transparent !important; box-shadow: none !important; }

/* ---------- interior hero ---------- */
main > section.hero-interior { padding-top: clamp(8rem, 12vw, 10rem); padding-bottom: clamp(3rem, 5vw, 4rem); }
main > section.hero-interior .text-center, main > section.hero-interior h1, main > section.hero-interior p { text-align: left !important; }
main > section.hero-interior .mx-auto:not(.band-inner):not(.max-w-7xl) { margin-left: 0 !important; }
main > section.hero-interior .band-inner > div, main > section.hero-interior > div:not(.band-inner) > div { max-width: 56rem; }
main > section.hero-interior .td-kicker { margin-left: 0 !important; margin-right: 0 !important; }
main > section.hero-interior[data-band="deep"] .td-kicker { color: var(--color-lyd-yellow-deep); }
main > section.hero-interior[data-band="deep"] h1, main > section.hero-interior[data-band="deep"] .font-display { color: #fff; }
main > section.hero-interior[data-band="deep"] p { color: var(--color-lyd-dark-body); }
main > section.hero-interior[data-band="deep"] .bg-lyd-yellow.p-8, main > section.hero-interior[data-band="deep"] [class*="bg-lyd-yellow"][class*="p-"] { background: var(--color-lyd-deep-600) !important; border-left: 4px solid var(--color-lyd-yellow-deep); border-radius: 1rem; color: #fff; }
main > section.hero-interior[data-band="deep"] [class*="bg-lyd-yellow"][class*="p-"] :is(p, h2, h3, span) { color: var(--color-lyd-dark-body); }
main > section.hero-interior[data-band="deep"] [class*="bg-lyd-yellow"][class*="p-"] :is(h2, h3) { color: #fff; }

/* ---------- demo thumbnails as browser frames ---------- */
main .demo-frame[data-slot="card"], main a.demo-frame { position: relative; padding-top: 3.25rem !important; overflow: hidden; }
main .demo-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.25rem; background: var(--color-lyd-deep); }
main .demo-frame::after { content: ""; position: absolute; left: 1rem; top: 0.85rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #9db0b7; box-shadow: 0.95rem 0 0 #9db0b7, 1.9rem 0 0 #9db0b7; }

/* ---------- misc hooks used by the transform ---------- */
main .replaces-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; overflow: visible; }
main .replaces-grid .carousel-card { width: min(100%, 20rem); flex: 0 1 20rem; background: #fff; border: 1px solid var(--color-lyd-line-strong); border-radius: 1.25rem; box-shadow: var(--lift-1); }
main .card-anchor, main .card-anchor[data-slot="card"] { background: var(--color-lyd-deep) !important; border-color: var(--color-lyd-deep) !important; color: #fff; box-shadow: var(--lift-3) !important; }
main .card-anchor :is(h2, h3, .font-display, strong) { color: #fff; }
main .card-anchor :is(p, li, span, div) { color: var(--color-lyd-dark-body); }
main .card-anchor svg { color: var(--color-lyd-yellow-deep); }
main .card-anchor .bg-lyd-yellow, main .card-anchor .bg-lyd-yellow-deep { background: var(--color-lyd-yellow-deep); color: var(--color-lyd-ink); }
main .card-anchor .bg-lyd-yellow-deep span, main .card-anchor .rounded-full.bg-lyd-yellow-deep { color: var(--color-lyd-ink); }
main .card-anchor [class*="border-lyd-line"], main .card-anchor .bg-lyd-line { border-color: rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.14); }
footer.footer-deep .footer-rule, footer.footer-deep .bg-lyd-line { background: rgba(255, 255, 255, 0.14) !important; }
main .marker { background-image: linear-gradient(100deg, transparent 0.4%, var(--color-lyd-yellow-deep) 2.6%, var(--color-lyd-yellow-deep) 95.6%, transparent 98.8%); }
main > section:first-of-type .text-white .marker, main section[data-band="deep"] .marker { background-image: linear-gradient(100deg, transparent 0.4%, var(--color-lyd-yellow) 2.6%, var(--color-lyd-yellow) 95.6%, transparent 98.8%); color: var(--color-lyd-ink); }
main .band-inner > .mx-auto.text-center, main .band-inner > .text-center { text-align: center; }
main .band-inner > .text-center .td-kicker { margin-left: auto; margin-right: auto; }
main .hero-interior .td-kicker { color: var(--color-lyd-gold-ink); }
main .hero-interior .td-kicker::before { background: var(--color-lyd-gold-ink); }
main .demo-frame h3 { margin-top: 0.25rem; }

/* ---------- reveal: calmer ---------- */
.js [data-reveal] { transform: translateY(16px) !important; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.js [data-reveal].is-revealed { transform: none !important; }
.js [data-reveal-stagger] > * { transform: translateY(16px) !important; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  main [data-lift]:hover { transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  main > section:first-of-type h1.font-display { font-size: clamp(2.25rem, 10vw, 3rem) !important; }
  main .grid.bg-lyd-yellow.p-10 { padding: 1.75rem !important; }
  main [data-elevate="hero"] { margin-top: 1.5rem; max-width: 22rem; }
  main section.closing-band .btn { min-width: 0; }
}
/* 44px minimum hit area at every width, not only on coarse pointers */
main a[class*="px-"][class*="py-"], header a[class*="px-"], footer a[class*="px-"], main .btn, main button[type="submit"], main form button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
main form button, main button[type="submit"] { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  main *, main *::before, main *::after { animation-iteration-count: 1 !important; animation-duration: 0.01ms !important; }
  main .hscroll__runway { height: auto !important; }
}

/* ===== premium polish pass (Carex-informed) ===== */
/* scroll-fill headline: never grey-washed */
main [data-fill-text], main [data-fill-text] :is(span, .fw) { color: var(--color-lyd-ink) !important; opacity: 1 !important; transition: none !important; -webkit-text-fill-color: currentColor !important; }
main section[data-band="deep"] [data-fill-text], main section[data-band="deep"] [data-fill-text] :is(span, .fw) { color: #fff !important; }
/* hero source line: legible in classic too */
main > section:first-of-type [class*="text-white/5"] { color: rgba(255, 255, 255, 0.75) !important; }
/* one steady beat between centred kickers and their headings */
main section :is(.text-center, .mx-auto) > .td-kicker { margin-bottom: 1rem !important; }
/* connected-system tiles: the multi-hue top rules give way to one structural rule; x-icons read as close buttons — replace with a "replaced" chip */
main .replaces-grid { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
main .replaces-grid .carousel-card { min-width: 0; }
main .replaces-grid .carousel-card .flex.items-start > svg { display: none; }
main .replaces-grid .carousel-card .flex.items-start::after { content: "Replaced"; flex: none; margin-left: auto; margin-top: 2px; padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid rgba(212, 167, 44, 0.45); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-lyd-gold-ink); }
main section[data-band="deep"] .replaces-grid .carousel-card .flex.items-start::after { color: #f1d27c; }
/* header phone (markup added by transform) */
.header-phone { align-items: center; gap: 0.45rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.header-phone svg { width: 15px; height: 15px; }
/* The header CTA plus the correctly-sized logo no longer both fit next to the
   menu button whenever the menu button itself is showing (below the nav's own
   lg breakpoint); hide it there and rely on the "Book a free demo" link added
   inside the mobile drawer instead. Tied to the same 1024px threshold the
   hamburger/nav-links toggle uses, rather than a narrower guess, so there is
   no gap where a wide phone still shows the CTA and re-triggers the squeeze. */
@media (max-width: 1023px) {
  header nav > div > a.cta-alive { display: none; }
}
/* footer: acknowledgement of country */
footer.footer-deep .footer-ack { display: flex; align-items: flex-start; gap: 1rem; max-width: 56rem; margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.65; color: var(--color-lyd-dark-body); }
footer.footer-deep .footer-ack .ack-flag { flex: none; margin-top: 0.2rem; border-radius: 3px; overflow: hidden; line-height: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
/* closing band: capability statement link + contact icon rows (markup added by transform) */
main .cap-link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.15rem; font-size: 0.875rem; font-weight: 600; color: #f1d27c; text-decoration: none; }
main .cap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
main .cap-link svg { width: 17px; height: 17px; flex: none; }
main .contact-card .contact-line { display: flex; align-items: center; gap: 0.75rem; }
main .contact-card .ci { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 999px; border: 1px solid rgba(241, 210, 124, 0.35); color: #f1d27c; }
main .contact-card .ci svg { width: 15px; height: 15px; }
/* chat widget: stays out of the hero */
/* mobile: badge clear of the source line, stat label on its own line, tappable footer links */
@media (max-width: 1023px) {
  main [data-hero-stat] { margin-bottom: 3.5rem; }
  main [data-hero-stat] img[src*="we-love-ndis"] { bottom: -3.5rem !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
}
@media (max-width: 767px) {
  main [data-elevate="hero"] .p-6 .flex.items-baseline { display: block; }
  main [data-elevate="hero"] .p-6 .flex.items-baseline > span:last-child { display: block; margin-top: 0.3rem; }
  footer.footer-deep .grid a:not([class*="rounded-full"]):not(.btn) { display: inline-block; padding: 0.4rem 0; }
}
/* hero trust row (replaces the floating medallion) */
main > section:first-of-type .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
main > section:first-of-type .hero-trust img { height: 2.5rem; width: auto; border-radius: 999px; }
main > section:first-of-type .hero-trust img[src*="sharktech"] { height: 1.5rem; border-radius: 0; opacity: 0.85; background: transparent !important; box-shadow: none !important; }
main > section:first-of-type .hero-trust span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
/* contact card social row (cloned from the footer) */
main .contact-card .contact-social { display: flex; gap: 0.625rem; margin-top: 1.5rem; }
main .contact-card .contact-social a { display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(241, 210, 124, 0.35); color: #fff; }
main .contact-card .contact-social a:hover { border-color: #f1d27c; background: rgba(241, 210, 124, 0.1); }
main .contact-card .contact-social a svg { width: 18px; height: 18px; }
main .contact-card .contact-line { margin-top: 0.9rem; }
/* homepage bridge into the detail pages (ecosystem section hand-off) */
main section.hscroll .eco-bridge { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
main section.hscroll .eco-bridge p { margin: 0 0 1.25rem; max-width: 44rem; color: var(--color-lyd-dark-body); }
main section.hscroll .eco-bridge__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ===== site-wide polish (round 2) ===== */
/* The compiled bundle sets `h2 + p { margin-inline: auto }`, so every flush-left heading's lede
   floated to the centre of its column (worst case ~215px off-axis). Centred blocks keep it. */
main :not(.text-center) > :is(h1, h2):not([class*="text-center"]) + p:not(.mx-auto):not(.text-center) { margin-left: 0 !important; margin-right: 0 !important; }
main :is(.text-center, .mx-auto.text-center, [class*="text-center"]) :is(h1, h2) + p { margin-left: auto !important; margin-right: auto !important; }
/* Interior heroes sat 1rem left of every band below them (hero px-4 vs band-inner px-8). */
@media (min-width: 768px) {
  main > section.hero-interior, main > section:not([data-band])[class*="max-w-7xl"] { padding-left: 2rem !important; padding-right: 2rem !important; }
}
/* /features "what is included": one material with a gold top rule, not a four-hue swatch chart */
main .feat-tile { background: #fff !important; border: 1px solid var(--color-lyd-line-strong) !important; border-top: 2px solid #dcb13a !important; border-radius: 1rem; box-shadow: var(--lift-1); }
main .feat-tile :is(h3, h4) { color: var(--color-lyd-ink); }
main section[data-band="deep"] .feat-tile { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
/* demo browser frames: one petrol chrome, not four rotating colours */
main .demo-frame::before { background: linear-gradient(90deg, #081c23, #17495a) !important; }

/* ===== "One connected system" tiles: three per row, icon leads, title gets the width ===== */
main .replaces-grid { gap: 1rem; }
main .replaces-grid .carousel-card { flex-basis: calc(33.333% - 0.7rem) !important; width: auto !important; padding: 1.5rem !important; justify-content: flex-start !important; }
@media (max-width: 1023px) { main .replaces-grid .carousel-card { flex-basis: calc(50% - 0.5rem) !important; } }
@media (max-width: 639px) { main .replaces-grid .carousel-card { flex-basis: 100% !important; } }
/* the inner wrapper collapses so icon / title-row / description become siblings we can order */
main .replaces-grid .carousel-card > div:first-child { display: contents; }
main .replaces-grid .carousel-card > div:last-child { order: -1; margin-top: 0 !important; margin-bottom: 1.1rem !important; height: 2.75rem !important; width: 2.75rem !important; border-radius: 0.625rem; }
main .replaces-grid .carousel-card .flex.items-start { align-items: baseline; gap: 0.75rem; }
main .replaces-grid .carousel-card .flex.items-start > span { font-size: 1.0625rem !important; line-height: 1.25; }
main .replaces-grid .carousel-card p { font-size: 0.9375rem !important; margin-top: 0.4rem !important; }
/* on the deep band the pastel icon tiles washed out; champagne on petrol is one identity */
main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child { background: rgba(241, 210, 124, 0.14) !important; }
main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child svg { color: #f1d27c !important; }

/* the anchor card's heading is word-split into spans by premium.js, so the generic span colour
   was winning over the heading colour */
main .card-anchor :is(h1, h2, h3, .font-display) :is(span, .pm-w) { color: #fff !important; }
main .card-anchor { background: var(--color-lyd-deep) !important; border-color: var(--color-lyd-deep) !important; }

/* The chat widget stays visible from the first screen: it is the site's lead capture and the
   owner expects it on the hero. (A review note suggested hiding it until past the hero because
   the greeting bubble overlaps the ticker; the right fix for that is the GHL widget config -
   disable the auto-open prompt - not hiding the launcher.) */

/* ---------------------------------------------------------------------
   Mobile nav drawer: give it a height and let it scroll (9 Sep 2026 audit).
   The panel lays out at its natural 460px inside a position:fixed header, so page scrolling cannot
   reveal what falls past the viewport. Measured: at 844x390 landscape, Resources, Contact Us, the
   phone number and the email address all sit below the fold; at the 320x256 reference viewport that
   SC 1.4.10 Reflow names, six of nine destinations are lost. On a phone the burger is the only
   navigation there is. A bare ID is enough because nothing else in the project declares a height or
   overflow on this element, and the closed state still comes from the utility .hidden, which this
   rule does not touch. overscroll-behavior stops the drawer chaining its scroll into the page.
   Site-wide on purpose: the header is shared markup across all 37 pages.
   --------------------------------------------------------------------- */
#v2-mobile-menu {
  max-height: calc(100dvh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ===== premium-motion.css ===== */
/* =====================================================================
   LYD AssistOS — motion + richness layer
   Gated on html.pm (set by premium.js). Reduced-motion users never get .pm,
   so everything below degrades to the static premium design.
   ===================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- headline word reveal --- */
.pm .pm-split .pm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pm .pm-split .pm-w > * { display: inline-block; transform: translateY(112%); opacity: 0; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 55ms), opacity 0.6s ease calc(var(--i, 0) * 55ms); will-change: transform; }
.pm .pm-split.pm-in .pm-w > * { transform: none; opacity: 1; }

/* --- highlighter draws itself --- */
.pm main .marker, .pm main .marker-blue { background-size: 0% 0.94em; transition: background-size 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
.pm main .marker.pm-in, .pm main .marker-blue.pm-in, .pm main .pm-in .marker, .pm main .pm-in .marker-blue { background-size: 100% 0.94em; }

/* --- accent rule draws in --- */
.pm .td-kicker::before { transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.pm section.pm-in .td-kicker::before, .pm header .td-kicker::before { transform: scaleX(1); }
.pm .text-center .td-kicker::before, .pm .kicker--center::before { transform-origin: center; }

/* --- staggered children --- */
.pm .pm-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms); }
.pm .pm-stagger.pm-in > * { opacity: 1; transform: none; }
.pm .pm-chat > * { transform: translateY(10px) scale(0.98); transition-delay: calc(var(--i, 0) * 420ms + 300ms) !important; }
.pm .pipe__table tbody.pm-stagger > tr { transform: translateX(-10px); }
.pm .pm-stagger.pm-in > .pm-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* --- photos --- */
.pm img.pm-photo { transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pm img.pm-photo.pm-in { transform: scale(1); }

/* --- header compacts on scroll --- */
header nav { transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
header.pm-scrolled nav { height: 4.25rem !important; }
header { transition: box-shadow 0.35s; }
header.pm-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 46, 56, 0.35); }

/* --- buttons --- */
.pm .pm-btn { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.25s; }
.pm .pm-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15, 46, 56, 0.45); }
.pm .pm-btn:active { transform: translateY(0); }
.pm .pm-btn > span[aria-hidden] { display: inline-block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm .pm-btn:hover > span[aria-hidden] { transform: translate(2px, -2px); }
.pm .pm-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.pm .pm-btn:hover::after { opacity: 1; }
.pm .btn-primary-dark:hover, .pm header a[class*="bg-lyd-yellow"]:hover { box-shadow: 0 12px 28px -12px rgba(250, 236, 155, 0.55); }

/* --- cards: lift + gentle 3D tilt --- */
.pm .pm-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s; transform-style: preserve-3d; }
.pm main [data-lift].pm-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.pm main [data-slot="card"]:hover, .pm main .card-lyd:hover { border-color: rgba(15, 46, 56, 0.28); }
.pm main .leaks__slide { transition: background-color 0.3s; }
.pm main .leaks__title { transition: color 0.3s; }
.pm main .leaks__slide:hover .leaks__title { color: var(--color-lyd-deep); }
.pm main .leaks__slide:hover .leaks__numeral { color: var(--color-lyd-deep-400) !important; }

/* --- deep bands: ambient glow + fine grain --- */
main section[data-band="deep"] { position: relative; overflow: hidden; isolation: isolate; }
main section[data-band="deep"] > .band-inner, main section[data-band="deep"] > .hscroll__runway { position: relative; z-index: 2; }
main section[data-band="deep"]::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(12px);
  background: radial-gradient(38% 45% at var(--gx, 78%) var(--gy, 18%), rgba(46, 116, 136, 0.42), transparent 70%), radial-gradient(30% 35% at 12% 90%, rgba(23, 73, 90, 0.55), transparent 70%);
}
.pm main section[data-band="deep"]::before { animation: pm-drift 26s ease-in-out infinite alternate; }
main section[data-band="deep"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes pm-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
footer.footer-deep { position: relative; }
footer.footer-deep::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(46, 116, 136, 0.28), transparent 70%); }
footer.footer-deep > * { position: relative; }

/* --- Elevate tier: slow conic sheen on the border --- */
@property --pm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pm main .card-elevate { position: relative; }
.pm main .card-elevate::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--pm-a), transparent 0 62%, rgba(250, 236, 155, 0.95) 78%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: pm-spin 7s linear infinite;
}
.pm main .card-elevate > * { position: relative; z-index: 1; }
@keyframes pm-spin { to { --pm-a: 360deg; } }

/* --- hero: stat card floats in, video eases --- */
.pm main > section:first-of-type [data-elevate="hero"] { animation: pm-float-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
@keyframes pm-float-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
.pm main > section:first-of-type video { animation: pm-video-in 2.4s ease-out both; }
@keyframes pm-video-in { from { transform: scale(1.06); filter: brightness(0.7); } to { transform: none; filter: none; } }

/* --- pipeline: status chips pop when they arrive --- */
.pm .pm-stagger.pm-in .pipe__status { animation: pm-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms + 350ms) both; }
@keyframes pm-pop { from { transform: scale(0.85); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* --- winning referral row: one soft pulse when it appears --- */
.pm section.pm-in .race-win { animation: pm-win 1.4s ease-out 0.6s both; }
@keyframes pm-win { 0% { box-shadow: 0 0 0 0 rgba(220, 177, 58, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(220, 177, 58, 0); } }

/* --- links: underline slides in --- */
.pm main p a:not(.btn):not(.td-cta), .pm footer a:not(.btn) { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s; text-decoration: none; }
.pm main p a:not(.btn):not(.td-cta):hover, .pm footer a:not(.btn):hover { background-size: 100% 1px; }

/* --- richness --- */
::selection { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); }
main [data-slot="card"], main .card-lyd { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%); }

@media (prefers-reduced-motion: reduce) {
  main section[data-band="deep"]::before { animation: none !important; }
  .pm-btn, .pm-tilt, .pm-photo { transition: none !important; transform: none !important; }
}

/* ===== premium-luxe.css ===== */
/* =====================================================================
   LYD AssistOS — LUXE layer (html.luxe). Champagne-gold accent, cinematic dark hero,
   glass surfaces, gradient deep bands, serif numerals, warm ivory grounds.
   Toggle: ?v=luxe (default) / ?v=classic
   ===================================================================== */
html.luxe {
  --gold: #dcb13a; --gold-2: #f1d27c; --gold-3: #7d5f14; --gold-ink: #7d5f14; /* gold-3/gold-ink = text-safe gold on ivory (5.2:1) */
  --ink-2: #14262d; --deep-a: #0b2730; --deep-b: #0f2e38; --deep-c: #081c23;
  --ivory: #f3f1ec; --ivory-2: #faf8f4;
  --gold-grad: #dcb13a;
}

/* ---------- ground: warmer ---------- */
.luxe body, .luxe main section[data-band="cream"], .luxe .pin-over, .luxe .pin-over[data-page-tone] { background: var(--ivory) !important; }
.luxe main section[data-band="surface"] { background: var(--ivory-2); border-color: rgba(20, 38, 45, 0.08); }
.luxe main h1.font-display:not(.text-white), .luxe main h2.font-display, .luxe main h3.font-display { color: var(--ink-2); }
.luxe main h2.font-display, .luxe main section[class] h2.font-display:not([class*="text-xs"]) { font-size: clamp(2.25rem, 4vw, 3.5rem) !important; letter-spacing: -0.03em !important; }

/* ---------- type: serif numerals + prices ---------- */
.luxe main [data-count-to], .luxe main [data-elevate="hero"] .text-2xl, .luxe main .text-4xl.font-semibold, .luxe main .text-4xl.tracking-tight, .luxe main .leaks__numeral, .luxe main .numeral, .luxe main .hscroll__panel [class*="text-5xl"], .luxe main .contact-card .text-2xl, .luxe main .font-display.text-2xl.font-semibold {
  font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.luxe main .leaks__numeral { font-size: 0.8rem; letter-spacing: 0.18em; font-weight: 700; color: var(--gold-3) !important; }
.luxe main .numeral, .luxe main [class*="text-lyd-ink/25"] { color: var(--gold-3) !important; }

/* ---------- accent: gold replaces pastel yellow as the mark ---------- */
.luxe .td-kicker { color: var(--gold-ink); letter-spacing: 0.16em; }
.luxe .td-kicker::before { background: linear-gradient(90deg, var(--gold), var(--gold-2)) !important; width: 2rem !important; }
.luxe .td-kicker-light { color: var(--gold-2); }
.luxe main section[data-band="deep"] .td-kicker { color: var(--gold-2); }
.luxe main section[data-band="deep"] .td-kicker::before { background: linear-gradient(90deg, var(--gold-2), #fff3c4) !important; }
.luxe main svg.text-lyd-yellow-deep, .luxe main [class*="text-lyd-yellow"]:not([class*="bg-"]), .luxe main .text-lyd-gold-ink, .luxe main .mark { color: var(--gold-3) !important; }
.luxe main section[data-band="deep"] svg[class*="text-lyd-yellow"], .luxe main section[data-band="deep"] .text-lyd-yellow-deep, .luxe main .card-elevate svg, .luxe main .card-anchor svg { color: var(--gold-2) !important; }
.luxe main .bg-lyd-yellow-deep.rounded-full, .luxe main .bg-lyd-yellow.rounded-full, .luxe main .disc, .luxe main section[data-band="deep"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep)[class*="rounded-full"] { background: var(--gold-grad) !important; color: var(--ink-2) !important; }
.luxe main .race-win, .luxe main .bg-lyd-yellow.race-win { background: var(--gold-grad) !important; color: var(--ink-2); }
.luxe main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(212, 167, 44, 0.45) 2.6%, rgba(241, 210, 124, 0.55) 95.6%, transparent 98.8%); }
.luxe main .pipe__status.is-booked, .luxe .chip-success, .luxe main .badge-tier, .luxe main .card-elevate .badge-tier { background: var(--gold-grad) !important; color: var(--ink-2) !important; }
.luxe main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow { background: transparent !important; color: var(--gold-2) !important; padding: 0; letter-spacing: 0.16em; }
.luxe main section.hscroll[data-band="deep"] .hscroll__bar > * { background: var(--gold-2); }

/* ---------- buttons: one gold primary everywhere ---------- */
.luxe .btn-primary-dark, .luxe .btn-primary-light, .luxe header a[class*="bg-lyd-yellow"], .luxe main a.bg-lyd-yellow[class*="px-"], .luxe main a.bg-primary, .luxe main a.bg-lyd-ink[class*="px-"], .luxe main .card-elevate .btn-primary-light, .luxe main section[data-band="deep"] .btn-primary-light, .luxe footer.footer-deep .btn-primary-light, .luxe main form button[type="submit"] {
  background: var(--gold-grad) !important; color: var(--ink-2) !important; border: 0 !important;
  box-shadow: 0 10px 24px -14px rgba(212, 167, 44, 0.55) !important;
}
.luxe .btn-primary-dark:hover, .luxe .btn-primary-light:hover, .luxe header a[class*="bg-lyd-yellow"]:hover { background: #e6bd48 !important; }
.luxe .pm-btn.btn-primary-dark:hover, .luxe .pm-btn.btn-primary-light:hover { box-shadow: 0 16px 32px -14px rgba(212, 167, 44, 0.6) !important; }
.luxe .btn-ghost-dark { border: 1px solid rgba(241, 210, 124, 0.45) !important; color: #fff; }
.luxe .btn-ghost-dark:hover { border-color: var(--gold-2) !important; background: rgba(241, 210, 124, 0.08); }
.luxe .btn-ghost-light { border: 1px solid rgba(20, 38, 45, 0.3) !important; color: var(--ink-2); }
.luxe .btn-ghost-light:hover { border-color: var(--gold-3) !important; color: var(--gold-ink); }
.luxe .btn, .luxe header a[class*="bg-lyd-yellow"] { letter-spacing: 0.01em; font-weight: 600; }

/* ---------- header: transparent over dark heroes, solid after scroll ---------- */
.luxe header { transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.luxe body.hero-dark header:not(.pm-scrolled) { background: linear-gradient(180deg, rgba(6, 22, 28, 0.65), rgba(6, 22, 28, 0)) !important; border-bottom-color: transparent !important; backdrop-filter: none !important; box-shadow: none; }
.luxe body.hero-dark header:not(.pm-scrolled) .nav-link { color: rgba(255, 255, 255, 0.78); }
.luxe body.hero-dark header:not(.pm-scrolled) .nav-link:hover, .luxe body.hero-dark header:not(.pm-scrolled) .nav-link[aria-current="page"] { color: #fff; }
.luxe body.hero-dark header:not(.pm-scrolled) #lang-current-label, .luxe body.hero-dark header:not(.pm-scrolled) #lang-toggle, .luxe body.hero-dark header:not(.pm-scrolled) button { color: rgba(255, 255, 255, 0.85); }
.luxe header .nav-link::after { background: var(--gold) !important; }
.luxe header.pm-scrolled { background: rgba(250, 248, 244, 0.92) !important; }

/* ---------- hero: cinematic ---------- */
.luxe main > section:first-of-type .hero-scrim {
  background: linear-gradient(100deg, rgba(6, 22, 28, 0.95) 0%, rgba(6, 22, 28, 0.82) 45%, rgba(15, 46, 56, 0.45) 75%, rgba(15, 46, 56, 0.35) 100%) !important;
}
.luxe main > section:first-of-type video { filter: saturate(0.82) contrast(1.1) brightness(0.88); }
.luxe main > section:first-of-type h1.font-display, .luxe main section[class] > div > div > div > h1.font-display { font-size: clamp(3.25rem, 6.9vw, 5.5rem) !important; letter-spacing: -0.038em !important; line-height: 0.98 !important; }
.luxe main > section:first-of-type:not(.hero-interior) h1 .marker, .luxe main > section:first-of-type:not(.hero-interior) h1 .marker-blue, .luxe main > section.hero-interior[data-band="deep"] h1 .marker {
  background: none !important; color: var(--gold-2) !important; -webkit-text-fill-color: var(--gold-2); padding: 0; text-shadow: none;
}
/* headings on deep stay white even though luxe deepens heading ink on light */
.luxe main section[data-band="deep"] :is(h1, h2, h3, h4).font-display, .luxe main section[data-band="deep"] :is(h1, h2, h3, h4), .luxe main section.closing-band h2, .luxe main .card-elevate :is(h2, h3, span.text-xl), .luxe main .card-anchor :is(h2, h3) { color: #fff !important; }
.luxe main section[data-band="deep"] .pm-split .pm-w > * { color: #fff; }
.luxe main > section:first-of-type:not(.hero-interior) p.text-xl, .luxe main > section:first-of-type p[class*="text-white/8"], .luxe main > section.hero-interior[data-band="deep"] p.text-xl { color: rgba(213, 221, 225, 0.92) !important; font-size: 1.2rem; max-width: 34rem; }
.luxe main > section:first-of-type p[class*="text-white/5"] { color: rgba(213, 221, 225, 0.78) !important; }

.luxe main > section:first-of-type { position: relative; }
/* frosted-glass stat card */
html.luxe body main > section:first-of-type [data-elevate="hero"], html.luxe main [data-elevate="hero"][data-slot="card"].bg-lyd-blue, html.luxe main [class*="bg-lyd-blue"][data-elevate="hero"] {
  background: rgba(6, 22, 28, 0.72) !important; background-image: none !important; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 34px 90px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; border-radius: 1.5rem; overflow: hidden;
}
.luxe main [data-elevate="hero"] * { color: #fff; }
.luxe main [data-elevate="hero"] :is([class*="bg-card"], [data-slot="card-content"], .bg-lyd-surface, .bg-white, .bg-lyd-cream) { background: transparent !important; }
.luxe main [data-elevate="hero"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep) { background: rgba(212, 167, 44, 0.12) !important; }
.luxe main [data-elevate="hero"] [class*="bg-lyd-yellow"]:first-child { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.luxe main [data-elevate="hero"] [data-count-to], .luxe main [data-elevate="hero"] .text-2xl { color: var(--gold-2); font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.luxe main [data-elevate="hero"] .text-2xl { font-size: 1.9rem; }
.luxe main [data-elevate="hero"] :is(.text-sm, .text-base, [class*="text-lyd-ink/"], [class*="text-lyd-muted"]) { color: rgba(213, 221, 225, 0.8); }
.luxe main [data-elevate="hero"] [class*="bg-lyd-line"], .luxe main [data-elevate="hero"] [data-slot="separator"] { background: rgba(255, 255, 255, 0.12) !important; }
.luxe main > section:first-of-type img[src*="we-love-ndis"] { background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6); }

/* ---------- cards on light: warm paper, gold on hover ---------- */
.luxe main [data-slot="card"]:not(section[data-band="deep"] *):not([data-elevate="hero"]):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *), .luxe main .card-lyd:not(section[data-band="deep"] *):not([data-elevate="hero"]):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *), .luxe main .carousel-card, .luxe main [data-lift]:not([data-slot="card"]):not(.card-elevate):not(.card-anchor):not(section[data-band="deep"] *):not(.race-win):not(section[data-section="race"] *) {
  background: #ffffff !important; border: 1px solid rgba(20, 38, 45, 0.1) !important;
  box-shadow: 0 1px 2px rgba(20, 38, 45, 0.04), 0 28px 56px -32px rgba(20, 38, 45, 0.28) !important; border-radius: 1.5rem;
}
.luxe main [data-slot="card"]:hover, .luxe main .card-lyd:hover, .luxe main .carousel-card:hover { border-color: rgba(212, 167, 44, 0.5) !important; box-shadow: 0 2px 4px rgba(20, 38, 45, 0.05), 0 40px 70px -30px rgba(20, 38, 45, 0.35) !important; }
.luxe main [data-slot="card"].bg-lyd-blue:not(section[data-band="deep"] *):not([data-elevate="hero"]):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *), .luxe main [class*="bg-lyd-blue"][class*="p-"]:not(.contact-card):not(.demo-frame):not(section[data-band="deep"] *):not([data-elevate="hero"]):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *) { background: #e6ecf5 !important; border: 1px solid rgba(20, 38, 45, 0.06); }
.luxe main [data-slot="card"][class*="bg-lyd-yellow"]:not(section[data-band="deep"] *):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *):not([data-elevate="hero"]), .luxe main [class*="bg-lyd-yellow"][class*="p-"]:not(.race-win):not(.btn):not(.demo-frame):not(section[data-band="deep"] *):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(section[data-section="connector"] *):not(section[data-section="race"] *) { background: #f8efd6 !important; border: 1px solid rgba(212, 167, 44, 0.25); }
.luxe main .leaks-grid, .luxe main .leaks-grid .leaks__slide { border-color: rgba(20, 38, 45, 0.1); }
.luxe main .leaks-grid .leaks__title { font-size: 1.45rem !important; }

/* ---------- deep bands: gradient, glass cards, gold glow ---------- */
.luxe main section[data-band="deep"], .luxe main section.hscroll[data-band="deep"], .luxe main section.hscroll[data-band="deep"] .hscroll__stage, .luxe main section.hscroll[data-band="deep"] .hscroll__runway { background: var(--deep-b) !important; }
.luxe main section[data-band="deep"]::after { opacity: 0.035; }
.luxe main section[data-band="deep"]::before {
  background: radial-gradient(45% 40% at 88% 0%, rgba(212, 167, 44, 0.09), transparent 70%); animation: none !important; filter: none;
}
.luxe main section[data-band="deep"] [data-slot="card"], .luxe main section[data-band="deep"] .card-lyd, .luxe .card-deep, .luxe main section.hscroll[data-band="deep"] .hscroll__panel,
.luxe main section[data-band="deep"] :is(.bg-white, .bg-lyd-surface, .bg-lyd-blue, .bg-lyd-yellow, .proof-card, .carousel-card):not(.btn):not(.chip):not([class*="rounded-full"]):not(.pipe__frame):not(.pipe__frame *):not(.badge-tier):not(.inline-flex), .luxe main section.closing-band .contact-card {
  background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -28px rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.luxe main section[data-band="deep"] [data-slot="card"]:hover, .luxe main section.hscroll[data-band="deep"] .hscroll__panel:hover, .luxe main section[data-band="deep"] .proof-card:hover { border-color: rgba(241, 210, 124, 0.4) !important; }
.luxe main section.hscroll[data-band="deep"] .hscroll__panel [class*="text-5xl"] { color: var(--gold-2) !important; }
.luxe main section[data-band="deep"] .proof-card :is(.bg-white, .bg-lyd-blue, .bg-lyd-yellow, .bg-lyd-yellow-deep)[class*="h-1"] { background: rgba(241, 210, 124, 0.14) !important; color: var(--gold-2) !important; }
.luxe main section[data-band="deep"] .band-inner > .mx-auto.text-center p, .luxe main section[data-band="deep"] p:not(.pipe__frame *), .luxe main section[data-band="deep"] li:not(.pipe__frame *) { color: #dfe7ea; }

/* ---------- pipeline frame ---------- */
.luxe main .pipe__frame { border: 1px solid rgba(241, 210, 124, 0.25) !important; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7) !important; }
.luxe main .pipe__chrome { background: linear-gradient(90deg, var(--deep-c), #17495a) !important; }
.luxe main .pipe__chrome .pipe__sample { border-color: rgba(241, 210, 124, 0.5); color: var(--gold-2); }

/* ---------- pricing: on deep with glass tiers ---------- */
.luxe main .card-elevate, .luxe main .card-elevate[data-slot="card"] {
  background: rgba(212, 167, 44, 0.12) !important; border: 1px solid rgba(241, 210, 124, 0.55) !important;
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.6) !important;
}
.luxe main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(241, 210, 124, 1) 76%, transparent 92%); }
.luxe main section[data-band="deep"] [data-slot="card"] :is(.text-4xl, .text-xl, strong, .font-semibold) { color: #fff; }
.luxe main section[data-band="deep"] [data-slot="card"] .text-4xl { color: var(--gold-2); }
.luxe main section[data-band="deep"] [data-slot="card"] :is(p, li, span, div) { color: #dfe7ea; }
.luxe main section[data-band="deep"] [data-slot="card"] :is(span.text-xl, h3) { color: #fff; }
.luxe main section[data-band="deep"] [data-slot="card"] svg { color: var(--gold-2) !important; }
.luxe main section[data-band="deep"] [data-slot="card"] [data-slot="separator"], .luxe main section[data-band="deep"] [data-slot="card"] .bg-lyd-line { background: rgba(255, 255, 255, 0.12) !important; }
.luxe main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(241, 210, 124, 0.4) !important; color: #fff; }

/* tinted tier cards (bg-lyd-yellow/25 etc.), outline CTAs and toggles inside dark bands */
.luxe main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"], .luxe main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"], .luxe main section[data-band="deep"] [class*="bg-lyd-blue/"][class*="p-"] {
  background: rgba(212, 167, 44, 0.12) !important; border: 1px solid rgba(241, 210, 124, 0.5) !important; color: #fff;
}
.luxe main section[data-band="deep"] [data-slot="card"] :is(p, li, span, div, small, dt, dd):not(.pipe__frame *) { color: #dfe7ea; }
.luxe main section[data-band="deep"] [data-slot="card"] :is(h2, h3, h4, strong, .font-semibold, .text-xl, .text-4xl, .text-3xl, .text-2xl) { color: #fff; }
.luxe main section[data-band="deep"] [data-slot="card"] :is(.text-4xl, .text-3xl) { color: var(--gold-2); }
.luxe main section[data-band="deep"] a[class*="border-lyd-ink"], .luxe main section[data-band="deep"] a[class*="border-lyd-line"], .luxe main section[data-band="deep"] button[class*="border-lyd-line"], .luxe main section[data-band="deep"] button[class*="border"] {
  border-color: rgba(241, 210, 124, 0.45) !important; color: #fff !important; background: rgba(255, 255, 255, 0.04) !important; border-radius: 999px;
}
.luxe main section[data-band="deep"] [data-slot="card"] [class*="bg-lyd-blue"]:not([class*="rounded-full"]), .luxe main section[data-band="deep"] [data-slot="card"] .bg-white:not([class*="rounded-full"]) { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; }
.luxe main section[data-band="deep"] [data-slot="card"] [class*="bg-lyd-yellow-deep"][class*="h-1"] { background: var(--gold-grad) !important; }
.luxe main section[data-band="deep"] .card-elevate .card-topbar, .luxe main section[data-band="deep"] [data-slot="card"] > div[class*="h-1.5"] { display: none; }

/* ---------- footer ---------- */
.luxe footer.footer-deep, .luxe footer.footer-full.footer-deep { background: var(--deep-c) !important; border-top: 1px solid rgba(241, 210, 124, 0.22) !important; }
.luxe footer.footer-deep::before { background: none; }
.luxe footer.footer-deep .footer-legal { background: #05141a; }
.luxe footer.footer-deep :is(h2, h3, h4) { color: var(--gold-2); }
.luxe footer.footer-deep [class*="rounded-full"][class*="border"] { border-color: rgba(241, 210, 124, 0.35) !important; }
.luxe footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--gold-2) !important; background: rgba(241, 210, 124, 0.1) !important; }

/* ---------- closing band ---------- */
.luxe main section.closing-band .contact-card .text-2xl, .luxe main section.closing-band .contact-card a.text-white, .luxe main section.closing-band .contact-card a[href^="tel:"] { color: var(--gold-2); }
.luxe main section.closing-band .contact-card a[href^="mailto:"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 210, 124, 0.55); }
.luxe main section.closing-band .contact-card a[href^="mailto:"]:hover { color: var(--gold-2); }
.luxe main :is(section.closing-band, section[data-section="proof"], section[data-section="whynow"]) .watermark { opacity: 0.1; filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.2); }

/* ---------- photos ---------- */
.luxe main img.photo, .luxe main img.pm-photo, .luxe main img[src$=".jpg"]:not([src*="poster"]) { filter: saturate(0.9) contrast(1.06) brightness(0.98); }
.luxe main .grid.bg-lyd-yellow img, .luxe main [class*="bg-lyd-yellow"] + div img { border-radius: 0 1.5rem 1.5rem 0; }

/* ---------- demo frames ---------- */
.luxe main .demo-frame::before { background: linear-gradient(90deg, var(--deep-c), #17495a); }
.luxe main .demo-frame::after { background: var(--gold-2); box-shadow: 0.95rem 0 0 rgba(241, 210, 124, 0.6), 1.9rem 0 0 rgba(241, 210, 124, 0.35); }

/* ---------- interior heroes on ivory: gold rule under kicker, deeper ink ---------- */
.luxe main > section.hero-interior .td-kicker { color: var(--gold-ink); }
.luxe main > section.hero-interior .td-kicker::before { background: linear-gradient(90deg, var(--gold), var(--gold-2)) !important; }
.luxe main > section.hero-interior[data-band="deep"] .td-kicker { color: var(--gold-2); }

/* ---------- misc ---------- */
.luxe ::selection { background: var(--gold-2); color: var(--ink-2); }
.luxe main .leaks__slide:hover .leaks__title { color: var(--gold-ink); }
.luxe main table thead th { color: var(--gold-ink); }
.luxe main .est-plan[aria-pressed="true"], .luxe main .bg-lyd-yellow.border-lyd-yellow-deep, .luxe main [aria-checked="true"].bg-lyd-yellow { background: linear-gradient(135deg, #fbf3dc, #f1dc9c) !important; border-color: var(--gold) !important; }

/* toggles/buttons inside dark tier cards */
.luxe main section[data-band="deep"] [data-slot="card"] button:not(.btn), .luxe main section[data-band="deep"] [data-slot="card"] [role="button"]:not(.btn) { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 999px; }
.luxe main [data-elevate="hero"] [data-count-to], .luxe main [data-elevate="hero"] .text-2xl { color: var(--gold-2) !important; }

/* demo thumbnails stay white (their hover:bg-lyd-yellow class matched the tint rule) */
html.luxe body main a.demo-frame.demo-frame.demo-frame[href], .luxe main .demo-frame[data-slot="card"] { background: #ffffff !important; background-image: none !important; border: 1px solid rgba(20, 38, 45, 0.1) !important; }
.luxe main a.demo-frame:hover { border-color: rgba(212, 167, 44, 0.5) !important; }

/* ---------- finishing: balanced headings, visible focus, measured prose ---------- */
main h1.font-display, main h2.font-display, main h3.font-display, .hero-photo figcaption strong { text-wrap: balance; }
main p, main li { text-wrap: pretty; }
header a:focus-visible, footer a:focus-visible, main a:focus-visible:not(.btn), main button:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 4px; }
.luxe body.hero-dark header:not(.pm-scrolled) a:focus-visible { outline-color: #f1d27c; }
main .band-inner > p, main .band-inner > .mx-auto > p, main section p.text-lede { max-width: 48rem; }
.luxe .td-kicker { font-size: 0.6875rem; }

/* ===== premium polish pass ===== */
/* one champagne gold: the Most-popular badge joins the metal ramp */
.luxe main .card-elevate .inline-flex[class*="bg-lyd-yellow"] { background: var(--gold-grad) !important; color: var(--ink-2) !important; }
/* pricing: Elevate keeps the filled-gold CTA; Launch/Dominate step back to gold-ghost so the hierarchy reads */
.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light,
.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark {
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(241, 210, 124, 0.45) !important; color: #fff !important; box-shadow: none !important;
}
.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light:hover,
.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark:hover { background: rgba(241, 210, 124, 0.12) !important; border-color: var(--gold-2) !important; }
/* race ledger: rows sit like a table, the winner carries real weight */
main section[data-section="race"] .space-y-3 > div { border-radius: 0.875rem !important; }
main section[data-section="race"] .race-win { border: 1px solid rgba(125, 95, 20, 0.35) !important; box-shadow: 0 14px 30px -18px rgba(125, 95, 20, 0.5) !important; }

/* eco pill carries the kicker rule mark */
main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow::before { content: ""; width: 2rem; height: 2px; border-radius: 1px; margin-right: 0.75rem; background: linear-gradient(90deg, var(--gold-2, #f1d27c), #fff3c4); }
/* pricing PAGE (no data-section): same one-gold-bar discipline */
.luxe main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light,
.luxe main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(241, 210, 124, 0.45) !important; color: #fff !important; box-shadow: none !important; }
.luxe main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark):hover { background: rgba(241, 210, 124, 0.12) !important; border-color: #f1d27c !important; }
/* Most-popular chip joins the champagne metal (home tier cards carry bg-lyd-yellow/25, not .card-elevate) */
.luxe main [data-section="pricing"] [data-slot="card"] .inline-flex[class*="bg-lyd-yellow"],
.luxe main section[data-band="deep"]:has(.card-elevate) [data-slot="card"] .inline-flex[class*="bg-lyd-yellow"] { background: var(--gold-grad) !important; color: var(--ink-2) !important; }
/* homepage now runs whynow(photo) -> eco -> pricing as three dark bands; step the tone down
   into the price so they read as a sequence rather than one long dark stretch */
.luxe main section[data-section="pricing"][data-band="deep"] { background: var(--deep-c) !important; }
.luxe main section[data-section="eco"] + section[data-section="pricing"] { border-top: 0 !important; }

/* ===== premium-photo.css ===== */
/* =====================================================================
   LYD AssistOS — imagery + "catchy" layer. Uses the site's own photographs at
   editorial scale with one petrol/gold tone so they read as a single brand.
   ===================================================================== */

/* ---------- fact ticker under the hero (existing site copy only) ---------- */
main section.ticker { padding: 0 !important; background: #081c23 !important; border-top: 1px solid rgba(241, 210, 124, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; }
main section.ticker { position: relative; }
main section.ticker::before, main section.ticker::after { content: ""; display: block !important; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none; }
main section.ticker::before { left: 0; background: linear-gradient(90deg, #081c23, rgba(8, 28, 35, 0)); }
main section.ticker::after { right: 0; background: linear-gradient(270deg, #081c23, rgba(8, 28, 35, 0)); }
.ticker__track { display: flex; width: max-content; gap: 0; animation: ticker 48s linear infinite; will-change: transform; }
.ticker__group { display: flex; align-items: center; }
.ticker__item { display: inline-flex; align-items: center; gap: 0.9rem; padding: 1.05rem 2.25rem; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: #dfe7ea; white-space: nowrap; }
.ticker__item strong { font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; text-transform: none; color: #f1d27c; font-variant-numeric: tabular-nums; }
.ticker__item::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #dcb13a; flex: none; }
main section.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .ticker__group:last-child { display: none; } }

/* ---------- editorial photo treatment (one tone for every photograph) ---------- */
.editorial-photo, .hero-photo { position: relative; overflow: hidden; border-radius: 1.5rem; margin: 0; isolation: isolate; box-shadow: 0 40px 90px -40px rgba(6, 22, 28, 0.7); }
.editorial-photo img, .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.06) brightness(0.96); }
.editorial-photo::after, .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 22, 28, 0) 38%, rgba(6, 22, 28, 0.82) 100%); }
.editorial-photo::before, .hero-photo::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.35); }
.editorial-photo figcaption, .hero-photo figcaption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 3; color: #fff; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.5; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.editorial-photo figcaption strong, .hero-photo figcaption strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 0.2rem; }
.hero-photo figcaption .kicker-mini { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f1d27c; }
.hero-photo figcaption .kicker-mini::before { content: ""; width: 1.5rem; height: 2px; background: #dcb13a; }

/* ---------- "Six things": tall photo + two-column ledger ---------- */
.leaks-layout { display: grid; gap: 3rem; margin-top: 2.5rem; align-items: stretch; }
@media (min-width: 1024px) { .leaks-layout { grid-template-columns: 0.82fr 1.18fr; } .leaks-layout .editorial-photo { min-height: 100%; } }
.leaks-layout .editorial-photo { aspect-ratio: 4 / 5; }
.leaks-layout .editorial-photo img { object-position: 30% 35%; }
@media (min-width: 1024px) { .leaks-layout .editorial-photo { aspect-ratio: auto; } }
.leaks-layout .leaks__stage.leaks-grid { margin-top: 0 !important; grid-template-columns: repeat(2, 1fr) !important; column-gap: 2.5rem; align-content: start; }
@media (max-width: 639px) { .leaks-layout .leaks__stage.leaks-grid { grid-template-columns: 1fr !important; } }

/* ---------- full-bleed photo bands (dark overlay keeps text AAA) ---------- */
main section.band-photo, .luxe main section[data-band="deep"].band-photo, .luxe main section.closing-band.band-photo {
  background-color: #0a2129 !important;
  background-image: linear-gradient(100deg, rgba(6, 22, 28, 0.94) 0%, rgba(6, 22, 28, 0.86) 45%, rgba(8, 28, 35, 0.72) 100%), var(--photo) !important;
  background-size: cover !important; background-position: center !important; background-attachment: scroll;
}
main section.band-photo::before { display: none !important; }
main section.band-photo::after { opacity: 0.05; }
main section.band-photo [data-slot="card"], main section.band-photo .card-lyd, .luxe main section.band-photo [data-slot="card"] {
  background: rgba(6, 22, 28, 0.55) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
main section.band-photo .contact-card, .luxe main section.band-photo .contact-card { background: rgba(6, 22, 28, 0.6) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
main section.band-photo .band-inner { position: relative; z-index: 2; }
main section.band-photo :is(h2, h3) { color: #fff !important; }
main section.band-photo :is(p, li):not(.pipe__frame *) { color: #e4ebee !important; }
main section.band-photo .td-kicker { color: #f1d27c !important; }
main section.band-photo .td-kicker::before { background: linear-gradient(90deg, #f1d27c, #fff3c4) !important; }
main section.band-photo [class*="bg-lyd-yellow"][class*="p-"], main section.band-photo [class*="bg-lyd-blue"][class*="p-"], main section.band-photo .bg-white[class*="p-"] { background: rgba(6, 22, 28, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff; }
main section.band-photo [class*="bg-lyd-yellow"][class*="p-"] :is(p, span, div, h3), main section.band-photo .bg-white[class*="p-"] :is(p, span, div) { color: #e4ebee; }
main section.band-photo [class*="bg-lyd-yellow"][class*="p-"] :is(h2, h3, strong), main section.band-photo .bg-white[class*="p-"] strong { color: #fff; }
main section.band-photo .watermark { opacity: 0.1; }

/* ---------- interior heroes: text left, editorial photo right ---------- */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.hero-grid > div:first-child { max-width: 56rem; }
.hero-photo { aspect-ratio: 5 / 4; max-height: 32rem; }
@media (min-width: 1024px) { .hero-photo { aspect-ratio: 4 / 5; max-height: 36rem; justify-self: end; width: 100%; } }
main > section.hero-interior .hero-grid > div > .max-w-\[56rem\] { max-width: none; }
main > section.hero-interior[data-band="deep"] .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.45); }

/* ---------- ecosystem: photos visible on desktop too (was a scroll wipe) ---------- */
main .hscroll__panel img { clip-path: none !important; }
main .hscroll__panel > .hidden.lg\:block { position: relative; }
main .hscroll__panel > .hidden.lg\:block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 46, 56, 0.35), rgba(15, 46, 56, 0)); pointer-events: none; }
main .hscroll__panel > .hidden.lg\:block img { filter: saturate(0.85) contrast(1.05); }

/* ---------- second engine: bigger photo, tone-matched ---------- */
main .grid.bg-lyd-yellow img, main [class*="bg-lyd-yellow"] + div img { filter: saturate(0.85) contrast(1.06); }

/* ---------- mobile ---------- */
@media (max-width: 1023px) { .leaks-layout .editorial-photo { max-height: 22rem; } .hero-photo { max-height: 22rem; } .ticker__item { padding: 0.9rem 1.5rem; font-size: 0.75rem; } .ticker__item strong { font-size: 1.15rem; } }

/* closing band on photo: content column sits clean on the photograph */
.luxe main section.closing-band.band-photo > .band-inner [class*="bg-lyd-yellow"][class*="p-"]:not(.contact-card):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g) { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ===== premium-color.css ===== */
/* =====================================================================
   LYD AssistOS — colour variation layer. Petrol stays the anchor and gold the
   only CTA colour; every section gets its own hue so the page scans as a
   sequence of distinct moments. All pairings ≥ AA.
   ===================================================================== */
:root {
  --plum: #2b1a4e;  --plum-2: #4a2d7a;  --plum-tint: #ece6f5;
  --navy: #14213d;  --navy-2: #223a66;  --sky-tint: #e3ecf7;
  --teal: #0b3f47;  --teal-2: #0f5c63;  --mint-tint: #e2f2ea;
  --peach-tint: #fbe8d6; --rose: #b8422e;
}

/* ---------- section grounds: a hue per moment ---------- */
.luxe main section[data-section="aeo"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum) !important; }
.luxe main section[data-band="deep"][data-section="aeo"] [data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main section[data-band="deep"][data-section="aeo"] .card-lyd:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] [data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] [class*="bg-lyd-blue"][class*="p-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
main section[data-section="aeo"] .phone-mock:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] [class*="bg-lyd-ink"][class*="rounded"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #1c0f36 !important; }
main section[data-section="aeo"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #d9c6ff !important; }
main section[data-section="aeo"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::before { background: linear-gradient(90deg, #c9b2ff, #f1d27c) !important; }
main section[data-section="aeo"] .bg-lyd-yellow.rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] [class*="bg-lyd-yellow"].rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] svg[class*="text-lyd-yellow"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="aeo"] .text-lyd-yellow-deep:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #f1d27c !important; }
main section[data-section="aeo"] .bg-lyd-yellow:not(.btn):not(.rounded-full):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(241, 210, 124, 0.18) !important; color: #fff !important; }

.luxe main section[data-section="proof"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="proof"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--navy) !important; }
.luxe main section[data-band="deep"][data-section="proof"] [data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main section[data-band="deep"][data-section="proof"] .proof-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="proof"] .proof-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
main section[data-section="proof"] .proof-card:nth-of-type(1):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #7fb3ff !important; }
main section[data-section="proof"] .proof-card:nth-of-type(2):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #c9b2ff !important; }
main section[data-section="proof"] .proof-card:nth-of-type(3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #6fd3c0 !important; }
main section[data-section="proof"] .pipe__chrome:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(90deg, #0c1630, #223a66) !important; }

.luxe main section[data-section="race"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="race"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; border-color: rgba(20, 38, 45, 0.08) !important; }
main section[data-section="race"] [data-slot="card"]:not(.race-win):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="race"] .card-lyd:not(.race-win):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; }

.luxe main section[data-section="engine"] [class*="bg-lyd-yellow"][class*="p-"].grid:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="engine"] [class*="bg-lyd-yellow"][class*="p-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--peach-tint) !important; border: 1px solid rgba(184, 66, 46, 0.14) !important; }
main section[data-section="engine"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--rose) !important; }
main section[data-section="engine"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::before { background: var(--rose) !important; }

main section[data-section="connector"] [data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="connector"] .card-lyd:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-section="connector"] .bg-white[class*="p-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(180deg, #ffffff, var(--mint-tint) 85%) !important; border-color: rgba(15, 92, 99, 0.22) !important; box-shadow: var(--lift-1) !important; }
main section[data-section="connector"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--teal-2) !important; }
main section[data-section="connector"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::before { background: var(--teal-2) !important; }

/* ---------- ecosystem: four stages, four hues ---------- */
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(1):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--teal-2) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(2):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum-2) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--navy-2) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(150deg, #8a6a1a, #5f4a10) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4) [class*="text-5xl"] { color: #f1d27c !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4) [class*="uppercase"] { color: #fff !important; }
main section.hscroll[data-band="deep"] .hscroll__panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-color: rgba(255, 255, 255, 0.18) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel [class*="text-5xl"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: rgba(255, 255, 255, 0.92) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel :is(p:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), span:not(.font-display)):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: rgba(255, 255, 255, 0.88) !important; }
main section.hscroll[data-band="deep"] .hscroll__panel > .hidden.lg\:block:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); }

/* ---------- "One connected system" tiles: rotating icon hues ---------- */
main .replaces-grid .carousel-card:nth-child(6n+1) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; color: var(--navy-2) !important; }
main .replaces-grid .carousel-card:nth-child(6n+2) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum-tint) !important; color: var(--plum-2) !important; }
main .replaces-grid .carousel-card:nth-child(6n+3) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--mint-tint) !important; color: var(--teal-2) !important; }
main .replaces-grid .carousel-card:nth-child(6n+4) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--peach-tint) !important; color: var(--rose) !important; }
main .replaces-grid .carousel-card:nth-child(6n+5) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fbf0c8 !important; color: #7d5f14 !important; }
main .replaces-grid .carousel-card:nth-child(6n+6) [class*="bg-lyd-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; color: var(--navy-2) !important; }

/* ---------- tinted card sets (features stages, pricing scenarios, four pieces) ---------- */
main .tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .tint-sky[data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; border-color: rgba(34, 58, 102, 0.14) !important; }
main .tint-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .tint-lilac[data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum-tint) !important; border-color: rgba(74, 45, 122, 0.16) !important; }
main .tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .tint-mint[data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--mint-tint) !important; border-color: rgba(15, 92, 99, 0.16) !important; }
main .tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .tint-peach[data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--peach-tint) !important; border-color: rgba(184, 66, 46, 0.14) !important; }
main .tint-sky .rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-sky .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--navy-2) !important; color: #fff !important; }
main .tint-lilac .rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-lilac .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum-2) !important; color: #fff !important; }
main .tint-mint .rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-mint .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--teal-2) !important; color: #fff !important; }
main .tint-peach .rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-peach .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--rose) !important; color: #fff !important; }
main .tint-sky .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-sky [class*="uppercase"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--navy-2) !important; }
main .tint-lilac .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-lilac [class*="uppercase"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--plum-2) !important; }
main .tint-mint .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-mint [class*="uppercase"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--teal-2) !important; }
main .tint-peach .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main .tint-peach [class*="uppercase"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--rose) !important; }
main section[data-band="deep"] .tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-band="deep"] .tint-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-band="deep"] .tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section[data-band="deep"] .tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.07) !important; }
main section[data-band="deep"] .tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #7fb3ff !important; } main section[data-band="deep"] .tint-lilac { border-top: 3px solid #c9b2ff !important; }
main section[data-band="deep"] .tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #6fd3c0 !important; } main section[data-band="deep"] .tint-peach { border-top: 3px solid #f0a07f !important; }

/* ---------- demo thumbnails: chrome colour per card ---------- */
main .demo-frame:nth-child(4n+1):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::before { background: var(--teal-2) !important; } main .demo-frame:nth-child(4n+2)::before { background: var(--plum-2) !important; }
main .demo-frame:nth-child(4n+3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j)::before { background: var(--navy-2) !important; } main .demo-frame:nth-child(4n+4)::before { background: #7d5f14 !important; }

/* ---------- pipeline chips + hero stat cells ---------- */
main .pipe__status.is-assigned:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum-tint) !important; color: var(--plum-2) !important; }
main .pipe__status.is-new:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; border-color: transparent !important; color: var(--navy-2) !important; }
main .pipe__avatar:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; color: var(--navy-2) !important; }
.luxe main [data-elevate="hero"] [class*="bg-lyd-yellow"]:first-child:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.08) !important; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.luxe main [data-elevate="hero"] [class*="bg-lyd-yellow"]:last-child:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.08) !important; }

/* ---------- ticker dots rotate ---------- */

/* ---------- ledger numerals rotate hue (six gaps, six colours) ---------- */
.leaks-grid .leaks__slide:nth-child(6n+1) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--navy-2) !important; } .leaks-grid .leaks__slide:nth-child(6n+2) .leaks__numeral { color: var(--plum-2) !important; }
.leaks-grid .leaks__slide:nth-child(6n+3) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--teal-2) !important; } .leaks-grid .leaks__slide:nth-child(6n+4) .leaks__numeral { color: var(--rose) !important; }
.leaks-grid .leaks__slide:nth-child(6n+5) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #7d5f14 !important; } .leaks-grid .leaks__slide:nth-child(6n+6) .leaks__numeral { color: var(--navy-2) !important; }

/* ---------- footer column heads: one hue each ---------- */

/* tinted labels inside dark bands must go light */
main section[data-band="deep"] .tint-sky :is(.td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), [class*="uppercase"]):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #9fc3ff !important; }
main section[data-band="deep"] .tint-lilac :is(.td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), [class*="uppercase"]):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #d9c6ff !important; }
main section[data-band="deep"] .tint-mint :is(.td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), [class*="uppercase"]):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #8fe3d1 !important; }
main section[data-band="deep"] .tint-peach :is(.td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), [class*="uppercase"]):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #f6b79b !important; }
main section[data-band="deep"] :is(.tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .tint-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .tint-peach) .rounded-full:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #fff !important; }

/* labels on the coloured ecosystem cards stay white */
main section.hscroll[data-band="deep"] .hscroll__panel [class*="uppercase"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.hscroll[data-band="deep"] .hscroll__panel [class*="tracking-"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: rgba(255, 255, 255, 0.92) !important; }

/* second engine: warm peach panel */
main section[data-section="engine"] .bg-lyd-yellow:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main section[data-section="engine"] [class*="bg-lyd-yellow"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fbe8d6 !important; }
main section[data-section="engine"] .bg-lyd-yellow .bg-white:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; }

/* ecosystem: keep the sticky stage working (overflow:hidden on an ancestor breaks position:sticky) */
main section.hscroll[data-band="deep"], .luxe main section.hscroll[data-band="deep"] { overflow: clip !important; }
@media (min-width: 1024px) { main .hscroll__runway { height: 240vh !important; } }

main .replaces-grid .carousel-card { border-top: 3px solid var(--teal-2) !important; }
/* ===== defect fixes: translucent-white panels on deep bands become glass ===== */
main section[data-band="deep"] [class*="bg-white/"]:not(.pipe__frame):not(.pipe__frame *) { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 1rem; }
main section[data-band="deep"] [class*="bg-white/"]:not(.pipe__frame *) :is(p, span, div, li) { color: #ece6f8 !important; }
main section[data-band="deep"] [class*="bg-white/"]:not(.pipe__frame *) strong { color: #fff !important; }
main section[data-section="proof"] :is(.proof-icon, .proof-typing, .proof-scan) { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.14); }

/* The "one connected system" tiles now sit on a deep band on /features, but the rotating pastel
   icon tints above were designed for an ivory ground - champagne glyphs on them measured ~1.2:1.
   (axe cannot catch this: SVG glyphs are not text.) One champagne-on-petrol identity instead.
   The :not(._a…) chain is the boost idiom this file already uses, needed to beat the nth-child rules. */
main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(241, 210, 124, 0.14) !important; }
main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) svg { color: #f1d27c !important; }

/* ===== premium-pages.css ===== */
/* ==== blogposts.css ==== */
/* ---- blog article pages (recipes/blogposts.cjs) ---- */
main article { display: block; }

/* hero */
main article section.blog-hero-band { padding: clamp(7.5rem, 11vw, 9.5rem) 0 clamp(2rem, 3vw, 2.75rem); }
main article .blog-hero-inner { margin: 0 auto; max-width: 80rem; padding: 0 1rem; }
@media (min-width: 768px) { main article .blog-hero-inner { padding: 0 2rem; } }
main article .blog-hero-inner .blog-crumb { font-size: 0.8125rem; color: var(--color-lyd-secondary); margin-bottom: 1.5rem; }
main article .blog-hero-inner .blog-crumb a { color: var(--color-lyd-secondary); }
main article .blog-hero-inner .td-kicker { color: var(--color-lyd-gold-ink); }
main article .blog-hero-inner h1.blog-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-interior); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; max-width: 22ch; text-align: left; color: var(--color-lyd-ink); }
main article .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin-top: 1.5rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-lyd-gold-ink); }
main article .blog-meta__dot { color: var(--color-lyd-line-strong); font-weight: 400; }

/* posts without a side rail read as one centred 48rem column */
main article.blog-centred .blog-hero-inner, main article.blog-centred section.blog-article { max-width: calc(48rem + 2rem); }
@media (min-width: 768px) { main article.blog-centred .blog-hero-inner, main article.blog-centred section.blog-article { max-width: calc(48rem + 4rem); } }
main article.blog-centred .blog-hero-inner h1.blog-title { max-width: none; }

/* lead photo (site's own article image) */
main article section.blog-lead { margin: 0 auto; max-width: 80rem; padding: 0 1rem 1rem; }
@media (min-width: 768px) { main article section.blog-lead { padding: 0 2rem 1.5rem; } }
main article .blog-lead-photo { margin: 0; position: relative; border-radius: 1.5rem; overflow: hidden; isolation: isolate; box-shadow: 0 40px 90px -40px rgba(6, 22, 28, 0.55); }
main article .blog-lead-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.35); }
main article .blog-lead-photo img.blog-hero { border-radius: 0; aspect-ratio: 4 / 3; filter: saturate(0.88) contrast(1.04); }
@media (min-width: 768px) { main article .blog-lead-photo img.blog-hero { aspect-ratio: 21 / 9; } }

/* article body */
main article section.blog-article { margin: 0 auto; max-width: 80rem; padding: 1rem 1rem clamp(4rem, 6vw, 5.5rem); }
@media (min-width: 768px) { main article section.blog-article { padding-left: 2rem; padding-right: 2rem; } }
main article .blog-prose { max-width: none; min-width: 0; }
main article .blog-prose > p, main article .blog-prose > ul, main article .blog-prose > ol, main article .blog-prose li { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.72; color: rgba(20, 38, 45, 0.86); }
main article .blog-prose p.blog-standfirst { font-size: 1.3125rem; line-height: 1.5; color: var(--color-lyd-ink); font-weight: 500; margin-top: 0; }
main article .blog-prose > ul { padding-left: 1.25rem; }
main article .blog-prose li::marker { color: var(--color-lyd-gold-ink); }
main article .blog-prose strong { color: var(--color-lyd-ink); font-weight: 600; }
main article .blog-prose a:not(.btn) { color: var(--color-lyd-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-lyd-yellow-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main article .blog-prose a:not(.btn):hover { text-decoration-color: var(--color-lyd-ink); }
main article .blog-prose h2.blog-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { position: relative; margin-top: 3.5rem; padding-top: 1.25rem; font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(1.5rem, 2.4vw, 1.9375rem) !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; color: var(--color-lyd-ink) !important; text-wrap: balance; text-align: left; }
main article .blog-prose h2.blog-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); }
main article .blog-prose h3.blog-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-lyd-ink); margin-top: 0; }
main article .blog-prose .faq h2.blog-h2 { margin-top: 4rem; }

/* callouts and in-article CTAs: tinted cards */
main article .blog-callout, main article .blog-cta { margin-top: 2.5rem; padding: 1.75rem 1.75rem 1.875rem; border-radius: 1.5rem; border: 1px solid rgba(20, 38, 45, 0.1); }
@media (min-width: 768px) { main article .blog-callout, main article .blog-cta { padding: 2rem 2.25rem 2.25rem; } }
main article .blog-callout.tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--sky-tint) !important; border-color: rgba(34, 58, 102, 0.14) !important; }
main article .blog-callout.tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--mint-tint) !important; border-color: rgba(15, 92, 99, 0.16) !important; }
main article .blog-cta.tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--peach-tint) !important; border-color: rgba(184, 66, 46, 0.14) !important; }
main article .blog-callout .h { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-2); }
main article .blog-callout.tint-mint .h { color: var(--teal-2); }
main article .blog-callout .h::before { content: ""; width: 1.75rem; height: 2px; border-radius: 1px; background: currentColor; }
main article .blog-callout p, main article .blog-cta p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(20, 38, 45, 0.86); }
main article .blog-cta h3 { margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--color-lyd-ink); }
main article .blog-cta > div > h3 { margin-top: 0; }
main article .blog-cta .btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
main article .blog-cta a.btn-ghost-light { border-color: rgba(20, 38, 45, 0.28); }

/* tables: white frame that scrolls at narrow widths */
main article .blog-table-frame { margin-top: 1.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 2px rgba(20, 38, 45, 0.04), 0 24px 48px -32px rgba(20, 38, 45, 0.25); }
main article .blog-table-frame:focus-visible { outline: 2px solid var(--color-lyd-yellow-deep); outline-offset: 2px; }
main article .blog-table-frame table { width: 100%; min-width: 36rem; margin: 0; border-collapse: collapse; font-size: 1rem; }
main article .blog-table-frame th { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--color-lyd-ink); background: var(--ivory, #f3f1ec); padding: 1rem 1.5rem; border-bottom: 1px solid rgba(20, 38, 45, 0.12); }
main article .blog-table-frame td { padding: 1rem 1.5rem; line-height: 1.55; color: rgba(20, 38, 45, 0.86); border-bottom: 1px solid rgba(20, 38, 45, 0.08); vertical-align: top; }
main article .blog-table-frame tr:last-child td { border-bottom: 0; }
main article .blog-table-frame td:first-child { font-weight: 600; color: var(--color-lyd-ink); }

/* FAQ */
main article .blog-faq-item { margin-top: 0.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.25rem; padding: 0 1.5rem; }
main article .blog-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--color-lyd-ink); }
main article .blog-faq-item summary::-webkit-details-marker { display: none; }
main article .blog-faq-item summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 500; color: var(--color-lyd-ink); background: var(--color-lyd-yellow); }
main article .blog-faq-item[open] summary::after { content: "–"; }
main article .blog-faq-item .a, main article .blog-faq-item .faq-a { padding: 0 0 1.375rem; font-size: 1rem; line-height: 1.7; color: var(--color-lyd-secondary); }

/* author */
main article .blog-author { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.125rem; align-items: start; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
main article .blog-author .av { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.04em; color: #fff; background: var(--color-lyd-deep); }
main article .blog-author .n { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--color-lyd-ink); }
main article .blog-author .r { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-lyd-secondary); }

/* rail (growth guide) */
main article .blog-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
main article .blog-rail-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
@media (min-width: 768px) { main article .blog-rail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } main article .blog-rail-row > .rail-cta { grid-column: 1 / -1; } }
@media (min-width: 1024px) { main article .blog-rail-row { grid-template-columns: 1fr 1fr 1.25fr; } main article .blog-rail-row > .rail-cta { grid-column: auto; } }
main article .blog-rail-row > * { margin: 0; }
main article .rail-card { background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; padding: 1.5rem; }
main article .rail-card--tint { background: var(--sky-tint); border-color: rgba(34, 58, 102, 0.14); }
main article h2.rail-card__h:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main article .rail-cta h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-family: var(--font-display); font-weight: 700 !important; font-size: 1.0625rem !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: var(--color-lyd-ink) !important; }
main article .rail-cta h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #fff !important; font-size: 1.25rem !important; }
main article .rail-cats a { border-radius: 0.875rem; border: 1px solid rgba(34, 58, 102, 0.12); color: var(--color-lyd-ink); }
main article .rail-cats a:hover { border-color: var(--navy-2); }
main article .rail-tags a.chip:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { height: 1.75rem; padding: 0 0.75rem; background: #fff !important; border: 1px solid rgba(20, 38, 45, 0.14) !important; color: var(--color-lyd-secondary) !important; font-size: 0.75rem; font-weight: 600; }
main article .rail-tags a.chip:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):hover { border-color: var(--color-lyd-ink) !important; color: var(--color-lyd-ink) !important; }
main article .rail-cta { background: var(--color-lyd-deep); border-radius: 1.5rem; padding: 1.75rem 1.5rem; color: #fff; }
main article .rail-cta p { color: var(--color-lyd-dark-body, #dfe7ea); }
main article .rail-cta a.rail-cta__btn { margin-top: 1.25rem; width: 100%; }

/* related articles */
main section.blog-related { --band-y: clamp(4rem, 6vw, 5.5rem); }
main section.blog-related > .band-inner { padding-top: var(--band-y); padding-bottom: var(--band-y); }
main section.blog-related h2.blog-related__h:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(1.75rem, 3vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--color-lyd-ink) !important; }
main section.blog-related .blog-rel-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { main section.blog-related .blog-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } main section.blog-related .blog-rel-grid > a:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { main section.blog-related .blog-rel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } main section.blog-related .blog-rel-grid > a { grid-column: span 2; } main section.blog-related .blog-rel-grid > a:last-child:nth-child(odd), main section.blog-related .blog-rel-grid > a:nth-child(3n+1):nth-last-child(2), main section.blog-related .blog-rel-grid > a:nth-child(3n+2):last-child { grid-column: span 3; } }
main section.blog-related a.blog-rel-card { display: flex; flex-direction: column; gap: 0.875rem; min-height: 11rem; padding: 1.5rem; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); color: var(--color-lyd-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(20, 38, 45, 0.04), 0 24px 48px -32px rgba(20, 38, 45, 0.25); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s; }
main section.blog-related a.blog-rel-card:hover { transform: translateY(-4px); border-color: rgba(212, 167, 44, 0.5); box-shadow: 0 2px 4px rgba(20, 38, 45, 0.05), 0 40px 70px -30px rgba(20, 38, 45, 0.35); }
main section.blog-related a.blog-rel-card:focus-visible { outline: 2px solid var(--color-lyd-yellow-deep); outline-offset: 3px; }
main section.blog-related .blog-rel-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
main section.blog-related .blog-rel-card__date { font-size: 0.8125rem; font-weight: 500; color: var(--color-lyd-secondary); }
main section.blog-related .blog-rel-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.015em; text-wrap: balance; }
main section.blog-related .blog-rel-card__more { margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-lyd-gold-ink); }
main section.blog-related .chip.chip-tint { height: 1.625rem; padding: 0 0.75rem; font-weight: 600; }
main section.blog-related .tint-sky .chip-tint { background: var(--sky-tint); color: var(--navy-2); }
main section.blog-related .tint-lilac .chip-tint { background: var(--plum-tint, #ece6f5); color: var(--plum-2); }
main section.blog-related .tint-mint .chip-tint { background: var(--mint-tint); color: var(--teal-2); }
main section.blog-related .tint-peach .chip-tint { background: var(--peach-tint); color: var(--rose, #b8422e); }
main section.blog-related a.blog-rel-card.tint-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main section.blog-related a.blog-rel-card.tint-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border-color: rgba(20, 38, 45, 0.1) !important; }

/* closing band */
main section.blog-closing > .band-inner { padding-top: clamp(4rem, 6vw, 5.5rem); padding-bottom: clamp(4rem, 6vw, 5.5rem); }
main section.blog-closing .blog-closing__inner { max-width: 40rem; margin: 0; padding: 0; background: transparent; }
main section.blog-closing .blog-closing__inner > div:last-child a + a { margin-left: 0; }
main section.blog-closing h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #fff !important; font-family: var(--font-display); font-weight: 700 !important; font-size: clamp(2rem, 3.6vw, 3rem) !important; letter-spacing: -0.03em !important; line-height: 1.04 !important; max-width: 20ch; text-wrap: balance; }
main section.blog-closing .contact-card p, main section.blog-closing .contact-card li { color: var(--color-lyd-dark-body, #dfe7ea); }
main section.blog-closing .contact-card a:not(.text-white) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
main section.blog-closing p { color: var(--color-lyd-dark-body, #dfe7ea); font-size: 1.125rem; line-height: 1.65; max-width: 40rem; }
main article .rail-cta { display: flex; flex-direction: column; }
main article .rail-cta p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; }
main article .rail-cta a.rail-cta__btn { margin-top: auto; padding-top: 0.875rem; padding-bottom: 0.875rem; }
main article .rail-cats { display: grid; gap: 0.5rem; margin-top: 1rem; }
main article .rail-cats a { display: block; padding: 0.625rem 0.875rem; font-size: 0.9375rem; font-weight: 500; text-decoration: none; background: rgba(255, 255, 255, 0.6); }
main article .rail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }


/* ==== company.css ==== */
/* ===== company pages (/about /team /careers /awards /outcomes) ===== */
main[data-page="company"] > section.hero-interior p.text-lede.co-lede { margin-left: 0 !important; margin-right: 0 !important; }
main[data-page="company"] > section.hero-interior { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main[data-page="company"] .hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { main[data-page="company"] .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
main[data-page="company"] .hero-photo { aspect-ratio: 4 / 3; }

main section.co-band > .band-inner > .td-kicker, main .co-split__text > .td-kicker, main .co-ledger > .td-kicker, main .co-founder > .td-kicker, main .co-story__layout .td-kicker, main .co-team__card > .td-kicker { display: inline-flex; align-items: center; margin-bottom: 1.25rem; text-transform: uppercase; }
main .co-founder > .td-kicker + h2 { margin-top: 0 !important; }

/* numbered discs */
main .co-disc { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; background: var(--color-lyd-deep); color: #fff; flex: none; }

/* card set */
main .co-cards { display: grid; gap: 1rem; }
@media (min-width: 768px) { main .co-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main .co-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
main .co-card > p, main .co-card--outcome > p { margin-top: 0 !important; font-size: 1rem !important; line-height: 1.6 !important; color: var(--color-lyd-secondary) !important; }
main .co-card--outcome > h2 { font-size: 1.35rem !important; line-height: 1.2; margin-top: 0.25rem; }
main .co-card--outcome > p { margin-top: -0.25rem !important; }
main .co-note { margin-top: 1.75rem !important; color: var(--color-lyd-secondary) !important; }

/* about: founder + story */
main .co-founder__name { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; font-weight: 700; }
main .co-founder__role { color: var(--color-lyd-secondary) !important; }
main .co-founder__intro { font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink) !important; }
main .co-story__layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main .co-story__layout { grid-template-columns: 0.78fr 1.22fr; gap: 4rem; } main .co-story__layout .co-photo { position: sticky; top: 7rem; } }
main .co-photo { aspect-ratio: 4 / 5; }
main .co-photo img { object-position: 50% 40%; }
@media (max-width: 1023px) { main .co-photo { aspect-ratio: 16 / 10; max-height: 24rem; } }

/* team */
main .co-team { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { main .co-team { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
main .co-team__card { padding: 2.25rem; gap: 0.25rem; }
main .co-team__card .co-founder__name { margin-top: 0.5rem; }
main .co-team__body > p:first-of-type { margin-top: 0 !important; font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink) !important; }
main .co-team__body > p + p { font-size: 1.125rem !important; color: var(--color-lyd-secondary) !important; }

/* careers / awards: text + hairline ledger */
main .co-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main .co-split { grid-template-columns: 1.15fr 0.85fr; gap: 5rem; } }
main .co-split__text > p:first-of-type { margin-top: 0 !important; }
main .co-split__text > p { font-size: 1.15rem !important; line-height: 1.6 !important; color: var(--color-lyd-ink) !important; }
main .co-split__text > p + p { color: var(--color-lyd-secondary) !important; }
main .co-ledger__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-lyd-line-strong); }
main .co-ledger__list > li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-lyd-line-strong); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--color-lyd-ink); }
main .co-ledger__list > li .co-disc { background: transparent; border: 1px solid var(--color-lyd-line-strong); color: var(--color-lyd-gold-ink); }
main .co-aside { display: grid; gap: 2rem; }
main .co-fact { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 0.35rem; }
main .co-fact__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: #8a2f20; }
main .co-fact__label { font-size: 0.875rem; font-weight: 500; color: var(--color-lyd-secondary); }

/* overrides that must beat the luxe layer */
main[data-page="company"] .co-team__card, main[data-page="company"] .co-team__card * { text-align: left !important; }
main[data-page="company"] .co-team__card .co-founder__name { margin-left: 0 !important; margin-right: 0 !important; }
main[data-page="company"] .co-cards .co-card--outcome > h2.font-display:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-size: 1.4rem !important; line-height: 1.2 !important; letter-spacing: -0.015em; margin-top: 0.25rem !important; }

/* ---- fix round ---- */
/* about: keep the highlighted phrase and its comma on one line */
main[data-page="company"] .co-nowrap { white-space: nowrap; }
main[data-page="company"] .co-nowrap .marker { margin-right: 0; }
/* tighter hero (matches the /pricing rhythm) */
main[data-page="company"] > section.hero-interior { padding-top: clamp(5.5rem, 9vw, 7.5rem) !important; }
main[data-page="company"] > section.hero-interior:not(:has(.hero-grid)) { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
/* team: body column carries its own kicker */
main .co-team__body > .td-kicker { display: inline-flex; align-items: center; margin-bottom: 1.25rem; text-transform: uppercase; }
main .co-team__body > .td-kicker + p { margin-top: 0 !important; }
/* careers: inline text link in place of a button the mirror never had */
main[data-page="company"] a.co-text-link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--color-lyd-gold-ink, #7d5f14) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125, 95, 20, 0.35); }
main[data-page="company"] a.co-text-link:hover { border-bottom-color: #7d5f14; }
/* outcomes footnote must read as secondary text, not link navy */
main[data-page="company"] p.co-note:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #4e565b !important; font-size: 0.9375rem !important; }

/* --- polish pass: company --- */
/* the team card was the page's only anchor and it was off-palette pale sky.
   The luxe white-card rule carries 8 classes of specificity, so the boost idiom is needed to beat it. */
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) { background: var(--color-lyd-deep) !important; border: 1px solid rgba(241, 210, 124, 0.28) !important; padding: 2.25rem !important; box-shadow: var(--lift-3) !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) :is(h1, h2, h3, strong, .font-display) { color: #fff !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) :is(p, li, span, div) { color: #dfe7ea !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) .td-kicker { color: #f1d27c !important; }
html.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) .td-kicker::before { background: #dcb13a !important; }
/* the luxe layer re-filled a panel premium.css had deliberately cleared: an empty glass box */
main[data-page="company"] section.closing-band > .band-inner > [class*="bg-lyd-blue"],
main[data-page="company"] section.closing-band > .band-inner > [class*="bg-lyd-yellow"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* hero was 592px tall to hold a 119px text block */
main[data-page="company"] > section.hero-interior { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
@media (min-width: 1024px) { main[data-page="company"] .hero-photo { aspect-ratio: 4 / 3; max-height: 24rem; } }


/* ==== content.css ==== */
/* content group: resources, blog index, blog topics, faq */
:root { --c-line: rgba(20, 38, 45, 0.1); --c-gold: #dcb13a; --c-gold-ink: #7d5f14; --c-sec: #4e565b; }

/* ---- hue chips (shared by the group) ---- */
main .chip.hue-sky:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #e3ecf7 !important; color: #223a66 !important; }
main .chip.hue-lilac:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #ece6f5 !important; color: #4a2d7a !important; }
main .chip.hue-mint:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #e2f2ea !important; color: #0f5c63 !important; }
main .chip.hue-peach:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fbe8d6 !important; color: #b8422e !important; }
main .chip[class*="hue-"] { height: 1.625rem; padding: 0 0.75rem; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; text-decoration: none; }
main .chip[class*="hue-"]::before { display: none !important; }
main .hue-sky .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #223a66 !important; color: #fff !important; }
main .hue-lilac .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #4a2d7a !important; color: #fff !important; }
main .hue-mint .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #0f5c63 !important; color: #fff !important; }
main .hue-peach .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #b8422e !important; color: #fff !important; }
main .disc.res-card__num { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
main a.text-link { color: var(--c-gold-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125, 95, 20, 0.35); }
main a.text-link:hover { border-bottom-color: var(--c-gold-ink); }

/* =============================== /resources =============================== */
main section.res-hub { padding-top: 0.5rem; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main section.res-hub > .grid { gap: 1.25rem; }
@media (min-width: 1024px) { main section.res-hub > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
  background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: 1.5rem !important; padding: 1.75rem !important; position: relative; overflow: hidden;
}
main .res-card--download::before { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 3px; background: var(--c-gold); border-radius: 0 0 2px 2px; }
main .res-card--download .disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--c-gold) !important; color: #20282d !important; }
main .res-card .res-card__num { margin-bottom: 1.25rem; }
main .res-card h2.font-display:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; color: #20282d; text-wrap: balance; }
main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { display: flex !important; flex-direction: column !important; }
main .res-card > div { flex: 1 1 auto; }
main .res-card a.btn.btn-ghost-light { border: 1px solid rgba(20, 38, 45, 0.3) !important; color: #20282d !important; background: transparent !important; }
main .res-card a.btn.btn-ghost-light:hover { border-color: var(--c-gold-ink) !important; color: var(--c-gold-ink) !important; }
main .res-card p { color: var(--c-sec) !important; opacity: 1 !important; font-size: 0.9375rem; line-height: 1.6; }
main .res-card a.btn { margin-top: 1.5rem; align-self: flex-start; }

main section.res-index .band-inner > .mx-auto.text-center { text-align: left; margin-bottom: 2rem; }
main section.res-index .band-inner > .mx-auto.text-center h2 { text-align: left !important; }
main .index-list { display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: 1.5rem; background: #fff; overflow: hidden; }
main .index-list > a.index-row { display: grid !important; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; justify-items: start; text-align: left; align-items: center; border-radius: 0 !important; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 0; border-top: 1px solid var(--c-line); background: #fff; text-decoration: none; transition: background-color 0.18s; }
main .index-list > .index-row:first-child { border-top: 0; }
main .index-list > .index-row:hover { background: #f8f6f1; }
main .index-row__num { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
main .index-row__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
main .index-row__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; color: #20282d; }
main .index-row__desc { font-size: 0.9rem; color: var(--c-sec); line-height: 1.5; }
main .index-row__arrow { color: var(--c-gold-ink); font-size: 1.125rem; transition: transform 0.2s; }
main .index-row:hover .index-row__arrow { transform: translateX(4px); }
@media (min-width: 900px) { main .index-list > .index-row { padding: 1.35rem 1.75rem; } main .index-row__body { flex-direction: row; align-items: baseline; gap: 1rem; } main .index-row__title { flex: 0 0 24rem; } main .index-row__desc { flex: 1 1 auto; } }

/* ============================ /blog + topics ============================== */

main > section.topic-hero .topic-hero__inner { max-width: 56rem; }
main > section.topic-hero .topic-chip { margin: 0 0 1rem; display: inline-flex; }
main > section.topic-hero .td-kicker { display: inline-flex; }
main > section.topic-hero.hero-interior { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; }
main section.post-index--few[data-band="cream"] { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 768px) { main section.post-index--few .grid { grid-template-columns: repeat(auto-fit, minmax(320px, 420px)) !important; justify-content: start; } }
main section.post-index a.post-card[hidden] { display: none !important; }
/* blog + faq heroes now use the reference hero-interior grid */
main > section.blog-hero-band.hero-interior, main > section.faq-hero-band.hero-interior { padding-top: clamp(2rem, 4vw, 3.5rem) !important; padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; }
main > section.faq-hero-band h1.faq-hero { font-size: var(--text-display-interior) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; }
main > section.faq-hero-band h1.faq-hero > span { display: inline; padding: 0 !important; }
main > section.faq-hero-band a.faq-start .faq-hero__arrow { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(125, 95, 20, 0.45); color: var(--c-gold-ink); margin-left: 0.5rem; }
main > section.faq-hero-band a.faq-start .faq-hero__arrow svg { width: 0.9rem; height: 0.9rem; }
main > section.topic-hero p.text-lede { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }

main section.post-index[data-band="cream"] { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
/* /blog/ stacks Soro's embed directly above this section with no visual separator.
   Soro's own component supplies its own bottom padding (not ours to control, since its
   CSS loads from their remote script), so this section's usual 3 to 4.5rem top padding
   on top of that read as a large dead gap between the last Soro card and the first
   manual one. Zeroed only for this adjacency; the topic hub pages, which have no Soro
   embed above post-index, keep the normal padding-top. */
/* .soro-blog-band itself computes 79.2px top/bottom padding from a rule this
   audit could not trace to a single selector (likely a scoped Astro style keyed
   to a data-astro-cid attribute this section does not carry, since the Soro
   embed markup was inserted outside that component's scope). Forced directly
   rather than chased further; verified live that this actually closes the gap. */
main section.soro-blog-band { padding-bottom: 0 !important; }
main section.soro-blog-band ~ section.post-index[data-band="cream"] { padding-top: 0; }
main section.post-index .post-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: 1.5rem !important; box-shadow: var(--lift-1); overflow: hidden; }
main section.post-index .post-card:hover { box-shadow: var(--lift-3); transform: translateY(-3px); }
main section.post-index .post-card__media img { filter: saturate(0.85) contrast(1.04); }
main section.post-index .post-card__body { padding: 1.5rem 1.5rem 1.75rem; }
main section.post-index .post-card__meta { gap: 0.6rem 0.9rem; align-items: center; }
main section.post-index .post-card__cat.chip::before { display: none; }
main section.post-index .post-card__date { position: static; background: transparent; padding: 0; border-radius: 0; font-size: 0.78rem; color: var(--c-sec); margin-left: auto; }
main section.post-index .post-card__by { color: var(--c-sec); font-size: 0.78rem; }
main section.post-index .post-card__title { font-family: var(--font-display); font-weight: 600 !important; font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.015em; color: #20282d !important; margin-top: 1rem; }
main section.post-index .post-card__excerpt { color: var(--c-sec) !important; font-size: 0.9375rem; }
main section.post-index .post-card__more { border-color: var(--c-line); color: #20282d; }
main section.post-index .post-card__arrow { background: var(--c-gold); color: #20282d; }
main section.post-index .post-card:hover .post-card__more { background: var(--c-gold); border-color: var(--c-gold); }
main section.post-index .post-card .word { color: inherit !important; }

/* ================================= /faq ================================== */

main section.faq-list { padding-top: clamp(3rem, 5vw, 4.5rem); }
main .faq-topics { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
main .faq-topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
main .faq-topics .chip { height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; border: 1px solid transparent; transition: box-shadow 0.18s; }
main .faq-topics .chip:hover { box-shadow: 0 0 0 1px currentColor inset; }
main .faq-topics .chip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

main .faq-group { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--c-line); scroll-margin-top: 7rem; }
@media (min-width: 1024px) { main .faq-group { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 3.5rem; align-items: start; } main .faq-group > h2 { position: sticky; top: 7rem; } }
main .faq-group h2.faq-group__title.font-display { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: #20282d; display: block; text-wrap: balance; }
main .faq-group h2.faq-group__title .word, main .faq-group h2.faq-group__title span { display: inline !important; }
main .faq-group h2.faq-group__title::before { content: attr(data-num); display: grid; margin-bottom: 1rem; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; color: #fff; background: #223a66; }
main .faq-group.hue-lilac h2.faq-group__title::before { background: #4a2d7a; }
main .faq-group.hue-mint h2.faq-group__title::before { background: #0f5c63; }
main .faq-group.hue-peach h2.faq-group__title::before { background: #b8422e; }

/* hairline accordion: undo the card treatment the shared layer gives .faq-item */
main .faq-list details.faq-row:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), .luxe main .faq-list details.faq-row:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--c-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important;
}
main .faq-list details.faq-row:first-of-type { border-top: 1px solid var(--c-line) !important; }
main .faq-list details.faq-row[open] { border-bottom-color: rgba(220, 177, 58, 0.7) !important; }
main .faq-list details.faq-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0.25rem 1.15rem 0; cursor: pointer; list-style: none; }
main .faq-list details.faq-row > summary::-webkit-details-marker { display: none; }
main .faq-list details.faq-row > summary h3 { font-family: var(--font-display); font-weight: 600 !important; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.01em; color: #20282d; margin: 0; }
main .faq-list details.faq-row > summary:hover h3 { color: #0f2e38; }
main .faq-list details.faq-row > summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: 0.4rem; }
main .faq-list .faq-item__sign { flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(220, 177, 58, 0.55) !important; border-radius: 50%; background: transparent !important; position: relative; transition: background-color 0.24s ease, border-color 0.24s ease; }
main .faq-list .faq-item__sign::before, main .faq-list .faq-item__sign::after { content: ""; position: absolute; inset: 50% 0.45rem; border-top: 2px solid var(--c-gold-ink); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
main .faq-list .faq-item__sign::after { transform: rotate(90deg); }
main .faq-list details.faq-row[open] .faq-item__sign { background: var(--c-gold) !important; border-color: var(--c-gold) !important; }
main .faq-list details.faq-row[open] .faq-item__sign::before, main .faq-list details.faq-row[open] .faq-item__sign::after { border-top-color: #20282d; }
main .faq-list details.faq-row[open] .faq-item__sign::after { transform: rotate(0); }
main .faq-list details.faq-row > p { margin: 0; padding: 0 3.25rem 1.4rem 0; max-width: 46rem; font-size: 1rem; line-height: 1.7; color: var(--c-sec) !important; }

@media (max-width: 767px) {
  main .res-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { padding: 1.5rem !important; }
  main .index-list > .index-row { grid-template-columns: auto 1fr; padding: 1.1rem 1.1rem; }
  main .index-row__arrow { display: none; }
  main .faq-list details.faq-row > p { padding-right: 0; }
}


/* ==== conversion.css ==== */
/* ===== Conversion pages: /contact, /quote, /locations, /how-it-works, /for-business ===== */
:root { --conv-ink: #20282d; --conv-secondary: #4e565b; --conv-gold: #dcb13a; --conv-gold-2: #f1d27c; --conv-line: rgba(20, 38, 45, 0.1); }

/* --- hero: lede sits under the h1, never centred --- */
main.conv-page > section.hero-interior p.conv-lede { margin-left: 0 !important; margin-right: 0 !important; text-align: left; max-width: 40rem; }
main.conv-page > section.hero-interior .conv-hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main.conv-page > section.hero-interior .conv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 4rem; } }
/* Onboarding's form has more and wider fields (business details, service areas,
   referral pathways) than the short contact/quote forms this grid was tuned for,
   so the shared 34rem cap left it visibly cramped. Widened for this page only. */
/* Onboarding's hero now matches contact's markup exactly (no .band-inner wrapper),
   so the 56rem band-inner cap this used to need overriding no longer applies. Below
   1280px the widened form still leaves too little room for the text column (144px at
   exactly 1024px, headline wrapping to single words), so this stays scoped to 1280px+;
   1024 to 1279px keeps the site's normal 1fr/34rem split, same as contact and quote. */
@media (min-width: 1280px) {
  main[data-conv="onboarding"] > section.hero-interior .conv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); }
}
main.conv-page > section.hero-interior .conv-hero-grid > div:first-child { min-width: 0; }
main.conv-page h2.conv-h2 { font-weight: 600 !important; letter-spacing: -0.015em; color: var(--conv-ink); }

/* --- deep "talk to a real person" panel --- */
main.conv-page .conv-talk.contact-card { margin-top: 2.25rem; padding: 2rem; border-radius: 1.5rem; background: var(--color-lyd-deep) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 30px 60px -30px rgba(15, 46, 56, 0.55) !important; }
main.conv-page .conv-talk .td-kicker { color: var(--conv-gold-2) !important; }
main.conv-page .conv-talk .td-kicker::before { background: linear-gradient(90deg, var(--conv-gold), var(--conv-gold-2)) !important; }
main.conv-page .conv-talk .conv-talk__label { margin: 1.25rem 0 0.25rem; font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(223, 231, 234, 0.72) !important; }
main.conv-page .conv-talk .conv-talk__label:first-of-type { margin-top: 0; }
main.conv-page .conv-talk a.conv-phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--conv-gold) !important; text-decoration: none; }
main.conv-page .conv-talk a.conv-phone:hover { color: var(--conv-gold-2) !important; }
main.conv-page .conv-talk a.conv-mail, main.conv-page .conv-talk a.conv-talk__mail { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; font-weight: 500; color: #fff !important; text-decoration: underline; text-decoration-color: rgba(241, 210, 124, 0.5); text-underline-offset: 4px; }
main.conv-page .conv-talk a.conv-talk__mail:hover { text-decoration-color: var(--conv-gold-2); }
main.conv-page .conv-talk .conv-talk__val, main.conv-page .conv-talk .conv-talk__val span { color: #dfe7ea !important; font-size: 1rem; line-height: 1.6; margin: 0; }
main.conv-page .conv-talk a.conv-talk__mail-inline { color: #fff !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 210, 124, 0.5); }

/* --- white form card: iframe height capped so the card never reads as a white void --- */
main.conv-page .conv-form.card-lyd { overflow: visible; }
main.conv-page .conv-form iframe.conv-form__frame { height: 920px !important; min-height: 920px !important; }
main.conv-page .conv-form p.conv-form__fallback { margin: 0 0 1.25rem; padding: 0; font-size: 0.875rem; line-height: 1.55; color: var(--conv-secondary) !important; }
main.conv-page .conv-form p.conv-form__fallback a { color: var(--conv-ink) !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 95, 20, 0.45); }
main.conv-page .conv-form iframe.conv-form__frame + noscript, main.conv-page .conv-form noscript { display: none; }
@media (max-width: 1023px) { main.conv-page .conv-form--sticky { position: static !important; top: auto !important; } }
/* /contact hero grid: text | form, then talk panel under the text at desktop; text, form, talk on small screens */
main[data-conv="contact"] > section.hero-interior .conv-hero-grid { grid-template-areas: "text" "form" "talk"; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-text { grid-area: text; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-form { grid-area: form; }
main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-talk { grid-area: talk; margin-top: 0; }
@media (min-width: 1024px) { main[data-conv="contact"] > section.hero-interior .conv-hero-grid { grid-template-areas: "text form" "talk form"; grid-template-rows: auto 1fr; } main[data-conv="contact"] > section.hero-interior .conv-hero-grid > .conv-hero-talk { align-self: start; margin-top: 0.5rem; } }

main.conv-page .conv-form.card-lyd { background: #fff !important; border: 1px solid var(--conv-line) !important; border-radius: 1.5rem; padding: 1.75rem 1.5rem 1.5rem; }
@media (min-width: 640px) { main.conv-page .conv-form.card-lyd { padding: 2rem; } }
main.conv-page .conv-form h2.conv-form__h { padding: 0 0 1rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
main.conv-page .conv-form iframe { display: block; width: 100%; max-width: 100%; border: 0; }
main.conv-page .conv-form p { padding-left: 0; padding-right: 0; color: var(--conv-secondary); }
main.conv-page .conv-form p a { color: var(--conv-ink); }
main.conv-page .conv-form--sticky { align-self: start; }

/* --- tinted card sets --- */
main.conv-page .conv-card.card-lyd { border-radius: 1.5rem; border: 1px solid var(--conv-line); padding: 1.75rem; display: flex; flex-direction: column; background-image: none !important; }
main.conv-page .conv-card .conv-card__h { margin-top: 0; font-size: 1.375rem !important; font-weight: 600 !important; letter-spacing: -0.02em; line-height: 1.2; color: var(--conv-ink) !important; }
main.conv-page .conv-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--conv-ink); }
main.conv-page .conv-card p { color: var(--conv-secondary) !important; opacity: 1 !important; }
main.conv-page .conv-card .btn { align-self: flex-start; margin-top: auto; padding-top: 0.875rem; }
main.conv-page .conv-card .btn.mt-5 { margin-top: 1.5rem; }
main.conv-page .conv-disc { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; margin-bottom: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em; flex: none; }
/* disc colour follows the tint (beats the luxe gold-disc rule) */
main.conv-page .tint-sky .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #223a66 !important; color: #fff !important; }
main.conv-page .tint-lilac .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #4a2d7a !important; color: #fff !important; }
main.conv-page .tint-mint .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #0f5c63 !important; color: #fff !important; }
main.conv-page .tint-peach .conv-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #b8422e !important; color: #fff !important; }

/* --- /contact: ways to reach us --- */
main.conv-page section.conv-ways .conv-ways__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { main.conv-page section.conv-ways .conv-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main.conv-page section.conv-ways .conv-ways__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
main.conv-page section.conv-ways .conv-ways__grid > .conv-card { min-width: 0; }
main.conv-page section.conv-loc .band-inner > div > .td-kicker, main.conv-page section.conv-features .mb-10 > .td-kicker { margin-bottom: 1.25rem; }
main.conv-page section.conv-ways { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
main.conv-page > section.hero-interior[data-conv] { padding-bottom: 0; }
main[data-conv="contact"] > section.hero-interior, main[data-conv="quote"] > section.hero-interior { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }

/* --- /quote: trust cards --- */
main.conv-page .conv-trust { display: grid; gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 640px) { main.conv-page .conv-trust { grid-template-columns: repeat(3, 1fr); } }
main.conv-page .conv-trust .conv-card.card-lyd { padding: 1.375rem; }
main.conv-page .conv-trust .conv-card p { font-size: 0.9375rem; margin-top: 0.5rem; }
main[data-conv="quote"] .conv-hero-grid > div:first-child > h2.conv-h2 { margin-top: 2.5rem; }

/* --- /locations --- */
main.conv-page section.conv-loc .conv-loc__grid { display: grid; gap: 2rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 1024px) { main.conv-page section.conv-loc .conv-loc__grid { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; } }
main.conv-page section.conv-loc .conv-loc__photo { aspect-ratio: 4 / 5; max-height: 34rem; }
@media (max-width: 1023px) { main.conv-page section.conv-loc .conv-loc__photo { aspect-ratio: 16 / 10; max-height: 24rem; } }
main.conv-page section.conv-loc .conv-loc__cards { display: grid; gap: 1.25rem; align-content: center; }
main.conv-page section.conv-loc .conv-loc__card.card-lyd { padding: 2rem; }
main.conv-page section.conv-loc .conv-loc__card p.conv-loc__p { margin: 0; font-size: 1.125rem !important; line-height: 1.6; color: var(--conv-ink) !important; }
main.conv-page section.conv-loc .conv-loc__card .conv-disc { margin-bottom: 1rem; }

/* --- /how-it-works: a real four-step sequence --- */
main.conv-page section.conv-steps .conv-steps__grid { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 640px) { main.conv-page section.conv-steps .conv-steps__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { main.conv-page section.conv-steps .conv-steps__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
main.conv-page section.conv-steps .conv-step.card-lyd { position: relative; padding: 2rem 1.75rem; min-height: 18rem; }
main.conv-page section.conv-steps .conv-step .conv-disc { width: 3.25rem; height: 3.25rem; font-size: 1.0625rem; margin-bottom: 1.5rem; }
/* connector line between steps at desktop */
@media (min-width: 1024px) {
  main.conv-page section.conv-steps .conv-step:not(:last-child)::after { content: ""; position: absolute; top: 3.625rem; right: -1.5rem; width: 1.5rem; height: 2px; background: linear-gradient(90deg, rgba(20, 38, 45, 0.25), rgba(20, 38, 45, 0.08)); }
}
main.conv-page section.conv-steps .band-inner > .td-kicker { margin-bottom: 1.5rem; }

/* --- /for-business --- */
main.conv-page section.conv-features .conv-features__grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { main.conv-page section.conv-features .conv-features__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { main.conv-page section.conv-features .conv-features__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
main.conv-page section.conv-features .conv-card.card-lyd { padding: 2rem 1.75rem; }
main.conv-page section.conv-features .mb-10 { max-width: 48rem; }
main.conv-page section.conv-features .mb-10 p { max-width: 40rem; }

/* --- closing band: light panel inside the deep band reads as a deep card, headings white --- */
main.conv-page section.closing-band .band-inner > [class*="bg-lyd-blue"], main.conv-page section.closing-band .band-inner > [data-slot="card"] { border-radius: 1.5rem; }
main.conv-page section.closing-band h2, main.conv-page section.closing-band h2.font-display { color: #fff !important; font-weight: 600 !important; }
main.conv-page section.closing-band .band-inner > [class*="bg-lyd-blue"] p, main.conv-page section.closing-band [data-slot="card"] p { color: #dfe7ea !important; }
main.conv-page section.closing-band .contact-card .text-4xl { color: var(--conv-gold) !important; font-weight: 800; }
main.conv-page section.closing-band .contact-card .text-4xl span { color: #dfe7ea !important; font-weight: 500; }
main.conv-page section.closing-band .contact-card .text-sm { color: rgba(223, 231, 234, 0.85) !important; }
main.conv-page section.closing-band .contact-card .conv-phone, main.conv-page section.closing-band .contact-card a.text-white { color: var(--conv-gold) !important; font-weight: 800; }

/* surface band spacing */
main.conv-page section[data-band="surface"].conv-loc, main.conv-page section[data-band="surface"].conv-steps, main.conv-page section[data-band="surface"].conv-features { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }

/* card headings: beat the display-size h2 rules from premium/luxe */
html main.conv-page section[class] .conv-card h2.conv-card__h, html .luxe main.conv-page section[class] .conv-card h2.conv-card__h, html main.conv-page section[class] .conv-card h3.conv-card__h { font-size: 1.375rem !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-align: left !important; text-wrap: pretty; }
html main.conv-page section[class] .conv-form h2.conv-form__h, html .luxe main.conv-page section[class] .conv-form h2.conv-form__h { font-size: 1.375rem !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: left !important; }
main.conv-page .conv-card, main.conv-page .conv-card p, main.conv-page .conv-form { text-align: left; }
main.conv-page .conv-card p { margin-top: 0.75rem; }
html main.conv-page section[class] h2.conv-h2, html .luxe main.conv-page section[class] h2.conv-h2 { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
main.conv-page section.conv-features .mb-10 p, main.conv-page section.conv-loc .band-inner > div > p { text-align: left; margin-left: 0; }
main.conv-page .conv-talk .td-kicker { display: flex; width: 100%; }

/* --- form iframe: shorter on phones so a slow GHL load never leaves a screen-tall white void --- */
@media (max-width: 639px) { main.conv-page .conv-form iframe.conv-form__frame { height: clamp(440px, 62vh, 560px) !important; } }

/* --- polish pass: contact --- */
/* cards share a CTA baseline so the grid reads as one row, not four ragged ones */
main.conv-page section.conv-ways .conv-ways__grid > .conv-card { display: flex; flex-direction: column; }
main.conv-page section.conv-ways .conv-ways__grid > .conv-card > .btn { margin-top: auto !important; align-self: flex-start; }
/* no CTA may outgrow its card */
main.conv-page section.conv-ways .conv-ways__grid .btn { max-width: 100%; white-space: normal; }


/* ==== home-human.css ==== */
/* home-human: layout that does not march in step.
   `html.luxe main` prefixes are deliberate - premium-compact.css loads after this file,
   so the hscroll rules here need (0,3,2) to win rather than a !important that would
   also stamp on the mobile fallbacks. */

/* ---------- section headers: left-aligned split instead of a sixth centred stack ---------- */
main .sec-head-split { display: grid; gap: 1.25rem 3.5rem; margin-bottom: clamp(2.5rem, 4vw, 3.25rem); text-align: left; max-width: none; }
main .sec-head-split > p { margin-top: 0; }
main .sec-head-split h2 { max-width: 22ch; }

@media (min-width: 900px) {
  main .sec-head-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; }
  main .sec-head-split > p { padding-bottom: 0.45rem; max-width: 46ch; }
}

/* the kicker centring helper keys off .text-center, which is gone; keep it flush left */
main .sec-head-split .td-kicker { margin-left: 0; margin-right: 0; }

/* ---------- why now: uneven columns, staggered baseline ---------- */
@media (min-width: 900px) {
  html.luxe main .whynow-grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  html.luxe main .whynow-grid > *:nth-child(2) { margin-top: 1.75rem; }
  html.luxe main .whynow-grid > *:nth-child(3) { margin-top: 3.5rem; }
  /* the wider lead card carries slightly larger body copy, so the three stop reading as clones */
  html.luxe main .whynow-grid > *:first-child p { font-size: 1.0625rem; line-height: 1.6; }
}

/* ---------- why now: the closing line stops being a card ---------- */
main .home-pull { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: 1.5rem 0 0; background: none; border: 0; border-top: 2px solid var(--color-lyd-yellow); max-width: 46rem; }
main .home-pull p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.3vw, 1.9rem) !important; line-height: 1.28 !important; letter-spacing: -0.015em; color: #fff !important; }
main .home-pull p strong { font-weight: 700; color: #f1d27c !important; }

/* ---------- ecosystem: four panels out of lockstep ---------- */
@media (min-width: 1024px) {
  html.luxe main .eco-stagger { align-items: start; }
  html.luxe main .eco-stagger > .hscroll__panel:nth-of-type(2n) { margin-top: 2.75rem; }
}


/* ==== rich-00-primitives.css ==== */
/* rich-00-primitives: shared motion primitives. Read-only for other areas.
   Consumers wrap text in <span class="rd-mask"><span class="rd-mask__in">…</span></span>, set --rd-d on the
   outer span (or an ancestor) for the delay, and reveal by having a .pm-in (premium.js) or .rd-in ancestor.
   Nothing here sets colour, background, border or size: the wrapped text inherits everything from its parent. */
.rd-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.rd-mask__in { display: inline-block; color: inherit; }
/* The hidden state must SNAP and the revealed state must own the transition: html.pm is added by premium.js after
   the Astro bundle has already flushed style, so a transition declared on the hidden state would merely schedule a
   slide towards hidden that the reveal class (80ms later in the hero) cancels - and nothing would ever play. */
.pm .rd-mask__in { transform: translateY(112%); transition: none; will-change: transform; }
.pm :is(.pm-in, .rd-in) .rd-mask__in { transform: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--rd-d, 0s); }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .rd-mask__in { transform: none !important; transition: none !important; } }


/* ==== rich-aeo.css ==== */
/* ==== rich-aeo: AI-assistant panel (home, [data-section="aeo"]) ====
   R5 pre-rendered chat + Pause/Resume; R6 Copy-the-question. Petrol/plum band, gold only as hairline/tick.
   Motion is transform/opacity only and gated on html.pm; under pm-static everything appears instantly. */

/* -- chat body ----------------------------------------------------------------------------- */
/* premium.js never stamps #aeo-chat today (no space-y-* body), but if it ever does, `.pm .pm-stagger > *`
   (0,2,0) would hide the pre-rendered bubbles. (0,3,0) wins; rich-aeo.js also strips the classes. */
.pm .rd-aeo-chat.pm-stagger > * { opacity: 1; transform: none; transition: none; }
.rd-aeo-chat > .rd-aeo-msg { flex: none; }
@keyframes rd-aeo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pm .rd-aeo-chat > .rd-aeo-msg { animation: rd-aeo-rise .45s cubic-bezier(.16, 1, .3, 1) both; }

/* -- phone chrome: dots + name | chip | toggle ----------------------------------------------- */
.rd-aeo-chrome { justify-content: flex-start; gap: .5rem; }
.rd-aeo-chrome > .rd-aeo-chrome__id { flex: none; }
.rd-aeo-chrome > .rd-aeo-chip { flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: center; }
.rd-aeo-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin: -.5625rem 0; /* 44px target inside the row's 14px paddings: the 55px chrome does not grow */
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff;
  padding: 0; cursor: pointer; touch-action: manipulation; transition: border-color .2s;
}
.rd-aeo-toggle:hover { border-color: rgba(241, 210, 124, .7); }
.rd-aeo-toggle:focus-visible { border-radius: 999px; } /* outline itself comes from `main button:focus-visible` (2px #dcb13a, offset 3px) */
.rd-aeo-toggle .ico-play { display: none; }
.rd-aeo-toggle[aria-pressed="true"] .ico-pause { display: none; }
.rd-aeo-toggle[aria-pressed="true"] .ico-play { display: inline; }
@media (max-width: 479px) { /* 292px phone: name (82) + chip (~120) + toggle (44) must share 268px */
  .rd-aeo-chrome { padding-left: .75rem; padding-right: .75rem; gap: .375rem; }
  .rd-aeo-chrome__id > span.rounded-full { display: none; }
  .rd-aeo-chrome__id > span.ml-2 { margin-left: 0; white-space: nowrap; }
  .rd-aeo-chrome > .rd-aeo-chip { padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
}

/* -- bullets: the one the current answer speaks to lights up (>=1024, html.pm only) ---------- */
.rd-aeo-li { position: relative; }
.rd-aeo-li::before {
  content: ""; position: absolute; left: -.75rem; top: .55rem; bottom: .55rem; width: 2px;
  background: var(--gold-2, #f1d27c); opacity: 0; transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.rd-aeo-li.rd-lit::before { opacity: 1; }
/* The text span otherwise computes --color-lyd-dark-body (#b8c9d1) via premium.css (0,4,3); this is (0,4,4). */
.luxe main section[data-section="aeo"] li.rd-aeo-li.rd-lit > span:last-child { color: #fff; }
.pm .rd-aeo-li.rd-lit > span:first-child { animation: pm-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (max-width: 1023px) { .rd-aeo-li::before { display: none; } }

/* -- R6 copy button on the query box -------------------------------------------------------- */
.rd-aeo-q { position: relative; }
.rd-aeo-copy {
  margin-left: auto; flex: none; align-self: center; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; min-width: 44px; padding: 0 .85rem;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff;
  font-family: inherit; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
  cursor: pointer; touch-action: manipulation; transition: border-color .2s;
}
.rd-aeo-copy:hover, .rd-aeo-copy.is-done { border-color: var(--gold-2, #f1d27c); }
.rd-aeo-copy:focus-visible { border-radius: 999px; }
.rd-aeo-copy__ico, .rd-aeo-copy__tick { width: 14px; height: 14px; flex: none; }
.rd-aeo-copy__tick { display: none; color: var(--gold-2, #f1d27c); transform: scale(0); }
.rd-aeo-copy.is-done .rd-aeo-copy__ico { display: none; }
.rd-aeo-copy.is-done .rd-aeo-copy__tick { display: block; transform: scale(1); }
.pm .rd-aeo-copy__tick { transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
/* white on the composite box (plum + 7% + 7% white = #483966): 10.2:1; gold-2 tick: 6.97:1.
   The query box carries bg-white, so premium.css (0,4,3) recolours every span inside it to #b8c9d1;
   the label and tick rules below are (0,5,2) and inherit the button's own #fff / set gold-2. */
.luxe main section[data-section="aeo"] .rd-aeo-copy { color: #fff; }
.luxe main section[data-section="aeo"] .rd-aeo-q .rd-aeo-copy .rd-aeo-copy__label { color: inherit; }
.luxe main section[data-section="aeo"] .rd-aeo-q .rd-aeo-copy .rd-aeo-copy__tick { color: var(--gold-2, #f1d27c); }
@media (max-width: 479px) {
  .rd-aeo-copy { padding: 0; width: 44px; }
  .rd-aeo-copy__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ==== rich-closing-faq.css ==== */
/* ==== rich-closing-faq: contact-card clock + document tile + colophon (R10), FAQ companion (R11) ====
   Depends on rich-00-primitives.css (.rd-mask/.rd-mask__in, rd-fade). Motion only under html.pm;
   under html.pm-static everything below is a static design. No gradients, no new gold fills:
   gold appears as hairline, numeral, dot ring and text only. Every new rule is static (the
   home page's drawn-hairline budget is spent elsewhere). */

/* ---------- R10 hours pill (all pages; inserted by rich-closing-faq.js after the hours line) ----------
   (0,4,4) beats premium.css's deep-band span recolour (0,4,3) and premium-photo's `.bg-white[class*="p-"]
   :is(p,span,div)` (0,3,4) so the pill and its text keep the line's own colour (#e4ebee on the photo
   band, the deep-body tint elsewhere). */
.luxe main section.closing-band .contact-card :is(p, li) > span.rd-card-hours, main section.closing-band .contact-card :is(p, li) > span.rd-card-hours {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.6rem; padding: 0.2rem 0.65rem; vertical-align: middle;
  border: 1px solid currentColor; border-radius: 999px; font-size: 0.8125rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.005em; color: inherit; white-space: nowrap;
}
.luxe main section.closing-band .contact-card .rd-card-hours .rd-card-hours__t, main section.closing-band .contact-card .rd-card-hours .rd-card-hours__t { color: inherit; }
.luxe main section.closing-band .contact-card .rd-card-hours__dot, main section.closing-band .contact-card .rd-card-hours__dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.luxe main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot, main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot { background: #7fd3b0; border-color: #7fd3b0; }
@media (max-width: 480px) {
  .luxe main section.closing-band .contact-card :is(p, li) > span.rd-card-hours, main section.closing-band .contact-card :is(p, li) > span.rd-card-hours { display: flex; width: max-content; max-width: 100%; margin: 0.5rem 0 0; white-space: normal; }
}
/* motion: the pill fades in once; an open dot pulses three times, then rests. rd-breathe's 1.5%
   scale is invisible on an 8px dot, so the dot has its own namespaced transform/opacity pulse. */
@keyframes rd-closing-faq-dot { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }
.pm main section.closing-band .contact-card .rd-card-hours { animation: rd-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pm main section.closing-band .contact-card .rd-card-hours[data-state="open"] .rd-card-hours__dot { animation: rd-closing-faq-dot 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s 3 both; }

/* ---------- R10 document tile (/ only) ----------
   The .cap-link keeps its href; its children become a cover thumbnail plus two lines. The tile sits
   inside the yellow-turned-dark left block, whose premium-photo rule (0,3,4) greys spans: (0,4,x)+. */
main .cap-link.rd-card-doc, .luxe main .cap-link.rd-card-doc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 1.35rem 0 0; padding: 0.25rem 0; max-width: 100%; color: #fff; text-decoration: none; font-size: 0.875rem; line-height: 1.35; border-radius: 6px; }
main .cap-link.rd-card-doc:hover, .luxe main .cap-link.rd-card-doc:hover { text-decoration: none; }
main .cap-link.rd-card-doc:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main .cap-link.rd-card-doc .rd-card-doc__thumb { position: relative; display: block; flex: none; width: 2.6rem; height: 3.5rem; overflow: hidden; border-radius: 2px; background: #f3f1ec; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
main .cap-link.rd-card-doc .rd-card-doc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* folded corner drawn with two borders (no gradient): the petrol "cut" above, the gold fold below */
main .cap-link.rd-card-doc .rd-card-doc__thumb::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0.7rem 0.7rem 0; border-color: transparent #0f2e38 #f1d27c transparent; }
main .cap-link.rd-card-doc .rd-card-doc__meta { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 12rem; min-width: 0; }
main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong, .luxe main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong { color: #f1d27c; font-size: 0.875rem; font-weight: 600; text-underline-offset: 3px; }
main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta .rd-card-doc__s, .luxe main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta .rd-card-doc__s { display: block; color: #dfe7ea; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
main .cap-link.rd-card-doc:hover .rd-card-doc__meta strong, main .cap-link.rd-card-doc:focus-visible .rd-card-doc__meta strong { text-decoration: underline; }
.pm main .cap-link.rd-card-doc .rd-card-doc__thumb { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm main .cap-link.rd-card-doc:hover .rd-card-doc__thumb, .pm main .cap-link.rd-card-doc:focus-visible .rd-card-doc__thumb { transform: translateY(-3px) rotate(-1.5deg); }

/* ---------- R10 colophon (/ only): the phone number as a block Manrope numeral between two hairlines ----------
   (0,5,3) beats luxe's tel colour rule (0,4,3) and zz-uxpro's inline-block/negative-margin hit-area rule (0,3,1). */
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"], main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] {
  display: block; margin: 1.25rem 0 0; padding: 1rem 0; color: #f1d27c; text-decoration: none;
  font-family: "Manrope", var(--font-display, "Manrope"), system-ui, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 2.9vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  border-top: 1px solid rgba(241, 210, 124, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0;
}
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:hover { color: #fff; }
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible, main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 4px; }
/* the wrapped numeral inherits the gold; premium-photo's span rule (0,3,4) would otherwise grey it */
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] :is(.rd-mask, .rd-mask__in), main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] :is(.rd-mask, .rd-mask__in) { color: inherit; }
.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] .rd-mask { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
/* the tel's own top hairline takes over from the Astro separator above it */
.luxe main section.closing-band .contact-card.rd-card-colophon [role="separator"], main section.closing-band .contact-card.rd-card-colophon [role="separator"] { display: none; }
/* ruled icon rows */
main section.closing-band .contact-card.rd-card-colophon .contact-line, .luxe main section.closing-band .contact-card.rd-card-colophon .contact-line { margin-top: 0; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
main section.closing-band .contact-card.rd-card-colophon .contact-line.mt-4 { margin-top: 0.5rem; }
main section.closing-band .contact-card.rd-card-colophon .contact-line:last-of-type { border-bottom: 0; }
main section.closing-band .contact-card.rd-card-colophon .contact-line > p { margin-top: 0; }
main section.closing-band .contact-card.rd-card-colophon .contact-social { margin-top: 1.1rem; }
/* motion: the numeral rises once when the band enters (primitive .rd-mask handles the transform) */
.pm main section.closing-band .contact-card.rd-card-colophon .rd-mask__in { transition-duration: 0.8s; transition-delay: 0.15s; }

/* ---------- R11 FAQ numerals (/ only) ----------
   (0,3,2) beats compact's `main .faq-acc summary h3` (0,2,2); compact keeps its +/x on summary::after and
   its space-between flex, so the numeral takes a fixed 2rem gutter and the h3 grows to fill the row. */
main [data-section="faq"] .faq-acc summary { position: relative; }
main [data-section="faq"] .faq-acc summary h3 { flex: 1 1 auto; min-width: 0; }
main [data-section="faq"] .faq-acc summary .rd-faq-idx { flex: none; width: 2rem; font-family: "Manrope", var(--font-display, "Manrope"), sans-serif; font-weight: 800; font-size: 0.8rem; line-height: 1; letter-spacing: 0.14em; color: var(--gold-3, #7d5f14); transition: color 0.3s; }
main [data-section="faq"] .faq-acc[open] summary .rd-faq-idx { color: var(--ink-2, #14262d); }
/* the open question is underlined by a static 1px gold rule from the text gutter to the right edge (::before; compact owns ::after) */
main [data-section="faq"] .faq-acc[open] > summary::before { content: ""; position: absolute; left: 2rem; right: 0; bottom: -0.4rem; height: 1px; background: var(--gold, #dcb13a); pointer-events: none; }
main [data-section="faq"] .faq-acc > p { margin-top: 1.1rem !important; }
.pm main [data-section="faq"] .faq-acc[open] > p { animation: rd-fade 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---------- R11 shared companion typography (aside items and in-answer companions) ---------- */
main [data-section="faq"] .rd-faq-k { display: block; margin-bottom: 0.45rem; font-family: var(--font-sans, Inter, system-ui, sans-serif); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-3, #7d5f14); }
main [data-section="faq"] .rd-faq-line { font-family: var(--font-display, "Manrope"), system-ui, sans-serif; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-2, #14262d); text-wrap: balance; }
main [data-section="faq"] a.rd-faq-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-top: 0.35rem; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--gold-3, #7d5f14); text-decoration: underline; text-decoration-color: rgba(125, 95, 20, 0.45); text-underline-offset: 3px; border-radius: 4px; }
main [data-section="faq"] a.rd-faq-link:hover { text-decoration-color: currentColor; }
main [data-section="faq"] a.rd-faq-link:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main [data-section="faq"] a.rd-faq-link > span[aria-hidden] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm main [data-section="faq"] a.rd-faq-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }

/* aside under "Read all FAQs" (>=1024) */
main [data-section="faq"] .rd-faq-aside { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--gold, #dcb13a); max-width: 22rem; }
main [data-section="faq"] .rd-faq-aside__item { display: none; }
main [data-section="faq"] .rd-faq-aside__item[data-active] { display: block; }
.pm main [data-section="faq"] .rd-faq-aside__item[data-active] { animation: rd-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (max-width: 1023px) { main [data-section="faq"] .rd-faq-aside { display: none; } }

/* companion under each open answer (<1024) */
main [data-section="faq"] .rd-faq-comp { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(20, 38, 45, 0.1); }
/* closed answers hide their companion outright (Chromium keeps closed details content laid out via content-visibility) */
main [data-section="faq"] .faq-acc:not([open]) > .rd-faq-comp { display: none; }
main [data-section="faq"] .rd-faq-comp .rd-faq-line { font-size: 0.9375rem; line-height: 1.4; }
main [data-section="faq"] .rd-faq-comp a.rd-faq-link { font-size: 0.875rem; }
@media (min-width: 1024px) { main [data-section="faq"] .rd-faq-comp { display: none; } }


/* ==== rich-gaps-whynow.css ==== */
/* ==== rich-gaps-whynow.css ==== R3 gap disclosures (leaks ledger) + R4 decade rule (why-now band), home only.
   Flat bands only. Gold only as underline, left rule, hairline, tick and numeral. Motion under html.pm only. */

/* ---------------------------------------------------------------- R3: each gap answers back */
/* the 44px foot replaces compact's bottom padding: compact is (0,2,1)!important, these are (0,3,1)/(0,4,2)!important */
main .leaks-grid .leaks__slide.rd-gap-row, html.luxe main .leaks-grid .leaks__slide.rd-gap-row { padding-bottom: 0 !important; }
main .rd-gap-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; margin: .25rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left; font: 600 .6875rem/1 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2, #14262d); }
main .rd-gap-btn__t { color: inherit; text-decoration: underline; text-decoration-color: var(--gold, #dcb13a); text-decoration-thickness: 1px; text-underline-offset: 4px; }
main .rd-gap-btn:hover, main .rd-gap-btn:hover .rd-gap-btn__t { color: var(--color-lyd-deep, #0f2e38); }
main .rd-gap-btn:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 2px; }
main .rd-gap-chev { flex: none; color: currentColor; }
main .rd-gap-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; margin: 0; }
main .rd-gap-panel__in { min-height: 0; overflow: hidden; }
main .rd-gap-panel p { margin: 0 0 1rem; padding-left: .75rem; border-left: 2px solid var(--gold, #dcb13a); font-family: var(--font-sans, Inter, system-ui, sans-serif); font-size: .9375rem; line-height: 1.5; color: var(--ink-2, #14262d); max-width: none; }
main .rd-gap-panel p:not(:last-child) { margin-bottom: .6rem; }
main .rd-gap-row.is-open .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
main .rd-gap-row.is-open .rd-gap-chev { transform: rotate(180deg); }
/* open row: numeral drops its section hue for petrol. Out-ranks premium-color's per-row (0,13,0)!important and motion's :hover (0,4,1)!important. */
main .leaks-grid .leaks__slide.rd-gap-row.is-open .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html.luxe main .leaks-grid .leaks__slide.rd-gap-row.is-open .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: var(--color-lyd-deep, #0f2e38) !important; }
/* motion: disclosure only, no :hover opens anything */
html.pm main .rd-gap-panel { transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; }
html.pm main .rd-gap-row.is-open .rd-gap-panel { transition-delay: 0s; }
html.pm main .rd-gap-chev { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
html.pm main .leaks__numeral { transition: color .3s; }
/* no JS: every answer simply shows, the buttons go */
html:not(.js) main .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
html:not(.js) main .rd-gap-btn { display: none; }

/* ---------------------------------------------------------------- R4: the decade rule */
/* --rd-pt is the padding above the rule; the tick list is pinned to the rule's own box with it, so labels stay
   anchored to the rule whatever the padding split. Label offsets/heights are budgeted per breakpoint below. */
main .rd-gap-decade { --rd-pt: 1.9rem; position: relative; margin: 1rem 0 0; padding: var(--rd-pt) 0 2.9rem; }
main .rd-gap-decade__rule { position: relative; height: 2px; background: rgba(255, 255, 255, .16); }
main .rd-gap-decade__fill { position: absolute; inset: 0; background: var(--gold-2, #f1d27c); transform-origin: left center; } /* drawn hairline 3 of 3 on the home page */
main .rd-gap-decade__ticks { position: absolute; left: 0; right: 0; top: var(--rd-pt); height: 2px; margin: 0; padding: 0; list-style: none; }
main .rd-gap-decade__tick { position: absolute; left: calc(var(--p, 0) * 100%); max-width: 14rem; }
main .rd-gap-decade__tick.is-above { bottom: calc(100% + .6rem); }
main .rd-gap-decade__tick.is-below { top: calc(100% + .6rem); }
main .rd-gap-decade__tick.is-end { left: auto; right: 0; text-align: right; }
main .rd-gap-decade__tick::before { content: ""; position: absolute; left: 0; width: 1px; height: .45rem; background: var(--gold-2, #f1d27c); }
main .rd-gap-decade__tick.is-above::before { bottom: -.6rem; }
main .rd-gap-decade__tick.is-below::before { top: -.6rem; }
main .rd-gap-decade__tick.is-end::before { left: auto; right: 0; }
/* explicit colours: luxe/photo recolour p and li, not b/span; hand-checked over the 0.72 scrim end (>=4.9:1 on a white photo pixel) */
main .rd-gap-decade__tick b { display: block; font: 800 .875rem/1.1 var(--font-display, Manrope, system-ui, sans-serif); letter-spacing: -.01em; color: var(--gold-2, #f1d27c); font-variant-numeric: tabular-nums; }
main .rd-gap-decade__tick span { display: block; margin-top: .15rem; font: 500 .6875rem/1.35 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #dfe7ea; }
main .rd-gap-decade__now { position: absolute; left: calc(var(--now, 0) * 100%); top: 50%; display: grid; justify-items: center; transform: translate(-50%, -7px); white-space: nowrap; }
main .rd-gap-decade__now i { display: block; width: 10px; height: 10px; box-sizing: content-box; border: 2px solid var(--gold-2, #f1d27c); border-radius: 50%; background: var(--color-lyd-deep-800, #0a2129); }
main .rd-gap-decade__now b { margin-top: .4rem; font: 800 .6875rem/1.2 var(--font-display, Manrope, system-ui, sans-serif); letter-spacing: .02em; color: var(--gold-2, #f1d27c); }
main .rd-gap-decade__now small { font: 500 .625rem/1.3 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #dfe7ea; }
main .rd-gap-decade__now.is-quiet :is(b, small) { display: none; } /* within .12 of a dated tick, or its label would touch one: ring only */
/* >=900: the figure shares the Source row (column 2, bottom-aligned). Padding above the rule clears the market cards,
   padding below keeps the 1 Jul label off the pull quote's gold rule; from 1280 that label fits on one line. */
@media (min-width: 900px) {
  main [data-section="whynow"] > .band-inner, html.luxe main [data-section="whynow"] > .band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 3rem; }
  main [data-section="whynow"] > .band-inner > * { grid-column: 1 / -1; }
  main [data-section="whynow"] > .band-inner > .rd-gap-source { grid-column: 1; max-width: none; }
  main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 3.6rem; grid-column: 2; align-self: end; margin: 0; padding: var(--rd-pt) 0 3.5rem; }
  main .rd-gap-decade__tick b { font-size: .95rem; }
  main .rd-gap-decade__tick.is-below { max-width: 28rem; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* the Source paragraph runs 4+ lines here, so the row is tall enough to lift the rule further off the third card */
  main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 5rem; }
}
@media (min-width: 1280px) {
  /* the 1 Jul label is one line here, so less is needed below; the spare goes above, off the third card's corner */
  main [data-section="whynow"] > .band-inner > .rd-gap-decade { --rd-pt: 3.85rem; padding-bottom: 2.25rem; }
}
/* motion (.pm): fill draws left to right, ticks settle in date order, ring last. Keyed on premium.js's section.pm-in;
   rich-gaps-whynow.js holds the draw (--wait) until the figure itself is half in view, then releases it once. */
html.pm main .rd-gap-decade__fill { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .2s; }
html.pm main .rd-gap-decade__tick { opacity: 0; transform: translateY(6px); transition: opacity .6s ease calc(.5s + var(--p, 0) * .7s), transform .6s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--p, 0) * .7s); }
html.pm main .rd-gap-decade__now { opacity: 0; transform: translate(-50%, -7px) scale(.6); transition: opacity .5s ease 1.5s, transform .5s cubic-bezier(.16, 1, .3, 1) 1.5s; }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__fill { transform: scaleX(1); }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__tick { opacity: 1; transform: none; }
html.pm main section.pm-in .rd-gap-decade:not(.rd-gap-decade--wait) .rd-gap-decade__now { opacity: 1; transform: translate(-50%, -7px); }


/* ==== rich-hero.css ==== */
/* rich-hero: hero figures arrive as masked plates; the credential bar's hairline draws and its four
   items settle after them. Motion only under html.pm (premium.js withholds it for reduced motion).
   Consumes .rd-mask / .rd-mask__in from rich-00-primitives.css - nothing redefined here. */

/* ---- R1 numerals: the four hero elements that carried data-count-to now carry rd-hero-num (the Astro
   bundle would otherwise rewrite their text and count them). These re-declare, verbatim, the luxe rules
   that were keyed on the attribute (premium-luxe.css lines 20, 88 and 190) so nothing looks different.
   The 94% div is also .text-2xl, which luxe sizes at 1.9rem after the 2.75rem rule - kept by exclusion. ---- */
.luxe main .rd-hero-num { font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.luxe main [data-elevate="hero"] .rd-hero-num:not(.text-2xl) { color: var(--gold-2); font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.luxe main [data-elevate="hero"] .rd-hero-num { color: var(--gold-2) !important; }

/* ---- R1 figures: delay ladder per plate; card gets .pm-in at 80ms -> rises at .68 / .79 / .90s ---- */
.rd-hero-fig { --rd-d: calc(.6s + var(--i, 0) * 110ms); }
/* (0,3,1) beats luxe's `.luxe main [data-elevate="hero"] *` (0,2,1) which paints every descendant #fff -
   both spans inherit the parent's gold so the figures and the arrow keep --gold-2 */
.luxe main [data-elevate="hero"] .rd-mask, .luxe main [data-elevate="hero"] .rd-mask .rd-mask__in { color: inherit; }

/* ---- R1 trust row: the border becomes a drawn hairline (one of three on the home page) ---- */
.pm main > section:first-of-type .rd-hero-trust { position: relative; border-top-color: transparent; }
.pm main > section:first-of-type .rd-hero-trust::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .14); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1) var(--rd-t0, 1.6s); }
.pm main > section:first-of-type .rd-hero-trust.rd-in::before { transform: none; }
/* hidden state snaps, revealed state carries the transition (see rich-00-primitives.css for why) */
.pm main > section:first-of-type .rd-hero-trust > * { opacity: 0; transform: translateY(8px); transition: none; }
.pm main > section:first-of-type .rd-hero-trust.rd-in > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--rd-t0, 1.6s) + .15s + var(--i, 0) * 90ms); }
/* premium.css keeps the Sharktech mark at .85 with (0,3,3): the hidden rule must out-rank it and the settle must land at .85, not 1 */
.pm main > section:first-of-type .rd-hero-trust > img[src*="sharktech"] { opacity: 0; }
.pm main > section:first-of-type .rd-hero-trust.rd-in > img[src*="sharktech"] { opacity: .85; }

/* ---- R1 ABN link: 44px target inside an unchanged 18px line (equal negative block margins) ---- */
main > section:first-of-type .rd-hero-abn { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; margin-block: -13px; font-size: .75rem; line-height: 1.5; color: rgba(255, 255, 255, .85); text-decoration: underline 1px rgba(241, 210, 124, .45); text-underline-offset: .3em; }
main > section:first-of-type .rd-hero-abn > span { color: inherit; }
main > section:first-of-type .rd-hero-abn > [aria-hidden] { letter-spacing: 0; }
main > section:first-of-type .rd-hero-abn:hover, main > section:first-of-type .rd-hero-abn:focus-visible { color: #f1d27c; text-decoration-color: #f1d27c; }
main > section:first-of-type .rd-hero-abn:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }

/* ---- R1-launcher: under 768px the GHL host waits while the 263,145 plate plays over its slot.
   Host-only properties - opacity/visibility govern the whole shadow tree including its fixed
   launcher. Never transform/position/inset/contain the host: a transformed host would become the
   containing block for the fixed launcher and the full-height chat window. ---- */
@media (max-width: 767px) {
  chat-widget { transition: opacity .6s ease; }
  html.rd-hero-wait chat-widget { opacity: 0; visibility: hidden; }
}
html.pm-static chat-widget { transition: none; }


/* ==== rich-photos.css ==== */
/* rich-photos: living photographs (home). See rich-photos.cjs for intent. */

/* ---- R2-layer: photo bands paint a lazy <img> layer instead of a CSS background ----
   (0,4,2)!important beats premium-photo.css's (0,3,2)!important; background-color #0a2129 stays. */
main section.band-photo.rd-has-photo, .luxe main section[data-band="deep"].band-photo.rd-has-photo, .luxe main section.closing-band.band-photo.rd-has-photo { background-image: none !important; }
/* the section already has position:relative; overflow:hidden; isolation:isolate (premium-motion.css, ungated),
   so z-index:-1 sits above the petrol background-colour and below the z-0 watermark, z-1 grain and z-2 .band-inner */
main section.band-photo .rd-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* the compiled bundle stamps data-wipe on main images and parks them at clip-path: inset(0 100% 0 0) until its own
   reveal fires, and rounds every main img to var(--soft-md); neither belongs on a full-bleed background layer
   (premium-photo.css does the same clip-path reset for .hscroll__panel img). !important: the bundle's img rule is (0,4,2). */
main section.band-photo .rd-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: none !important; border-radius: 0 !important; transition: none !important; }
/* scrim copied verbatim from premium-photo.css's band rule; never redrawn */
main section.band-photo .rd-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 22, 28, 0.94) 0%, rgba(6, 22, 28, 0.86) 45%, rgba(8, 28, 35, 0.72) 100%); }

/* ---- R2-drift: scroll-linked drift on the six care photographs ----
   While the photograph is anywhere in the viewport it travels 4% above -> 4% below centre, linearly with scroll,
   held at scale 1.1 so no edge shows. Animations beat the .pm img.pm-photo 1.06->1 transition; browsers
   without view() (Firefox) keep that ease and nothing else. Under 1024 the eco images keep premium.css's
   transform:none !important, so eco drift exists only on desktop, by design. */
main section[data-section="eco"] .hscroll__panel .rd-photo-frame { overflow: hidden; }
@supports (animation-timeline: view()) {
  /* view() attaches to the nearest ancestor SCROLL CONTAINER, and overflow:hidden creates one; every clipping box
     between these images and the viewport (figure, .rd-photo, the deep section, the eco stage / panel / image
     column) would otherwise become a timeline source that never scrolls, freezing the drift at 50%. overflow:clip
     clips identically (radius respected, clip-margin 0) without being a scroll container. Scoped to html.pm and
     this @supports block so static browsers and reduced-motion visitors see the untouched overflow:hidden. */
  html.pm .rd-photo-fig, html.pm main section.band-photo .rd-photo, html.pm main section.band-photo.rd-has-photo,
  html.pm main section[data-section="eco"] .hscroll__stage, html.pm main section[data-section="eco"] .hscroll__panel,
  html.pm main section[data-section="eco"] .hscroll__panel .rd-photo-frame { overflow: clip; }
  html.pm .rd-photo-drift { animation: rd-photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes rd-photo-drift { from { transform: translate3d(0, -4%, 0) scale(1.1); } to { transform: translate3d(0, 4%, 0) scale(1.1); } }
}
@media (max-width: 767px), (prefers-reduced-data: reduce), (prefers-reduced-motion: reduce) { html.pm .rd-photo-drift { animation: none !important; } }
html.rd-savedata .rd-photo-drift { animation: none !important; }

/* ---- caption rise: "A haircut, at home." settles 8px into place 300ms after premium.js stamps pm-in on the img.
   Plays once (pm-in is never removed). The second caption line never moves. Without :has the caption stays visible. */
@supports selector(:has(img)) {
  html.pm .rd-photo-fig figcaption strong { opacity: 0; transform: translateY(8px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1) .3s, transform .8s cubic-bezier(.16, 1, .3, 1) .3s; }
  html.pm .rd-photo-fig:has(> img.pm-in) figcaption strong { opacity: 1; transform: none; }
}


/* ==== rich-proof.css ==== */
/* rich-proof: the product proves itself on /demo, /how-it-works and /features.
   Motion is transform/opacity (plus colour steps), gated on html.pm; every sequence plays once per entry.
   No gradients, no gold fills on controls: gold appears only as disc, tick, pip and a 4px rule. */

/* ---------- shared: Replay is a ghost button (white on the deep chrome, ink on the sky tint) ---------- */
.rd-proof-replay { min-height: 2.75rem; padding: .5rem 1rem; font-size: .8125rem; }
main .btn.rd-proof-replay:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 999px; }
main section[data-band="deep"] .btn.rd-proof-replay:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
/* deep chrome: luxe's !important ink border would vanish on petrol; keep the band's white ghost (same file order beats it) */
main .rd-proof-pipe .btn.rd-proof-replay { border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff; }
main .rd-proof-pipe .btn.rd-proof-replay:hover { border-color: #fff !important; color: #fff; }
@keyframes rd-proof-pop { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- R12 /demo: the pipeline handles its sample enquiry ---------- */
main .rd-proof-pipe .pipe__chrome { flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.rd-proof-pipe .pipe__sample { margin-left: auto; }
/* pending items step back in colour only (never opacity: the pm-stagger children own that transition) */
.rd-proof-auto .pipe__auto-item { transition: color .35s; }
.rd-proof-auto .pipe__auto-item svg { transition: opacity .3s, transform .3s; }
.rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) { color: var(--color-lyd-secondary); }
.rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) svg { opacity: .3; transform: scale(.8); }
html.pm .rd-proof-auto .pipe__auto-item.is-done svg { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
/* the chip: a reset row keeps pm-pop from replaying; the flip pops it under its own name */
html.pm .rd-proof-pipe .rd-proof-row.is-reset .pipe__status { animation: none; }
html.pm .rd-proof-pipe .rd-proof-row.is-flip .pipe__status { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
/* premium-motion's tbody rule (.pm .pipe__table tbody.pm-stagger > tr, 0,3,2) outranks the .pm-in reset (0,3,0), so the
   rows were parked 10px left for good and the frame clipped their left edge. Let them finish their slide here. */
html.pm .rd-proof-pipe .pipe__table tbody.pm-stagger.pm-in > tr { transform: none; }
/* a 4px gold rule shows on the row for a moment when it flips */
.rd-proof-row th[scope="row"] { position: relative; }
.rd-proof-row th[scope="row"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); opacity: 0; pointer-events: none; }
html.pm .rd-proof-row.is-flip th[scope="row"]::before { animation: rd-proof-rule 1.5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rd-proof-rule { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- R13 /how-it-works: the hand-off token stops honestly ---------- */
.rd-proof-handoff .handoff__gap-rule { position: relative; }
/* the token is as long as the rule, so translate percentages are rule lengths; it stops at 46% until the figure carries data-rd-shipped */
.rd-proof-token { position: absolute; inset: 0; pointer-events: none; opacity: 0; --rd-proof-stop: 46%; }
.rd-proof-handoff[data-rd-shipped] .rd-proof-token { --rd-proof-stop: 100%; }
.rd-proof-token::before, .rd-proof-token::after { content: ""; position: absolute; left: 0; top: -1px; width: .7rem; height: .7rem; border-radius: 50%; transform: translate(-50%, -50%); }
.rd-proof-token::before { background: var(--gold); }
.rd-proof-token::after { border: 2px solid var(--gold); opacity: 0; }
html.pm .rd-proof-handoff.is-run .rd-proof-token { opacity: 1; transform: translateX(var(--rd-proof-stop)); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
html.pm .rd-proof-handoff.is-halt .rd-proof-token::after { animation: rd-proof-ring .9s ease-out 2; }
@keyframes rd-proof-ring { from { transform: translate(-50%, -50%) scale(1); opacity: .7; } to { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } }
@media (max-width: 767px) {
  /* the bundle turns the rule vertical (border-left) here; the token travels down it */
  .rd-proof-token::before, .rd-proof-token::after { left: -1px; top: 0; }
  html.pm .rd-proof-handoff.is-run .rd-proof-token { transform: translateY(var(--rd-proof-stop)); }
}
.rd-proof-step.is-lit .handoff__tick { background: var(--gold); color: var(--ink-2); }
html.pm .rd-proof-step.is-lit .handoff__tick { animation: rd-proof-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
.rd-proof-handoff .handoff__gap-chip { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.rd-proof-handoff.is-halt .handoff__gap-chip { outline: 1px solid var(--gold-ink); outline-offset: 2px; transform: translateY(-2px); }
.rd-proof-handoff .handoff__gap-note { transition: color .4s; }
.rd-proof-handoff.is-halt .handoff__gap-note { color: var(--color-lyd-ink); }

/* ---------- R14 /features: the referral race, in speed order ---------- */
.rd-proof-line { position: relative; height: 1px; background: rgba(20, 38, 45, .18); }
.rd-proof-pip { position: absolute; inset: 0; }
.rd-proof-pip::before { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); }
.rd-proof-race.is-play .rd-proof-pip { transform: translateX(calc(100% - .5rem)); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
/* outcomes hide by opacity only, so every row keeps its height and its text stays in the accessibility tree */
.rd-proof-race.is-arm .rd-proof-out { opacity: 0; transform: translateX(6px); }
.rd-proof-race.is-play .rd-proof-out { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.16, 1, .3, 1) calc(.7s + var(--o, 0) * 650ms), transform .5s cubic-bezier(.16, 1, .3, 1) calc(.7s + var(--o, 0) * 650ms); }
.rd-proof-race:not(.is-play) :is(.rd-proof-out, .rd-proof-pip) { transition: none; }
/* the winning row's pulse moves to a pseudo: luxe's !important shadow on the row blocks pm-win there */
html.pm section.pm-in .rd-proof-race .race-win { animation: none; }
.rd-proof-race .race-win { position: relative; }
.rd-proof-race .race-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
html.pm .rd-proof-race.is-play .race-win::after { animation: rd-proof-win 1.4s ease-out .7s both; }
@keyframes rd-proof-win { 0% { box-shadow: 0 0 0 0 rgba(220, 177, 58, .55); opacity: 1; } 100% { box-shadow: 0 0 0 18px rgba(220, 177, 58, 0); opacity: 1; } }
.rd-proof-replay--race { margin-top: .75rem; min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  /* on-demand Replay still steps the states; nothing slides or scales */
  .rd-proof-auto .pipe__auto-item svg, .rd-proof-handoff .handoff__gap-chip { transition: none; }
  .rd-proof-auto.is-armed .pipe__auto-item:not(.is-done) svg { transform: none; }
  .rd-proof-race.is-arm .rd-proof-out { transform: none; }
  .rd-proof-race.is-play .rd-proof-out { transition: opacity .3s calc(.7s + var(--o, 0) * 650ms); }
  .rd-proof-race.is-play .rd-proof-pip { transition: none; }
}


/* ==== rich-tiers.css ==== */
/* rich-tiers: pricing ladder (R7), estimator receipt + phone bar (R8), compare-table spotlight (R9).
   Scope: main :is([data-section="pricing"], #plans) for the tiers. Colours key on html.luxe (the band is
   data-band="cream" in HTML and swapped to deep by premium.js only under .luxe); the cream/no-JS state gets
   gold-ink text and ink hairlines. Motion behind html.pm only; transform/opacity; no gradients. */

/* ---------- R7: display numerals ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-price { flex-wrap: wrap; align-items: baseline; }
main :is([data-section="pricing"], #plans) .rd-tier-num {
  font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 3.2vw, 3.25rem) !important; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* /pricing: the figure is a "$" text node plus span.price (" 220 ", written by the inline billing script);
   as flex items the span's edge whitespace collapses, so it reads "$220" without touching its textContent */
main #plans .rd-tier-num .rd-mask__in { display: inline-flex; align-items: baseline; }
main :is([data-section="pricing"], #plans) .rd-tier-unit { font-size: 0.7rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-lyd-gold-ink); }
html.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-num { color: var(--gold-2, #f1d27c) !important; }
html.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-unit { color: var(--gold-2, #f1d27c) !important; }
/* the "$" and the comma of $1,450 must clear the mask (line-height .95 leaves ~.22em below the baseline, plus
   this .1em); any more and the tops of the glyphs peek out below the mask while translated 112% */
main :is([data-section="pricing"], #plans) .rd-tier-price .rd-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* the unit follows its figure in rather than floating alone while the plate rises */
.pm main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-tier-unit { opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 120ms + 0.7s); }
.pm main :is([data-section="pricing"], #plans) [data-slot="card"].pm-in .rd-tier-unit,
.pm main :is([data-section="pricing"], #plans) .pm-stagger.pm-in > [data-slot="card"] .rd-tier-unit { opacity: 1; }
/* beats luxe's [data-slot="card"] :is(span) recolour (0,4,3): the masked figure inherits the numeral colour */
.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-mask,
.luxe main :is([data-section="pricing"], #plans) [data-slot="card"] .rd-mask .rd-mask__in { color: inherit; }
/* reveal: each figure rises after its card, 120ms apart (--i inherits from the card's inline style) */
.pm .pm-stagger.pm-in > [data-slot="card"] .rd-mask__in { transition-delay: calc(var(--i, 0) * 120ms + 0.25s); }

/* ---------- R7: ledger rules (height-neutral margin-for-padding swap) ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-ledger > li { margin: 0 !important; }
/* the 1px rule is taken out of the padding so the list keeps exactly the height space-y gave it */
main [data-section="pricing"] .rd-tier-ledger > li + li { padding-top: calc(0.625rem - 1px); border-top: 1px solid rgba(20, 38, 45, 0.08); }
main #plans .rd-tier-ledger > li + li { padding-top: calc(0.75rem - 1px); border-top: 1px solid rgba(20, 38, 45, 0.08); }
.luxe main :is([data-section="pricing"], #plans) .rd-tier-ledger > li + li { border-top-color: rgba(255, 255, 255, 0.08); }

/* ---------- R7: the ladder (>=1024, pm or pm-static) ---------- */
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host { position: relative; }
main :is([data-section="pricing"], #plans) .rd-tier-ladder { position: absolute; inset: 0; pointer-events: none; display: none; }
@media (min-width: 1024px) {
  html.pm main :is([data-section="pricing"], #plans) .rd-tier-ladder,
  html.pm-static main :is([data-section="pricing"], #plans) .rd-tier-ladder { display: block; }
}
main :is([data-section="pricing"], #plans) .rd-tier-ladder__link {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1px;
  background: rgba(20, 38, 45, 0.45); opacity: 0.55; transform: scaleX(0); transform-origin: left; transition: opacity 0.3s;
}
.luxe main :is([data-section="pricing"], #plans) .rd-tier-ladder__link { background: #f1d27c; }
.pm main :is([data-section="pricing"], #plans) .pm-stagger.pm-in .rd-tier-ladder__link { transform: none; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.6s + (var(--n, 1) - 1) * 0.25s), opacity 0.3s; }
.pm-static main :is([data-section="pricing"], #plans) .rd-tier-ladder__link { transform: none; }
/* hover/focus inside the receiving card brightens its link; nothing else changes */
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host:has(> [data-slot="card"]:nth-child(2):is(:hover, :focus-within)) .rd-tier-ladder__link[data-to="1"],
main :is([data-section="pricing"], #plans) .rd-tier-ladder-host:has(> [data-slot="card"]:nth-child(3):is(:hover, :focus-within)) .rd-tier-ladder__link[data-to="2"] { opacity: 1; }
/* under 1024: a static tick above the "Everything in …" bullet disc stands in for the ladder */
@media (max-width: 1023px) {
  main :is([data-section="pricing"], #plans) .rd-tier-inherit { position: relative; }
  main :is([data-section="pricing"], #plans) .rd-tier-inherit::before { content: ""; position: absolute; left: calc(0.5rem - 0.5px); top: -0.85rem; width: 1px; height: 0.65rem; background: rgba(20, 38, 45, 0.45); }
  .luxe main :is([data-section="pricing"], #plans) .rd-tier-inherit::before { background: #f1d27c; }
}

/* ---------- R8: receipt ---------- */
main .rd-tier-receipt { position: relative; }
main .rd-tier-row { position: relative; }
main .rd-tier-row::before { content: ""; position: absolute; left: -0.75rem; top: 0; bottom: 0; width: 2px; background: #dcb13a; opacity: 0; pointer-events: none; }
.pm main .rd-tier-changed::before { animation: rd-tier-pulse 0.4s ease-out both; }
@keyframes rd-tier-pulse { from { opacity: 1; } to { opacity: 0; } }
main .rd-tier-ghost { position: absolute; margin: 0 !important; pointer-events: none; white-space: nowrap; color: inherit; animation: rd-tier-out 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes rd-tier-out { from { opacity: 1; } to { opacity: 0; } }
.pm main .rd-tier-in { animation: rd-tier-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rd-tier-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* the plan's own inclusion list, under the terms line (filled by JS from the plan card's template; without JS the
   estimator itself is static, so the disclosure stays out of the way) */
main .rd-tier-inc { margin-top: 1rem; border-top: 1px solid rgba(20, 38, 45, 0.12); }
html:not(.js) main .rd-tier-inc { display: none; }
main .rd-tier-inc__sum { min-height: 2.75rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none; color: #14262d; }
main .rd-tier-inc__sum::-webkit-details-marker { display: none; }
main .rd-tier-inc__sum::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
main .rd-tier-inc[open] .rd-tier-inc__sum::after { transform: rotate(-135deg) translateY(-2px); }
main .rd-tier-inc__sum:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
main .rd-tier-inc__list { margin: 0 0 0.25rem; padding: 0; list-style: none; }
main .rd-tier-inc__list li { padding: 0.4rem 0; border-top: 1px solid rgba(20, 38, 45, 0.08); font-size: 0.875rem; line-height: 1.45; color: #14262d; }
main .rd-tier-inc__list li:first-child { border-top: 0; }

/* ---------- R8: fixed phone bar (<1024) ---------- */
main .rd-tier-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem calc(5rem + env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) 1rem;
  background: var(--ivory-2, #faf8f4); border-top: 1px solid rgba(20, 38, 45, 0.12);
}
main .rd-tier-bar[hidden] { display: none; }
main .rd-tier-bar__meta { flex: 1; min-width: 0; }
main .rd-tier-bar__label { display: block; font-size: 0.625rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7d5f14; }
main .rd-tier-bar__total { display: block; font-family: "Manrope", var(--font-display), sans-serif; font-weight: 800; font-size: 1.0625rem; line-height: 1.2; color: #14262d; font-variant-numeric: tabular-nums; }
main .rd-tier-bar__cta.btn { flex: none; min-height: 2.75rem; padding: 0 0.85rem; font-size: 0.8125rem; white-space: nowrap; }
@media (min-width: 1024px) { main .rd-tier-bar { display: none !important; } }
.pm main .rd-tier-bar:not([hidden]) { animation: rd-tier-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rd-tier-rise { from { transform: translateY(100%); } to { transform: none; } }
html.rd-tier-bar-on #v2-cap-trigger-float { display: none !important; }

/* ---------- R9: compare table ---------- */
main .rd-tier-cmp__col {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0;
  padding: 0.75rem 0; margin: -0.75rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; position: relative; cursor: pointer;
}
main .rd-tier-cmp__col:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; }
/* pressed = underline + column tint + aria, never colour alone */
main .rd-tier-cmp__col[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; background: #dcb13a; }
/* the baked Elevate tint yields to the JS spotlight (no-JS keeps it, agreeing with aria-pressed="true").
   premium-luxe paints any [class*="bg-lyd-yellow"][class*="p-"] #f8efd6 !important at ~(0,13,4) and premium.css
   rounds it 1.5rem — the p-5 cells match both — so the yield carries the :not(._a)…:not(._j) idiom. */
html.luxe main .rd-tier-cmp.rd-tier-cmp--js :is(th, td)[class*="bg-lyd-yellow/25"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
main .rd-tier-cmp.rd-tier-cmp--js :is(th, td)[class*="bg-lyd-yellow/25"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
main .rd-tier-cmp tbody tr:hover > * { background-color: rgba(20, 38, 45, 0.04); }
/* spotlight, declared after the yield at the same weight so it wins; switches instantly (no colour animation) */
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="1"] :is(th, td):nth-child(2):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="2"] :is(th, td):nth-child(3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j),
html main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="3"] :is(th, td):nth-child(4):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(220, 177, 58, 0.14) !important; box-shadow: inset 1px 0 0 #dcb13a, inset -1px 0 0 #dcb13a; }
main .rd-tier-cmp td { position: relative; }
/* the "adds" marker lives in the p-5 padding: no layout shift */
main .rd-tier-adds::before { content: ""; position: absolute; left: 0.45rem; top: 1.7rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #dcb13a; }
.pm main .rd-tier-adds::before { animation: rd-tier-dot 0.3s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--r, 0) * 60ms) both; }
@keyframes rd-tier-dot { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* verifier fix (8 Sep): the inner price span on /pricing was recoloured by luxe's card :is(span) rule; make it inherit the numeral colour */
.luxe main #plans [data-slot="card"] .rd-tier-num .rd-mask__in .price, .luxe main #plans [data-slot="card"] .rd-tier-num .price { color: inherit !important; }


/* ==== services.css ==== */
/* ===== Example provider service pages (/services/*) ===== */

/* --- demo ribbon: sits directly under the fixed 5.5rem header --- */
main.svc-page { padding-top: 5.5rem !important; }
/* light strip (mint tint, teal text) so the page keeps exactly two dark bands: plum editorial + petrol closing */
main.svc-page .demo-ribbon:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-top: 0; background: #e2f2ea !important; color: #0f5c63 !important; border-bottom: 1px solid rgba(15, 92, 99, 0.18); font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.4; }
main.svc-page .demo-ribbon__inner { margin: 0 auto; max-width: 80rem; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
@media (min-width: 768px) { main.svc-page .demo-ribbon__inner { padding-left: 2rem; padding-right: 2rem; } }
main.svc-page .demo-ribbon__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #0f5c63; box-shadow: 0 0 0 4px rgba(15, 92, 99, 0.14); flex: none; }
main.svc-page .demo-ribbon__label:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #0f5c63 !important; font-weight: 600; letter-spacing: 0.01em; }
main.svc-page .demo-ribbon__link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-left: auto; gap: 0.4rem; color: #0f5c63 !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15, 92, 99, 0.35); text-underline-offset: 3px; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 0.25rem; }
main.svc-page .demo-ribbon__link:hover:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { color: #0b3f44 !important; text-decoration-color: currentColor; }
/* the hero no longer needs to clear the header itself */
main.svc-page > section.hero-interior.svc-hero:first-of-type { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
@media (max-width: 767px) { main.svc-page .demo-ribbon { font-size: 0.75rem; } main.svc-page .demo-ribbon__inner { flex-wrap: nowrap; padding-top: 0.6rem; padding-bottom: 0.6rem; } main.svc-page .demo-ribbon__link:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { display: none !important; } }

/* --- body band: lede + tinted "what this includes" cards, sticky services card --- */
main.svc-page section.svc-body .svc-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { main.svc-page section.svc-body .svc-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
main.svc-page section.svc-body p.svc-lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important; line-height: 1.5 !important; color: var(--color-lyd-ink); opacity: 1; max-width: 40rem; font-weight: 400; }
html main.svc-page section.svc-body h2.svc-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-top: clamp(2.5rem, 4vw, 3.5rem); font-size: var(--text-display-3) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; color: var(--color-lyd-ink); }
main.svc-page section.svc-body h2.svc-h2::before { content: ""; display: block; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); margin-bottom: 1rem; }

main.svc-page .svc-includes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { main.svc-page .svc-includes { grid-template-columns: 1fr 1fr; } }
main.svc-page .svc-include { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(20, 38, 45, 0.1); min-height: 9rem; }
main.svc-page .svc-include .svc-disc:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { width: 2.25rem; height: 2.25rem; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex: none; }
main.svc-page .svc-include .svc-check { width: 0.95rem; height: 0.95rem; color: #fff; }
main.svc-page .svc-include__text { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--color-lyd-ink); font-weight: 500; }

/* sticky card */
main.svc-page .svc-side { position: relative; }
@media (min-width: 1024px) { main.svc-page .svc-side { position: sticky; top: 7.5rem; } }
main.svc-page .svc-card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #fff !important; border: 1px solid rgba(20, 38, 45, 0.1) !important; border-radius: 1.5rem !important; margin-top: 0 !important; }
main.svc-page .svc-card [data-slot="card-content"] { padding: 1.75rem; }
main.svc-page .svc-card .svc-card__h { font-family: var(--font-display); font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--color-lyd-ink); }
main.svc-page .svc-card .svc-card__h::after { content: ""; display: block; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--color-lyd-yellow-deep); margin-top: 0.75rem; }
main.svc-page .svc-card .svc-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid rgba(20, 38, 45, 0.1); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--color-lyd-ink); text-decoration: none; transition: color 0.2s, padding-left 0.2s; }
main.svc-page .svc-card .svc-link::after { content: "→"; color: #7d5f14; font-weight: 400; transition: transform 0.2s; }
main.svc-page .svc-card .svc-link:hover { color: #7d5f14; padding-left: 0.5rem; }
main.svc-page .svc-card .svc-link:hover::after { transform: translateX(3px); }
main.svc-page .svc-card .svc-link:last-of-type { border-bottom: 0; }
main.svc-page .svc-card .space-y-1 > * + * { margin-top: 0; }
main.svc-page .svc-card a.btn.w-full { width: 100%; }

/* --- editorial photo band (plum: the one non-petrol dark band on the page) --- */
main.svc-page section.svc-editorial[data-band="deep"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--plum) !important; color: #dfe7ea; }
main.svc-page section.svc-editorial .svc-editorial__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { main.svc-page section.svc-editorial .svc-editorial__grid { grid-template-columns: 0.95fr 1.05fr; gap: 4.5rem; } }
main.svc-page section.svc-editorial .svc-photo { aspect-ratio: 4 / 3; max-height: 30rem; }
main.svc-page section.svc-editorial .svc-photo::after { background: linear-gradient(180deg, rgba(43, 26, 78, 0) 55%, rgba(43, 26, 78, 0.55) 100%); }
main.svc-page section.svc-editorial .svc-photo::before { box-shadow: inset 0 0 0 1px rgba(241, 210, 124, 0.35); }
main.svc-page section.svc-editorial .td-kicker-light { color: #d9c6ff; }
main.svc-page section.svc-editorial .td-kicker-light::before { background: linear-gradient(90deg, #c9b2ff, #f1d27c) !important; }
main.svc-page section.svc-editorial p.svc-editorial__p { font-family: var(--font-display); font-size: clamp(1.375rem, 2.3vw, 2rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: #fff !important; max-width: 30ch; }
main.svc-page section.svc-editorial .btn-ghost-dark { border-color: rgba(241, 210, 124, 0.5) !important; }

/* --- closing band directly after plum: separate them with a hairline --- */
main.svc-page section.svc-editorial + section.closing-band { border-top: 1px solid rgba(255, 255, 255, 0.12); }

@media (max-width: 767px) {
  main.svc-page .svc-include { padding: 1.25rem; min-height: 0; flex-direction: row; align-items: flex-start; }
  main.svc-page section.svc-editorial .svc-photo { aspect-ratio: 5 / 4; }
}

/* --- polish pass: services --- */
/* the plum editorial band sat straight on the petrol closing band: one hue jump, 1000px of dark.
   Petrol keeps the page on the anchor colour. */
main.svc-page section.svc-editorial[data-band="deep"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: var(--color-lyd-deep) !important; }
main.svc-page section.svc-editorial .svc-photo::after { background: linear-gradient(180deg, rgba(6, 22, 28, 0) 55%, rgba(6, 22, 28, 0.6) 100%) !important; }
main.svc-page section.svc-editorial .td-kicker-light::before { background: linear-gradient(90deg, #dcb13a, #f1d27c) !important; }
main.svc-page section.svc-editorial .td-kicker-light, main.svc-page section.svc-editorial .td-kicker { color: #f1d27c !important; }
main.svc-page section.svc-editorial .td-kicker::before, main.svc-page section.svc-editorial .td-kicker-light::before { background: #dcb13a !important; }
/* "what this includes" becomes one material instead of a four-colour pastel grid */
main.svc-page .svc-include, main.svc-page .svc-include.tint-sky, main.svc-page .svc-include.tint-lilac, main.svc-page .svc-include.tint-mint, main.svc-page .svc-include.tint-peach { background: #fff !important; border: 1px solid var(--color-lyd-line-strong) !important; }
main.svc-page .svc-include .svc-disc, main.svc-page .svc-include .disc, main.svc-page .svc-include [class*="rounded-full"] { background: var(--color-lyd-deep) !important; color: #f1d27c !important; }
/* the compact homepage layer was flattening recipe card padding */
main.svc-page .svc-card.card-lyd { padding: 0 !important; }
main.svc-page .svc-card [data-slot="card-content"] { padding: 1.75rem !important; }


/* ==== variants.css ==== */
/* ===== variants group: home design showcase pages + legal ===== */
/* ---- hero grounds per variant ---- */
.luxe main[data-variant="modern"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="modern"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(180deg, #e3ecf7 0%, #f3f1ec 100%) !important; }
.luxe main[data-variant="warm"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="warm"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: linear-gradient(180deg, #fbe8d6 0%, #f3f1ec 100%) !important; }
.luxe main[data-variant="bold"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-variant="bold"] section.var-hero:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: #2b1a4e !important; }
main[data-variant] section.var-hero::before, main[data-variant] section.var-hero::after { display: none !important; }
main[data-variant="bold"] section.var-hero h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; font-size: clamp(2.75rem, 5.6vw, 4.5rem) !important; color: #fff !important; }
main[data-variant="bold"] section.var-hero p { color: #dfe7ea !important; }
main[data-variant="modern"] section.var-hero h1 { font-weight: 600 !important; letter-spacing: -0.02em !important; }
main[data-variant="warm"] section.var-hero .hero-photo { border-radius: 2.5rem !important; }
main[data-variant="warm"] section.var-hero .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(184, 66, 46, 0.35) !important; }
main[data-variant="modern"] section.var-hero .hero-photo { border-radius: 1rem !important; }
main[data-variant="modern"] section.var-hero .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(34, 58, 102, 0.3) !important; }
main[data-variant="modern"] section.var-hero .hero-photo img { filter: saturate(0.7) contrast(1.04) !important; }
main[data-variant="bold"] section.var-hero .hero-photo { border-radius: 0.75rem !important; box-shadow: 0 0 0 6px rgba(241, 210, 124, 0.18), 0 40px 90px -40px rgba(0, 0, 0, 0.8) !important; }
main[data-variant] section.var-hero .hero-photo figcaption .kicker-mini { color: #f1d27c; }
main[data-variant] section.var-hero { padding-bottom: clamp(3rem, 6vw, 5rem) !important; }

/* ---- closing bands: deep petrol like every page, variant expressed only via panel radius ---- */
main[data-variant] section.var-close { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
main[data-variant] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 1.5rem !important; padding: clamp(2rem, 4vw, 3.5rem) !important; text-align: left !important; }
main[data-variant] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-top: 3px solid #dcb13a !important; }
main[data-variant="warm"] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-radius: 2.5rem !important; }
main[data-variant="bold"] section.var-close .var-panel:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-radius: 0.75rem !important; }
main[data-variant] section.var-close .var-panel > div:first-child { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { main[data-variant] section.var-close .var-panel > div:first-child { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } main[data-variant] section.var-close .var-panel p { margin-top: 0.4rem !important; } }
main[data-variant] section.var-close .var-panel-h2 { text-align: left !important; margin: 0 !important; color: #fff !important; font-weight: 700 !important; }
main[data-variant="bold"] section.var-close .var-panel-h2 { font-weight: 800 !important; }
main[data-variant] section.var-close .var-panel p { color: #dfe7ea !important; max-width: 40rem; }
main[data-variant] section.var-close .var-other h3.td-kicker { display: flex !important; margin: 0 0 1rem !important; font-family: var(--font-sans) !important; font-size: 0.6875rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600 !important; color: #f1d27c !important; }
main[data-variant] section.var-close .var-other { margin-top: 2.5rem !important; }

/* ---- legal pages ---- */
main[data-legal] > section.hero-interior .text-lede { max-width: 48rem; }
main[data-legal] section.legal-body { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
main[data-legal] .legal-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { main[data-legal] .legal-layout { grid-template-columns: 16rem minmax(0, 48rem); gap: 5rem; } }
main[data-legal] .legal-toc { align-self: start; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid rgba(20, 38, 45, 0.1); border-radius: 1.5rem; }
main[data-legal] .legal-toc .td-kicker { margin-bottom: 0.9rem; }
main[data-legal] .legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: toc; }
main[data-legal] .legal-toc li { counter-increment: toc; }
main[data-legal] .legal-toc a { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.45rem 0; font-family: var(--font-sans); font-size: 0.9375rem; color: #14262d; text-decoration: none; border-bottom: 1px solid rgba(20, 38, 45, 0.08); }
main[data-legal] .legal-toc li:last-child a { border-bottom: 0; }
main[data-legal] .legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; color: #7d5f14; letter-spacing: 0.04em; }
main[data-legal] .legal-toc a:hover { color: #7d5f14; }
main[data-legal] .legal-prose { max-width: 48rem; }
main[data-legal] .legal-h2 { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; letter-spacing: -0.02em; line-height: 1.15; color: #14262d !important; margin-top: 3rem !important; padding-top: 1.25rem; position: relative; scroll-margin-top: 6rem; }
main[data-legal] .legal-h2:first-child { margin-top: 0 !important; }
main[data-legal] .legal-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px; background: #dcb13a; }
main[data-legal] .legal-p { font-size: 1.0625rem !important; line-height: 1.7 !important; color: #4e565b !important; margin-top: 1rem !important; }

/* ---- overrides that must beat the luxe layer ---- */
.luxe main[data-legal] .legal-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-legal] .legal-h2:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { text-align: left !important; font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; letter-spacing: -0.02em !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.luxe main[data-legal] .legal-p:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j), main[data-legal] .legal-p:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { text-align: left !important; margin-left: 0 !important; }
@media (min-width: 1024px) {
  main[data-variant] section.var-hero .hero-grid { grid-template-columns: minmax(0, 1fr) 27rem !important; gap: 5rem !important; align-items: center; }
  main[data-variant] section.var-hero .hero-grid > div:first-child { max-width: none !important; }
  main[data-variant] section.var-hero .hero-grid h1 { max-width: 14ch; }
  main[data-variant] section.var-hero .hero-photo { width: 27rem !important; aspect-ratio: 4 / 5 !important; max-height: 34rem !important; }
}
main[data-variant] section.var-hero .hero-grid p { max-width: 36rem; }
main[data-variant] > section.var-hero .band-inner > .hero-grid { max-width: none !important; }
@media (min-width: 1024px) { main[data-variant] section.var-hero .hero-grid h1 { max-width: 18ch !important; } }
/* lede sits flush-left under the h1 on these pages */
.luxe main[data-variant] section.var-hero .text-lede, main[data-variant] section.var-hero .text-lede, .luxe main[data-legal] > section.hero-interior .text-lede, main[data-legal] > section.hero-interior .text-lede { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }

/* hero flush under the fixed header (main.pt-32 removed in the recipe); hero pads for the 5.5rem header itself */
main[data-variant] > section.var-hero:first-child { margin-top: 0 !important; padding-top: clamp(8.5rem, 12vw, 10.5rem) !important; }

/* bold: hairline seam between the plum hero and the petrol closing band */
main[data-variant="bold"] section.var-close { border-top: 1px solid rgba(255, 255, 255, 0.12); }


/* ==== zz-about-rebuild.css ==== */
/* the About page's new bands: one measure, generous leading, nothing decorative */
/* NOT margin-inline: auto. That rule centred the reading column at 272px while the H1, the
   stats strip and the founder block all sat at 112, and the page read as two documents
   stacked on top of each other. The measure is still capped; it just starts where the rest
   of the page starts. */
main .ab-sec .band-inner > .max-w-4xl { margin-inline: 0; }
main .ab-sec h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
/* the Launch Your Dream Series list: a card per product, two up, three at desktop */
main .ab-prods { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 640px) { main .ab-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main .ab-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main .ab-prod { padding: 1.25rem 1.35rem; background: #fff; border: 0.8px solid rgba(10, 10, 11, 0.1); }
main .ab-prod__n { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
main .ab-prod__d { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
/* the FAQ: native disclosures, so keyboard and screen-reader behaviour comes free */
main .ab-faq { margin-top: 1.75rem; border-top: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-faq__row { border-bottom: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-faq__q {
  cursor: pointer; list-style: none; padding: 1.05rem 2.25rem 1.05rem 0; position: relative;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
}
main .ab-faq__q::-webkit-details-marker { display: none; }
main .ab-faq__q::after {
  content: ""; position: absolute; right: 0.35rem; top: 1.5rem; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s;
}
main .ab-faq__row[open] .ab-faq__q::after { transform: rotate(-135deg); }
main .ab-faq__q:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .ab-faq__a { padding: 0 0 1.15rem; }
main .ab-faq__a p { margin: 0; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { main .ab-faq__q::after { transition: none; } }

/* ---------- the counted strip under the hero ---------- */
main .ab-stats-sec { padding-top: 0; padding-bottom: 1.5rem; margin-top: -1.5rem; }
/* No outer box. A bordered strip put its first numeral 32px inside the page's text edge, which
   breaks the single left edge every other block on this page shares - the thing align.cjs exists
   to catch. Dividers between the cells carry the structure instead, and the first cell has no
   left padding, so the "2024" starts exactly where the H1 does. */
main .ab-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(10, 10, 11, 0.12);
  border-bottom: 1px solid rgba(10, 10, 11, 0.12);
}
@media (min-width: 768px) { main .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main .ab-stat { padding: 1.35rem 1.25rem; border-left: 1px solid rgba(10, 10, 11, 0.12); }
main .ab-stat:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 767px) { main .ab-stat:nth-child(3) { padding-left: 0; border-left: 0; } }
main .ab-stat__n {
  display: block; font-family: var(--font-display, inherit); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;   /* so a counting figure does not jiggle its own width */
}
main .ab-stat__l { display: block; margin-top: 0.45rem; font-size: 0.875rem; line-height: 1.4; }

/* ---------- the product cards, now mostly links ---------- */
main a.ab-prod--link { display: block; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; }
main a.ab-prod--link:hover { transform: translateY(-3px); }
main a.ab-prod--link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .ab-prod__go { display: inline-block; margin-left: 0.35rem; font-size: 0.8em; transition: transform 0.3s; }
main a.ab-prod--link:hover .ab-prod__go { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  main a.ab-prod--link, main .ab-prod__go { transition: none; }
  main a.ab-prod--link:hover { transform: none; }
}


/* ==== zz-cro.css ==== */
/* ---------------- the sticky CTA bar (mobile only) ---------------- */
.cro-bar { display: none; }
@media (max-width: 1023px) {
  .cro-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: 0.9rem;
    /* the chat widget sits bottom-right; leave it room rather than fighting it for the corner */
    padding: 0.7rem 5.5rem 0.7rem 1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 11, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .cro-bar[hidden] { display: none; }
  .cro-bar__t {
    flex: 1 1 auto; margin: 0; min-width: 0;
    color: rgba(255, 255, 255, 0.86); font-size: 0.8125rem; line-height: 1.35; font-weight: 600;
  }
  .cro-bar__btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  /* the bar covers the foot of the page, so give the page somewhere to end */
  html.cro-bar-on body { padding-bottom: 4.5rem; }
}
@media (max-width: 419px) { .cro-bar__t { display: none; } .cro-bar { justify-content: flex-end; } }

/* ---------------- /pricing: the folded restatement bands ---------------- */
main section.cro-folded { padding-block: 0 !important; }
main details.cro-fold { border-top: 1px solid rgba(10, 10, 11, 0.12); }
main details.cro-fold > summary.cro-fold__sum {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em;
}
main details.cro-fold > summary.cro-fold__sum::-webkit-details-marker { display: none; }
main details.cro-fold > summary.cro-fold__sum::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.55rem; width: 0.62rem; height: 0.62rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s;
}
main details.cro-fold[open] > summary.cro-fold__sum::after { transform: rotate(-135deg); }
main details.cro-fold > summary.cro-fold__sum:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main .cro-fold__body { padding-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { main details.cro-fold > summary.cro-fold__sum::after { transition: none; } }

/* ---------------- demoted primaries ---------------- */
/* Two rules were tried here and both were wrong in the same way: they guessed the ground from
   the section. "On a dark band" is not "on a dark ground" - a button inside a white card on a
   dark band is on white - and the fix for that then caught a button genuinely on the band and
   made it ink on near-black. Ping-pong, because CSS cannot ask what colour is actually behind
   an element.

   So it stops guessing. The button INHERITS its container's colour, and the container's colour
   is already correct for whatever it sits on, because that is what the band grammar and the
   card rules have been doing all along. One rule, no ground detection, right in both places.
   The border follows the same colour at a third of its strength, with a neutral fallback for
   engines without color-mix. */
html.vc-site #main a.cro-demoted,
html.sa-skin-vcpility #main a.cro-demoted {
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  border: 1px solid rgba(128, 128, 128, 0.45) !important;
  border-color: color-mix(in srgb, currentColor 38%, transparent) !important;
  box-shadow: none !important;
}
html.vc-site #main a.cro-demoted:hover,
html.sa-skin-vcpility #main a.cro-demoted:hover {
  border-color: var(--vc-accent-fill, #D40F17) !important;
}


/* ==== zz-itteam.css ==== */
/* NOTE: the gradient band rules that used to sit here are in premium-vcpility.css instead.
   Recipe CSS is concatenated into premium-pages.css, which loads BEFORE the colour and skin
   layers, so `main section[data-band="grad"]` lost to them silently and the band came out as
   the light base with white text on it. Anything that has to beat the palette belongs in the
   last sheet, at ID weight. */

/* ---------------- the AI-native IT team band ---------------- */
main .it-team { padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
main .it-kicker {
  display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
main .it-h {
  margin: 1.1rem 0 0; max-width: 26ch;
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700;
}
main .it-lede { margin: 1rem 0 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.65; }
main .it-lede strong { font-weight: 700; }
main .it-grid { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { main .it-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main .it-card {
  padding: 1.6rem 1.5rem 1.75rem;
  background: rgba(10, 10, 30, 0.34); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.pm main .it-card:hover { border-color: rgba(255, 255, 255, 0.34); transform: translateY(-3px); }
main .it-card__ic {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  background: rgba(255, 255, 255, 0.1); color: var(--vc-accent-soft, #FF9A93);
}
main .it-card__ic svg { width: 1.25rem; height: 1.25rem; }
/* the first card's icon swapped for a photo thumbnail (11 Sep 2026, owner review): same slot,
   scaled up a little since a photo reads as noise at icon size, rounded to match the badge it
   replaces rather than the card's own square corners. */
main .it-card__ic--photo { width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; background: none; border-radius: 0.75rem; }
main .it-card__ic--photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% 68%;
  /* same clip-path reveal trap as the hero photo (see .sa-hero__frame--photo img) */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
main .it-card__t { margin: 1.1rem 0 0; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
main .it-card__b { margin: 0.65rem 0 0; font-size: 0.9375rem; line-height: 1.62; }
main .it-foot {
  margin-top: 1rem; padding: 1.5rem;
  background: rgba(10, 10, 30, 0.34); border: 1px solid rgba(255, 255, 255, 0.12);
}
main .it-foot__t { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; }
main .it-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
main .it-chip {
  padding: 0.5rem 0.95rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff !important; font-size: 0.875rem; font-weight: 600;
}

/* ---------------- the After-Hours Playbook ---------------- */
main .pb-trigger {
  flex: 0 0 auto; min-height: 44px; padding: 0.5rem 0.25rem; background: none; border: 0;
  color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 0.9375rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
main .pb-trigger:hover { color: #fff; }
main .pb-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
main .pb {
  display: grid; gap: 1.5rem; margin-bottom: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(10, 10, 30, 0.42); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
main .pb[hidden] { display: none; }
@media (min-width: 900px) { main .pb { grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; } }
main .pb__kicker {
  display: block; color: var(--vc-accent-soft, #FF9A93) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
main .pb__h {
  margin: 0.8rem 0 0; color: #fff !important;
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.14; letter-spacing: -0.03em; font-weight: 700;
}
main .pb__lede { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
main .pb__list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
main .pb__list li { position: relative; padding-left: 2rem; font-size: 0.9375rem; line-height: 1.5; color: #fff !important; }
main .pb__list li::before {
  content: ""; position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
}
main .pb__list li::after {
  content: ""; position: absolute; left: 0.38rem; top: 0.4em; width: 0.45rem; height: 0.24rem;
  border-left: 2px solid var(--vc-accent-soft, #FF9A93); border-bottom: 2px solid var(--vc-accent-soft, #FF9A93);
  transform: rotate(-45deg);
}
main .pb__form { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: rgba(6, 8, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); }
main .pb__fh { margin: 0 0 1.1rem; color: #fff !important; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
main .pb__lbl {
  display: block; margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
main .pb__in {
  display: block; width: 100%; min-height: 48px; margin: 0 0 1.1rem; padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff !important; font: inherit; font-size: 1rem;
}
main .pb__in::placeholder { color: rgba(255, 255, 255, 0.5); }
main .pb__in:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
main .pb__go { width: 100%; justify-content: center; }
main .pb__note { margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.62) !important; font-size: 0.8125rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  main .it-card { transition: none; }
  html.pm main .it-card:hover { transform: none; }
}

/* the direct download under the playbook form */
main .pb__direct { margin: 0.85rem 0 0; font-size: 0.875rem; }
main .pb__direct a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
main .pb__direct a:hover { color: var(--vc-accent-soft, #FF9A93); }
main .pb__direct a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* ==== zz-pricing-trim.css ==== */
/* the tier cards' new fine print: two assurances, not a paragraph */
main .rd-tier-terms { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; }
main .rd-tier-terms span { position: relative; padding-left: 1.05rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; }
main .rd-tier-terms span::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.5rem; height: 0.28rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
/* the disclosure that holds the rest of each inclusion list */
main details.rd-tier-more { border: 0; background: none; padding: 0; }
main details.rd-tier-more > summary.rd-tier-more__sum {
  cursor: pointer; list-style: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 0.3rem 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
main details.rd-tier-more > summary.rd-tier-more__sum::-webkit-details-marker { display: none; }
main details.rd-tier-more > summary.rd-tier-more__sum::after { content: " \25BE"; text-decoration: none; }
main details.rd-tier-more[open] > summary.rd-tier-more__sum::after { content: " \25B4"; }
main details.rd-tier-more > summary.rd-tier-more__sum:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* the two terms, stated once where the pricing section opens */
main .rd-price-terms { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
main .rd-price-terms span { position: relative; padding-left: 1.35rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
main .rd-price-terms span::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.62rem; height: 0.34rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}


/* ==== zz-uxpro.css ==== */
/* ==== Round 5 — ui-ux-pro-max checklist pass (7 Sep 2026) ====
   Accessibility furniture, WCAG 2.2 target sizes, media controls, interaction hygiene.
   Hit areas grow with padding + matching negative margin so nothing on the page moves. */

/* skip link: invisible until it has keyboard focus, then a petrol pill top-left above the header */
a.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10000; padding: 0.75rem 1.25rem; border-radius: 999px; background: #0f2e38; color: #f1d27c; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; box-shadow: 0 12px 30px rgba(8, 28, 35, 0.35); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform 0.2s, opacity 0.2s; }
a.skip-link:focus-visible { transform: none; opacity: 1; outline: 2px solid #dcb13a; outline-offset: 3px; }
main:focus { outline: none; }

/* anchored and focused targets clear the fixed header (WCAG 2.4.11 focus not obscured) */
html { scroll-padding-top: 6.5rem; }

/* interaction hygiene: pointer cursor on everything that acts, no 300ms tap delay, press feedback */
button:not(:disabled), [role="button"], summary, select, label.est-addon, #lang-toggle, #v2-menu-toggle { cursor: pointer; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
.btn:active, a.cta-alive:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
main [tabindex="0"]:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 6px; }

/* ---------- target sizes (WCAG 2.2 2.5.8 minimum 24px; 44px where the layout allows) ---------- */
/* desktop nav: 16px text lines become 44px targets; the underline keeps its visual position */
header a.nav-link:not(.header-phone) { display: inline-block; padding: 0.875rem 0.25rem; margin: -0.875rem -0.25rem; }
header a.nav-link::after { bottom: 0.275rem !important; left: 0.25rem !important; right: 0.25rem !important; }
header a.header-phone { padding: 0.875rem 0.25rem; margin: -0.875rem -0.25rem; }
header a.header-phone::after { display: none; }
#lang-toggle { min-height: 2.75rem; }
#lang-menu button { min-height: 2.75rem; }
#lang-current-flag, #lang-menu .lang-flag { display: none !important; }
/* the luxe transparent-header rule paints every header button white over the dark hero; the dropdown
   itself is white, so its items were white-on-white until the header compacted */
html.luxe body.hero-dark header:not(.pm-scrolled) #lang-menu button, header #lang-menu button { color: #0f2e38 !important; }
#lang-toggle .lang-globe { flex: none; opacity: 0.85; }

/* footer: column links, contact strip, legal links */
footer.footer-deep ul li a, footer.footer-deep div[class*="flex-wrap"] > a { display: inline-block; padding: 0.75rem 0.5rem; margin: -0.75rem -0.5rem; }
footer.footer-deep .footer-legal a { display: inline-block; padding: 0.8125rem 0.5rem; margin: -0.8125rem -0.5rem; }
/* premium.css already spaces the mobile footer with 0.4rem padding (a 36.8px row). Keep exactly that
   rhythm while the hit area grows to 48px: 24 + 2x12 padding, minus 2x5.6 margin = 36.8 */
@media (max-width: 767px) {
  footer.footer-deep .grid a:not([class*="rounded-full"]):not(.btn) { padding: 0.75rem 0.5rem; margin: -0.35rem -0.5rem; }
}
footer a[class*="rounded-full"] { min-width: 2.75rem; min-height: 2.75rem; }
/* closing-band contact card */
.contact-card a:not(.btn) { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
/* bare phone and email links in body copy blocks (contact, team, locations) */
main a[href^="tel:"]:not(.btn):not([class*="px-"]):not([class*="conv-"]), main a[href^="mailto:"]:not(.btn):not([class*="px-"]):not([class*="conv-"]) { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
/* standalone text links in the body (not sentence links, not buttons) */
main a.inline-flex:not(.btn):not([class*="px-"]), main a.cap-link { padding: 0.75rem 0; margin: -0.75rem 0; }
main a.chip { min-height: 2.75rem; }
/* pricing: the small "what is and is not included" disclosures and the add-on tick boxes */
main summary.text-sm { display: flex; align-items: center; min-height: 2.75rem; }
main label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }

/* ---------- media controls ---------- */
main > section:first-of-type { position: relative; }
.hero-video-toggle, .ticker__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(8, 28, 35, 0.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.hero-video-toggle:hover, .ticker__toggle:hover { background: rgba(8, 28, 35, 0.8); border-color: rgba(241, 210, 124, 0.7); }
.hero-video-toggle:focus-visible, .ticker__toggle:focus-visible { outline: 2px solid #f1d27c; outline-offset: 3px; }
.hero-video-toggle .ico-play, .ticker__toggle .ico-play { display: none; }
.hero-video-toggle[aria-pressed="true"] .ico-pause, .ticker__toggle[aria-pressed="true"] .ico-pause { display: none; }
.hero-video-toggle[aria-pressed="true"] .ico-play, .ticker__toggle[aria-pressed="true"] .ico-play { display: inline; }
.hero-video-toggle { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 5; }
@media (min-width: 1024px) { .hero-video-toggle { left: clamp(1.25rem, 4vw, 3.5rem); bottom: 1.5rem; } }
main section.ticker { padding-right: 3.5rem !important; }
.ticker__toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; }
main section.ticker::after { right: 0; width: 8.5rem; }
main section.ticker.is-paused .ticker__track, main section.ticker:focus-within .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker__toggle { display: none; }
  main section.ticker { padding-right: 0 !important; }
  main section.ticker::after { right: 0; }
  .btn:active, a.cta-alive:active { transform: none; }
}
/* the video toggle only exists if there is a video; when the script has stopped it for reduced motion
   the poster shows and the control still lets the reader start it */
html.pm-static .hero-video-toggle { background: rgba(8, 28, 35, 0.7); }

/* =====================================================================================
   MANUAL BLOG CARDS MATCH SORO'S CARDS (24 Sep 2026)
   Soro auto-publishes onto /blog/ via its own embed script and renders its own cards:
   a compact horizontal row, 140px thumbnail, no category chip, no CTA button, a plain
   border that only picks up colour on hover. The six manually written posts sat right
   above/below that feed in a completely different vertical bento-card style, so the
   page read as two different products. This overrides post-card to match Soro's card
   spec measured live: flex row, 20px gap, 20px body padding, 1px #e5e5e5 border, 12px
   radius, no shadow, 18px/600 title, 14px #666 excerpt, 12px #999 date. Stacks to a
   column below 640px, same as Soro's own mobile behaviour.
   The category chip and "Read More" link are hidden rather than removed from the
   markup, since the four pages set them individually and Soro's DOM does not have an
   equivalent to match against; hiding keeps this a pure CSS change.
   ===================================================================================== */
main section.post-index .post-card {
  flex-direction: row !important;
  gap: 1.25rem;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: box-shadow .2s, border-color .2s;
}
main section.post-index .post-card:hover {
  transform: none !important;
  border-color: #cfcfcf !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
main section.post-index .post-card__media {
  flex: 0 0 140px;
  width: 140px;
  align-self: stretch;
}
main section.post-index .post-card__media img { height: 100%; object-fit: cover; filter: none; }
main section.post-index .post-card__body { flex: 1 1 auto; padding: 1.25rem 1.25rem 1.25rem 0; }
main section.post-index .post-card__cat,
main section.post-index .post-card__more { display: none; }
main section.post-index .post-card__meta { margin-bottom: .4rem; }
main section.post-index .post-card__date { font-size: .75rem; color: #999; }
main section.post-index .post-card__title {
  font-size: 1.125rem; font-weight: 600 !important; line-height: 1.3;
  letter-spacing: -0.01em; margin-top: .25rem; text-align: left !important;
}
/* main h2:not([class*=text-left]) in about.6qAjRcHO.css centres every h2 in main
   at specificity (0,2,2); post-card__title needs its own class-based selector to
   win rather than relying on element-type + attribute-selector specificity. */
main section.post-index .post-card__body { text-align: left !important; }
main section.post-index .post-card__meta { order: 2; margin-top: .5rem; margin-bottom: 0; }
main section.post-index .post-card__title { order: 0; }
main section.post-index .post-card__excerpt { order: 1; }
main section.post-index .post-card__body { display: flex; flex-direction: column; }
main section.post-index .post-card__excerpt { font-size: .875rem; color: #666 !important; line-height: 1.5; margin-top: .35rem; }

@media (max-width: 640px) {
  main section.post-index .post-card { flex-direction: column !important; }
  main section.post-index .post-card__media { flex: none; width: 100%; height: 160px; }
  main section.post-index .post-card__body { padding: 1rem; }
}

/* =====================================================================================
   ONBOARDING: full page, not a cornered card (24 Sep 2026)
   Previous version put the form in a 34/44rem-wide card beside hero copy, matching
   contact/quote's two-column layout. Onboarding's own request was different: no side
   column, the form is the page. Single wrapper, generous width, no grid.
   ===================================================================================== */
main.onboarding-full .onboarding-full__wrap {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem);
}
@media (min-width: 768px) { main.onboarding-full .onboarding-full__wrap { padding-inline: 2rem; } }
main.onboarding-full .onboarding-full__form { margin-top: 2.25rem; }
main.onboarding-full .hero-interior-h1,
main.onboarding-full .conv-lede,
main.onboarding-full .td-kicker { text-align: left; }

/* the audit band: copy on the left, the embedded widget on the right */
main .audit { padding-block: clamp(3rem, 6vw, 5rem) !important; }
main .audit__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 960px) { main .audit__grid { grid-template-columns: 1fr minmax(0, 560px); } }
main .audit__h {
  margin: 0.9rem 0 0;
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
main .audit__lede { margin: 0.9rem 0 0; font-size: 1.0625rem; line-height: 1.65; max-width: 42ch; }
main .audit__list { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
main .audit__list li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; line-height: 1.55; }
main .audit__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.62rem; height: 0.34rem;
  border-left: 2px solid var(--vc-accent-fill, #D40F17);
  border-bottom: 2px solid var(--vc-accent-fill, #D40F17);
  transform: rotate(-45deg);
}
/* The frame is presented as what it is: a white tool panel. It cannot be restyled from here, so
   the surround does the work - a hairline, a soft lift, and the site's square corners. */
main .audit__frame {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.5rem 0.5rem 0;
}
main .audit__frame .audit__if {
  border: 1px solid rgba(10, 10, 11, 0.12);
  box-shadow: 0 24px 60px -40px rgba(10, 10, 11, 0.45);
  border-radius: 12px;
}
main .audit__if {
  display: block; width: 100%; border: 0;
  /* measured: the widget's body is 806px at 390 and 768px above that. These add headroom for the
     post-submit state. There is no resize handshake available, so the frame cannot follow its
     own content and must simply be tall enough. */
  height: 860px;
  opacity: 0;
  animation: audit-fade-in 0.6s ease-out forwards;
}
@media (min-width: 768px) { main .audit__if { height: 800px; } }
@keyframes audit-fade-in {
  to { opacity: 1; }
}
main .audit__note {
  margin: 0; padding: 0.7rem 0.6rem 0.8rem;
  font-size: 0.75rem; line-height: 1.45; color: var(--color-lyd-muted, #3F4540);
}
/* skeleton loader while form loads */
main .audit__skeleton {
  width: 100%;
  height: 860px;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
main .audit__skeleton-line {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite;
  border-radius: 4px;
}
@media (min-width: 768px) { main .audit__skeleton { height: 800px; } }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}


/* =====================================================================================
   zz-trial.css - the $1 trial CTA beside "Book a demo"

   NO font-family here, on purpose. This file is concatenated into premium-pages.css, which
   loads BEFORE the site-wide Plus Jakarta Sans rule, so any face declared here would lose
   silently. The button carries the site's own .btn class and inherits the face from it, which
   is also why it matches its neighbour's height, padding and weight without being told to.

   The neighbour it stands next to is solid #D40F17, white text, zero radius. Two solid buttons
   of equal weight side by side read as a fork with no recommendation, so this one is the outline
   counterpart: same geometry, reversed fill, hover swaps to the solid.

   EVERY COLOUR KEYS OFF data-ground, WHICH THE RECIPE STAMPS. Inferring light-versus-dark from
   ancestor selectors was tried and was wrong three times in twelve. The homepage hero paints
   rgb(5,7,10) from a stylesheet with no data-band; the inner-page heroes paint #0B2E8F from an
   inline style; and the /pricing estimator panel is called bg-lyd-blue but renders PALE
   (#E6ECF5), which put a white note on it at 1.19:1. The build knows the answer, so the build
   writes it down.
   ===================================================================================== */

.trial-cta,
#main .trial-cta {
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* ---- on a light ground: red outline. #D40F17 on white is 5.4:1 ---- */
.trial-cta[data-ground="light"],
#main .trial-cta[data-ground="light"] {
  background: transparent;
  background-color: transparent;
  color: #D40F17;
  border: 2px solid #D40F17;
}

.trial-cta[data-ground="light"]:hover,
#main .trial-cta[data-ground="light"]:hover,
.trial-cta[data-ground="light"]:focus-visible,
#main .trial-cta[data-ground="light"]:focus-visible {
  background-color: #D40F17;
  color: #fff;
  border-color: #D40F17;
}

/* ---- on a dark ground the red disappears into it, so the outline goes white ---- */
.trial-cta[data-ground="deep"],
#main .trial-cta[data-ground="deep"] {
  background: transparent;
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .78);
}

.trial-cta[data-ground="deep"]:hover,
#main .trial-cta[data-ground="deep"]:hover,
.trial-cta[data-ground="deep"]:focus-visible,
#main .trial-cta[data-ground="deep"]:focus-visible {
  background-color: #fff;
  color: #0A0A0B;
  border-color: #fff;
}

/* the focus ring follows the ground it sits on, per the round 10 finding */
.trial-cta:focus-visible,
#main .trial-cta:focus-visible { outline: 3px solid #0A0A0B; outline-offset: 2px; }

.trial-cta[data-ground="deep"]:focus-visible,
#main .trial-cta[data-ground="deep"]:focus-visible { outline-color: #fff; }

.trial-cta__ico { display: inline-block; }

/* ---- the full-width variant, for the Launch card and the estimator summary ---- */
.trial-cta--block,
#main .trial-cta--block {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* ---- the line underneath: what the $1 actually becomes ---- */
/* Not small print. A price that changes from $1 to $242 should not be discoverable only by
   squinting, so it sits at the same size as the site's other supporting lines. */
.trial-note,
#main .trial-note {
  margin-top: .75rem;
  margin-bottom: 0;
  font-size: .875rem;
  line-height: 1.5;
}

/* The note lives INSIDE the CTA row, as a sibling of the button. Every one of these rows is
   `flex flex-wrap`, so a 100% basis puts it on its own line under the buttons. Outside a flex
   row - the Launch card, the estimator summary - the basis is ignored and it flows as a block.

   `order` is what keeps it under ALL of them. The hero row is [Book a demo] [$1 trial]
   [See it running]; inserting the note after the second button pushed the third onto a row of
   its own, below the note, which broke the group into three lines and stranded it. Ordering the
   note last puts the buttons back together and the sentence under the lot. */
.trial-note,
#main .trial-note { flex-basis: 100%; order: 99; }

.trial-note[data-ground="light"],
#main .trial-note[data-ground="light"] { color: #5A6368; }   /* 6.1:1 on white, 5.2:1 on #E6ECF5 */

.trial-note[data-ground="deep"],
#main .trial-note[data-ground="deep"] { color: rgba(255, 255, 255, .82); }

@media (prefers-reduced-motion: reduce) {
  .trial-cta, #main .trial-cta { transition: none; }
}

/* The tier card's demo button is 52px, because html.luxe.sunlit.sunnyaid #main
   .sa-pricing-faq-cta declares min-height: 3.25rem !important. Matching the VALUE keeps the two
   stacked buttons the same height; borrowing the CLASS would also import that rule's 17px/500
   type and hairline border, which this sheet loads too early to override. */
.trial-cta--tier,
#main .trial-cta--tier { min-height: 3.25rem; }

/* Shape follows the neighbour. The site is square because the vcpility skin zeroes .btn's
   radius; the /pricing estimator CTA carries no .btn class, so premium.css turns it into a
   999px pill, and a square button stacked under it read as a different site. */
/* !important is required, and it is safe here. The skin's own rule is
   html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(main,header,footer) :is(.btn, a.btn, ...)
   with `border-radius: 0 !important`, and this button carries .btn to inherit the face, so it
   gets caught by it. Both sheets are unlayered, which means specificity still decides between
   two !important declarations: (1,2,0) here beats (0,5,3) there on the ID alone. Without the
   !important the stamp was computed correctly and then rendered square anyway. */
.trial-cta[data-shape="pill"],
#main .trial-cta[data-shape="pill"] { border-radius: 999px !important; }

/* =====================================================================================
   zz-trial-header.css - the $1 trial button in the header

   No font-family and no font-size here: the button copies the neighbouring CTA's utility
   classes, so it already matches. Only colour and the space it needs are set.
   ===================================================================================== */

/* The nav's 36px gap is where the space comes from. Eight items totalling 536px sat in an
   840px column; at 24px the column shrinks to what it needs and the right-hand group can grow
   by the difference. Anything below 24px starts to read as cramped rather than tidy. */
header nav ul,
header ul.hidden { gap: 1.5rem; }

/* VALUES ARE MATCHED TO THE NEIGHBOUR, MEASURED, NOT INHERITED. The header CTA takes its look
   from rules keyed on `a[class~="bg-lyd-yellow"]`, so a button without that class gets none of
   it and falls back to the raw utilities: 11.2px at weight 600 with 1.46px tracking, against the
   neighbour's 14px/700/0.28px. Adding the class back would import the fill and hover rules that
   go with it, all !important from later sheets, so the measured VALUES are restated here
   instead. Same reasoning as the in-page tier button.

   !important on colour and radius specifically: without it the button rendered near-black
   (rgb(12,15,22)) with a 999px radius, because header rules elsewhere win on specificity. The
   border came through fine, which is how the mismatch showed up as a red outline around dark
   pill-shaped text. */
/* THE SELECTOR IS REPEATED ON PURPOSE. The colour is owned by
   `html.sa-skin-vcpility.luxe.sunlit.sunnyaid header :is(a, button, span, ...)` in
   premium-vcpility.css, which is (0,4,3) with !important. This sheet is concatenated into
   premium-pages.css, which loads EARLIER, so an equal-specificity rule loses on order and a
   lower one loses outright: at (0,1,1) the border came through and the text stayed
   rgb(12,15,22), leaving a red outline around near-black text.
   Repeating the class six times reads oddly and is the least bad option available. Naming the
   skin classes instead would tie this to one skin and break on the inner pages, which carry
   html.vc-site rather than html.sa-skin-vcpility. An ID is not available: the header has none.
   And inline style does not help either - inline !important was tested here and did NOT win,
   because the competing sheet is unlayered while the Astro bundle's own rules are layered, and
   this project's cascade has been inverted by @layer before. The rule to beat is
   `html.sa-skin-vcpility.luxe.sunlit.sunnyaid header :is(a, button, span, .nav-link)`, and
   :is() contributes the specificity of its WIDEST argument, .nav-link, so it scores (0,5,2) -
   not the (0,4,3) a quick read suggests. Five repeats gave (0,5,1) and still lost. Six repeats
   plus the element gives (0,6,2), which clears it on class count and needs no knowledge of the
   skin, so it holds on the inner pages too where html carries vc-site instead. */
header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr,
header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr:visited {
  background: transparent !important;
  background-color: transparent !important;
  color: #D40F17 !important;           /* 4.8:1 on the header's #F6F6F7 */
  border: 1px solid #D40F17 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28px !important;
  text-transform: uppercase;
  /* the neighbour is 44px tall on every page; matching it by height rather than by guessing
     padding avoids drifting when the skin restyles its padding, which it does */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}

header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr:hover,
header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr:focus-visible {
  background-color: #D40F17 !important;
  color: #fff !important;
  border-color: #D40F17 !important;
}

.trial-hdr:focus-visible,
header .trial-hdr:focus-visible { outline: 3px solid #0A0A0B; outline-offset: 2px; }

/* the drawer copy, which is full width and carries the whole label */
.trial-hdr--block,
header .trial-hdr--block {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .trial-hdr, header .trial-hdr { transition: none; }
}

/* BELOW 1280 THE DESKTOP COPY STANDS DOWN. Measured at 1200: the row needs 1199px of the
   1136px available once both buttons are in it, and no honest amount of gap-trimming closes a
   63px deficit - reaching it would mean a 14px nav gap, down from the 36px this header shipped
   with, which is cramped rather than tidy. A button that is present but clipped off the edge is
   a bug; one that is deliberately absent at widths that cannot hold it is a decision. Between
   1024 and 1279 the trial button is therefore hidden, and below 1024 the whole nav collapses
   and the drawer copy takes over, carrying the full label. The drawer copy is never hidden.

   Reducing the nav gap to 24px also fixed something that was already broken: the header's own
   "Book a demo" was being clipped at 1152 and 1200 before this change, and now is not. It is
   still clipped from 1024 to 1151, which is the pre-existing band noted in the recipe. */
/* The specificity has to match the base rule, which now sets display:inline-flex at (0,6,2) to
   pin the 44px height. At (0,2,1) this hide lost to it and the desktop copy was still showing
   at 390, inside the mobile header bar. */
@media (max-width: 1279px) {
  header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr:not(.trial-hdr--block) {
    display: none !important;
  }
}

/* THE HEADER CTA IS NOT THE SAME SHAPE ON EVERY PAGE. On the homepage it is square at weight
   700; on the inner pages, which carry html.vc-site, it is a 999px pill at weight 600. Measured
   on /about, /pricing, /blog and /privacy, all four the same. One hardcoded look would have been
   right on the homepage and visibly wrong on the other 41 pages, so the inner variant follows
   the same hook the site itself uses. (0,7,2) here, one above the base rule's (0,6,2). */
html.vc-site header a.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr.trial-hdr {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* THE DRAWER COPY KEEPS THE DRAWER'S OWN LOOK, AND NOT FOR WANT OF TRYING. Inside the mobile
   panel both CTAs render as the same 44px bordered box, dark on light. The red could not be
   forced onto it from this sheet: the selector matches (verified at runtime), ten repeats of the
   class did not move it, and neither did setting color inline with !important - the style
   attribute was confirmed present on the element while the computed value stayed
   rgb(12,15,22). Whatever owns it sits above inline important, which normally only a cascade
   layer can do, and the Astro bundle does declare layers.
   Left as is rather than fought further, because the result is not actually wrong: a drawer is a
   stacked list of equal-weight actions, the two labels are unambiguous - "BOOK A DEMO" against
   "START YOUR $1 TRIAL" - and the contrast is the drawer's own, which passes. The red outline
   is a desktop-header distinction, not a requirement of the button. */

/* THE SKELETON SITS BEHIND THE FORM, NOT ABOVE IT. It was placed as a preceding sibling and
   removed by an inline onload handler, and that handler arrived mangled - `onload=` repeated
   three times with broken nesting, so what actually parsed was
   onload="document.getElementById('audit-skeleton')", which evaluates the lookup and discards
   it. The skeleton was therefore never removed, and being a block sibling 800px tall it pushed
   the real form 800px down the page: the audit section measured 1831px instead of ~1030, with a
   shimmering placeholder where the form should be on both / and /pricing.
   The handler is fixed, but relying on it alone is what failed, so the skeleton is now taken out
   of flow and stacked underneath the iframe. If the handler ever breaks again the placeholder is
   simply covered by the form rather than displacing it. */
main .audit__frame { position: relative; }
main .audit__skeleton { position: absolute; inset: 0.5rem 0.5rem auto; z-index: 0; }
main .audit__if { position: relative; z-index: 1; }

/* =====================================================================================
   zz-trust.css - the "Trusted by" band

   No font-family here: this file lands in premium-pages.css, which loads before the site-wide
   face rule, so any face declared here loses silently. The band inherits it.
   ===================================================================================== */

main .trust__h { margin-top: .6rem; }

main .trust__lede {
  margin: .9rem 0 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #3F4540;                       /* 9.1:1 on the surface band */
}

/* ---- the logo row ---- */
/* Logos are other people's marks at other people's aspect ratios, so they are normalised by
   HEIGHT and never stretched. Greyscale is deliberately NOT used: it misrepresents a brand, and
   two of these three are care providers whose colour is part of how they are recognised. */
main .trust__logos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem 3rem;
}

main .trust__logos img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

@media (max-width: 480px) {
  main .trust__logos { gap: 1.5rem 2rem; }
  main .trust__logos img { height: 34px; max-width: 150px; }
}

/* ---- rating + reviews ---- */
main .trust__proof {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  main .trust__proof { grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 2.5rem; }
}

main .trust__rating { align-self: start; }

main .trust__rating-n {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* The stars are aria-hidden and the value is stated in text beside them, so they are
   decorative. They still have to clear 4.5:1: a glyph that reads as text should meet the
   text bar whatever the ARIA says. #C8860A measured 2.61:1 on this band, not the 4.6 it was
   assumed to be; #8A6100 measures 4.7:1. */
main .trust__stars { color: #8A6100; letter-spacing: .06em; }

main .trust__rating-c {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: #4A5054;                       /* 7.6:1 */
}

main .trust__rating-c a { color: #96090D; text-decoration: underline; }  /* 8.0:1 */

main .trust__reviews { display: grid; gap: 1.25rem; }

@media (min-width: 640px) {
  main .trust__reviews { grid-template-columns: 1fr 1fr; }
}

main .trust__review {
  margin: 0;
  padding: 1.25rem 1.35rem;
  background: #fff;
  border: 1px solid rgba(10, 10, 11, .10);
}

main .trust__quote { margin: 0; }

main .trust__quote p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: #26292B;                       /* 13.4:1 on white */
}

main .trust__by {
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
}

main .trust__who { font-weight: 600; font-size: .875rem; color: #20282d; }

main .trust__src { font-size: .8125rem; color: #4A5054; }

main .trust__data {
  margin: 2.25rem 0 0;
  max-width: 70ch;
  font-size: .8125rem;
  line-height: 1.6;
  color: #4A5054;                       /* 7.6:1 */
}

/* Left-aligned, matching .audit__lede in the next band along. These two paragraphs were picking
   up text-align: justify from a shared rule - it applies to 11 of the 57 paragraphs in main, so
   it is incidental rather than house style - and justified text at this measure opened visible
   rivers between words. Ragged right reads better and avoids the uneven word spacing that
   WCAG 1.4.8 warns about. */
main .trust__lede,
main .trust__data,
#main .trust__lede,
#main .trust__data { text-align: left !important; }

/* The standalone /lydassist/audit page drops the band's copy column, because its hero already
   makes the same argument and the h2 would have repeated the h1 word for word. With one child
   left the two-column grid would strand the form on the left, so it becomes a single centred
   column at a readable measure. */
main .audit--solo .audit__grid {
  grid-template-columns: minmax(0, 44rem);
  justify-content: center;
}

/* ===== premium-compact.css ===== */
/* =====================================================================
   LYD AssistOS — compact homepage. Same copy, less scroll: tighter band rhythm,
   ecosystem unpinned into a 2×2 grid, ledes set smaller, tighter cards.
   ===================================================================== */
:root { --band-y: clamp(3.25rem, 5.5vw, 5rem); --band-y-tight: clamp(2.25rem, 4vw, 3.25rem); }
main section.band-loose { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
main > section:first-of-type { min-height: 0 !important; padding-top: clamp(7rem, 11vw, 9.5rem) !important; padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
main > section:first-of-type h1.font-display { font-size: clamp(2.75rem, 5.6vw, 4.5rem) !important; }
.luxe main > section:first-of-type h1.font-display { font-size: clamp(2.75rem, 5.8vw, 4.6rem) !important; }

/* section headers: heading a step smaller, ledes compact */
main h2.font-display, main section[class] h2.font-display:not([class*="text-xs"]), .luxe main h2.font-display { font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important; }
main h2.font-display + p, main .band-inner > .mx-auto > p, main .band-inner > p { font-size: 1.0625rem !important; line-height: 1.6 !important; max-width: 42rem; margin-top: 0.9rem !important; }
main .text-lede, main > section.hero-interior p.text-2xl { font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important; }
main section .mt-14, main section .mt-16, main section [class*="mt-1"][class*="grid"] { margin-top: 2rem !important; }

/* ecosystem: no pin, 2×2 grid of the four cards */
main .hscroll__runway, .luxe main .hscroll__runway { height: auto !important; }
main .hscroll__stage { position: static !important; height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
main .hscroll__track { transform: none !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: auto !important; }
main .hscroll__panel { width: auto !important; min-height: 0 !important; flex: none; }
main .hscroll__panel > .flex { min-height: 0; gap: 1rem !important; padding: 1.75rem !important; }
main .hscroll__panel > .flex p { max-width: none; }
main .hscroll__panel > .hidden.lg\:block { width: 44% !important; }
main .hscroll__bar, main .hscroll [class*="hscroll__hint"], main .hscroll .hscroll__scroll, main .hscroll [aria-label*="Scroll"] { display: none !important; }
@media (max-width: 1023px) { main .hscroll__track { grid-template-columns: 1fr; } main .hscroll__panel > .hidden.lg\:block { width: 100% !important; height: 12rem; } }
@media (min-width: 1024px) { main .hscroll__panel { display: flex; flex-direction: row; } main .hscroll__panel > .flex { width: 56% !important; } }

/* six things: three columns, photo narrower */
@media (min-width: 1024px) { .leaks-layout { grid-template-columns: 0.62fr 1.38fr; } .leaks-layout .leaks__stage.leaks-grid { grid-template-columns: repeat(3, 1fr) !important; column-gap: 2rem; } }
.leaks-grid .leaks__slide { padding: 1.25rem 0 1.4rem !important; }
.leaks-grid .leaks__title { font-size: 1.15rem !important; }
.leaks-grid .leaks__body { font-size: 0.9375rem; line-height: 1.5; }

/* cards + tables: tighter internal padding */
main [data-slot="card"] [data-slot="card-content"], main .card-lyd, main .carousel-card { padding: 1.5rem !important; }
main [data-section="whynow"] [data-slot="card"] p, main [data-section="proof"] .proof-card p { font-size: 0.9375rem; }
main [data-section="faq"] [data-slot="card"] .p-6 { padding: 1.1rem 1.25rem !important; }
main [data-section="faq"] p { font-size: 0.9375rem; }
main .pipe__frame td, main .pipe__frame th { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
main section.closing-band { padding-top: clamp(3.5rem, 6vw, 5.5rem) !important; padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important; }
footer.footer-deep > div:first-child { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

/* ---- second pass: the five tallest sections ---- */
/* ecosystem cards: fixed, shorter rows */
@media (min-width: 1024px) {
  main .hscroll__panel { height: 17.5rem !important; }
  main .hscroll__panel > .flex { padding: 1.5rem 1.6rem !important; justify-content: flex-start !important; }
  main .hscroll__panel > .flex > div > [class*="text-5xl"] { font-size: 1.75rem !important; line-height: 1 !important; }
  main .hscroll__panel > .flex > div > .mt-4 { margin-top: 0.4rem !important; }
  main .hscroll__panel h3 { font-size: 1.25rem !important; margin-top: 0.4rem !important; }
  main .hscroll__panel > .flex p { font-size: 0.9375rem !important; line-height: 1.5 !important; margin-top: 0.75rem; }
}
main section.hscroll .hscroll__stage > .mx-auto, main section.hscroll .band-inner { padding-top: 0 !important; }
main section.hscroll h2 { margin-bottom: 1.25rem; }

/* rostering connector: figure and the three steps side by side */
@media (min-width: 1024px) {
}

/* AI band: smaller phone mock, tighter list */

/* product band: compact cards */

/* six things: three tight columns */
.leaks-layout { margin-top: 1.5rem; gap: 2rem; }
.leaks-grid .leaks__slide { padding: 1rem 0 1.1rem !important; }
.leaks-grid .leaks__numeral { font-size: 0.7rem !important; }
.leaks-grid .leaks__title { margin-top: 0.5rem !important; font-size: 1.05rem !important; }
.leaks-grid .leaks__body { font-size: 0.875rem; margin-top: 0.4rem !important; }

/* faq + pricing + closing */
main [data-section="faq"] h3 { font-size: 1rem !important; }
main [data-section="pricing"] [data-slot="card"] li { font-size: 0.9rem; }
main [data-section="pricing"] .grid { margin-top: 1.5rem !important; }
main section.closing-band .band-inner > .grid { gap: 2rem !important; }
main section.closing-band .contact-card { padding: 1.5rem !important; }
main [data-section="whynow"] .band-inner > div:last-child { margin-top: 1.25rem !important; }

/* faq accordion */
main .faq-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
main .faq-acc summary::-webkit-details-marker { display: none; }
main .faq-acc summary h3 { margin: 0 !important; font-size: 1rem !important; }
main .faq-acc summary::after { content: "+"; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.25rem; color: #7d5f14; flex: none; width: 1.5rem; text-align: center; transition: transform 0.25s; }
main .faq-acc[open] summary::after { content: "+"; transform: rotate(45deg); }
main .faq-acc summary:hover h3 { color: #7d5f14; transition: color 0.2s; }
main .faq-acc > p { margin-top: 0.6rem !important; }
main .faq-acc summary:focus-visible { outline: 2px solid #dcb13a; outline-offset: 3px; border-radius: 6px; }
/* one connected system: single row on wide screens */

/* old pinned-scroll hint no longer applies */
main .hscroll :has(> .hscroll__bar), main .hscroll [class*="hscroll__progress"], main .hscroll [class*="hscroll__hint"] { display: none !important; }

main .hscroll .mb-8.flex.justify-between > .flex.items-center.gap-3 { display: none !important; }

/* shared fixes requested by page builders */
main > section.hero-interior p.text-lede, main > section.hero-interior .text-lede, main > section.hero-interior h1 + p { margin-left: 0 !important; }
main section h2.font-display:not(.text-center):not([class*="text-center"]):not(:is(.text-center, .mx-auto.text-center) *) { text-align: left; }
main .text-center > h2.font-display, main .band-inner > .text-center h2.font-display, main .mx-auto.text-center h2.font-display { text-align: center; }

/* ===== mobile type scale: selectors strong enough to beat the luxe layer ===== */
@media (max-width: 767px) {
  .luxe main > section:first-of-type h1.font-display, .luxe main section[class] > div > div > div > h1.font-display, main > section:first-of-type h1.font-display { font-size: clamp(2.4rem, 9.8vw, 2.9rem) !important; line-height: 1.04 !important; }
  .luxe main h2.font-display, .luxe main section[class] h2.font-display:not([class*="text-xs"]), main h2.font-display { font-size: clamp(1.9rem, 8vw, 2.1rem) !important; }
}
@media (max-width: 639px) {
  main .replaces-grid .carousel-card > div:last-child { order: -1; margin-top: 0 !important; margin-bottom: 0.9rem; height: 2.75rem; width: 2.75rem; }
  main .replaces-grid .carousel-card { display: flex; flex-direction: column; }
}
main [data-section="faq"] a.mt-6 { padding: 0.6rem 0; margin-top: 0.9rem; }

/* the sections these rules compacted have moved to their own pages, where they have room;
   what remains of the compaction layer is homepage-only by scope */
main [data-section="whynow"] [data-slot="card"] p { font-size: 0.9375rem; }

/* ===== premium-sunlit.css ===== */
/* =====================================================================
   LYD AssistOS — SUNLIT palette layer (html.sunlit). Loaded LAST.
   Owner brief 8 Sep 2026: "the whole website feel should look rich, use vibrant colors, whole revamp".
   Deep petrol stays the dark anchor; coral is the one CTA colour; sunflower is the highlight; aqua marks ticks and
   proof; violet carries the AI band and numerals. Bright white ground. Flat fills only - no gradient bands or buttons.
   Every selector is prefixed html.luxe.sunlit so it outranks the luxe layer it recolours (luxe uses !important widely).
   Text-safe pairs (WCAG AA, measured): coral-ink #b3361f on white 6.1:1 (5.1:1 on the violet tint) · white on coral-ink 6.1:1 · violet-deep #4b3dd9 on white 7.1:1 ·
   aqua-ink #0b6f66 on white 6.0:1 · ink #0f2e38 on coral #ff6b57 5.1:1 · ink on sunflower #ffc533 9.1:1 ·
   sunflower on petrol 9.1:1 · coral-light #ff8f7f on petrol 6.5:1 · white on violet-deep 7.1:1 · white on #0b6f66 6.0:1.
   ===================================================================== */
html.sunlit {
  --sun: #ffc533; --sun-2: #ffd666; --sun-tint: #fff4cc;
  --coral: #ff6b57; --coral-2: #ff8f7f; --coral-ink: #b3361f; --coral-hover: #f25a45; --coral-tint: #ffe8e3;
  --aqua: #19c3b3; --aqua-ink: #0b6f66; --aqua-tint: #ddf7f3;
  --violet: #6d5df6; --violet-deep: #4b3dd9; --violet-dark: #1e1466; --violet-tint: #ece9ff;
  --ink: #0f2e38; --paper: #ffffff; --paper-2: #f6f8fb;
  /* re-point the luxe tokens so anything still reading them lands on the new palette */
  --gold: var(--coral); --gold-2: var(--sun); --gold-3: var(--coral-ink); --gold-ink: var(--coral-ink); --gold-grad: var(--coral);
  --ivory: var(--paper); --ivory-2: var(--paper-2); --ink-2: var(--ink);
  --color-lyd-gold-ink: var(--coral-ink); --color-lyd-yellow: var(--sun); --color-lyd-yellow-deep: var(--coral);
}

/* ---------- ground + type ---------- */
html.luxe.sunlit body, html.luxe.sunlit main section[data-band="cream"], html.luxe.sunlit .pin-over { background: var(--paper) !important; }
html.luxe.sunlit main section[data-band="surface"] { background: var(--paper-2) !important; border-color: rgba(15, 46, 56, 0.08) !important; }
html.luxe.sunlit main h1.font-display:not(.text-white), html.luxe.sunlit main h2.font-display, html.luxe.sunlit main h3.font-display { color: var(--ink); }
html.luxe.sunlit ::selection { background: var(--sun); color: var(--ink); }
html.sunlit a.skip-link { background: var(--ink); color: var(--sun); }
html.sunlit a.skip-link:focus-visible { outline-color: var(--coral); }

/* ---------- kicker: coral rule, coral-ink text on light; sunflower on dark ---------- */
html.luxe.sunlit .td-kicker { color: var(--coral-ink); }
html.luxe.sunlit .td-kicker::before { background: var(--coral) !important; }
html.luxe.sunlit .td-kicker-light, html.luxe.sunlit main section[data-band="deep"] .td-kicker, html.luxe.sunlit main > section.hero-interior[data-band="deep"] .td-kicker { color: var(--sun-2); }
html.luxe.sunlit main section[data-band="deep"] .td-kicker::before, html.luxe.sunlit main > section.hero-interior .td-kicker::before { background: var(--sun) !important; }

/* ---------- ticks, icons, numerals ---------- */
html.luxe.sunlit main svg.text-lyd-yellow-deep, html.luxe.sunlit main [class*="text-lyd-yellow"]:not([class*="bg-"]), html.luxe.sunlit main .text-lyd-gold-ink, html.luxe.sunlit main .mark { color: var(--aqua-ink) !important; }
html.luxe.sunlit main section[data-band="deep"] svg[class*="text-lyd-yellow"], html.luxe.sunlit main section[data-band="deep"] .text-lyd-yellow-deep, html.luxe.sunlit main section[data-band="deep"] [data-slot="card"] svg { color: var(--aqua) !important; }
html.luxe.sunlit main .numeral, html.luxe.sunlit main [class*="text-lyd-ink/25"] { color: var(--violet-deep) !important; }
html.luxe.sunlit main .leaks__numeral { color: var(--coral-ink) !important; }
html.luxe.sunlit main .bg-lyd-yellow-deep.rounded-full, html.luxe.sunlit main .bg-lyd-yellow.rounded-full, html.luxe.sunlit main .disc, html.luxe.sunlit main section[data-band="deep"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep)[class*="rounded-full"] { background: var(--sun) !important; color: var(--ink) !important; }
html.luxe.sunlit main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(255, 197, 51, 0.55) 2.6%, rgba(255, 214, 102, 0.6) 95.6%, transparent 98.8%); }
html.luxe.sunlit main .race-win, html.luxe.sunlit main .bg-lyd-yellow.race-win { background: var(--sun) !important; color: var(--ink) !important; }
html.luxe.sunlit main .pipe__status.is-booked, html.luxe.sunlit .chip-success, html.luxe.sunlit main .badge-tier, html.luxe.sunlit main .card-elevate .badge-tier { background: var(--coral) !important; color: var(--ink) !important; }

/* ---------- buttons: coral is the one CTA colour ---------- */
html.luxe.sunlit .btn-primary-dark, html.luxe.sunlit .btn-primary-light, html.luxe.sunlit header a[class*="bg-lyd-yellow"], html.luxe.sunlit main a.bg-lyd-yellow[class*="px-"], html.luxe.sunlit main a.bg-primary, html.luxe.sunlit main a.bg-lyd-ink[class*="px-"], html.luxe.sunlit main .card-elevate .btn-primary-light, html.luxe.sunlit main section[data-band="deep"] .btn-primary-light, html.luxe.sunlit footer.footer-deep .btn-primary-light {
  background: var(--coral) !important; color: var(--ink) !important; border: 0 !important; box-shadow: 0 12px 28px -14px rgba(255, 107, 87, 0.7) !important;
}
html.luxe.sunlit .btn-primary-dark:hover, html.luxe.sunlit .btn-primary-light:hover, html.luxe.sunlit header a[class*="bg-lyd-yellow"]:hover { background: var(--coral-hover) !important; }
html.luxe.sunlit .pm-btn.btn-primary-dark:hover, html.luxe.sunlit .pm-btn.btn-primary-light:hover { box-shadow: 0 18px 36px -14px rgba(255, 107, 87, 0.75) !important; }
html.luxe.sunlit .btn-ghost-dark { border: 1px solid rgba(255, 255, 255, 0.42) !important; color: #fff; }
html.luxe.sunlit .btn-ghost-dark:hover { border-color: var(--sun) !important; background: rgba(255, 197, 51, 0.1); }
html.luxe.sunlit .btn-ghost-light { border: 1px solid rgba(15, 46, 56, 0.28) !important; color: var(--ink); }
html.luxe.sunlit .btn-ghost-light:hover { border-color: var(--coral) !important; color: var(--coral-ink); }
html.luxe.sunlit .btn:focus-visible, html.luxe.sunlit main a:focus-visible:not(.btn), html.luxe.sunlit main button:focus-visible, html.luxe.sunlit header a:focus-visible, html.luxe.sunlit footer a:focus-visible, html.luxe.sunlit main .faq-acc summary:focus-visible, html.luxe.sunlit main [tabindex="0"]:focus-visible { outline-color: var(--coral-ink); }
html.luxe.sunlit main section[data-band="deep"] :is(a, button, summary):focus-visible, html.luxe.sunlit main section.band-photo :is(a, button):focus-visible, html.luxe.sunlit footer a:focus-visible, html.luxe.sunlit body.hero-dark header:not(.pm-scrolled) a:focus-visible { outline-color: var(--sun) !important; }
/* pricing: Elevate keeps the filled CTA, the siblings are ghost - as before, in coral */
html.luxe.sunlit main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light,
html.luxe.sunlit main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark,
html.luxe.sunlit main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light,
html.luxe.sunlit main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 143, 127, 0.55) !important; color: #fff !important; box-shadow: none !important; }
html.luxe.sunlit main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark):hover,
html.luxe.sunlit main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark):hover { background: rgba(255, 107, 87, 0.16) !important; border-color: var(--coral-2) !important; }

/* ---------- header ---------- */
html.luxe.sunlit header .nav-link::after { background: var(--coral) !important; }
html.luxe.sunlit header.pm-scrolled { background: rgba(255, 255, 255, 0.94) !important; }
html.luxe.sunlit header a.nav-link:hover, html.luxe.sunlit header a.nav-link[aria-current="page"] { color: var(--ink); }
html.sunlit #lang-toggle .lang-globe { color: inherit; }

/* ---------- hero: dark footage, sunflower marker, sunflower plates ---------- */
html.luxe.sunlit main > section:first-of-type:not(.hero-interior) h1 .marker, html.luxe.sunlit main > section:first-of-type:not(.hero-interior) h1 .marker-blue { color: var(--sun) !important; -webkit-text-fill-color: var(--sun); }
html.luxe.sunlit main [data-elevate="hero"] [data-count-to], html.luxe.sunlit main [data-elevate="hero"] .rd-hero-num, html.luxe.sunlit main [data-elevate="hero"] .text-2xl, html.luxe.sunlit main [data-elevate="hero"] .rd-mask, html.luxe.sunlit main [data-elevate="hero"] .rd-mask .rd-mask__in { color: var(--sun) !important; }
html.luxe.sunlit main [data-elevate="hero"] :is(.bg-lyd-yellow, .bg-lyd-yellow-deep) { background: rgba(255, 197, 51, 0.1) !important; }
html.luxe.sunlit main > section:first-of-type .hero-scrim { background: linear-gradient(100deg, rgba(8, 22, 34, 0.94) 0%, rgba(8, 22, 34, 0.8) 45%, rgba(15, 46, 56, 0.42) 75%, rgba(15, 46, 56, 0.3) 100%) !important; }
html.luxe.sunlit main > section:first-of-type video { filter: saturate(1.05) contrast(1.06) brightness(0.9); }
html.sunlit main > section:first-of-type .rd-hero-abn, html.sunlit main > section:first-of-type .rd-hero-abn:hover { text-decoration-color: rgba(255, 197, 51, 0.6); }
html.sunlit main > section:first-of-type .rd-hero-abn:hover, html.sunlit main > section:first-of-type .rd-hero-abn:focus-visible { color: var(--sun-2); }

/* ---------- the smile mark (abstract brand mark, no face) ---------- */
.sun-smile { position: relative; display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; max-width: 37rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: 1.5rem; background: rgba(8, 22, 34, 0.52); border: 1px solid rgba(255, 197, 51, 0.38); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sun-smile[data-state="on"] { border-color: rgba(255, 107, 87, 0.65); }
.sun-smile__btn { position: relative; flex: none; width: 7.5rem; height: 7.5rem; padding: 0; border: 0; background: transparent; border-radius: 999px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sun-smile__btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.sun-smile__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sun-smile__ring { fill: none; stroke: var(--sun); stroke-width: 4; }
.sun-smile__btn::before { content: ""; position: absolute; inset: -12%; border-radius: 999px; background: rgba(255, 197, 51, 0.24); filter: blur(10px); opacity: 0; pointer-events: none; }
.sun-smile__tap { font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: 0.22em; fill: var(--sun); }
.sun-smile[data-state="on"] .sun-smile__tap { opacity: 0; }
.sun-smile__disc { fill: var(--coral); transform-origin: 48px 48px; transform: scale(0); }
.sun-smile__flat, .sun-smile__arc { fill: none; stroke: var(--sun); stroke-width: 6; stroke-linecap: round; transform-origin: 48px 56px; }
.sun-smile__arc { opacity: 0; transform: scaleY(0.2); }
.sun-smile__spark circle { fill: var(--sun); opacity: 0; transform-origin: 48px 48px; transform: scale(0.6); }
.sun-smile[data-state="on"] .sun-smile__disc { transform: scale(1); }
.sun-smile[data-state="on"] .sun-smile__ring { stroke: var(--coral); }
.sun-smile[data-state="on"] .sun-smile__flat { opacity: 0; transform: scaleY(0.2); }
.sun-smile[data-state="on"] .sun-smile__arc { opacity: 1; transform: none; stroke: var(--ink); }
.sun-smile[data-state="on"] .sun-smile__spark circle { opacity: 1; transform: scale(1); }
.sun-smile__text { min-width: 0; }
.sun-smile__line { margin: 0; font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, 0.92) !important; max-width: 26rem; }
.sun-smile[data-state="on"] .sun-smile__line { color: #fff !important; font-weight: 600; }
.sun-smile__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.6rem; min-height: 2.75rem; padding: 0.55rem 1.1rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; color: var(--sun-2) !important; text-decoration: none; border: 1px solid rgba(255, 214, 102, 0.55); border-radius: 999px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.sun-smile[data-state="on"] .sun-smile__link { background: var(--coral); color: var(--ink) !important; border-color: transparent; box-shadow: 0 12px 28px -14px rgba(255, 107, 87, 0.7); }
.sun-smile__link:hover, .sun-smile__link:focus-visible { background: var(--coral-hover); color: var(--ink) !important; border-color: transparent; }
.sun-smile__link:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
.sun-smile__link > span[aria-hidden] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sun-smile__link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
/* motion (html.pm only): the disc blooms, the line curves into the smile, sparks pop; an idle ring pulse invites the first tap */
.pm .sun-smile__disc { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.pm .sun-smile__ring { transition: stroke 0.4s; }
.pm .sun-smile__flat, .pm .sun-smile__arc { transition: opacity 0.35s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s; }
.pm .sun-smile__spark circle { transition: opacity 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pm .sun-smile[data-state="on"] .sun-smile__spark circle:nth-child(1) { transition-delay: 0.1s; } .pm .sun-smile[data-state="on"] .sun-smile__spark circle:nth-child(2) { transition-delay: 0.18s; }
.pm .sun-smile[data-state="on"] .sun-smile__spark circle:nth-child(3) { transition-delay: 0.26s; } .pm .sun-smile[data-state="on"] .sun-smile__spark circle:nth-child(4) { transition-delay: 0.14s; }
.pm .sun-smile[data-state="on"] .sun-smile__spark circle:nth-child(5) { transition-delay: 0.3s; }
.pm .sun-smile:not(.is-touched) .sun-smile__ring { animation: sun-invite 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 2 both; }
.pm .sun-smile:not(.is-touched) .sun-smile__btn::before { animation: sun-halo 2s ease-in-out 0.8s 2 both; }
@keyframes sun-halo { 0%, 100% { opacity: 0; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.06); } }
.pm .sun-smile__tap { transition: opacity 0.3s; }
@keyframes sun-invite { 0%, 100% { stroke-width: 3; opacity: 1; } 50% { stroke-width: 5; opacity: 0.75; } }
.pm .sun-smile__btn:hover .sun-smile__svg { transform: scale(1.04); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm .sun-smile__btn:active .sun-smile__svg { transform: scale(0.97); }
@media (max-width: 767px) { .sun-smile { gap: 1rem; margin-top: 1.5rem; padding: 0.9rem 1rem 0.9rem 0.9rem; } .sun-smile__btn { width: 6rem; height: 6rem; } .sun-smile__line { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .sun-smile * { transition: none !important; animation: none !important; } }

/* ---------- ticker: violet band ---------- */
html.sunlit main section.ticker { background: var(--violet-deep) !important; border-top-color: rgba(255, 255, 255, 0.18); border-bottom-color: rgba(255, 255, 255, 0.1); }
html.sunlit main section.ticker::before { background: linear-gradient(90deg, var(--violet-deep), rgba(75, 61, 217, 0)); }
html.sunlit main section.ticker::after { background: linear-gradient(270deg, var(--violet-deep), rgba(75, 61, 217, 0)); }
html.sunlit .ticker__item { color: #fff; }
html.sunlit .ticker__item strong { color: var(--sun-2); }
html.sunlit .ticker__item::before { background: var(--sun); }
html.sunlit .ticker__toggle { border-color: rgba(255, 255, 255, 0.4); background: rgba(30, 20, 102, 0.55); }

/* ---------- six gaps: white ground, rotating numerals, coral photo ring ---------- */
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+1) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--coral-ink) !important; }
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+2) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--violet-deep) !important; }
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+3) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--aqua-ink) !important; }
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+4) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--coral-ink) !important; }
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+5) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--violet-deep) !important; }
html.luxe.sunlit main .leaks-grid .leaks__slide:nth-child(6n+6) .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--aqua-ink) !important; }
html.luxe.sunlit main .leaks__slide:hover .leaks__title { color: var(--coral-ink); }
html.sunlit .editorial-photo::before, html.sunlit .hero-photo::before { box-shadow: inset 0 0 0 2px rgba(255, 107, 87, 0.65); }
html.sunlit .editorial-photo img, html.sunlit .hero-photo img { filter: saturate(1.02) contrast(1.04) brightness(0.98); }
html.luxe.sunlit main img.photo, html.luxe.sunlit main img.pm-photo, html.luxe.sunlit main img[src$=".jpg"]:not([src*="poster"]) { filter: saturate(1.02) contrast(1.04) brightness(0.98); }
html.sunlit .hero-photo figcaption .kicker-mini { color: var(--sun-2); } html.sunlit .hero-photo figcaption .kicker-mini::before { background: var(--sun); }

/* ---------- deep bands: petrol with a warm coral/violet glow (highlight, not a fill) ---------- */
html.luxe.sunlit main section[data-band="deep"]::before { background: radial-gradient(42% 40% at 88% 0%, rgba(255, 107, 87, 0.16), transparent 70%), radial-gradient(34% 38% at 8% 100%, rgba(109, 93, 246, 0.22), transparent 70%); }
html.luxe.sunlit main section[data-band="deep"] [data-slot="card"]:hover, html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:hover { border-color: rgba(255, 143, 127, 0.55) !important; }
html.luxe.sunlit main section[data-band="deep"] [data-slot="card"] :is(.text-4xl, .text-3xl), html.luxe.sunlit main section[data-band="deep"] [data-slot="card"] .text-4xl { color: var(--sun) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel [class*="text-5xl"] { color: #fff !important; }
html.luxe.sunlit main section[data-band="deep"] .proof-card :is(.bg-white, .bg-lyd-blue, .bg-lyd-yellow, .bg-lyd-yellow-deep)[class*="h-1"] { background: rgba(255, 197, 51, 0.16) !important; color: var(--sun) !important; }
html.luxe.sunlit main :is(section.closing-band, section[data-section="proof"], section[data-section="whynow"]) .watermark { filter: none; opacity: 0.08; }
/* why-now pull quote and source */
html.sunlit main .home-pull strong { color: var(--sun-2) !important; }
html.sunlit main .home-pull::before { background: var(--coral) !important; }

/* ---------- ecosystem: four vibrant stages ---------- */
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(1):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--aqua-ink) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(2):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--violet-deep) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(3):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--coral-ink) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--sun) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4) :is(h3, p, span, [class*="text-5xl"], [class*="uppercase"], [class*="tracking-"]):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--ink) !important; }
html.luxe.sunlit main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow { color: var(--sun-2) !important; }
/* stage 04 sits on sunflower: every word ink (the id compound outranks premium-color's white body-text rule) */
html.luxe.sunlit #main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4) :is(h3, p, span, li, div, [class*="text-5xl"], [class*="uppercase"], [class*="tracking-"]) { color: var(--ink) !important; }
html.sunlit main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow::before { background: var(--sun); }
html.luxe.sunlit main section.hscroll[data-band="deep"] .hscroll__bar > * { background: var(--sun); }

/* ---------- AI band: violet ---------- */
html.luxe.sunlit main section[data-section="aeo"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--violet-deep) !important; }
html.luxe.sunlit main section[data-section="aeo"] .phone-mock:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k), html.luxe.sunlit main section[data-section="aeo"] [class*="bg-lyd-ink"][class*="rounded"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--violet-dark) !important; }
html.luxe.sunlit main section[data-section="aeo"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--sun-2) !important; }
html.luxe.sunlit main section[data-section="aeo"] .td-kicker:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k)::before { background: var(--sun) !important; }
html.luxe.sunlit main section[data-section="aeo"] .bg-lyd-yellow:not(.btn):not(.rounded-full):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: var(--sun) !important; color: var(--ink) !important; }
/* the typed question in the search box sat at 4.15:1 as petrol-grey on violet; white */
html.luxe.sunlit #main section[data-section="aeo"] p[data-typewriter] { color: #fff !important; }
/* body copy on the violet band (the lede and bullets were #b8c9d1 at 4.15:1); bubbles keep their own colours */
html.luxe.sunlit #main section[data-section="aeo"] :is(p, li, li span, li strong, li b):not(svg):not(.rd-aeo-msg):not(.rd-aeo-msg *):not(.phone-mock *) { color: rgba(255, 255, 255, 0.94) !important; }
html.luxe.sunlit main section[data-section="aeo"] :is(.bg-lyd-yellow.rounded-full, [class*="bg-lyd-yellow"].rounded-full, svg[class*="text-lyd-yellow"], .text-lyd-yellow-deep):not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { color: var(--sun) !important; }
html.luxe.sunlit main section[data-section="aeo"] [data-slot="card"]:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; }

/* ---------- pricing on deep: coral Elevate, sunflower prices, aqua ticks ---------- */
html.luxe.sunlit main section[data-section="pricing"][data-band="deep"] { background: var(--ink) !important; }
html.luxe.sunlit main .card-elevate, html.luxe.sunlit main .card-elevate[data-slot="card"], html.luxe.sunlit main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"], html.luxe.sunlit main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"] { background: rgba(255, 107, 87, 0.12) !important; border: 1px solid rgba(255, 143, 127, 0.6) !important; }
html.luxe.sunlit main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(255, 143, 127, 1) 76%, transparent 92%); }
html.luxe.sunlit main [data-section="pricing"] [data-slot="card"] .inline-flex[class*="bg-lyd-yellow"], html.luxe.sunlit main section[data-band="deep"]:has(.card-elevate) [data-slot="card"] .inline-flex[class*="bg-lyd-yellow"], html.luxe.sunlit main .card-elevate .inline-flex[class*="bg-lyd-yellow"] { background: var(--coral) !important; color: var(--ink) !important; }
html.luxe.sunlit main section[data-band="deep"] [data-slot="card"] [class*="bg-lyd-yellow-deep"][class*="h-1"] { background: var(--coral) !important; }
html.luxe.sunlit main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(255, 143, 127, 0.5) !important; }
html.luxe.sunlit main .est-plan[aria-pressed="true"], html.luxe.sunlit main .bg-lyd-yellow.border-lyd-yellow-deep, html.luxe.sunlit main [aria-checked="true"].bg-lyd-yellow { background: var(--sun-tint) !important; border-color: var(--coral) !important; }
html.luxe.sunlit main table thead th { color: var(--coral-ink); }

/* ---------- FAQ: violet-tinted ground, coral toggles ---------- */
html.luxe.sunlit main section[data-section="faq"] { background: var(--violet-tint) !important; }
html.sunlit main .faq-acc summary::after { color: var(--coral-ink) !important; }
html.luxe.sunlit main [data-slot="card"]:hover, html.luxe.sunlit main .card-lyd:hover, html.luxe.sunlit main .carousel-card:hover, html.luxe.sunlit main a.demo-frame:hover { border-color: rgba(255, 107, 87, 0.55) !important; }

/* ---------- closing band + contact card ---------- */
html.luxe.sunlit main section.closing-band .contact-card .text-2xl, html.luxe.sunlit main section.closing-band .contact-card a.text-white, html.luxe.sunlit main section.closing-band .contact-card a[href^="tel:"], html.luxe.sunlit main section.closing-band .contact-card .text-3xl { color: var(--sun-2) !important; }
html.luxe.sunlit main section.closing-band .contact-card a[href^="mailto:"] { text-decoration-color: rgba(255, 214, 102, 0.6); }
html.luxe.sunlit main section.closing-band .contact-card a[href^="mailto:"]:hover { color: var(--sun-2); }
html.sunlit main .cap-link { color: var(--sun-2) !important; }
html.sunlit main .cap-link:hover { color: #fff !important; }

/* ---------- footer ---------- */
html.luxe.sunlit footer.footer-deep, html.luxe.sunlit footer.footer-full.footer-deep { background: #0a2129 !important; border-top: 1px solid rgba(255, 143, 127, 0.3) !important; }
html.luxe.sunlit footer.footer-deep :is(h2, h3, h4) { color: var(--coral-2); }
html.luxe.sunlit footer.footer-deep [class*="rounded-full"][class*="border"] { border-color: rgba(255, 143, 127, 0.4) !important; }
html.luxe.sunlit footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--coral-2) !important; background: rgba(255, 107, 87, 0.12) !important; }
html.sunlit footer.footer-deep .footer-legal { background: #06161c; }

/* ---------- demo frames + pipeline chrome ---------- */
html.luxe.sunlit main .pipe__frame { border-color: rgba(255, 143, 127, 0.3) !important; }
html.luxe.sunlit main .pipe__chrome .pipe__sample { border-color: rgba(255, 214, 102, 0.6); color: var(--sun-2); }
html.luxe.sunlit main .demo-frame::after { background: var(--sun); box-shadow: 0.95rem 0 0 var(--coral), 1.9rem 0 0 var(--aqua); }

/* ---------- Round-5 controls follow the palette ---------- */
html.sunlit .hero-video-toggle:hover, html.sunlit .ticker__toggle:hover { border-color: rgba(255, 214, 102, 0.8); }
html.sunlit .hero-video-toggle:focus-visible, html.sunlit .ticker__toggle:focus-visible { outline-color: var(--sun); }

/* ===== premium-sunnyaid.css ===== */
/* =====================================================================
   LYD AssistOS — SUNNYAID foundation layer (html.sunnyaid). Loaded LAST, homepage only.
   Owner, 8 Sep 2026: "use this zip as the web template" (sunnyaid-ndis-disability-service-template).
   The template IS the design source. This file carries the system only:
   fonts, tokens, the palette re-point, the band grounds and the reusable components.
   It deliberately restyles NO individual homepage section - the six
   premium-sunnyaid-<area>.css files own their own bands and load after this one.

   Template system (read from assets/scss/abstracts/_variables.scss, base/_typography.scss,
   components/_sec-title.scss, _buttons.scss, _service.scss, _cta.scss):
     ground #F7F5F2 cream · panels #0B3948 teal · primary #ffd470 yellow with ink text ·
     body #5d6a83 slate · borders #EFF5F8 · cards white / 20px / hairline / 0 4px 13px 0 #e9e9e4 ·
     headings Recoleta 500, h2 54/64 -> 44/56 (<=1199) -> 32/38.5 (<=767), letter-spacing -0.02em ·
     kicker: white pill, 30px radius, 12px uppercase teal, same soft shadow ·
     signature motif: a hand-drawn yellow ring behind the last word(s) of a heading.

   Measured text pairs (WCAG AA, sRGB):
     ink #0f2e38 on yellow #FFD470  10.1:1   ·  teal #0B3948 on white       12.0:1
     teal #0B3948 on cream #F7F5F2  11.4:1   ·  white on teal #0B3948       12.0:1
     slate #5D6A83 on cream          5.0:1   ·  slate on white               5.5:1
     #d8e3f8 on teal                 9.6:1   ·  #FFE3A8 on teal              9.6:1
     white on rgba(255,255,255,.10) over teal (kicker--onteal)               9.2:1
     white on the smile glass rgba(9,42,54,.66) over mid footage             9.7:1
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Recoleta — the template's bundled heading face (preview/tpl/fonts/)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Regular.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Medium.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-SemiBold.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Bold.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Template tokens. Section builders consume these, never raw hexes.
   --------------------------------------------------------------------- */
html.sunnyaid {
  /* grounds */
  --sa-cream: #F7F5F2;          /* body + "cream" bands */
  --sa-white: #FFFFFF;          /* alternating white bands, cards */
  --sa-teal: #0B3948;           /* dark panels + teal bands */
  --sa-teal-deep: #082B37;      /* a step deeper: insets inside a teal panel */
  --sa-ink: #0f2e38;            /* LYD petrol: headings + text on yellow (kept for continuity) */
  /* accents */
  --sa-yellow: #FFD470;         /* primary button, ticks, the scribble ring */
  --sa-yellow-deep: #F6BA2E;    /* hover/edge of the yellow, ring stroke in the SVG */
  --sa-yellow-soft: #FFE3A8;    /* yellow TEXT on teal (9.6:1) - never use --sa-yellow for text */
  --sa-yellow-tint: #FFF4DC;    /* selected/pressed light chip */
  /* text */
  --sa-slate: #5D6A83;          /* body copy on cream/white */
  --sa-slate-2: #4C6A6D;        /* the template's second body tone */
  --sa-on-teal: #d8e3f8;        /* body copy on teal (9.6:1) */
  --sa-on-teal-strong: #FFFFFF; /* headings + list items on teal */
  /* lines, radii, shadows */
  --sa-border: #EFF5F8;         /* the template's border token */
  --sa-hairline: #EEE5E5;       /* card hairline */
  --sa-radius-card: 20px;
  --sa-radius-panel: 24px;
  --sa-radius-img: 20px;
  --sa-radius-pill: 999px;
  --sa-shadow-card: 0 4px 13px 0 #e9e9e4;
  --sa-shadow-pill: 0 4px 13px 0 #e9e9e4;
  --sa-shadow-arrow: 0 1px 6px 0 rgba(93, 106, 131, 0.25);
  /* type */
  --sa-font-heading: "Recoleta", Georgia, "Times New Roman", serif;
  --sa-font-body: var(--font-sans, "Inter", system-ui, sans-serif);
  --sa-h1: clamp(2rem, 4.9vw, 3.75rem);       /* 32 -> 60px */
  --sa-h1-lh: 1.08;
  --sa-h2: clamp(2rem, 3.9vw, 3.375rem);      /* 32 -> 54px, the template's .title */
  --sa-h2-lh: 1.19;                            /* 64/54 */
  --sa-h3: clamp(1.375rem, 1.6vw, 1.625rem);  /* 22 -> 26px */
  --sa-track: -0.02em;
  /* rhythm: the template's 130px top / 125px bottom desktop */
  --sa-sec-pt: clamp(4rem, 9vw, 130px);
  --sa-sec-pb: clamp(3.75rem, 8.7vw, 125px);
  --sa-head-gap: clamp(2rem, 3.8vw, 55px);    /* heading block -> content */
  /* assets */
  --sa-ring-src: url("/tpl/img/scribble-ellipse.svg");
  --sa-ring-h: 1.24em;           /* the ellipse height, relative to the heading size */
  --sa-tick-src: url("/tpl/img/check_icon.svg"); /* the shipped asset: TEAL disc + YELLOW check */
  /* the template renders the tick the other way round - a YELLOW scalloped disc with a TEAL check
     (see shots/sunnyaid/home-04.png). Same path geometry as check_icon.svg, fills swapped, inlined
     so it cannot 404 and so the disc colour is a token, not a file. This is what .sa-ticks uses. */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 4 22 22'%3E%3Cpath d='M28 15C28 15.9387 26.8468 16.7123 26.6158 17.5777C26.3775 18.4723 26.9807 19.719 26.5278 20.5018C26.0677 21.2975 24.6835 21.3928 24.0382 22.0382C23.3928 22.6835 23.2975 24.0677 22.5018 24.5278C21.719 24.9807 20.4723 24.3775 19.5777 24.6158C18.7123 24.8468 17.9387 26 17 26C16.0613 26 15.2877 24.8468 14.4223 24.6158C13.5277 24.3775 12.281 24.9807 11.4982 24.5278C10.7025 24.0677 10.6072 22.6835 9.96183 22.0382C9.3165 21.3928 7.93233 21.2975 7.47217 20.5018C7.01933 19.719 7.6225 18.4723 7.38417 17.5777C7.15317 16.7123 6 15.9387 6 15C6 14.0613 7.15317 13.2877 7.38417 12.4223C7.6225 11.5277 7.01933 10.281 7.47217 9.49817C7.93233 8.7025 9.3165 8.60717 9.96183 7.96183C10.6072 7.3165 10.7025 5.93233 11.4982 5.47217C12.281 5.01933 13.5277 5.6225 14.4223 5.38417C15.2877 5.15317 16.0613 4 17 4C17.9387 4 18.7123 5.15317 19.5777 5.38417C20.4723 5.6225 21.719 5.01933 22.5018 5.47217C23.2975 5.93233 23.3928 7.3165 24.0382 7.96183C24.6835 8.60717 26.0677 8.7025 26.5278 9.49817C26.9807 10.281 26.3775 11.5277 26.6158 12.4223C26.8468 13.2877 28 14.0613 28 15Z' fill='%23FFD470'/%3E%3Cpath d='M20.2599 12.3792L16.4496 16.08L14.4743 14.1632C14.0456 13.7468 13.3499 13.7468 12.9212 14.1632C12.4924 14.5796 12.4924 15.2553 12.9212 15.6717L15.6922 18.3631C16.1092 18.7682 16.7866 18.7682 17.2036 18.3631L21.8114 13.8877C22.2401 13.4713 22.2401 12.7956 21.8114 12.3792C21.3826 11.9628 20.6886 11.9628 20.2599 12.3792Z' fill='%230B3948'/%3E%3C/svg%3E");
  --sa-arrow-src: url("/tpl/img/arrow_rgiht.svg");
  /* the dotted halftone that edges every dark panel in the template */
  --sa-halftone: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  --sa-halftone-size: 8px 8px;
}

/* ---------------------------------------------------------------------
   3. THE RE-POINT. premium-sunlit.css defines its whole palette as custom
   properties on html.sunlit and then reads them in ~150 rules. Redefining
   them here (same selector, later file, plus .sunnyaid so only the homepage
   moves) re-skins every one of those rules in a single block.
   Every variable premium-sunlit.css declares is listed; nothing is left behind.
   --------------------------------------------------------------------- */
html.sunlit.sunnyaid {
  /* sunflower family -> the template yellow */
  --sun: var(--sa-yellow);            /* was #ffc533 */
  --sun-2: var(--sa-yellow-soft);     /* was #ffd666 - this one is TEXT on dark, so the soft tint */
  --sun-tint: var(--sa-yellow-tint);  /* was #fff4cc */
  /* coral family -> the yellow primary button (paired with ink text everywhere it is used)
     and the teal accent ink for text/focus rings on light grounds */
  --coral: var(--sa-yellow);          /* was #ff6b57  (button fills, dots, badges) */
  --coral-2: var(--sa-yellow-soft);   /* was #ff8f7f  (text + borders on dark) */
  --coral-ink: var(--sa-teal);        /* was #b3361f  (accent TEXT on light, focus rings) */
  --coral-hover: var(--sa-yellow-deep); /* was #f25a45 */
  --coral-tint: var(--sa-yellow-tint);
  /* aqua family -> yellow ticks on dark, teal ticks and panels on light */
  --aqua: var(--sa-yellow);           /* was #19c3b3  (ticks on the deep bands) */
  --aqua-ink: var(--sa-teal);         /* was #0b6f66  (ticks + icons on light, stage-01 panel) */
  --aqua-tint: var(--sa-border);      /* was #ddf7f3 */
  /* violet family -> teal. The template has no violet: the ticker band, the AI band and the
     numerals all become the one deep teal, and the FAQ ground becomes cream. */
  --violet: var(--sa-teal);           /* was #6d5df6 */
  --violet-deep: var(--sa-teal);      /* was #4b3dd9  (ticker bg, AI band bg, numerals) */
  --violet-dark: var(--sa-teal-deep); /* was #1e1466  (the phone mock inside the AI band) */
  --violet-tint: var(--sa-cream);     /* was #ece9ff  (FAQ ground) */
  /* ground + ink: cream body, white as the alternating band (the template's cream -> white) */
  --ink: var(--sa-ink);               /* unchanged #0f2e38: LYD's petrol is the template's teal */
  --paper: var(--sa-cream);           /* was #ffffff -> body + [data-band="cream"] */
  --paper-2: var(--sa-white);         /* was #f6f8fb -> [data-band="surface"] */
  /* the luxe tokens sunlit already re-pointed, followed through to the template palette */
  --gold: var(--coral); --gold-2: var(--sun-2); --gold-3: var(--coral-ink);
  --gold-ink: var(--coral-ink); --gold-grad: var(--coral);
  --ivory: var(--paper); --ivory-2: var(--paper-2); --ink-2: var(--ink);
  --color-lyd-gold-ink: var(--coral-ink);
  --color-lyd-yellow: var(--sun);
  --color-lyd-yellow-deep: var(--sun);
  /* body-copy tokens from premium.css, moved to the template's slate / on-teal pair */
  --color-lyd-secondary: var(--sa-slate);
  --color-lyd-dark-body: var(--sa-on-teal);
  --color-lyd-line-strong: #c9d2da;
}

/* ---------------------------------------------------------------------
   4. Grounds. Cream body, the alternating white band, the teal band.
   --------------------------------------------------------------------- */
html.sunnyaid body,
html.luxe.sunlit.sunnyaid body,
html.luxe.sunlit.sunnyaid main section[data-band="cream"],
html.luxe.sunlit.sunnyaid .pin-over { background: var(--sa-cream) !important; }
html.luxe.sunlit.sunnyaid main section[data-band="surface"] { background: var(--sa-white) !important; border-color: rgba(11, 57, 72, 0.08) !important; }
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:not(.band-photo) { background: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid main section[data-section="faq"] { background: var(--sa-cream) !important; }
/* opt-in ground classes for markup the section builders create */
html.sunnyaid .sa-band-cream { background: var(--sa-cream); }
html.sunnyaid .sa-band-white { background: var(--sa-white); }
html.sunnyaid .sa-band-teal { background: var(--sa-teal); color: var(--sa-on-teal); }
html.sunnyaid .sa-band-teal :is(h1, h2, h3, h4, h5, h6) { color: var(--sa-on-teal-strong); }

/* the deep bands lost their violet/coral glow with the re-point: warm it with the template yellow */
html.luxe.sunlit.sunnyaid main section[data-band="deep"]::before {
  background: radial-gradient(42% 40% at 88% 0%, rgba(255, 212, 112, 0.13), transparent 70%),
              radial-gradient(34% 38% at 8% 100%, rgba(255, 212, 112, 0.08), transparent 70%);
}

/* ---------------------------------------------------------------------
   5. Type. Recoleta on h1/h2/h3 at the template's sizes and letter-spacing.
   Specificity note: premium.css and premium-compact.css both size these with
   !important at (0,2,3), so every rule here is (0,4,3) + !important.
   Card titles inside a .sa-card stay on the body face - so does the template.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main h1.font-display,
html.luxe.sunlit.sunnyaid main h1:not(.font-display) {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h1) !important;
  line-height: var(--sa-h1-lh) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}
html.luxe.sunlit.sunnyaid main h2.font-display,
html.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h2) !important;
  line-height: var(--sa-h2-lh) !important;
  letter-spacing: var(--sa-track) !important;
  font-weight: 500 !important;
  text-transform: none;
}
html.luxe.sunlit.sunnyaid main h3.font-display,
html.luxe.sunlit.sunnyaid main .leaks__title,
html.luxe.sunlit.sunnyaid main .hscroll__panel h3 {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h3) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  font-weight: 500 !important;
}
/* the template loses the letter-spacing as the heading gets smaller */
@media (max-width: 1199px) { html.sunnyaid { --sa-track: -0.01em; --sa-h2-lh: 1.27; } }
@media (max-width: 767px)  { html.sunnyaid { --sa-track: 0em;     --sa-h2-lh: 1.2; } }
/* small headings that are really labels keep the body face */
html.luxe.sunlit.sunnyaid main :is(h2, h3).font-display:is(.text-lg, .text-xl, .text-2xl, .text-base, [class*="text-xs"]),
html.luxe.sunlit.sunnyaid main .faq-acc summary h3,
html.luxe.sunlit.sunnyaid main .sa-card__title {
  font-family: var(--sa-font-body) !important;
  letter-spacing: -0.01em !important;
}
html.luxe.sunlit.sunnyaid main :is(h1, h2, h3).font-display:not(.text-white):not([class*="text-white"]) { color: var(--sa-ink); }
/* anything on a dark ground inverts. These must outrank the rule above (0,6,2), hence the repeats. */
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:not(._x) :is(h1, h2, h3, h4).font-display,
html.luxe.sunlit.sunnyaid main .sa-panel:not(._x) :is(h1, h2, h3, h4),
html.luxe.sunlit.sunnyaid main .sa-band-teal:not(._x) :is(h1, h2, h3, h4),
html.luxe.sunlit.sunnyaid main .sa-card--onteal:not(._x) :is(.sa-card__title, h2, h3, h4) { color: var(--sa-on-teal-strong) !important; }
html.sunnyaid .sa-panel :is(h1, h2, h3, h4),
html.sunnyaid .sa-band-teal :is(h1, h2, h3, h4),
html.sunnyaid .sa-card--onteal .sa-card__title { color: var(--sa-on-teal-strong); }
html.luxe.sunlit.sunnyaid ::selection { background: var(--sa-yellow); color: var(--sa-ink); }

/* ---------------------------------------------------------------------
   6. The ringed heading. The template's signature: scribble-ellipse.svg
   drawn BEHIND the last word(s) of a heading (viewBox 0 0 212 65,
   preserveAspectRatio="none", so it stretches to any word width).
   It is the span's own background, not an absolutely positioned child, for one
   reason that matters here: an inline-block child puts a line break into
   innerText, so the heading's extracted copy became "over and over ." - and the
   copy is canonical. An inline background is byte-identical to the plain text,
   is by definition painted under the element's own glyphs, and survives
   premium.js splitting the heading into .pm-w word spans.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-ring {
  display: inline;
  color: inherit;
  white-space: nowrap;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background-image: var(--sa-ring-src);
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 100% var(--sa-ring-h);
}
/* when motion is allowed the ring draws itself in as the heading arrives */
html.sunnyaid.pm .pm-split .sa-ring { background-size: 0% var(--sa-ring-h); transition: background-size 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
html.sunnyaid.pm .pm-split.pm-in .sa-ring { background-size: 100% var(--sa-ring-h); }
/* Integrator fix (9 Sep 2026): on a dark ground the yellow ring is brighter than the white glyphs, so it
   read as a strike-through rather than a ring drawn behind the word. A tight dark halo on the glyphs puts
   them back in front of it. The why-now band proved the technique in its own file; generalised here so the
   AI-answers and closing headings match. premium.js splits the h2 into .pm-w spans, so the shadow is
   declared on the ring span AND on whatever it wraps. */
html.sunnyaid main section[data-band="deep"] h2 .sa-ring,
html.sunnyaid main section[data-band="deep"] h2 .sa-ring *,
html.sunnyaid main section.closing-band h2 .sa-ring,
html.sunnyaid main section.closing-band h2 .sa-ring *,
html.sunnyaid main section.sa-stages-aeo-aeo h2 .sa-ring,
html.sunnyaid main section.sa-stages-aeo-aeo h2 .sa-ring * {
  text-shadow: 0 0 2px #082b37, 0 0 4px #082b37, 0 0 6px rgba(8, 43, 55, 0.95);
}
@media (max-width: 767px) {
  /* At 32px the ellipse is proportionally taller than the word. nowrap is also dropped: a phrase that
     cannot fit the line must be allowed to break rather than run off a 390 viewport, and
     box-decoration-break:clone gives each fragment its own complete ellipse instead of half of one. */
  html.sunnyaid { --sa-ring-h: 1.5em; }
  html.sunnyaid .sa-ring {
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-position: center 56%;
  }
}

/* ---------------------------------------------------------------------
   7. The kicker. The template replaces the 2px rule + letterspaced label
   with a small white uppercase pill. .td-kicker is the shipped kicker on
   every homepage band, so it becomes the pill; .sa-kicker is for new markup.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-kicker,
html.luxe.sunlit.sunnyaid main .td-kicker,
html.luxe.sunlit.sunnyaid main > section.hero-interior .td-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 12px;
  border-radius: 30px;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-pill);
  border: 0;
  font-family: var(--sa-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
/* the old 2px rule is part of the label, not the pill */
html.luxe.sunlit.sunnyaid main .td-kicker::before,
html.luxe.sunlit.sunnyaid main > section.hero-interior .td-kicker::before,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .td-kicker::before,
html.luxe.sunlit.sunnyaid main section[data-section="aeo"] .td-kicker::before { display: none !important; }
/* the horizontal-scroll band labels its own kicker differently (.inline-flex.bg-lyd-yellow, with a
   2rem hairline in ::before from premium-luxe.css at (0,1,4)); it becomes the same pill */
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow {
  padding: 0 12px !important;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 0.08em !important;
}
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow::before { display: none !important; }

/* on teal (and over footage) the pill goes translucent with white text: 9.2:1 */
html.sunnyaid .sa-kicker--onteal,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .td-kicker,
html.luxe.sunlit.sunnyaid main section[data-section="aeo"] .td-kicker,
html.luxe.sunlit.sunnyaid main section.band-photo .td-kicker,
html.luxe.sunlit.sunnyaid main > section:first-of-type .td-kicker {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   8. The white card. 20px radius, hairline, the template's soft shadow,
   an inner image at the same radius, and the body face for the title.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.25rem, 2.4vw, 2.5rem) clamp(1.75rem, 2.8vw, 3.125rem);
  border-radius: var(--sa-radius-card);
  border: 1px solid var(--sa-hairline);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-card);
  color: var(--sa-slate);
}
html.sunnyaid .sa-card__title {
  margin: 0 0 20px;
  font-family: var(--sa-font-body);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
}
html.sunnyaid .sa-card__text { margin: 0; color: var(--sa-slate); line-height: 1.75; }
html.sunnyaid .sa-card__img {
  margin: 33px 0 30px;
  overflow: hidden;
  border-radius: var(--sa-radius-img);
}
html.sunnyaid .sa-card__img > img { display: block; width: 100%; height: auto; border-radius: inherit; }
html.sunnyaid .sa-card__foot { margin-top: auto; padding-top: 4px; }
html.sunnyaid .sa-card:hover { border-color: rgba(11, 57, 72, 0.22); }
/* the same card on a teal band */
html.sunnyaid .sa-card--onteal {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  color: var(--sa-on-teal);
}
html.sunnyaid .sa-card--onteal .sa-card__title { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-card--onteal .sa-card__text { color: var(--sa-on-teal); }

/* ---------------------------------------------------------------------
   9. The circular arrow link ("Read More" + a white disc with a diagonal arrow).
   The arrow is a mask so it inherits currentColor and needs no second asset.
   --------------------------------------------------------------------- */
html.sunnyaid a.sa-arrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  font-family: var(--sa-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--sa-teal);
}
html.sunnyaid a.sa-arrow > .sa-arrow__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-arrow);
  color: var(--sa-teal);
}
html.sunnyaid a.sa-arrow > .sa-arrow__ico::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.sunnyaid a.sa-arrow:hover > .sa-arrow__ico,
html.sunnyaid a.sa-arrow:focus-visible > .sa-arrow__ico { background: var(--sa-yellow); transform: rotate(45deg); }
html.sunnyaid a.sa-arrow:focus-visible { outline: 2px solid var(--sa-teal); outline-offset: 3px; border-radius: 6px; }
html.sunnyaid .sa-card--onteal a.sa-arrow,
html.sunnyaid .sa-band-teal a.sa-arrow { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-card--onteal a.sa-arrow:focus-visible,
html.sunnyaid .sa-band-teal a.sa-arrow:focus-visible { outline-color: var(--sa-yellow); }
html.sunnyaid.pm a.sa-arrow > .sa-arrow__ico { transition: background 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------------------------------------------------------------------
   10. The teal panel with the dotted halftone. 24px radius, the dots dense
   at the top and bottom edges and fading out through the middle - exactly
   how the template edges .xb-cta and its two "With Sunnyaid, you can" cards.
   .sa-halftone is the overlay on its own, for any dark surface.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(1.75rem, 3.4vw, 3.75rem) clamp(1.5rem, 3.2vw, 3.5rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  color: var(--sa-on-teal);
}
html.sunnyaid .sa-panel :is(h2, h3, h4) { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-panel > * { position: relative; }
html.sunnyaid .sa-panel::before,
html.sunnyaid .sa-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 74%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 74%, #000 100%);
}
html.sunnyaid .sa-halftone { position: relative; z-index: 1; }
html.sunnyaid .sa-halftone > * { position: relative; }
html.sunnyaid .sa-panel--flat::before { display: none; }
html.sunnyaid .sa-panel--deep { background: var(--sa-teal-deep); }

/* ---------------------------------------------------------------------
   11. The yellow tick list. check_icon.svg ships in the template palette
   already (a #FFD470 scalloped disc with a #0B3948 tick), so it is used as
   an image rather than a mask.
   --------------------------------------------------------------------- */
html.sunnyaid ul.sa-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
html.sunnyaid ul.sa-ticks > li {
  position: relative;
  padding-left: 30px;
  font-family: var(--sa-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sa-on-teal-strong);
}
html.sunnyaid ul.sa-ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  background: var(--sa-tick) center / contain no-repeat;
}
html.sunnyaid ul.sa-ticks--light > li { color: var(--sa-ink); }
html.sunnyaid ul.sa-ticks--lede > li { font-size: 1.0625rem; }

/* ---------------------------------------------------------------------
   12. Buttons. Yellow pill with ink text is the one primary; teal pill with
   white text is the secondary; a white pill is the secondary ON teal.
   The shipped .btn-primary-* already inherit the yellow through the
   re-point above; these classes are for markup the builders create.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 3.25rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: var(--sa-radius-pill);
  font-family: var(--sa-font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
html.sunnyaid .sa-btn > .sa-btn__ico {
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.sunnyaid .sa-btn--primary { background: var(--sa-yellow); color: var(--sa-ink); }
html.sunnyaid .sa-btn--primary:hover,
html.sunnyaid .sa-btn--primary:focus-visible { background: var(--sa-yellow-deep); color: var(--sa-ink); }
html.sunnyaid .sa-btn--secondary { background: var(--sa-teal); color: #fff; }
html.sunnyaid .sa-btn--secondary:hover,
html.sunnyaid .sa-btn--secondary:focus-visible { background: var(--sa-teal-deep); color: #fff; }
html.sunnyaid .sa-btn--onteal { background: var(--sa-white); color: var(--sa-teal); }
html.sunnyaid .sa-btn--onteal:hover,
html.sunnyaid .sa-btn--onteal:focus-visible { background: var(--sa-yellow); color: var(--sa-ink); }
html.sunnyaid .sa-btn:focus-visible { outline: 2px solid var(--sa-teal); outline-offset: 3px; }
html.sunnyaid .sa-band-teal .sa-btn:focus-visible,
html.sunnyaid .sa-panel .sa-btn:focus-visible { outline-color: var(--sa-yellow); }
html.sunnyaid.pm .sa-btn { transition: background 0.25s, color 0.25s, transform 0.25s; }
html.sunnyaid.pm .sa-btn:hover { transform: translateY(-2px); }
html.sunnyaid.pm .sa-btn:hover > .sa-btn__ico { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   13. Section rhythm. Opt-in, because premium-compact.css sizes several
   bands with !important at (0,2,2) - this rule is (0,4,3) + !important.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main section.sa-section {
  padding-top: var(--sa-sec-pt) !important;
  padding-bottom: var(--sa-sec-pb) !important;
}
html.luxe.sunlit.sunnyaid main section.sa-section--tight {
  padding-top: calc(var(--sa-sec-pt) * 0.62) !important;
  padding-bottom: calc(var(--sa-sec-pb) * 0.62) !important;
}
html.sunnyaid .sa-sechead { margin-bottom: var(--sa-head-gap); }
html.sunnyaid .sa-sechead > :last-child { margin-bottom: 0; }
html.sunnyaid .sa-lede { max-width: 571px; font-size: 1.0625rem; line-height: 1.75; color: var(--sa-slate); }
html.sunnyaid .sa-band-teal .sa-lede,
html.sunnyaid .sa-panel .sa-lede { color: var(--sa-on-teal); }
html.sunnyaid .sa-hairline { border: 0; border-top: 1px solid var(--sa-border); margin: 0; }

/* ---------------------------------------------------------------------
   14. Sweep: premium-sunlit.css hard-codes coral in ~14 rgba() values that
   no variable can reach. Same selectors, later file, so these win.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid .btn-primary-dark,
html.luxe.sunlit.sunnyaid .btn-primary-light,
html.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"],
html.luxe.sunlit.sunnyaid main a.bg-lyd-yellow[class*="px-"],
html.luxe.sunlit.sunnyaid main a.bg-primary,
html.luxe.sunlit.sunnyaid main a.bg-lyd-ink[class*="px-"],
html.luxe.sunlit.sunnyaid main .card-elevate .btn-primary-light,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .btn-primary-light,
html.luxe.sunlit.sunnyaid footer.footer-deep .btn-primary-light {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
  box-shadow: 0 10px 24px -14px rgba(11, 57, 72, 0.55) !important;
}
html.luxe.sunlit.sunnyaid .pm-btn.btn-primary-dark:hover,
html.luxe.sunlit.sunnyaid .pm-btn.btn-primary-light:hover { box-shadow: 0 16px 30px -14px rgba(11, 57, 72, 0.6) !important; }
html.luxe.sunlit.sunnyaid main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark),
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 212, 112, 0.55) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html.luxe.sunlit.sunnyaid main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark):hover,
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark):hover {
  background: rgba(255, 212, 112, 0.16) !important;
  border-color: var(--sa-yellow) !important;
}
html.luxe.sunlit.sunnyaid .btn-ghost-dark:hover { border-color: var(--sa-yellow) !important; background: rgba(255, 212, 112, 0.12); }
html.luxe.sunlit.sunnyaid .btn-ghost-light:hover { border-color: var(--sa-teal) !important; color: var(--sa-teal); }
html.sunlit.sunnyaid .editorial-photo::before,
html.sunlit.sunnyaid .hero-photo::before { box-shadow: inset 0 0 0 2px rgba(255, 212, 112, 0.7); }
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"]:hover,
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .hscroll__panel:hover,
html.luxe.sunlit.sunnyaid main [data-slot="card"]:hover,
html.luxe.sunlit.sunnyaid main .card-lyd:hover,
html.luxe.sunlit.sunnyaid main .carousel-card:hover,
html.luxe.sunlit.sunnyaid main a.demo-frame:hover { border-color: rgba(255, 212, 112, 0.6) !important; }
html.luxe.sunlit.sunnyaid main .card-elevate,
html.luxe.sunlit.sunnyaid main .card-elevate[data-slot="card"],
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"],
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"] {
  background: rgba(255, 212, 112, 0.1) !important;
  border: 1px solid rgba(255, 212, 112, 0.6) !important;
}
html.luxe.sunlit.sunnyaid main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(255, 212, 112, 1) 76%, transparent 92%); }
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(255, 212, 112, 0.5) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep,
html.luxe.sunlit.sunnyaid footer.footer-full.footer-deep { border-top: 1px solid rgba(255, 212, 112, 0.28) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"] { border-color: rgba(255, 255, 255, 0.34) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--sa-yellow) !important; background: rgba(255, 212, 112, 0.12) !important; }
html.luxe.sunlit.sunnyaid main .pipe__frame { border-color: rgba(255, 212, 112, 0.3) !important; }
html.luxe.sunlit.sunnyaid main .pipe__chrome .pipe__sample { border-color: rgba(255, 212, 112, 0.6); color: var(--sa-yellow-soft); }
html.luxe.sunlit.sunnyaid main .demo-frame::after { background: var(--sa-yellow); box-shadow: 0.95rem 0 0 var(--sa-yellow-soft), 1.9rem 0 0 rgba(255, 255, 255, 0.55); }
html.luxe.sunlit.sunnyaid main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(255, 212, 112, 0.55) 2.6%, rgba(255, 227, 168, 0.62) 95.6%, transparent 98.8%); }
html.luxe.sunlit.sunnyaid main > section:first-of-type .hero-scrim {
  background: linear-gradient(100deg, rgba(8, 32, 42, 0.94) 0%, rgba(8, 32, 42, 0.82) 45%, rgba(11, 57, 72, 0.46) 75%, rgba(11, 57, 72, 0.32) 100%) !important;
}
/* the header rule + skip link follow the yellow */
html.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--sa-yellow) !important; }
html.sunlit.sunnyaid a.skip-link { background: var(--sa-teal); color: var(--sa-yellow); }
html.sunlit.sunnyaid a.skip-link:focus-visible { outline-color: var(--sa-yellow); }

/* FOCUS RING POLICY. The re-point sends --coral-ink (the focus colour premium-sunlit.css uses at
   (0,3,2)) to teal, which is right on cream and white and invisible on a dark band or over footage.
   Teal stays the default; every dark ground gets the yellow ring instead. Both are well over 3:1
   against their ground. These are (0,4,x) + !important so they beat premium-sunlit.css line 57. */
html.luxe.sunlit.sunnyaid main > section:first-of-type :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main section.band-photo :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main .sa-panel :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid main .sa-band-teal :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid footer.footer-deep :is(a, button):focus-visible,
html.luxe.sunlit.sunnyaid body.hero-dark header:not(.pm-scrolled) :is(a, button):focus-visible { outline: 2px solid var(--sa-yellow) !important; outline-offset: 3px; }
html.luxe.sunlit.sunnyaid header.pm-scrolled :is(a, button):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="cream"] :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="surface"] :is(a, button, summary):focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 3px; }

/* ---------------------------------------------------------------------
   15. The smile mark. Required carry-over, one instance, in the hero.
   Defined in premium-sunlit.css; recoloured here, that file is untouched.
   Yellow disc, petrol smile on it, deep-yellow ring, teal glass plate.
   --------------------------------------------------------------------- */
html.sunnyaid .sun-smile {
  background: rgba(9, 42, 54, 0.66);
  border-color: rgba(255, 212, 112, 0.45);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html.sunnyaid .sun-smile[data-state="on"] { border-color: rgba(255, 212, 112, 0.85); }
html.sunnyaid .sun-smile__ring { stroke: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__ring { stroke: var(--sa-yellow-deep); }
html.sunnyaid .sun-smile__disc { fill: var(--sa-yellow); }
html.sunnyaid .sun-smile__flat,
html.sunnyaid .sun-smile__arc { stroke: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__arc { stroke: var(--sa-ink); }
html.sunnyaid .sun-smile__tap { fill: var(--sa-yellow); }
/* every spark sits inside r=43, i.e. on the disc once it blooms, so on the yellow disc they turn petrol */
html.sunnyaid .sun-smile__spark circle { fill: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__spark circle { fill: var(--sa-ink); }
html.sunnyaid .sun-smile__btn:focus-visible { outline: 2px solid var(--sa-yellow); outline-offset: 4px; }
html.sunnyaid .sun-smile__btn::before { background: rgba(255, 212, 112, 0.26); }
html.sunnyaid .sun-smile__line { font-family: var(--sa-font-body); }
html.sunnyaid .sun-smile__link {
  color: var(--sa-yellow-soft) !important;
  border-color: rgba(255, 212, 112, 0.6);
}
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__link {
  background: var(--sa-yellow);
  color: var(--sa-ink) !important;
  border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(11, 57, 72, 0.7);
}
html.sunnyaid .sun-smile__link:hover,
html.sunnyaid .sun-smile__link:focus-visible {
  background: var(--sa-yellow-deep);
  color: var(--sa-ink) !important;
  border-color: transparent;
}
html.sunnyaid .sun-smile__link:focus-visible { outline: 2px solid var(--sa-yellow); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   16. Reduced motion: everything this file adds is decoration, so it stops.
   The static design is complete without any of it.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-ring { background-size: 100% var(--sa-ring-h) !important; transition: none !important; }
  html.sunnyaid :is(.sa-btn, .sa-arrow, .sa-arrow__ico, .sa-card, .sa-panel, .sun-smile, .sun-smile *) {
    transition: none !important;
    animation: none !important;
  }
  html.sunnyaid .sa-btn:hover { transform: none !important; }
  html.sunnyaid a.sa-arrow:hover > .sa-arrow__ico { transform: none !important; }
}

/* ===== premium-sunnyaid-hero.css ===== */
/* =====================================================================
   premium-sunnyaid-hero.css — owner: the SunnyAid HERO builder.
   Scope: `main > section.sa-hero` (the homepage's first section) and nothing else.
   Loaded after premium-sunnyaid.css, so every token and .sa-* component comes
   from there; no hex is written here that is not already a token value.

   The template's hero (assets/scss/components/_hero.scss + _funfact.scss, and
   shots/sunnyaid/home-01.png / ndis-01.png) is a split: a cream copy column with
   a white pill kicker, a Recoleta heading whose emphasis words carry the
   hand-drawn ring, a yellow pill primary next to a solid secondary, and a
   funfact row of `icon + figure + label`; the photograph sits in a rounded frame
   in the other column. That is what this file builds out of the shipped nodes.

   SPECIFICITY, measured against the four layers that fight for this section:
     premium.css            main > section:first-of-type ...        (0,1,2)
     premium-compact.css    main > section:first-of-type ... !imp   (0,1,2)
     premium-luxe.css       html.luxe body main > sec:first [data-elevate] !imp (0,3,4)
                            .luxe main [data-elevate="hero"] *      (0,2,1)
     premium-sunlit.css     html.luxe.sunlit main > section:first   (0,3,2)
     premium-sunnyaid.css   html.luxe.sunlit.sunnyaid main ...      (0,4,2)
   so the prefix used throughout is `html.luxe.sunlit.sunnyaid main > section.sa-hero`
   = (0,5,3), plus !important wherever the loser carries one.

   Measured text pairs in this band (sRGB, against the real composite):
     --sa-ink   #0f2e38 on cream #F7F5F2   11.4:1   h1
     --sa-ink            on white #FFFFFF  13.5:1   the three figures
     --sa-slate #5D6A83  on cream           5.0:1   lede, source line
     --sa-slate          on white           5.5:1   funfact labels
     --sa-teal  #0B3948  on white           12.0:1  kicker pill
     --sa-ink   on --sa-yellow #FFD470      10.1:1  primary CTA
     #fff       on --sa-teal                12.0:1  secondary CTA, smile caption, trust row
     --sa-yellow-soft #FFE3A8 on --sa-teal   9.6:1  the smile's CTA before it is pressed
   ===================================================================== */

/* ---------------------------------------------------------------------
   H1. The band. The footage no longer paints the section, so the section is
   a plain cream block on the template's rhythm. `display:block` and
   `min-height:0` undo the shipped `flex min-h-screen items-center`.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero {
  display: block !important;
  min-height: 0 !important;
  padding-top: clamp(6.25rem, 9.5vw, 9.5rem) !important;
  padding-bottom: clamp(2.5rem, 4.6vw, 4rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--sa-cream);
  /* the media frame is taken flush to the viewport's right edge below, out of the gutter that
     exists outside the 80rem container. That maths uses 100vw, which on a platform with a
     classic (space-taking) scrollbar is a few px wider than the section's own box, so the
     bleed is clipped here rather than allowed to become document overflow. Nothing in this
     band needs to escape horizontally; the accent dot escapes vertically, which clip leaves
     alone. */
  overflow-x: clip;
  overflow-y: visible;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;                      /* matches every band-inner below it */
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap { padding-inline: 2rem; }
}

/* the two columns. The shipped `lg:grid-cols-[1.15fr_0.85fr]` is (0,1,0), so this replaces it. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    --sa-hero-gap: clamp(2rem, 4.2vw, 4.5rem);   /* named: the smile plate's reach measures against it */
    gap: var(--sa-hero-gap);
    align-items: stretch;
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__copy { min-width: 0; }

/* ---------------------------------------------------------------------
   H1. The media frame: the template's rounded photo panel, with the shipped
   footage, its scrim and its pause control inside it.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  box-shadow: 0 34px 70px -44px rgba(11, 57, 72, 0.55);
}
@media (min-width: 768px) and (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
    aspect-ratio: auto;
    min-height: 28rem;
  }
}
/* The template's hero image runs OFF the viewport's right edge (.hero-right_img
   { margin-right: -235px } in _hero.scss, and see home-01.png / ndis-01.png): that is what
   makes the cream/photo split read as a split rather than as a card with a forgotten margin.
   So at >=1024 the media takes the whole gutter to its right - the container's own padding
   plus whatever sits outside the 80rem box - and the frame's right-hand corners are squared
   off, because there is no longer a corner there. The section's overflow-x: clip absorbs the
   few px that 100vw over-reports where a scrollbar takes space, so the edge is exactly flush
   and never becomes document overflow. The first version of this stopped 68px short at 1440,
   which reads as a margin somebody forgot rather than as a deliberate split. */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media {
    margin-right: calc(-1 * (2rem + max(0px, (100vw - 80rem) / 2)));
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
    border-radius: var(--sa-radius-panel) 0 0 var(--sa-radius-panel);
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame > video {
  border-radius: inherit;
  filter: saturate(1.04) contrast(1.04) brightness(0.98);
}
/* the shipped scrim carried the whole headline over the footage; inside a frame it only has to
   keep the pause control legible, so it becomes a soft bottom wash (0,5,2 beats sunnyaid's 0,4,2) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-scrim {
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 43, 55, 0.28) 0%, rgba(8, 43, 55, 0) 34%, rgba(8, 43, 55, 0) 58%, rgba(8, 43, 55, 0.62) 100%) !important;
}
/* the template's two accent dots beside the hero image (.hero-right-dot in _hero.scss), flat fills */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px; height: 18px; top: -9px; right: 2.25rem;
  border-radius: 999px;
  background: var(--sa-yellow);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   H2. Kicker, heading, lede. The foundation already gives every hero kicker
   the translucent-on-dark pill (it used to sit over footage); on cream it
   goes back to the template's white pill with teal text.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .td-kicker.sa-hero__kicker {
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-pill);
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero h1.sa-hero__h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--sa-ink) !important;
  text-wrap: balance;
}
@media (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero h1.sa-hero__h1 { max-width: 20ch; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero p.sa-hero__lede {
  margin: clamp(1.25rem, 1.8vw, 1.75rem) 0 0;
  max-width: 34rem;
  font-family: var(--sa-font-body);
  font-size: clamp(1rem, 1.3vw, 1.0625rem) !important;
  line-height: 1.75;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   H2. The CTA pair: the shipped .btn-primary-dark is already the yellow pill
   through the foundation's re-point, so it only gains the template's pill
   height and the masked arrow. The second button was an outline-on-dark
   ghost, which is invisible on cream: it becomes the solid secondary.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta > a.btn {
  min-height: 3.25rem;
  padding: 1rem 1.875rem;
  border-radius: var(--sa-radius-pill);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2 {
  border: 0 !important;
  background: var(--sa-teal) !important;
  color: #fff !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2:hover,
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2:focus-visible {
  background: var(--sa-teal-deep) !important;
  color: #fff !important;
}
/* the shipped decorative "↗" becomes the template's own arrow_rgiht.svg, masked so it takes the
   button's text colour. The glyph itself is kept in the DOM (it is the node's only child) and only
   collapsed, so the button's accessible name and its extracted copy are unchanged. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__cta .sa-hero__btn-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn1 .sa-hero__btn-ico { background: var(--sa-ink); }
html.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn2 .sa-hero__btn-ico { background: #fff; }
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__cta .sa-hero__btn-ico { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__cta > a.btn:hover .sa-hero__btn-ico { transform: translate(3px, -3px); }

/* ---------------------------------------------------------------------
   H5. The smile mark. One instance, the shipped sunlit widget, promoted to a
   full-width teal feature plate under the CTA row - the way the template
   treats a feature card - with the dotted halftone on its own ::after so
   nothing about the widget's own box, semantics or labels changes.
   Its caption and its CTA are both readable before anything is tapped.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile {
  position: relative;
  z-index: 3;
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile {
  margin-top: 0;
  max-width: none;
  padding: clamp(1rem, 1.6vw, 1.5rem);
  gap: clamp(1rem, 1.8vw, 1.75rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  border: 1px solid rgba(255, 212, 112, 0.45);
  box-shadow: 0 26px 60px -38px rgba(11, 57, 72, 0.75);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #000 100%);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile > * { position: relative; z-index: 1; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 7rem; height: 7rem; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line {
  max-width: 26rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
  color: #fff !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link {
  margin-top: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--sa-radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
}
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 6rem; height: 6rem; }
}
/* under 480 the disc and the text cannot both have room: the plate stacks, which also makes the
   mark bigger on a phone, and the caption and the CTA pill each get the full width of the plate. */
@media (max-width: 479px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 6.5rem; height: 6.5rem; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line { max-width: none; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__btn { width: 8rem; height: 8rem; }
}
/* at >=1200 the plate reaches out of its column and across the gutter: the template's floating
   feature card. It used to reach ~18px FURTHER, across the frame's own left edge, which put it
   on top of the footage's bottom-left corner - and that corner is where the pause control now
   has to live, because the bottom-RIGHT one is the viewport corner the fixed chat launcher
   owns. The reach is now measured against the column gap itself, so the plate stops a fixed
   0.75rem short of the frame at EVERY width and can never sit over a control. Kept off
   narrower viewports, where there is no gutter to reach into. */
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile {
    margin-right: calc(-1 * max(0px, var(--sa-hero-gap, 0px) - 0.75rem));
  }
}

/* ---------------------------------------------------------------------
   H3. The funfact row. The three cited NDIA figures, moved out of the dark
   stat card into the template's `icon + figure + label` row of white cards,
   directly above the source line that qualifies them. Nothing counts: the
   .rd-mask plates from rich-hero are carried over untouched and still rise
   as whole objects once premium.js stamps .pm-in on the section.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts {
  margin-top: clamp(2.5rem, 4.4vw, 4.25rem);
  margin-bottom: 0 !important;
}
/* undo premium-luxe's frosted stat card, which carries !important at (0,3,4) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-in {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ...and its blanket `* { color:#fff }` at (0,2,1) */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-in * { color: inherit; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
@media (min-width: 700px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.3vw, 1.25rem);
  padding: clamp(1.125rem, 1.7vw, 1.625rem) clamp(1.125rem, 1.8vw, 1.75rem);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-radius-card);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-card);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.3vw, 52px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--sa-yellow);
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-ico::before {
  content: "";
  width: 54%;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--sa-ico) center / contain no-repeat;
  mask: var(--sa-ico) center / contain no-repeat;
}
/* three decorative glyphs, authored here as masks: no new file, no new alt text.
   1 a group of people (active providers) · 2 a shield struck through (unregistered) ·
   3 a rising line (the 6% -> 90% target) */
html.sunnyaid .sa-hero__fact-ico--providers {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.6A4.4 4.4 0 0 0 11.6 15H6.4A4.4 4.4 0 0 0 2 19.4V21'/%3E%3Ccircle cx='9' cy='7.5' r='3.9'/%3E%3Cpath d='M22 21v-1.6a4.4 4.4 0 0 0-3.2-4.23'/%3E%3Cpath d='M15.6 3.85a3.9 3.9 0 0 1 0 7.3'/%3E%3C/svg%3E");
}
html.sunnyaid .sa-hero__fact-ico--unregistered {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.7 7.5-9.4V5.2L12 2.5 4.5 5.2v6.9c0 5.7 7.5 9.4 7.5 9.4Z'/%3E%3Cpath d='M9.6 9.6l4.8 4.8'/%3E%3Cpath d='M14.4 9.6l-4.8 4.8'/%3E%3C/svg%3E");
}
html.sunnyaid .sa-hero__fact-ico--target {
  --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5l5.5-5.5 3.5 3.5L21 6.5'/%3E%3Cpath d='M15 6.5h6v6'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__fact-body { min-width: 0; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig {
  display: block;
  font-family: var(--sa-font-heading) !important;
  font-size: clamp(1.5rem, 2.7vw, 2.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
  font-variant-numeric: normal;
}
/* premium-sunlit.css line 75 paints every masked hero figure --sun with !important at (0,4,2):
   on white that is 1.4:1, so it has to lose here. (0,7,3) + !important. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig * { color: inherit !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fact-label {
  display: block;
  margin-top: 5px;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(0.875rem, 1vw, 1rem) !important;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--sa-slate) !important;
}
/* the old card's vertical rule has no counterpart in a funfact row (kept in the DOM, no copy) */
html.sunnyaid .sa-hero__sep { display: none !important; }

html.luxe.sunlit.sunnyaid main > section.sa-hero p.sa-hero__source {
  margin: clamp(1rem, 1.6vw, 1.375rem) 0 0;
  max-width: 62rem;
  font-family: var(--sa-font-body);
  font-size: 0.8125rem !important;
  line-height: 1.6;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   H4. The credential bar. It carries a white wordmark, so it keeps a dark
   ground: the template's teal panel with the dotted halftone. Everything
   premium.css already says about .hero-trust (white 85% caps, the badge
   circles, the ABN link) is correct on teal and is left alone; only the
   border and the drawn hairline are re-pointed, and the hairline is lifted
   out onto the cream above the panel where it reads as a divider.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__trustbar {
  --sa-hero-barpad: clamp(1.25rem, 2.2vw, 2.25rem);
  margin-top: clamp(2.75rem, 4vw, 3.75rem);
  padding: clamp(1.125rem, 1.7vw, 1.5rem) var(--sa-hero-barpad);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
}
/* THE PANEL MUST NOT ARRIVE BEFORE ITS CONTENTS. rich-hero reveals the four credentials on a
   ladder held back by --rd-t0 (1.6s while the row is in view at load, then +.15s and +90ms per
   child): tuned for a 1px hairline sitting just under the fold, but this is now a solid 89px
   teal panel a thousand pixels down the page, so the hold read as a rendering fault - measured,
   all four children at opacity 0 for the first ~800ms and only settled at ~2.5s.
   Two changes, both scoped to this instance:
     1. the panel's own ground is withheld until rich-hero.js stamps .rd-in, then fades in with
        the children. `:not(:has())` is the fail-safe direction: where :has is unsupported the
        selector is invalid, the rule drops, and the solid ground above still paints.
     2. --rd-t0 is compressed to .3s. It is an inline style on the row (rich-hero.js line 15),
        so this needs !important. It is the one number of another builder's that I have moved,
        and only for this section's copy of the row.
   Both are html.pm-gated, so reduced motion and no-JS keep the solid panel from the start. */
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar {
  /* one number drives both halves, so the ground can never run ahead of the credentials again:
     the panel starts fading at --sa-hero-bar-t0 and the first credential .15s after it (that
     .15s is rich-hero's own offset), so they overlap for most of their travel. */
  --sa-hero-bar-t0: 0.3s;
  /* +0.15s is rich-hero's own offset between --rd-t0 and its first child, so the ground and
     the first credential begin on the same frame rather than the ground leading. Measured:
     ground 0.45s -> 0.95s, credentials 0.45s -> 1.17s. */
  transition: background-color 0.5s ease calc(var(--sa-hero-bar-t0) + 0.15s);
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar .rd-hero-trust {
  --rd-t0: var(--sa-hero-bar-t0) !important;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar::before {
  transition: opacity 0.5s ease calc(var(--sa-hero-bar-t0) + 0.15s);
}
/* `transition: none` on the withheld state matters: a transition is chosen from the
   AFTER-change style, so with none here the ground drops out instantly the moment html.pm
   lands (which is before first paint), and only the arrival - the has-.rd-in state above -
   is animated. With the delayed transition left on both sides the 0.3s delay held the ground
   painted while the credentials were still at zero, i.e. it did not fix anything. Measured. */
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar:not(:has(.rd-in)) {
  background-color: transparent;
  transition: none;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__trustbar:not(:has(.rd-in))::before {
  opacity: 0;
  transition: none;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-trust {
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent !important;
  gap: 1rem 1.75rem;
}
/* four credentials across a full-width bar: spread them, as the template spreads its own
   credential strips, rather than leaving half the panel empty */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-trust { justify-content: space-between; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .rd-hero-trust::before {
  content: "";
  position: absolute;
  height: 1px;
  top: -3.25rem;
  left: calc(-1 * var(--sa-hero-barpad));
  right: calc(-1 * var(--sa-hero-barpad));
  background: rgba(11, 57, 72, 0.16);
}
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .rd-hero-trust::before { top: -2.25rem; }
}
/* THE PAUSE CONTROL. It lives inside the frame now, so its shipped offsets (zz-uxpro.css via
   premium-pages.css: left 1.25rem / bottom 1.25rem, plus a viewport-derived clamp at >=1024)
   are re-pointed to the FRAME's corner. It must be the BOTTOM-LEFT corner:
     - bottom-right is the viewport corner the fixed GHL chat launcher reserves. Measured, the
       first version of this file parked it there and document.elementFromPoint at the button's
       centre returned CHAT-WIDGET at 1280x800 and 1440x900, so a real pointer click never
       reached it and a 5s+ autoplaying video could not be stopped by mouse or touch at the two
       commonest desktop sizes. Keyboard still worked and uxpro reported hasPauseBtn=true,
       which is exactly why a harness pass missed it. WCAG 2.2.2 needs the pointer route the
       control exists to provide.
     - and it must be the TOP-left, not the bottom-left. The frame is tall, so between 414 and
       1023 the footage is already playing on screen at load while the frame's BOTTOM is not
       (measured at 768x1024: footage from y=656, a bottom-pinned control at y=988..1032, i.e.
       8px past the fold), which would leave a playing video with no visible way to stop it
       until you scroll. Pinned to the frame's top-left it is on screen whenever any of the
       footage is, at every width, and it is the same corner at every width rather than moving.
       Below 414 the frame's top is itself under the fold, so control and footage arrive
       together.
   The scrim's 0.28 top wash plus the disc's own fill carry its contrast there; sampled from
   real composited pixels below. The smile plate is capped above so it stops short of the
   frame and can never cover this either. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-video-toggle {
  left: 1.25rem !important;
  right: auto !important;
  top: 1.25rem !important;
  bottom: auto !important;
  z-index: 5;
  /* the disc is its own ground, so the glyph never depends on which frame of footage is behind
     it: teal-deep at .72 over anything keeps white above 7:1. */
  background: rgba(8, 43, 55, 0.72);
  border-color: rgba(255, 255, 255, 0.34);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .hero-video-toggle:hover {
  background: rgba(8, 43, 55, 0.88);
}

/* ---------------------------------------------------------------------
   THE BUNDLE'S HERO PARALLAX, re-pointed. The compiled Astro bundle
   (_astro/V2Layout.astro_...js) drives two scroll-linked effects written for a
   hero that was exactly one viewport of footage:
     [data-hero-inner]                 -> translate3d(0,-190px) scale(.88),
                                          opacity 1 -> 0 by 0.71vh, blur 0 -> 7px
     main > section:first-of-type video -> scale(1.28), blur 0 -> 4px
   Both are set as inline styles, so only !important can reach them. The first is
   now actively wrong: this band is 1.35 viewports tall, so the funfact row, the
   NDIA source line and the credential bar all sat inside the element being faded
   to zero and could never be read (measured: opacity 0 at scrollY 662 with the
   trust bar at y=243, i.e. in the middle of the screen). The second was a
   background zoom; inside a 24px frame it reads as the footage swelling out of
   its own edges. So both are stopped, and REPLACED, in kind, by:
     .sa-hero__frame  a fadeInUp entrance (the template's own wow.js device, and
                      a like-for-like stand-in for premium-motion's pm-video-in,
                      which the !important below also stops)
     the footage       a slow drift inside the frame, driven by --sa-hero-vy from
                      sunnyaid-hero.js, which is the template's parallax rather
                      than a full-page zoom. Both are .pm-gated, so reduced
                      motion gets neither and loses nothing.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* the bundle also hangs its pointer parallax on [data-hero-stat] (data-cursor="0.9"):
   a floating stat card could drift with the cursor, a row of cited figures should not. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts { transform: none !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame > video {
  transform: translate3d(0, var(--sa-hero-vy, 0px), 0) scale(1.08) !important;
  filter: saturate(1.04) contrast(1.04) brightness(0.98) !important;
}
html.luxe.sunlit.sunnyaid.pm main > section.sa-hero .sa-hero__frame {
  animation: sa-hero-frame-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes sa-hero-frame-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   FOCUS RINGS, re-measured. premium-sunnyaid.css section 14 gives every
   control in `main > section:first-of-type` a YELLOW ring at (0,6,3),
   because this band used to be footage. It is cream now, and #FFD470 on
   #F7F5F2 is 1.4:1 - nowhere near the 3:1 a focus indicator needs. So the
   band's default goes back to the teal ring (#0B3948 on cream is 11.4:1),
   and only the three dark surfaces inside it - the smile plate, the
   credential bar and the footage frame - keep the yellow one (yellow on
   #0B3948 is 8.9:1, and on the footage it is the only thing that reads).
   Both rules carry .sa-hero__wrap so the dark exception, at (0,7,4), is
   strictly more specific than the band default at (0,7,3).
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap :is(a, button, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__wrap :is(.sun-smile, .sa-hero__trustbar, .sa-hero__frame) :is(a, button, summary):focus-visible {
  outline: 2px solid var(--sa-yellow) !important;
  outline-offset: 3px;
}
/* The ONE rule in this file that reaches outside the band, and it is a consequence of the band:
   sunnyaid-hero.js takes `body.hero-dark` off (the header must not render white-on-transparent
   over a cream hero), which retires premium-sunnyaid.css's `body.hero-dark header:not(.pm-scrolled)`
   yellow ring. The header's own links and its language toggle have no author focus colour of their
   own - the foundation builder recorded that as a pre-existing gap - so without this they fall back
   to the UA default over a near-white bar. Gated on html.sa-hero-light, which only sunnyaid-hero.js
   sets, and only on the homepage. (0,6,3). */
html.luxe.sunlit.sunnyaid.sa-hero-light header:not(.pm-scrolled) :is(a, button):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
  /* AND the ring has to be teal on the FIRST frame. This rule does win - re-measured, the
     computed outline-color settles at rgb(11,57,72) - but the nav links and the language
     toggle carry Tailwind's `transition-colors`, whose property list includes outline-color at
     .15s, so the ring was fading in FROM Tailwind's own --ring grey, oklab(.708 0 0 / .5),
     about 1.5:1 on the near-white bar. Sampled at t=0 / 60 / 150ms it ran grey -> mid -> teal,
     which is how a verifier reading the computed style on the focus frame saw grey and read
     the rule as dead. A ring that starts below 3:1 is not a ring, so outline-color comes off
     the transition list here; the hover colour fade the class was added for is kept. */
  transition-property: color, background-color, border-color !important;
}

/* ---------------------------------------------------------------------
   Reduced motion / no JS. Everything above is static; the only motion this
   file introduces is the arrow nudge and it is already .pm-gated. The
   static design is complete: the ring is fully drawn, the figures sit in
   place, the hairline is at full width.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid main > section.sa-hero .rd-hero-trust::before { transform: none !important; transition: none !important; }
  html.sunnyaid main > section.sa-hero :is(.sa-hero__btn-ico, .sun-smile, .sun-smile *) { transition: none !important; animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__facts-in { animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__frame { animation: none !important; }
  html.sunnyaid main > section.sa-hero .sa-hero__frame > video { transform: scale(1.08) !important; transition: none !important; }
}

/* ===== premium-sunnyaid-gaps.css ===== */
/* premium-sunnyaid-gaps.css — owner: the SunnyAid SIX-GAPS builder (section[data-section="leaks"]: the six white cards, numerals, the haircut photo, "What closes it" disclosures). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there. */

/* =====================================================================
   SIX GAPS LEDGER -> the template's service-card grid.
   Source: shots/sunnyaid/home-02.png + assets/scss/components/_service.scss
   (.xb-services) and _sec-title.scss (.section-title).

   The template's card, measured from the SCSS:
     20px radius · 1px #EEE5E5 · box-shadow 0 4px 13px 0 #e9e9e4 · padding 45px 40px 50px
     title the BODY face 600 at 26px/28px -0.02em (NOT the heading serif - _service.scss
     .xb-item--title, and the foundation's .sa-card__title enforces the same)
     body #5d6a83 · "Read More" + a 40px white disc with
     box-shadow 0 1px 6px 0 rgba(93,106,131,.25) · on hover the whole card fills
     var(--color-primary) #0B3948, the title goes white, the body #d8e3f8 and the disc
     goes yellow. All of that is reproduced here on the shipped .leaks__slide markup.

   Specificity: premium.css (.leaks-grid rules, (0,1,1)-(0,2,2) with !important on
   sizes), premium-luxe.css ((0,2,2)), premium-compact.css ((0,2,1) !important) and
   premium-sunlit.css (the rotating numeral colours, (0,16,2) !important) all set this
   section. The prefix used throughout is html.luxe.sunlit.sunnyaid main ... = (0,4,n),
   with !important only where an earlier layer used it. Every colour is a token.

   Contrast, computed from the sRGB relative luminances of the tokens:
     ink #0f2e38 on yellow #FFD470 chip                        10.1:1
     ink #0f2e38 on cream #F7F5F2 (the disclosure pills)       13.1:1
     slate #5D6A83 card body on white                           5.4:1
     teal #0B3948 title + "What closes it" on white            12.3:1
     white title on the teal hover fill                        12.3:1
     #d8e3f8 body on the teal hover fill                        9.5:1
   The one pairing a formula cannot settle is the photo caption over the
   photograph; that one is measured pixel by pixel in section 7 below.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. The band. The template's 130/125 rhythm, cream ground (the section
   carries no data-band, so it inherits the cream body) and white cards.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main section.sa-gaps { overflow: clip; }

/* ---------------------------------------------------------------------
   2. The header: centred pill kicker + ringed Recoleta h2 + centred lede.
   home-human.cjs makes this a two-column .sec-head-split; the template
   centres it (home-02.png), so the split is folded back into one stack.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-head {
  display: block !important;
  max-width: none;
  margin-bottom: var(--sa-head-gap) !important;
  text-align: center;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-head .sa-gaps-head__stack { display: block; }
html.luxe.sunlit.sunnyaid main .sa-gaps-head .td-kicker { margin: 0 auto 18px !important; }
/* premium-compact.css:98 sets `text-align:left` DIRECTLY on every h2.font-display that
   has no text-center class (`main section h2.font-display:not(.text-center)...`), and a
   matching declaration beats the `text-align:center` inherited from .sa-gaps-head. Above
   ~460px the 20ch shrink-wrap happened to fit the heading on one line so the left-aligned
   line looked centred; the moment it wrapped (<=455px, i.e. every phone) the two lines
   went hard left under a centred kicker. Declared here, on the heading itself, at (0,4,3).
   Same fix the stages-aeo builder used for the same premium-compact rule. */
html.luxe.sunlit.sunnyaid main .sa-gaps-head h2 {
  max-width: 20ch;
  margin: 0 auto !important;
  text-align: center !important;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-head .sa-gaps-lede {
  max-width: 571px !important;
  margin: 1.375rem auto 0 !important;
  padding-bottom: 0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   3. The shell. Two changes:
   (a) .leaks ships capped at max-w-4xl (896px); the template's service
       grid runs the section's full width, so the cap goes. At 1440 that
       gives three 400px cards - the template's own card width.
   (b) premium-photo.css stood the haircut photograph up as a narrow left
       column beside the ledger. Three card columns beside a 4:5 portrait
       leave the portrait 300px wide and 690px tall (0.43) - a thin strip,
       and the crop loses the support worker entirely. As a full-width
       plate above the grid at 16:5 the crop holds both people and the
       scissors, which is the whole point of the caption, and the cards
       get the template's width. Both premium-photo rules are overridden
       here rather than edited (that file is not mine).
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-body { max-width: none !important; }
html.luxe.sunlit.sunnyaid main .sa-gaps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: 0 !important;
  align-items: stretch;
}

/* the card grid: one column, two from 620px, three from 1024px */
html.luxe.sunlit.sunnyaid main .sa-gaps-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.25rem !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  align-content: start;
}
@media (min-width: 620px) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
}

/* ---------------------------------------------------------------------
   4. The card. premium.css/-compact.css make .leaks__slide a bordered
   ledger row (display:block, zero side padding, a bottom hairline); this
   turns it back into the template's white card.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card {
  display: flex !important;
  flex-direction: column;
  padding: clamp(1.375rem, 2.6vw, 2.375rem) clamp(1.25rem, 2.4vw, 2.125rem) clamp(1.5rem, 2.9vw, 2.625rem) !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-card);
  text-align: left;
  overflow: hidden;
}

/* the numbered chip: the template's white "01" pill (home-03.png), here in
   the primary yellow with ink text so the card carries the section accent */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 40px;
  height: 26px;
  margin: 0 0 clamp(0.875rem, 1.4vw, 1.125rem);
  padding: 0 0.625rem;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-yellow);
}
/* the rotating per-row numeral colours are (0,16,2) !important in
   premium-sunlit.css, hence the :not() run: this is (0,17,2). */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-chip .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k):not(._l) {
  color: var(--sa-ink) !important;
  font-family: var(--sa-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
}

/* CARD TITLE FACE. My brief said "Recoleta card heading" and the first build followed it;
   the template's own card title (_service.scss .xb-item--title, home-02.png) is the BODY
   face at 600, and the foundation's shared .sa-card__title enforces Inter 600 for exactly
   that reason. Two votes (the zip, which the brief says wins, and the shared component)
   against one brief line, and serif titles here made these six the only serif cards on the
   site. So the title now matches .sa-card__title exactly: body face 600, clamp 20-26px,
   line-height 1.15, -0.02em, ink. Recoleta stays where the template puts it - section
   headings only. Reported as a deviation from the brief line, not from the template. */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__title {
  margin: 0 0 0.75rem !important;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
}
/* the ring is the site's one highlight device now, so the shipped yellow
   highlighter band inside these six titles stands down. The .marker span
   stays in the DOM (and keeps its premium.js reveal hook); only the paint
   goes. premium-sunnyaid.css re-tints main .marker at (0,4,1). */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__title :is(.marker, .marker-blue) {
  background-image: none !important;
  padding: 0;
  color: inherit;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__text {
  margin: 0 !important;
  max-width: none;
  font-family: var(--sa-font-body);
  font-size: clamp(0.9375rem, 1.15vw, 1rem) !important;
  line-height: 1.75 !important;
  color: var(--sa-slate) !important;
}

/* ---------------------------------------------------------------------
   5. The disclosure = the template's "Read More" + circular arrow row,
   pinned to the card's baseline. It is a disclosure, not a link, so the
   disc carries the shipped chevron (which rich-gaps-whynow.css already
   rotates 180deg on open) rather than the template's 45deg diagonal
   arrow: same geometry, honest affordance.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__foot {
  margin-top: auto;
  padding-top: clamp(1rem, 1.8vw, 1.5rem);
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 1rem !important;
  min-height: 44px;
  margin: 0 !important;
  font-family: var(--sa-font-body) !important;
  /* COPY INTEGRITY. The shipped label is an uppercase letterspaced micro-label and
     "copy is canonical" covers how a shipped control label RENDERS, not just its text
     node - lower-casing it was the one rendered-text difference in this section against
     http://127.0.0.1:4400/. So the uppercase and the tracking come back, at 12px/700
     rather than the shipped 11px, which is also the template's own micro-label metric
     (the pill kicker is 12px uppercase teal). Paired with the 40px disc it still reads
     as the template's "Read More" row; it whispers rather than shouting at 16px. */
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more .rd-gap-btn__t {
  text-decoration: none !important;
  color: inherit !important;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more .rd-gap-chev {
  flex: none;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  padding: 13px;
  border-radius: 100%;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-arrow);
  color: var(--sa-teal);
  overflow: visible;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:hover .rd-gap-chev,
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:focus-visible .rd-gap-chev,
html.luxe.sunlit.sunnyaid main .sa-gaps-card.is-open .rd-gap-chev {
  background: var(--sa-yellow);
  color: var(--sa-ink);
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

/* the answers: the template's tick list, as cream insets inside the card */
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p {
  position: relative;
  margin: 0 0 0.375rem !important;
  padding: 0.625rem 0.875rem 0.625rem 2.375rem !important;
  border: 0 !important;
  border-radius: 12px;
  background: var(--sa-cream);
  max-width: none;
  font-family: var(--sa-font-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.6875rem;
  width: 18px;
  height: 18px;
  background: var(--sa-tick) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p:first-child { margin-top: 0.875rem !important; }
html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p:last-child { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------
   6. Hover: the template's whole-card teal fill (.xb-services:hover).
   Applies whether or not the row is open, so clicking to open never
   flips the ground out from under the pointer. Every pairing inside the
   filled card is >= 9.6:1 (see the header of this file).
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover {
  background: var(--sa-teal);
  border-color: var(--sa-teal) !important;
  box-shadow: 0 18px 36px -20px rgba(11, 57, 72, 0.55);
}
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-card__title,
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more,
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more .rd-gap-btn__t { color: var(--sa-on-teal-strong) !important; }
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-card__text { color: var(--sa-on-teal) !important; }
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .rd-gap-chev { background: var(--sa-yellow); color: var(--sa-ink); }
/* the default focus ring on this band is teal (premium-sunlit.css line 57 via
   --coral-ink); inside a filled card that is invisible, so it turns yellow */
html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more:focus-visible { outline-color: var(--sa-yellow) !important; }

/* ---------------------------------------------------------------------
   7. The photograph. Same figure, same caption, same .rd-photo-drift
   animation; it only picks up the template's 20px radius and its caption
   moves onto the heading face.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig {
  width: 100%;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start;
  aspect-ratio: 4 / 3 !important;
  border-radius: var(--sa-radius-img);
  box-shadow: 0 28px 60px -34px rgba(6, 22, 28, 0.55);
}
html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 50% 46% !important; }
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig { aspect-ratio: 21 / 9 !important; }
  html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 48% 40% !important; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig { aspect-ratio: 16 / 5 !important; }
  html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 48% 38% !important; }
}
/* the shipped 2px yellow inset ring reads loud at plate width: same hue, one pixel */
html.luxe.sunlit.sunnyaid main .sa-gaps-fig::before { box-shadow: inset 0 0 0 1px rgba(255, 212, 112, 0.55) !important; }
/* THE CAPTION SCRIM, measured rather than guessed. The shipped scrim is one bottom
   gradient sized for the 4:5 portrait; on a wide plate the caption lands on the pale
   floor and the window light, and the worst pixel behind "A haircut, at home." fell
   to 3.4-4.2:1. So the bottom gradient is lightened (more photograph shows) and a
   bottom-LEFT corner vignette carries the caption instead. Measured per line, per
   viewport, by hiding the caption text and reading the composite under its own glyph
   rectangles (WCAG needs the WORST pixel, not the mean):
     1440  strong 10.37:1  second line 12.16:1
     1024  strong  8.86:1  second line 11.95:1
      768  strong  9.61:1  second line  8.18:1
      390  strong  9.46:1  second line 10.06:1  (a stronger bottom band below 640,
                          where the plate is small and the caption spans its width)
   For reference, the SHIPPED portrait measured with the same script and the same tight
   glyph rects fails AA: 3.96:1 at 390 and 3.76:1 at 768 for "A haircut, at home."
   (5.71:1 at 1024/1440). So the plate repairs a pre-existing AA failure.
   METHOD NOTE for whoever re-measures: sample the TEXT NODE's Range.getClientRects, not
   the <strong>'s element rect. <strong> here is a block, so its rect spans the caption's
   full width and samples bright photograph where there are no glyphs - that mistake
   reports a bogus 2.5:1 on a caption that actually measures 10:1. */
html.luxe.sunlit.sunnyaid main .sa-gaps-fig::after {
  background:
    linear-gradient(180deg, rgba(6, 22, 28, 0) 46%, rgba(6, 22, 28, 0.62) 100%),
    radial-gradient(105% 82% at 0% 100%, rgba(6, 22, 28, 0.9) 0%, rgba(6, 22, 28, 0.55) 38%, rgba(6, 22, 28, 0) 72%);
}
@media (max-width: 639px) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-fig::after {
    background:
      linear-gradient(180deg, rgba(6, 22, 28, 0) 34%, rgba(6, 22, 28, 0.5) 62%, rgba(6, 22, 28, 0.88) 100%),
      radial-gradient(120% 74% at 0% 100%, rgba(6, 22, 28, 0.72) 0%, rgba(6, 22, 28, 0.34) 46%, rgba(6, 22, 28, 0) 82%);
  }
}
html.luxe.sunlit.sunnyaid main .sa-gaps-cap { left: clamp(1.25rem, 2.4vw, 2rem); right: clamp(1.25rem, 2.4vw, 2rem); bottom: clamp(1.125rem, 2.2vw, 1.75rem); }
html.luxe.sunlit.sunnyaid main .sa-gaps-cap strong {
  font-family: var(--sa-font-heading);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------
   8. Motion. premium.js already observes every .leaks__slide and stamps
   .pm-in on it, so the cards rise in as they arrive with a small
   in-row stagger and no extra script. Gated on html.pm, which premium.js
   only sets when reduced motion is off, so the static design is the
   default and no card can be left invisible.
   --------------------------------------------------------------------- */
html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  transition-delay: calc(var(--sa-gaps-i, 0) * 55ms), calc(var(--sa-gaps-i, 0) * 55ms), 0s, 0s, 0s, 0s;
}
html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card.pm-in { opacity: 1; transform: none; }
/* the stagger resets on every ROW, so the second row is never held back by the first
   row's accumulated delays (the verifier caught row 2 blank for a beat on a fast scroll
   at 1440). Per-card step is 55ms, so a row of three is fully in 110ms after its own
   observer hit, and the breakpoints match the grid's own 620/1024 columns exactly. */
html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card { --sa-gaps-i: 0; }
@media (min-width: 620px) {
  html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(2n + 2) { --sa-gaps-i: 1; }
}
@media (min-width: 1024px) {
  html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 1) { --sa-gaps-i: 0; }
  html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 2) { --sa-gaps-i: 1; }
  html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 3) { --sa-gaps-i: 2; }
}
html.pm.luxe.sunlit.sunnyaid main .sa-gaps-card .rd-gap-chev { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.luxe.sunlit.sunnyaid main .sa-gaps-card .rd-gap-chev { transition: none !important; }
}

/* ===== premium-sunnyaid-whynow.css ===== */
/* premium-sunnyaid-whynow.css — owner: the SunnyAid WHY-NOW builder (section[data-section="whynow"]:
   the 10x10 registration-shift dot grid, the decade rule, the three staggered plates, the kite photo
   drift). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there.

   The band the owner screenshotted. Structure (sunnyaid-whynow.cjs re-parents, never retypes):
     row 1  .sa-whynow-top    split head (pill kicker, ringed Recoleta h2, lede) | the shift figure
     row 2  .whynow-plates    the three market cards as the template's dark tick plates
     row 3  .sa-whynow-rule   the Source line and the decade rule, in one flat teal panel
     row 4  .home-pull        the pull quote, on the photograph

   SPECIFICITY. Everything in this band is fighting three earlier layers that all use !important:
   premium-photo.css at (0,2,3) (it paints every p/li on a photo band #e4ebee and every card
   rgba(6,22,28,.55)), premium-compact.css at (0,2,2), premium-luxe.css widely. The prefix used here is
   `html.sunnyaid main section.sa-whynow` = (0,3,n), plus !important where the loser also used it.
   NOT `html.luxe.sunlit.sunnyaid …`, which is what this file started with: premium.js adds .luxe and
   .sunlit to <html> at runtime, so a prefix that needs them evaporates with JS off - and measured with
   javaScriptEnabled:false the whole band fell back to the un-skinned layer, including a full-width
   yellow decade fill that claimed 2030 had arrived. (0,3,n) still out-ranks both !important losers
   above. The one rule that needs more than that is the plate ground, and it uses the :not() idiom.
   Measured with getComputedStyle at 390/768/1440, JS on and off, not assumed.
   ===================================================================================================== */

/* -----------------------------------------------------------------------------------------------
   1. The band. The template edges every dark surface with the 8px halftone; here it rides on
   .rd-photo::before (z-index 2 inside .rd-photo's own stacking context, so it sits ON the scrim,
   which is .rd-photo::after). The scrim itself is NOT redrawn — rich-photos.css copied it from
   premium-photo.css verbatim, and every measured contrast pairing on this band depends on it.
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .rd-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, #000 100%);
}
/* .band-inner was a two-column grid for the source/decade pair (premium-pages.css (0,2,3)); those two
   now live inside .sa-whynow-rule, so the inner goes back to a plain stack of four rows. */
html.sunnyaid main section.sa-whynow > .band-inner {
  display: block !important;
  position: relative;
  z-index: 2;
}

/* -----------------------------------------------------------------------------------------------
   2. Row 1: the split head beside the shift figure.
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .sa-whynow-top {
  display: grid;
  gap: clamp(2rem, 3.4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  html.sunnyaid main section.sa-whynow .sa-whynow-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  }
}
/* the head was itself a 2-col split (premium-pages.css); inside a column it stacks */
html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 0 !important;
  align-items: start;
}
html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split h2 {
  max-width: 20ch;
  margin: 0;
}
/* THE RINGED WORD, ON A DARK BAND. The foundation rings "90% registered" and paints the ellipse as the
   span's own background at full-strength --sa-yellow. On the six light bands the glyphs under it are
   petrol ink, so yellow-behind-text is the template's own pairing (about 9:1). Here the heading is WHITE,
   and where the ellipse's left and right arcs cross the glyphs white-on-#FFD470 measures 1.41:1 - the
   independent verifier found 8.9% of the ringed word's inked pixels at that ratio, and at a glance the
   band's own headline figure read as struck out. Widening the ellipse is not available: the box already
   ends 2px from the full stop on the right and the word gap on the left is 13px, so both arcs would land
   on a neighbouring glyph instead.
   So the glyphs are knocked out of the ring: three stacked zero-offset shadows in the panel's own
   teal-deep, which CSS paints ABOVE the element's background and BELOW its text. Every inked pixel
   therefore sits on #082B37 (14.9:1) with a ~4px dark gap, and the ellipse reads as what a hand-drawn
   ring is - a stroke passing behind the letters. Measured glyph-by-glyph after the change (two renders,
   the second with the heading's fill forced transparent, contrast computed per inked pixel against the
   real composite): NO pixel sits on the yellow any more, at 390, 768 or 1440. At deviceScaleFactor 2, 0
   of the heading's 34k-89k inked pixels are under 4.5:1 and the worst is 5.39 / 5.39 / 7.06:1, median
   15.3:1. At deviceScaleFactor 1 the single worst antialiased EDGE pixel lands at 4.3-4.6 (390), 5.4
   (768), 5.8 (1440) with the 1st percentile at 10-13:1; the heading is large text, so its floor is 3:1
   and it clears that everywhere. Before the change: 1.41:1 across 8.9% of the ringed word, both the 1st
   and the 5th percentile at 1.41. Every other text group in the band clears 4.5:1 at EVERY pixel (lowest
   6.11:1 at 390, 6.29:1 at 1440). The ring keeps its full-strength yellow: 10.8 / 10.7 / 11.0:1 against
   the band's median ground and 8.4:1 at the photograph's lightest, well over the 3:1 a graphical object
   needs. A denser, wider stack (3/5/7px) was tried and measured WORSE at the edge; this one is tuned.
   Scoped to this band only. The same defect is live on the AI and closing bands, whose h2s are also
   white; the ring is foundation-owned, so that is reported, not reached from here.
   premium.js splits the h2 into .pm-w word spans and recurses into this one, so the shadow is declared
   on the span AND inherited by whatever it wraps. */
html.sunnyaid main section.sa-whynow .sa-whynow-top h2 .sa-ring,
html.sunnyaid main section.sa-whynow .sa-whynow-top h2 .sa-ring * {
  text-shadow:
    0 0 2px #082b37,
    0 0 4px #082b37,
    0 0 6px rgba(8, 43, 55, 0.95);
}

/* the lede: the template's 17px/1.75 intro, white-ward on the photograph (#e4ebee on the .94 scrim) */
html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split > p {
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 44ch;
  font-family: var(--sa-font-body);
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
}

/* -----------------------------------------------------------------------------------------------
   3. THE REGISTRATION-SHIFT GRAPHIC. 100 dots, one per one hundred providers, on the deeper teal
   inset the template uses inside a dark panel. 90 carry .is-on in the HTML, so the end state is what
   renders with no JS and under reduced motion; sunnyaid-whynow.js arms it back to the 6 seed dots
   only under html.pm, and releases it once. No numeral in here ever changes: the two legend lines are
   static text, reproduced verbatim from this page's own ticker.
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .sa-whynow-shift {
  margin: 0;
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset {
  padding: clamp(1.375rem, 2.4vw, 2.25rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(5px, 0.62vw, 9px);
  max-width: 20rem;
  margin: 0 auto;
}
html.sunnyaid main section.sa-whynow .sa-whynow-dot {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.42);   /* 3.8:1 on the inset: hollow vs filled is the graphic */
  background: transparent;
}
html.sunnyaid main section.sa-whynow .sa-whynow-dot.is-on {
  border-color: var(--sa-yellow);
  background: var(--sa-yellow);
}
/* .is-seed carries NO visual difference on purpose. It is only the wave's starting set, and the legend
   has exactly two keys - hollow and filled. Ringing the six would have put a third state on the graphic
   that nothing on the page explains, so the six are only distinguishable in time, before the wave runs. */

/* legend: the page's own two ticker strings, each with its dot swatch */
html.sunnyaid main section.sa-whynow .sa-whynow-shift__legend {
  display: grid;
  gap: 10px;
  margin: clamp(1.125rem, 1.8vw, 1.625rem) 0 0;
  padding: clamp(1.125rem, 1.8vw, 1.625rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__key {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-family: var(--sa-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sa-on-teal) !important;
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__sw {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.42);
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__key--on {
  color: var(--sa-on-teal-strong) !important;
}
html.sunnyaid main section.sa-whynow .sa-whynow-shift__key--on .sa-whynow-shift__sw {
  border-color: var(--sa-yellow);
  background: var(--sa-yellow);
}

/* -----------------------------------------------------------------------------------------------
   4. Row 2: the three market cards become the template's dark plates. Even columns (premium-pages.css
   staggered them diagonally at (0,2,1); the sequenced ENTRY replaces that, so the plates sit level),
   a yellow tick disc in front of each title, the body face for the title exactly as the template's dark
   panels do, and the halftone on the class the recipe adds. The three titles are the checklist: the
   published paragraphs are prose and are NOT re-registered as <li> bullets (see the recipe header).
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .sa-whynow-plates {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
  align-items: stretch;
  margin-top: var(--sa-head-gap);
}
@media (min-width: 768px) {
  html.sunnyaid main section.sa-whynow .sa-whynow-plates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* premium-luxe.css glasses every .bg-lyd-blue/.bg-lyd-yellow inside a deep band at (0,10,2)!important
   (a seven-deep :not() chain) with rgba(255,255,255,.07) + blur(10px), and premium-photo.css paints the
   same nodes rgba(6,22,28,.55) at (0,2,3)!important. Measured, both of them: the (0,3,n)!important prefix
   used everywhere else in this file loses to the first. The `:not(._a)…:not(._j)` idiom premium-color.css
   uses is the way through - it adds ten classes for nothing, taking this rule to (0,13,3), and it needs
   no .luxe in the prefix so the plate is solid with JS on and off. The blur has to go too or the photo
   shows in the
   plate and the body-copy contrast stops being measurable. */
html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
  margin-top: 0 !important;                     /* kills the diagonal offsets */
  display: grid;
  grid-template-rows: max-content 1fr;
  align-content: start;
  padding: clamp(1.5rem, 2.2vw, 2.25rem) !important;
  border-radius: var(--sa-radius-card) !important;
  background: var(--sa-teal) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* the middle card shipped as .bg-lyd-yellow: it is the one that carries the 1 July 2026 date, and the
   original design gave it the emphasis. The plates are otherwise identical, so the emphasis survives as
   a yellow hairline rather than a yellow ground. */
html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate--key:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) {
  border-color: rgba(255, 212, 112, 0.45) !important;
}
html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-family: var(--sa-font-body) !important;   /* the template uses the BODY face inside panels */
  font-size: 1.1875rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--sa-on-teal-strong) !important;
}
/* ONE BASELINE FOR THE THREE BODIES, AT EVERY WIDTH. This started as `h3 { min-height: 2.7em }`, i.e. a
   guess that the longest title ("What unregistered means today") always wraps to exactly two lines. It
   does at >=1024, and it does NOT at 768-1023: in a 224px column it takes three, so the titles measured
   79/59/59px and the first plate's paragraph started 19px below its neighbours. A reserved height cannot
   be right at every column width, so the reservation is gone and the plates share the parent grid's rows
   instead: the row band is two rows tall, each plate spans both, and `grid-template-rows: subgrid` makes
   the h3 and the p resolve against the SHARED tracks - so the title row is as tall as the tallest title
   and all three bodies start on one line, whatever the width. Measured 768/900/1024/1200/1440 after.
   @supports fallback for an engine without subgrid: the old reservation, raised to three lines in the
   one band where three is what the longest title needs. */
@media (min-width: 768px) {
  html.sunnyaid main section.sa-whynow .sa-whynow-plates { grid-template-rows: max-content 1fr; }
  html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate {
    grid-row: span 2;
    /* !important because the plate's own ground rule above carries the ten-:not() idiom at (0,13,3);
       it does not use !important, so this beats it without repeating the chain. */
    grid-template-rows: subgrid !important;
  }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 768px) and (max-width: 1023px) {
    html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 { min-height: 4.05em; }
  }
  @media (min-width: 1024px) {
    html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 { min-height: 2.7em; }
  }
}
/* the template's tick: a yellow scalloped disc with a teal check, from --sa-tick (NOT --sa-tick-src,
   which is the shipped file with the two fills the other way round) */
html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 18px;
  height: 18px;
  background: var(--sa-tick) center / contain no-repeat;
}
html.sunnyaid main section.sa-whynow .sa-whynow-plate > p {
  margin: 0.875rem 0 0 !important;
  font-family: var(--sa-font-body);
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--sa-on-teal) !important;
}

/* -----------------------------------------------------------------------------------------------
   5. Row 3: the decade rule, redrawn in the template's dashed-connector process style, inside a flat
   teal panel so the three date marks are measurable against a known ground instead of against the
   photograph (the 2030 mark used to sit at the lightest end of the scrim, and its caption was the one
   piece of text on this band that could not be verified by eye).

   Every hook rich-gaps-whynow owns is kept and only restyled: __rule (now a dashed connector),
   __fill (now a SOLID yellow progress line that stops at the visitor's own clock, which is what the
   brief asks for and what the old full-width fill never did), __ticks/__tick (now process nodes with
   a white date pill), __now (now a white "you are here" caret, which cannot be mistaken for one of the
   round process nodes it sits 14px away from). rich-gaps-whynow.js still sets --now from the clock.
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .sa-whynow-rule {
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3.2vw, 3.5rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
}
html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-source {
  margin: 0 !important;
  max-width: 60ch;
  font-family: var(--sa-font-body);
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: var(--sa-on-teal) !important;
}
html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-decade {
  --rd-pt: 4.5rem;   /* headroom for the Mar 2025 pill + its caption + the dashed stem: 26+16+13 */
  --sa-stem: 0.85rem;
  grid-column: auto;
  margin: 0 !important;
  padding: var(--rd-pt) 0 3.5rem !important;
}
/* the connector: 8px dash / 8px gap, the template's process line, on the panel ground.
   The dash alpha is .44, not the .34 this file shipped with: sampled from the rendered PNG, .34 composited
   to rgb(94,124,134) on rgb(11,57,72) = 2.78:1, under the 3:1 a graphical object needs, and the spine is
   how the figure reads as a timeline at all. .44 measures 3.5:1, matching the hollow dot ring. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__rule {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.44) 0 8px, rgba(255, 255, 255, 0) 8px 16px) !important;
}
/* progress to today: solid yellow, stopping AT --now (rich-gaps-whynow.js writes --now from the clock) */
html.sunnyaid main section.sa-whynow .rd-gap-decade__fill {
  right: auto;
  width: calc(var(--now, 0) * 100%);
  background: var(--sa-yellow) !important;
  border-radius: 2px;
}
/* the process node. Dates already reached are filled; dates still ahead stay hollow. sunnyaid-whynow.js
   stamps data-sa-past by comparing each tick's --p with --now, so this stays true after 2030. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick {
  max-width: 15rem;
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick::before {
  left: -6px;
  z-index: 2;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--sa-yellow);
  border-radius: 50%;
  background: var(--sa-teal) !important;
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick[data-sa-past]::before {
  background: var(--sa-yellow) !important;
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above::before {
  bottom: calc(-1 * var(--sa-stem) - 1px);
  transform: translateY(50%);
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below::before {
  top: calc(-1 * var(--sa-stem) - 1px);
  transform: translateY(-50%);
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-end::before {
  left: auto;
  right: -6px;
}
/* the dashed stem from the label down (or up) to its node, as the template drops a dash off each step */
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: var(--sa-stem);
  border-left: 1px dashed rgba(255, 255, 255, 0.4);
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above::after { bottom: calc(-1 * var(--sa-stem)); }
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below::after { top: calc(-1 * var(--sa-stem)); }
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-end::after { left: auto; right: 0; }
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above { bottom: calc(100% + var(--sa-stem)); }
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below { top: calc(100% + var(--sa-stem)); }
/* the date itself: the template's white pill, teal text (12.0:1). Manrope keeps its tabular figures. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick b {
  display: inline-block;
  padding: 0 11px;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-pill);
  font: 700 0.8125rem/26px var(--font-display, Manrope, system-ui, sans-serif);
  letter-spacing: 0.01em;
  color: var(--sa-teal);
  font-variant-numeric: tabular-nums;
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__tick span {
  margin-top: 0.4rem;
  font-family: var(--sa-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-on-teal) !important;
}
/* "Today": the yellow marker. The disc is the only yellow disc on the rule that carries a white ring,
   so it reads apart from the three date nodes, and the pill is yellow with ink text (10.1:1). */
html.sunnyaid main section.sa-whynow .rd-gap-decade__now { z-index: 3; transform: translate(-50%, -9px); }
html.sunnyaid main section.sa-whynow .rd-gap-decade__now i {
  width: 3px;
  height: 18px;
  border: 0;
  border-radius: 2px;
  background: var(--sa-white) !important;
  box-shadow: 0 0 0 3px rgba(11, 57, 72, 0.95);
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__now b {
  margin-top: 0.55rem;
  padding: 0 10px;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-yellow);
  font: 600 0.6875rem/22px var(--sa-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-ink) !important;
}
/* THE TODAY LABEL, MOVED ABOVE THE RULE. rich-gaps-whynow.js suppresses "Today / <month>" whenever it
   would crowd a dated tick, and with the fill now stopping at today that suppression bites exactly where
   the marker matters: today (Sept 2026) sits 0.018 of the decade from 1 July 2026, so the label was gone
   and the bar read as an unlabelled second step. BELOW the rule is where the crowding is; above it, next
   to the caret, there is usually nothing. sunnyaid-whynow.js measures that and adds .sa-now-above only
   when the label genuinely clears every .is-above tick label - otherwise the caret stays bare, which is
   the shipped behaviour. Absolute children, so none of this touches __now's own transform and the
   pm reveal (opacity + scale on __now, at (0,5,3)) is left exactly as rich-gaps-whynow.css wrote it. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.is-quiet.sa-now-above :is(b, small) { display: block; }
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above :is(b, small) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above b { bottom: calc(100% + 20px); }
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above small { bottom: calc(100% + 4px); }

/* THE LIFTED TIER, for the widths where the label cannot share the ticks' own tier. At 390 and 768 the
   caret sits under the Mar 2025 label, so the measurement above correctly refused the placement - and the
   band was left with a yellow fill that stopped at an unexplained point and a bare white caret, on the
   two viewports where that matters most. So there is a second attempt: a tier ABOVE every dated label
   that the caret's x actually crowds, with a dashed leader running down to the caret so the reader ties
   the two together. sunnyaid-whynow.js measures the crowding, writes --sa-lift from the real boxes (never
   a magic number: it is the distance from the rule to the top of the tick labels the caret overlaps, plus
   a 12px gap), re-tests the clearance, and takes the class back off if even this tier collides. It also
   raises the figure's own --rd-pt to whatever the lifted label needs, so nothing is clipped. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift small {
  bottom: calc(100% + var(--sa-lift, 60px));
}
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift b {
  bottom: calc(100% + var(--sa-lift, 60px) + 17px);
}
/* the leader, and the window in it. At 390 the caret's x falls under the "94% unregistered" caption, so a
   leader drawn straight through it put 6 of that caption's glyph pixels on a half-white dash at 3.84:1 -
   measured, and under the 4.5 this brief demands. So the leader is masked open where it crosses a label:
   sunnyaid-whynow.js writes --sa-lead-a / --sa-lead-b (distances up from the caret, from the real boxes)
   and the mask makes that span transparent. Unset, both are 100% and the leader is unbroken, which is
   what happens at 768. A leader that breaks around intervening text is what a leader does in print - and
   when the break would leave less than 8px of run at either end (390, where the Mar 2025 pill and its
   caption fill the whole span) the script masks the leader away entirely rather than leave two specks. */
html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: calc(var(--sa-lift, 60px) - 3px);
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 4px, rgba(255, 255, 255, 0) 4px 8px);
  -webkit-mask-image: linear-gradient(to top, #000 0 var(--sa-lead-a, 100%), rgba(0, 0, 0, 0) var(--sa-lead-a, 100%) var(--sa-lead-b, 100%), #000 var(--sa-lead-b, 100%));
  mask-image: linear-gradient(to top, #000 0 var(--sa-lead-a, 100%), rgba(0, 0, 0, 0) var(--sa-lead-a, 100%) var(--sa-lead-b, 100%), #000 var(--sa-lead-b, 100%));
}

html.sunnyaid main section.sa-whynow .rd-gap-decade__now small {
  margin-top: 0.25rem;
  font-family: var(--sa-font-body);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-on-teal) !important;
}

/* -----------------------------------------------------------------------------------------------
   6. Row 4: the pull quote, kept where it is, on the photograph. Recoleta, because in the template a
   line at this size is a heading, and the yellow rule above it becomes the template's own hairline.
   ----------------------------------------------------------------------------------------------- */
html.sunnyaid main section.sa-whynow .home-pull {
  margin-top: clamp(2rem, 3.4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 2px solid var(--sa-yellow) !important;
  max-width: 44rem;
}
html.sunnyaid main section.sa-whynow .home-pull p {
  font-family: var(--sa-font-heading) !important;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--sa-track) !important;
  color: var(--sa-on-teal-strong) !important;
}
html.sunnyaid main section.sa-whynow .home-pull p strong {
  font-weight: 600;
  color: var(--sa-yellow-soft) !important;
}

/* -----------------------------------------------------------------------------------------------
   7. MOTION. Everything here is under html.pm only, so premium.js's reduced-motion branch (which sets
   pm-static and returns) leaves the finished design in place. Three pieces:
     a) the dot wave: the figure is ARMED back to the 6 seed dots by sunnyaid-whynow.js and released
        once when it is half in view. 84 dots at 18ms = 1.8s end to end, then it rests for good.
     b) the plates: premium.js already stamps .pm-stagger + --i on .whynow-grid, so the sequenced
        entry is the site's own 75ms cascade. Only the travel is retuned for a wider plate.
     c) the decade rule keeps rich-gaps-whynow's own draw; only the fill geometry changed.
   ----------------------------------------------------------------------------------------------- */
html.pm.sunnyaid main section.sa-whynow .sa-whynow-dot {
  transition: background-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms);
}
/* armed = the state before the section is reached: only the six seed dots are filled */
html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift.is-armed .sa-whynow-dot.is-on:not(.is-seed) {
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  transform: scale(0.82);
}
html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift__inset {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
html.pm.sunnyaid main section.sa-whynow.pm-in .sa-whynow-shift__inset {
  opacity: 1;
  transform: none;
}
html.pm.sunnyaid main section.sa-whynow .sa-whynow-plates.pm-stagger > * {
  transform: translateY(26px);
}
html.pm.sunnyaid main section.sa-whynow .sa-whynow-plates.pm-stagger.pm-in > * {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid main section.sa-whynow .sa-whynow-dot,
  html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset,
  html.sunnyaid main section.sa-whynow .sa-whynow-plates > * {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------------------------
   8. Narrow. At 767 and below the top row stacks, the plates stack, and the decade rule needs its
   labels above/below with more headroom because "SIL and digital-platform providers must register"
   wraps to three lines under a 1 Jul 2026 pill.
   ----------------------------------------------------------------------------------------------- */
/* 768-1023: the top row has stacked, so the inset is full-bleed (704px at 768) while the dot grid is
   capped. Capping alone left a 352px square island with 176px of dead teal either side, and swelled each
   dot to 30.7px - it read as a dot pattern, not as a hundred providers. So at this width the inset itself
   becomes the two-column figure the 1024+ layout gets vertically: grid on the left at its natural size,
   the two legend keys stacked beside it behind a hairline. No dead ground, and the dots stay ~22px. */
@media (min-width: 768px) and (max-width: 1023px) {
  html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset {
    display: grid;
    /* a FIXED first track, not minmax(0, 17rem): the dot grid is ten 1fr columns of aspect-ratio dots,
       so its max-content contribution is the gaps alone - measured, a minmax track collapsed it to 85px
       and each dot to 4px. */
    grid-template-columns: 17rem auto;
    /* the pair is centred as a unit rather than the legend taking a 1fr track: at 900 and 1023 a 1fr
       legend left the right third of the panel empty, which is the same dead-ground problem one column
       over. justify-content keeps whatever slack there is symmetric. */
    justify-content: center;
    gap: clamp(1.5rem, 3.4vw, 2.5rem);
    align-items: center;
  }
  html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid { width: 100%; max-width: none; }
  html.sunnyaid main section.sa-whynow .sa-whynow-shift__legend {
    margin: 0;
    padding: 0 0 0 clamp(1.5rem, 3.4vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    align-content: center;
    gap: 14px;
  }
}
/* (below 768 the grid is full-width and 5px-gapped; that is set in section 8 with the rest of the
   narrow layout, and it was already correctly proportioned at 390.) */
@media (max-width: 767px) {
  html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split h2 { max-width: none; }
  html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-decade {
    --rd-pt: 4rem;
    padding-bottom: 5.5rem !important;
  }
  html.sunnyaid main section.sa-whynow .rd-gap-decade__tick { max-width: 9.5rem; }
  html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below { max-width: 12rem; }
  html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid { gap: 5px; max-width: none; }
}

/* the one frame in which the figure is armed: no transition, so the wave is never seen running backwards */
html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift.sa-noanim .sa-whynow-dot { transition: none !important; }

/* ===== premium-sunnyaid-stages-aeo.css ===== */
/* premium-sunnyaid-stages-aeo.css — owner: the SunnyAid STAGES + AEO builder
   (section[data-section="eco"] four stages and section[data-section="aeo"] the AI band, phone mock,
   typed question). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there.

   Sources, read not guessed:
     eco  = the template's "our working process" row - assets/scss/components/_work.scss
            (.xb-work: 298px centred column, .xb-item--img 20px radius + overflow hidden,
             .xb-item--number a 40px white disc, 1px #e5ecfb, shadow 0 4px 13px 0 rgba(11,57,72,.25),
             teal numeral; .xb-item--title the BODY face 600 at 26/28 with 17px under it;
             .xb-item--content 16px) plus assets/img/shape/work-shape01.png, the dashed rounded step
            that links the tiles. The step is redrawn here as two dashed borders on a pseudo-element
            so it needs no new asset and follows the grid at any width.
     aeo  = the template's teal feature panel - shots/sunnyaid/home-01.png (dotted halftone panel with
            a white floating card laid on it) and home-04.png (yellow scalloped ticks, one yellow
            button). The dots, the radius and the on-teal text come from .sa-panel in the foundation.

   Specificity: `html.luxe.sunlit.sunnyaid #main …` (1,4,n) is used wherever premium.css,
   -luxe, -color, -compact, -sunlit or the foundation itself set the same property with !important
   (premium-color.css reaches (0,14,2) on the old hscroll panel fills through its :not(._a)…:not(._j)
   idiom, so a class-only prefix is not enough - the id compound is). Plain
   `html.sunnyaid .sa-stages-aeo-*` is used for markup this recipe creates.

   Measured text pairs (sRGB, against the real composite):
     teal #0B3948 on cream #F7F5F2                     11.4:1   stage name + number disc numeral
     ink #0f2e38 on cream                              11.6:1   stage title
     slate #5D6A83 on cream                             5.0:1   stage body, bridge lede
     #FFFFFF on the aeo panel #0B3948                  12.0:1   h2, tick items
     #d8e3f8 on #0B3948                                 9.6:1   lede, composer label
     #FFE3A8 on rgba(255,255,255,.10) over #0B3948      8.9:1   "Simulated example" chip
     ink #0f2e38 on the white search pill              11.6:1   the typed question
     slate on white                                     5.5:1   "Try it yourself" note body
     ink on --sa-yellow #FFD470                        10.1:1   question bubbles, primary button
     #d8e3f8 on rgba(255,255,255,.09) over #082B37      9.2:1   answer bubbles
   ===================================================================================== */

/* =====================================================================================
   1. ECO - the band. The template's process row sits on the cream ground (home-03), and
   the recipe moves data-band from "deep" to "cream" to get there; these rules only have
   to follow the .hscroll wrappers, which premium.css painted petrol by class.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco,
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__runway,
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__stage {
  background: var(--sa-cream) !important;
  color: var(--sa-slate);
}
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco { overflow: clip; }
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__runway { height: auto !important; }
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__stage {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}

/* the header block: centred kicker + ringed h2, the template's process title */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: var(--sa-head-gap) !important;
  text-align: center;
}
html.sunnyaid .sa-stages-aeo-headtext { max-width: 46rem; margin: 0 auto; }
/* premium-compact.css:98 sets every h2.font-display without a text-center class to text-align:left
   directly on the heading, so inheriting from the centred header block is not enough. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head h2 { margin-bottom: 0 !important; text-align: center !important; }
/* the kicker on this band is .inline-flex.bg-lyd-yellow, not .td-kicker: every rule that made it a
   gold hairline label keyed on [data-band="deep"], so it becomes the template's white pill here. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 30px;
  background: var(--sa-white) !important;
  box-shadow: var(--sa-shadow-pill);
  font-family: var(--sa-font-body);
  font-size: 12px !important;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-kicker::before { display: none !important; }

/* =====================================================================================
   2. ECO - the process grid. One column under 640, two to 1199, four from 1200, so all
   four stages and all four sets of copy are on the page at every width.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(2.5rem, 4vw, 3.25rem) 3rem !important;
  align-items: start !important;
  justify-items: center;
  /* the track sits outside the band's .band-inner, so it carries the same gutter itself - otherwise
     the tiles do not line up with the hand-off row underneath (premium.css:76: 80rem, 1rem / 2rem) */
  width: auto !important;
  max-width: 80rem !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  transform: none !important;
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { padding: 0 2rem !important; }
}
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 3rem !important; }
  /* the template's process row is not level: work-shape01.png steps down and back up between the
     tiles. 2rem is the step, and it is what the dashed connectors below span. */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid > .sa-stages-aeo-stage:nth-of-type(2n) { margin-top: 2rem !important; }
}

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage {
  position: relative;
  display: block !important;
  width: 100% !important;
  max-width: 24rem;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  /* rich-photos.css puts overflow:clip on .hscroll__panel so the old bleeding card photo stayed
     inside its radius; the photograph now clips inside its own tile, and a clipping panel would
     swallow the dashed connector that reaches into the gap. `visible` is neither a clipping box nor
     a scroll container, so the drift's view() timeline still resolves to the document. */
  overflow: visible !important;
  /* premium.js gives every .hscroll__panel the pointer tilt it gives cards, as inline --rx/--ry.
     A photo tile is not a card, and a tilting column drags the dashed connector out of line. */
  --rx: 0deg !important;
  --ry: 0deg !important;
}

/* the photo tile: 20px radius, clipped, the template's 253x282 crop */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  flex: none !important;
  aspect-ratio: 253 / 282;
  overflow: hidden;
  border-radius: var(--sa-radius-img);
  background: rgba(11, 57, 72, 0.06);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 639px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { aspect-ratio: 4 / 3; }
}
@media (min-width: 1200px) {
  /* the template's tile is narrower than its column (253 in 298), which is what gives the dashed
     step a run long enough to read; --sa-stages-tile is that width, and the connector geometry
     below is written against it */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { --sa-stages-tile: 15.5rem; }
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { max-width: var(--sa-stages-tile); margin: 0 auto; }
}

/* the copy column starts exactly at the tile's bottom edge, which is what the number disc and the
   connectors are positioned against (the tile itself clips, so neither can live inside it) */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-copy {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 2.125rem 0 0 !important;
  gap: 0 !important;
}
/* the white number disc, straddling the tile's bottom edge (the template's .number02 position) */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-num {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  transform: translateX(-50%);
  border: 1px solid #e5ecfb;
  border-radius: 100%;
  background: var(--sa-white) !important;
  box-shadow: 0 4px 13px 0 rgba(11, 57, 72, 0.25);
  font-family: var(--sa-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  color: var(--sa-teal) !important;
  opacity: 1 !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-name {
  margin: 0 0 0.5rem !important;
  font-family: var(--sa-font-body);
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
/* .xb-item--title: the template sets its process titles in the BODY face at 600, exactly as it sets
   card titles - only true section headings take Recoleta. The foundation puts .hscroll__panel h3 in
   its Recoleta group at (0,4,3)!important, so this is (1,4,3)!important and scoped to this band. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title {
  margin: 0 0 17px !important;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem) !important;   /* the template's 26px cap */
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-text {
  max-width: 298px;
  margin: 0 auto !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--sa-slate) !important;
}

/* hover: the disc takes the template yellow, the tile deepens. Colour only - no transform, so the
   connectors never move and the drifting photograph keeps its own animation. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:hover .sa-stages-aeo-num {
  background: var(--sa-yellow) !important;
  border-color: var(--sa-yellow-deep);
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:hover .sa-stages-aeo-tile { box-shadow: 0 18px 40px -26px rgba(11, 57, 72, 0.55); }
html.sunnyaid.pm .sa-stages-aeo-num,
html.sunnyaid.pm .sa-stages-aeo-tile { transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s; }

/* =====================================================================================
   3. ECO - the dashed step connectors (work-shape01.png, redrawn in CSS). One rounded
   elbow per gap: along the tile's bottom line, then down (or up) the height of the step
   into the next tile. Four across only - below 1200 the tiles stack and there is no gap
   to bridge, so they are simply not drawn.
   ===================================================================================== */
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-copy::after {
    content: "";
    position: absolute;
    /* from this tile's right edge to the next tile's left edge: the column is 100% wide, the tile is
       centred at --sa-stages-tile, and 3rem is the grid gap */
    left: calc(50% + var(--sa-stages-tile) / 2);
    width: calc(100% + 3rem - var(--sa-stages-tile));
    height: 2rem;                       /* = the step between neighbouring stages */
    border-style: dashed;
    border-color: rgba(11, 57, 72, 0.34);
    border-width: 0;
    pointer-events: none;
  }
  /* stages 1 and 3 step DOWN into the next tile */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(odd) .sa-stages-aeo-copy::after {
    top: -1px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-top-right-radius: 14px;
  }
  /* stage 2 steps back UP */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(even) .sa-stages-aeo-copy::after {
    top: calc(-2rem - 1px);
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-right-radius: 14px;
  }
  /* the last stage has nothing to connect to */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(4) .sa-stages-aeo-copy::after { content: none; }
  /* with motion allowed the step draws itself in behind the tiles as the row lands
     (premium.js stamps .pm-in on .hscroll__track and --i on each stage) */
  html.luxe.sunlit.sunnyaid.pm #main .sa-stages-aeo-grid .sa-stages-aeo-copy::after {
    clip-path: inset(0 100% 0 0);
  }
  html.luxe.sunlit.sunnyaid.pm #main .sa-stages-aeo-grid.pm-in .sa-stages-aeo-copy::after {
    clip-path: inset(0);
    transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms + 320ms);
  }
}

/* =====================================================================================
   4. ECO - the hand-off row. premium.css styles .eco-bridge for a dark band by class
   (a white hairline, --color-lyd-dark-body copy) and .btn-ghost-dark is white-on-dark,
   so all three are re-pointed for the cream ground.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge {
  margin-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-top: clamp(2rem, 3vw, 2.75rem) !important;
  border-top: 1px solid var(--sa-border) !important;
  text-align: center;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge p {
  margin: 0 auto 1.5rem !important;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sa-slate) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .eco-bridge__row { justify-content: center; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .btn-ghost-dark {
  border-color: rgba(11, 57, 72, 0.3) !important;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .btn-ghost-dark:hover {
  border-color: var(--sa-yellow-deep) !important;
  background: rgba(255, 212, 112, 0.18) !important;
  color: var(--sa-teal) !important;
}

/* =====================================================================================
   5. AEO - the band and the feature panel. The band drops a step to --sa-teal-deep so the
   panel reads as a panel, and the panel is .sa-panel: 24px radius, the dotted halftone
   masked in from both edges, on-teal body copy, white headings.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-aeo { background: var(--sa-teal-deep) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel {
  background: var(--sa-teal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--sa-radius-panel) !important;
  box-shadow: 0 34px 90px -50px rgba(0, 0, 0, 0.6) !important;
  gap: clamp(2.5rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) !important; }
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-side h2 { margin-bottom: 0 !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-lede { margin-top: 1.75rem !important; color: var(--sa-on-teal) !important; }

/* the typed question becomes the template's white search pill */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q {
  margin-top: 1.75rem !important;
  padding: 0.9375rem 1.375rem !important;
  gap: 0.875rem !important;
  border: 1px solid var(--sa-border) !important;
  border-radius: var(--sa-radius-pill) !important;
  background: var(--sa-white) !important;
  /* --sa-shadow-card is the template's light-ground shadow; on the teal panel it reads as a halo,
     so the two white surfaces here take the same shape in shadow instead */
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.6) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q > svg { color: var(--sa-teal) !important; }

/* premium-sunlit.css:182 paints every p / li / li span inside [data-section="aeo"]
   rgba(255,255,255,.94) !important, and it does it at (1,6,6) - `#main` plus a :not() chain - because
   it assumes the whole band is dark. Two surfaces in the template's feature panel are white (the
   search pill and the floating note card), so those two have to outrank it. The :not(._a)… idiom is
   how this codebase buys specificity without inventing markup (premium-color.css does the same);
   these are (1,8,3) against (1,6,6). Measured after the change: ink 11.6:1 and slate 5.5:1 on white. */
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-q p[data-typewriter],
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-q p[data-typewriter] * { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-note p { color: var(--sa-slate) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-note p strong { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-lede { color: var(--sa-on-teal) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-ticks > li,
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-ticks > li > span:last-child { color: var(--sa-on-teal-strong) !important; }
/* rich-aeo.css sets the Copy control white at (0,3,2) because the box used to be a dark surface;
   on the template's white pill it takes the teal, and so does its focus ring - the foundation's
   dark-band policy would otherwise put a yellow ring on white (1.4:1). */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy {
  color: var(--sa-teal) !important;
  border-color: rgba(11, 57, 72, 0.3) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy .rd-aeo-copy__label { color: inherit !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy .rd-aeo-copy__tick { color: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy:hover,
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy.is-done {
  border-color: var(--sa-teal) !important;
  background: var(--sa-yellow-tint) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q :is(a, button):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
}

/* the three bullets become the template's yellow scalloped tick list. .sa-ticks cannot be used here:
   rich-aeo.css owns li::before (the bar that lights the bullet the current answer speaks to), and the
   yellow disc already exists as a real span, so the span is masked into the template's scalloped
   silhouette instead - nothing is hidden and nothing is drawn twice. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks { margin-top: 2rem !important; display: grid; gap: 12px; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks > li {
  gap: 14px !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  color: var(--sa-on-teal-strong) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks > li > span:last-child { color: var(--sa-on-teal-strong) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tick {
  width: 20px !important;
  height: 20px !important;
  margin-top: 0.22em !important;
  border-radius: 0 !important;
  background: var(--sa-yellow) !important;
  -webkit-mask: var(--sa-tick) center / contain no-repeat;
  mask: var(--sa-tick) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tick > svg { color: var(--sa-teal) !important; }

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-btns { margin-top: 2.25rem !important; gap: 0.75rem !important; }

/* =====================================================================================
   6. AEO - the phone as a floating card, and the note as the white card laid over it
   (home-01: the white "Get Directions" card sitting on the dotted teal panel).
   ===================================================================================== */
html.sunnyaid .sa-stages-aeo-stack { position: relative; }
html.sunnyaid .sa-stages-aeo-float {
  position: relative;
  z-index: 1;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 40px 90px -52px rgba(0, 0, 0, 0.75);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: var(--sa-teal-deep) !important;
  box-shadow: none !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-chip {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--sa-yellow-soft) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-toggle:hover { border-color: var(--sa-yellow) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--q {
  border: 0 !important;
  border-radius: 16px 16px 4px 16px !important;
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--a {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px 16px 16px 4px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--sa-on-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--dots { color: var(--sa-yellow-soft) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-composer {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--sa-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-composer > span:first-child { color: var(--sa-on-teal) !important; }

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note {
  position: relative;
  z-index: 2;
  margin: -1.75rem 0 0 !important;
  padding: 1.25rem 1.375rem !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card) !important;
  background: var(--sa-white) !important;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.62) !important;
  gap: 0.875rem !important;
}
@media (min-width: 1024px) {
  /* laid over the phone's bottom corner and pushed a little past it, the way the template lays its
     white "Get Directions" card over the dotted panel (home-01) */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note { margin: -1.25rem -1.5rem 0 2.5rem !important; }
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note > svg { color: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note p { color: var(--sa-slate) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note p strong { color: var(--sa-ink) !important; font-weight: 600; }

/* =====================================================================================
   7. Reduced motion: the connector is drawn in full from the start and nothing transitions.
   The static design is complete without any of it.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-stages-aeo-copy::after { clip-path: none !important; transition: none !important; }
  html.sunnyaid :is(.sa-stages-aeo-num, .sa-stages-aeo-tile, .sa-stages-aeo-float, .sa-stages-aeo-note) {
    transition: none !important;
    animation: none !important;
  }
}


/* Integrator fix (9 Sep 2026): the AI panel (--sa-teal) sat 1.20:1 against its own band (--sa-teal-deep),
   so its edge was invisible and the band read as one flat slab. A hairline plus a cast shadow makes it read
   as the template's lifted plate without moving either fill, so every measured on-teal pairing still holds. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.75) !important;
}

/* 9 Sep 2026 audit: premium-luxe.css scopes text-wrap: balance to .font-display, and these headings
   are deliberately set in the body face, so they were left wrapping with one-word last lines (the
   worst measured 16% last-line fill). These are the stage titles. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { text-wrap: balance; }

/* ===== premium-sunnyaid-pricing-faq.css ===== */
/* premium-sunnyaid-pricing-faq.css — owner: the SunnyAid PRICING + FAQ builder
   (section[data-section="pricing"] tiers + section[data-section="faq"] accordion).
   Loaded after premium-sunnyaid.css; every token and .sa-* component comes from there.

   SPECIFICITY NOTES, all measured with getComputedStyle, not guessed:
   1. This file is last in <head>. `html.luxe.sunlit.sunnyaid main ...` (0,4,n) was NOT enough:
      rich-tiers.css writes `:is([data-section="pricing"], #plans)` and `:is()` takes the
      specificity of its MOST specific argument, so those rules are (1,3,1) — an id. The prefix
      used throughout this file is therefore `html.luxe.sunlit.sunnyaid #main ...` = (1,4,n),
      which beats rich-tiers' (1,3,1), premium-luxe's (0,10,7) card chain and the foundation's
      (0,9,1) dark-band CTA rule. <main id="main"> is shipped markup, not something added here.
   2. sunnyaid-pricing-faq.cjs removes `data-luxe-band="deep"` from the pricing section, so
      premium.js no longer promotes it to `data-band="deep"` and the ~20 dark-band rules in
      premium-luxe.css (lines 73, 106, 120, 133-152, 189, 222-229) stop matching this section
      altogether. That is why almost nothing below needs !important to fight premium-luxe.
   3. premium-sunnyaid.css section 14 (line 563) still paints the two NON-featured pricing CTAs
      `rgba(255,255,255,.06)` + `#fff` for a dark band, at (0,9,1) with !important. On the light
      band that is white-on-white, so the teal-outline rule below takes it at (1,5,0).
   4. rich-tiers.css line 17-18 paint .rd-tier-num / .rd-tier-unit `var(--gold-2)` !important
      under html.luxe. gold-2 re-points to --sa-yellow-soft (#FFE3A8), which is ~1.3:1 on a white
      card. Overridden below to --sa-ink / --sa-slate. THIS WAS A REAL CONTRAST BUG once the band
      went light; do not remove those two rules.
   5. premium-compact.css owns `.faq-acc summary::after` (the "+" glyph and the 45deg rotation) at
      (0,2,2), and premium-sunlit.css line 198 forces its colour with !important at (0,2,2). The
      circular-toggle rules below are (1,4,1) + !important, so they take the box and the colour
      while compact keeps supplying `content` and the rotation. premium-luxe.css line 101 also
      repaints the "Most popular" badge (`[class*="bg-lyd-yellow"][class*="p-"]`) and the featured
      card `#f8efd6` with !important; the (1,4,0) badge/card rules below take those back.

   RICH HOOKS KEPT (nothing rebuilt): rich-tiers R7 (.rd-tier-price/-num/-unit, the .rd-mask price
   plate, .rd-tier-ledger, .rd-tier-inherit and the .rd-tier-ladder overlay + its JS geometry) and
   rich-closing-faq R11 (.rd-faq-idx, .rd-faq-comp, .rd-faq-aside switching). Their colours are
   re-tinted here; their structure and their JS contracts are untouched.
   -------------------------------------------------------------------------------------------- */

/* =============================================================================================
   1. PRICING — the band. The template alternates cream -> white -> teal; the band above this one
   (aeo) is teal and the band below (faq) is cream, so pricing takes the WHITE step and the cards
   read off it the way the template's own card grid does (hairline + soft shadow, home-02.png).
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq {
  background: var(--sa-white) !important;
}
html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq::before,
html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq::after { content: none !important; background: none !important; }

/* heading block: centred kicker pill + ringed Recoleta h2 + a narrowed lede (the template uses 571px; 40rem keeps this one to three lines) */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-head {
  max-width: none;
  margin: 0 auto var(--sa-head-gap) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-lede {
  max-width: 40rem;
  margin: 1.25rem auto 0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--sa-slate) !important;
}

/* the grid. The template's gutter is 30px; the shipped gap-4 is 16px. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid {
  gap: clamp(1.25rem, 2.1vw, 30px);
  align-items: stretch;
}

/* =============================================================================================
   2. PRICING — the card. _service.scss: 20px radius, 1px #eee5e5, 45px 40px 50px, and the
   template's `0 4px 13px 0 #e9e9e4` card shadow.
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card {
  background: var(--sa-white) !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card) !important;
  box-shadow: var(--sa-shadow-card) !important;
  overflow: hidden;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature {
  background: var(--sa-yellow-tint) !important;
  border-color: rgba(246, 186, 46, 0.6) !important;
  box-shadow: 0 18px 42px -24px rgba(11, 57, 72, 0.34), var(--sa-shadow-card) !important;
}
/* the 6px accent rule above the featured tier (a shipped div.h-1.5). Absolute, so it does not
   consume 6px of flow and push the featured card's name/price/ticks out of line with its siblings. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature { position: relative; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px !important;
  background: var(--sa-yellow-deep) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-body {
  padding: clamp(1.75rem, 2.7vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(2rem, 3vw, 2.75rem) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cardhead {
  gap: 0.75rem;
  margin-bottom: 0 !important;
  min-height: 2rem;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-name {
  font-family: var(--sa-font-heading) !important;
  font-size: clamp(1.5rem, 1.9vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  color: var(--sa-ink) !important;
}
/* "Most popular", as the template's pill: yellow ground, ink text (10.1:1), pill shadow */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-badge {
  height: auto !important;
  flex: none;
  padding: 0.5rem 0.95rem !important;
  border: 0 !important;
  border-radius: var(--sa-radius-pill) !important;
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
  box-shadow: var(--sa-shadow-pill);
  font-family: var(--sa-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the price. Recoleta at display size with a quiet Inter unit beside it. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-price {
  margin-top: 1.35rem;
  align-items: baseline;
  gap: 0.45rem;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-num {
  font-family: var(--sa-font-heading) !important;
  font-size: clamp(2.75rem, 3.7vw, 3.375rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-unit {
  font-family: var(--sa-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sa-slate) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-blurb {
  margin-top: 0.9rem !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--sa-slate) !important;
}
/* the three blurbs run to one, two and one line; reserving two keeps the separator, the first
   tick and the ladder hairline on one baseline across the row, which a price table needs */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-blurb { min-height: 3.4em; }
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-sep {
  margin: clamp(1.5rem, 2vw, 1.85rem) 0 !important;
  background: var(--sa-border) !important;
}

/* =============================================================================================
   3. PRICING — the tick list. The template's tick is a YELLOW scalloped disc with a TEAL check
   (--sa-tick). The shipped markup already ships a yellow disc + a check svg, so the disc is
   upsized to the template's 18px and the check is recoloured teal — nothing is hidden or removed,
   and rich-tiers.js still finds `.rd-tier-inherit > span.rounded-full` to anchor the ladder.
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-ticks {
  margin-bottom: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  display: grid;
  gap: 0.7rem;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 1rem !important;
  line-height: 1.55;
  color: var(--sa-ink) !important;
}
/* the template's inclusion rows have no rules; rich-tiers.css adds a 1px ledger rule at (0,3,n) */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-ticks > li + li {
  border-top: 0 !important;
  padding-top: 0 !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__disc {
  flex: none;
  width: 18px !important;
  height: 18px !important;
  margin-top: 0.18rem !important;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-yellow) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__disc > svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 3.2;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__t { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick.rd-tier-inherit .sa-pricing-faq-tick__t { font-weight: 600; }

/* the rich-tiers ladder: a hairline from each card's right edge to the next card's
   "Everything in ..." tick. Champagne #f1d27c re-tinted to the template yellow. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid .rd-tier-ladder__link { background: var(--sa-yellow-deep) !important; }
/* below 1024 rich-tiers replaces the hairline with a short vertical connector above the
   "Everything in ..." tick; it was drawn for a 16px disc, so it is re-centred on the 18px one */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid .rd-tier-inherit::before {
  left: 8.5px !important;
  top: -0.72rem !important;
  height: 0.62rem !important;
  background: var(--sa-yellow-deep) !important;
}

/* =============================================================================================
   4. PRICING — the CTAs. ONE yellow pill (Elevate) with teal-outline siblings.
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta {
  margin-top: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.25rem !important;
  padding: 0.9rem 1.5rem !important;
  border-radius: var(--sa-radius-pill) !important;
  font-family: var(--sa-font-body);
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--sa-shadow-pill) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary:hover,
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary:focus-visible {
  background: var(--sa-yellow-deep) !important;
  color: var(--sa-ink) !important;
}
/* (1,5,0) + !important, to beat premium-sunnyaid.css line 563's dark-band ghost button (0,9,1) */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost {
  background: transparent !important;
  color: var(--sa-teal) !important;
  border: 1px solid var(--sa-teal) !important;
  box-shadow: none !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost:hover,
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost:focus-visible {
  background: var(--sa-teal) !important;
  color: #fff !important;
  border-color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta:focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 3px; }
/* the decorative glyph becomes the template's own 12px diagonal arrow, masked so it takes
   currentColor (the same asset .sa-btn__ico and .sa-arrow__ico use) */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta__ico {
  flex: none;
  width: 12px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta__ico { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta:hover .sa-pricing-faq-cta__ico { transform: translate(3px, -3px); }

/* =============================================================================================
   5. FAQ — the band and the two columns. Cream (the foundation's ground for this section), with
   the template's 130/125 rhythm from .sa-section.
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq-faq { background: var(--sa-cream) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqgrid { gap: clamp(2.25rem, 4vw, 60px) !important; }
/* the shipped `lg:sticky lg:top-32` offsets this grid item by its own 128px sticky top even when
   its static position already clears the threshold (measured: head y=258 vs accordion y=130; with
   `top:0` both land on 130). A heading that sits 128px below the list it belongs to reads as a
   mistake, and pinning it at top:0 would put it behind the fixed header, so the column goes static
   and the two columns share a baseline - which is also what the template does. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead {
  position: static;
  align-self: start;
}
/* "Read all FAQs" as the template's circular arrow link */
html.luxe.sunlit.sunnyaid #main a.sa-pricing-faq-all {
  margin-top: 1.85rem !important;
  gap: 1.25rem;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: var(--sa-teal) !important;
  text-decoration: none !important;
}

/* =============================================================================================
   6. FAQ — the accordion. The shipped ONE card becomes the container for FOUR plates
   (_faq.scss `.accordion_box .block`: white, own shadow, 20px apart).
   ============================================================================================= */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-acc {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  --tw-ring-shadow: 0 0 #0000;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-acc__in {
  padding: 0 !important;
  display: grid;
  gap: 20px;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-hide { display: none !important; }

html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 2.3vw, 2.15rem) clamp(1.15rem, 2.1vw, 2rem) !important;
  background: var(--sa-white) !important;
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-radius-card);
  box-shadow: 0 8px 15px 0 rgba(220, 220, 220, 0.25);
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate > * { position: relative; }
/* the template's `active-block`: the open plate is a teal panel with the dotted halftone */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) {
  background: var(--sa-teal) !important;
  border-color: var(--sa-teal);
  box-shadow: 0 22px 44px -26px rgba(11, 57, 72, 0.5);
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open])::before { opacity: 1; }
html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-plate { transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }

/* the question row */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  min-height: 44px;
  padding: 0.35rem 0;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q .rd-faq-idx {
  flex: none;
  width: auto !important;
  min-width: 1.9rem;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--sa-slate) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-qt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(1.0625rem, 1.35vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: var(--sa-teal) !important;
}
/* the toggle: premium-compact.css supplies content "+" and the 45deg rotation; this takes the box
   and the colour (both !important, to beat premium-sunlit.css line 198) */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-yellow) !important;
  color: var(--sa-teal) !important;
  box-shadow: var(--sa-shadow-pill);
  font-family: var(--sa-font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q::after {
  background: var(--sa-yellow) !important;
  color: var(--sa-teal) !important;
  box-shadow: none;
}
html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-q::after { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q:hover::after { background: var(--sa-yellow-deep) !important; }
/* focus ring follows the plate's ground, per the foundation's policy: teal on the white plates
   (yellow would be ~1.4:1 there), yellow on the open teal one */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q:focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 4px; border-radius: 10px; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q:focus-visible { outline-color: var(--sa-yellow) !important; }

/* The OPEN plate is teal, so everything inside it inverts. EVERY inversion is scoped by the same
   `:has(> details[open])` that turns the plate teal, never by `[open] >` alone: in a browser
   without :has() the plate stays white, so the whole block has to fall away together or the copy
   would be #d8e3f8/#fff on white. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-qt { color: var(--sa-on-teal-strong) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-idx { color: var(--sa-yellow-soft) !important; }
/* rich-closing-faq's 1px gold rule under the open question */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q::before {
  left: 0 !important;
  right: 0 !important;
  bottom: -0.55rem !important;
  background: rgba(255, 255, 255, 0.22) !important;
}
/* Chromium keeps a CLOSED details' children laid out (content-visibility), so the contrast walker
   reads them: the answer only goes on-teal once its own plate is open, or a closed answer would be
   #d8e3f8 on white (measured at 1.29:1 before this split). */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a {
  margin-top: 1.4rem !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--sa-slate) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-a { color: var(--sa-on-teal) !important; }
/* the answer aligns under the question text, not under the numeral (the template indents its
   `.content` to 92px for the same reason) */
@media (min-width: 480px) {
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-item > .rd-faq-comp { margin-left: calc(1.9rem + clamp(0.6rem, 1vw, 1rem)); }
}

/* the R11 companion sits inside the open (teal) plate below 1024 */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp { border-top-color: rgba(255, 255, 255, 0.2) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp .rd-faq-line { color: var(--sa-on-teal-strong) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp .rd-faq-k { color: var(--sa-yellow-soft) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp a.rd-faq-link {
  color: var(--sa-yellow-soft) !important;
  text-decoration-color: rgba(255, 227, 168, 0.55) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp a.rd-faq-link:focus-visible { outline-color: var(--sa-yellow) !important; }

/* the R11 aside on the cream left column */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead .rd-faq-aside { border-top-color: var(--sa-yellow-deep) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead .rd-faq-line { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead a.rd-faq-link { color: var(--sa-teal) !important; text-decoration-color: rgba(11, 57, 72, 0.4) !important; }

/* =============================================================================================
   7. Small screens. The template drops to one column, loses the letter-spacing and tightens the
   plate padding; the ladder is already replaced by rich-tiers' static connector below 1024.
   ============================================================================================= */
@media (max-width: 1023px) {
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-head { max-width: none; }
}
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cardhead { flex-wrap: wrap; }
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q { gap: 0.6rem; }
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after { width: 40px !important; height: 40px !important; font-size: 1.05rem !important; }
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-item > .rd-faq-comp { margin-left: 0; }
}

/* =============================================================================================
   8. Reduced motion. The static design is complete: the plates keep their teal open state, the
   halftone stays, the toggle still rotates as a STATE (transform on [open] is set by compact, not
   by an animation), and only the transitions stop.
   ============================================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta__ico { transition: none !important; }
  html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta:hover .sa-pricing-faq-cta__ico { transform: none !important; }
}

/* 9 Sep 2026 audit: premium-luxe.css scopes text-wrap: balance to .font-display, and these headings
   are deliberately set in the body face, so they were left wrapping with one-word last lines (the
   worst measured 16% last-line fill). These are the FAQ questions. */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-qt { text-wrap: balance; }

/* ===== premium-sunnyaid-closing-footer.css ===== */
/* =====================================================================
   premium-sunnyaid-closing-footer.css
   Owner: the SunnyAid CLOSING + FOOTER builder.
   Scope: section.closing-band (the teal CTA panel, the document tile, the contact card, the
   watermark) and footer.footer-deep entirely. Nothing outside those two nodes is selected.

   --sa-cf-lift is --sa-shadow-card's geometry in petrol instead of the template's warm grey
   #e9e9e4: the template's cards sit on cream, ours sit on a near-black photograph, where a light
   shadow reads as a halo around the card rather than a lift under it. Cream-ground pages are
   untouched, so they keep the template shadow.

   Design source: the SunnyAid zip — shots/sunnyaid/home-07.png (the cta-wrap teal panel sitting
   over the dark footer, the four-column footer with its 35px teal icon discs and the
   copyright/socials bottom bar) and home-04.png (the .xb-cta panel: 20px radius, dotted halftone
   edges, body-face panel title, yellow pill + white pill), read against
   assets/scss/components/_cta.scss and assets/scss/layout/_footer.scss.

   Tokens only: every colour, radius, shadow and step comes from premium-sunnyaid.css section 2.
   Loaded after premium-sunnyaid.css, so it wins on order over the foundation and over every
   earlier premium*.css. Where an earlier layer used !important the prefix here is
   `html.sunlit.sunnyaid main section.closing-band` (0,4,3) or
   `html.sunlit.sunnyaid footer.footer-deep` (0,4,2), which outranks
   premium-photo.css (0,2,4 / 0,3,4), premium.css (0,2,x), premium-luxe.css (0,2,x),
   premium-sunlit.css (0,3,x) and zz-uxpro's footer rules inside premium-pages.css (0,2,3).

   WHY NOT `.luxe`: `luxe` and `js` are added to <html> by premium.js at runtime, while `sunlit` is
   in the served markup and `sunnyaid` is stamped into it by sunnyaid-00-foundation.cjs. Every
   selector here used to start `html.luxe.sunlit.sunnyaid`, so with scripts off NONE of this file
   applied: the three icon discs the recipe authors had no size and blew up to ~330px, taking the
   footer brand column with them. All 93 selectors now use the static `html.sunlit.sunnyaid` prefix
   (one class lighter, re-measured property by property against the .luxe build), and the three SVGs
   also carry width/height attributes so nothing about their size depends on CSS at all. Only the
   two `html.sunnyaid.pm` transition rules stay on a JS class, which is correct: `pm` IS the
   motion gate.

   Measured text pairs on this section (sRGB, against the real composite):
     white on --sa-teal panel                                12.0:1
     --sa-on-teal #d8e3f8 on the teal panel                   9.6:1
     --sa-ink on --sa-yellow pill                            10.1:1
     --sa-teal on white card                                 12.0:1
     --sa-slate on white card                                 5.5:1
     --sa-on-teal on the footer ground #0a2129               10.9:1
     white on the footer ground                              14.9:1
     --sa-yellow glyph on a --sa-teal disc (icon, non-text)   4.4:1
   ===================================================================== */

/* =====================================================================
   1. CLOSING BAND — the section
   The band keeps the pond photograph (rich-photos' .rd-photo layer and its verbatim scrim) as its
   ground; the template's CTA panel and two white cards float on it. Vertical rhythm comes from
   .sa-section (added by the recipe), which is the template's 130/125.
   ===================================================================== */
html.sunlit.sunnyaid main section.closing-band.sa-cf > .band-inner {
  position: relative;
  z-index: 2;
  /* the template's card shadow (0 4px 13px 0 #e9e9e4) is a warm grey for a cream ground; on the
     pond photograph it haloes. Same geometry, petrol, so the cards lift instead of glowing. */
  --sa-cf-lift: 0 4px 13px 0 rgba(8, 43, 55, 0.45), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

/* the three surfaces. One column under 1024; panel + doc left, contact right above it.
   minmax(0, …) on both tracks is load-bearing: the un-prefixed grid had a single implicit `auto`
   column, so the office-hours pill's max-content width sized the whole column to 432px inside a
   390 viewport and clipped the heading, the lede and the second CTA (the band is overflow:clip).
   That was a pre-existing bug on this band, reproducible on the current homepage. */
html.sunlit.sunnyaid main section.closing-band .sa-cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: stretch;
  /* belt and braces for the recipe's removeAttr('data-lift'): premium.css lifts any
     `main [data-lift="2"]` with `inset 0 1px 0 #ffffffb3`, which on a now-transparent 1216px plate
     floated as a bright 1px line across the pond photograph, in the gutter between the two cards. */
  box-shadow: none !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-grid > * { min-width: 0; }

/* >=1024: the panel and the contact card share the top row and finish level (the template pairs
   its CTA panel with a surface of the same height); the document tile is the white strip beneath
   the panel, in the panel's own column, so the photograph stays visible to the right of it. */
@media (min-width: 1024px) {
  html.sunlit.sunnyaid main section.closing-band .sa-cf-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: clamp(1.5rem, 2.2vw, 1.875rem);
  }
  html.sunlit.sunnyaid main section.closing-band .sa-cf-panel { grid-column: 1; grid-row: 1; }
  html.sunlit.sunnyaid main section.closing-band .sa-cf-contact { grid-column: 2; grid-row: 1; }
  html.sunlit.sunnyaid main section.closing-band .sa-cf-doc { grid-column: 1; grid-row: 2; }
}

/* ---------------------------------------------------------------------
   1a. The teal CTA panel. .sa-panel already paints the teal, the 24px radius, the fluid padding
   and the dotted halftone masked to the top and bottom edges. On a near-black photograph the panel
   needs an edge to read as a raised surface, which is the one thing the template's own panel gets
   from sitting on cream.
   --------------------------------------------------------------------- */
html.sunlit.sunnyaid main section.closing-band .sa-cf-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.85);
}
/* the pill kicker is already converted by the foundation (section[data-band="deep"] .td-kicker);
   it only needs to stop inheriting the badge's 20px height and h-5 line box */
html.sunlit.sunnyaid main section.closing-band .sa-cf-kicker {
  height: auto !important;
  min-height: 30px;
  overflow: visible;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-panel h2 {
  margin: 0;
  max-width: 20ch;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-panel p.sa-cf-lede {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--sa-on-teal) !important;
}
/* the CTA row: yellow pill first, white pill second — the template's pair (home-04) */
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: clamp(1.75rem, 2.6vw, 2.375rem) 0 0;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn {
  min-height: 3.25rem;
  padding: 1rem 1.75rem !important;
  border-radius: var(--sa-radius-pill) !important;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
  border: 0 !important;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.75) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark:hover,
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark:focus-visible {
  background: var(--sa-yellow-deep) !important;
  color: var(--sa-ink) !important;
}
/* the template's secondary on teal: a white pill with teal text (12.0:1) */
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark {
  background: var(--sa-white) !important;
  color: var(--sa-teal) !important;
  border: 1px solid var(--sa-white) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:hover,
html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:focus-visible {
  background: var(--sa-yellow) !important;
  border-color: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
}

/* ---------------------------------------------------------------------
   1b. The document tile as a floating white card. Same node, same href, same two lines and the
   same cover thumbnail that rich-closing-faq built; it is now a .sa-card instead of a bare link.
   Its old rules live at (0,2,3)/(0,3,3) in premium-pages.css, so (0,5,3) here wins.
   --------------------------------------------------------------------- */
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.375rem);
  margin: 0 !important;
  padding: clamp(1rem, 1.6vw, 1.375rem) clamp(1rem, 1.8vw, 1.5rem) !important;
  border-radius: var(--sa-radius-card);
  border: 1px solid var(--sa-hairline);
  background: var(--sa-white);
  box-shadow: var(--sa-cf-lift);
  color: var(--sa-slate) !important;
  text-decoration: none;
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__thumb {
  width: 3.25rem;
  height: 4.5rem;
  border-radius: 4px;
  box-shadow: 0 8px 18px -12px rgba(11, 57, 72, 0.55);
}
/* the folded corner is redrawn in template colours: the petrol cut above, the yellow fold below */
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__thumb::after {
  border-color: transparent var(--sa-teal) var(--sa-yellow) transparent;
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta {
  flex: 1 1 auto;
  gap: 0.35rem;
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta strong {
  font-family: var(--sa-font-body);
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sa-ink) !important;
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta .rd-card-doc__s {
  font-size: 0.875rem !important;
  font-weight: 500;
  color: var(--sa-slate) !important;
}
/* the template's circular arrow button, on the card's own baseline */
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .sa-cf-doc__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-arrow);
  color: var(--sa-teal);
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .sa-cf-doc__go::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover,
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:focus-visible {
  border-color: rgba(11, 57, 72, 0.24);
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover .sa-cf-doc__go,
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:focus-visible .sa-cf-doc__go {
  background: var(--sa-yellow);
  transform: rotate(45deg);
}
html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover .rd-card-doc__meta strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.sunnyaid.pm main section.closing-band a.sa-cf-doc .sa-cf-doc__go { transition: background 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
html.sunnyaid.pm main section.closing-band a.sa-cf-doc { transition: border-color 0.3s, box-shadow 0.3s; }

/* ---------------------------------------------------------------------
   1c. The contact card as a floating white card. Every node stays: the intro sentence, the phone
   number in its .rd-mask, the three ruled icon rows (rich-closing-faq's colophon), the office-hours
   pill that rich-closing-faq.js hangs on the hours line, and the three social links.
   premium-photo.css paints this band's p/li #e4ebee !important at (0,2,4); (0,5,4) below wins.
   --------------------------------------------------------------------- */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.375rem, 2.2vw, 2.125rem) clamp(1.5rem, 2.4vw, 2.125rem) !important;
  border-radius: var(--sa-radius-card);
  border: 1px solid var(--sa-hairline) !important;
  background: var(--sa-white) !important;
  /* !important because premium-luxe.css:114 `.luxe main section.closing-band .contact-card` sets
     its dark-glass shadow with !important; without it this card kept premium-luxe's shadow and the
     two white cards on this band did not match. Measured after the fix, both now read --sa-cf-lift. */
  box-shadow: var(--sa-cf-lift) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--sa-slate) !important;
}
/* the blanket re-colour of everything premium-photo painted for dark glass. .ci is a <span>, so it
   matched this too and the icon rule below (no !important) lost the cascade: the glyphs rendered
   slate on a teal disc at 2.3:1. The office-hours pill and the icon discs are both excluded. */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact :is(p, li, span, div):not(.rd-card-hours):not(.rd-card-hours *):not(.ci):not(.ci *) { color: var(--sa-slate) !important; }
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact > p:first-of-type {
  margin: 0;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
}
/* the phone number: the colophon's block numeral, now petrol on white between template hairlines */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"] {
  margin: clamp(1.125rem, 1.8vw, 1.5rem) 0 0 !important;
  padding: clamp(0.875rem, 1.4vw, 1.125rem) 0 !important;
  color: var(--sa-teal) !important;
  border-top: 1px solid var(--sa-hairline) !important;
  border-bottom: 1px solid var(--sa-hairline) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"] :is(.rd-mask, .rd-mask__in) { color: inherit !important; }
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"]:hover { color: var(--sa-teal-deep) !important; }
/* the ruled rows and their icon discs: the template's 35px circle, yellow on teal */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line {
  gap: 0.85rem;
  padding: 0.625rem 0 !important;
  border-bottom: 1px solid var(--sa-border) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line:last-of-type { border-bottom: 0 !important; }
/* the template's 35px disc. One glyph colour for all six discs on this screen (three here, three
   in the footer): --sa-yellow on --sa-teal, 8.8:1. Measured after the fix, not assumed. */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci,
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci svg {
  color: var(--sa-yellow) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci {
  width: 2.1875rem;
  height: 2.1875rem;
  border: 0;                       /* premium.css rims it in yellow; the template's disc is flat */
  background: var(--sa-teal);
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line a { color: var(--sa-teal) !important; font-weight: 500; }
/* premium-sunlit.css:203 underlines the mailto in rgba(255,214,102,.6), which was right on the old
   dark-glass card and is a 1.6:1 smudge on a white one. Same underline, petrol at 45%. */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line a[href^="mailto:"] {
  text-decoration-color: rgba(11, 57, 72, 0.45) !important;
  text-underline-offset: 3px;
}
/* the office-hours pill: teal outline, slate label, on white */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours {
  border-color: rgba(11, 57, 72, 0.3) !important;
  color: var(--sa-slate) !important;
  background: var(--sa-white);
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours .rd-card-hours__t { color: var(--sa-slate) !important; }
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours[data-state="open"] .rd-card-hours__dot { background: var(--sa-teal) !important; border-color: var(--sa-teal) !important; }
/* the pill's `width: max-content` (premium-pages.css, <=480) was the other half of the 390 clip:
   inside a grid item with min-width:auto it set the whole column's min-content width. */
@media (max-width: 480px) {
  html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours { width: auto !important; max-width: 100%; }
}
/* the socials sit on the card's baseline, so the card matches the left column at >=1024 */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social {
  display: flex;
  gap: 0.625rem;
  margin-top: auto !important;
  padding-top: clamp(1rem, 1.6vw, 1.375rem);
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a {
  border-color: rgba(11, 57, 72, 0.24) !important;
  color: var(--sa-teal) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a svg { color: var(--sa-teal); }
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a:hover {
  border-color: var(--sa-yellow-deep) !important;
  background: var(--sa-yellow) !important;
}
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a:hover svg { color: var(--sa-ink); }
/* the shipped discs carry Tailwind's `transition-colors`, whose property list includes
   outline-color, so the teal focus ring faded in from the UA default over ~400ms (measured at
   t+0/120/400/800ms). The ring was always 2px solid and visible, but it should be teal on the first
   frame: same transition, minus outline-color. */
html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a {
  transition-property: color, background-color, border-color, fill, stroke;
}
/* THE FOCUS POLICY ON THIS BAND, measured rule by rule rather than reasoned about.
   The foundation's dark-ground rule is
     html.luxe.sunlit.sunnyaid main section.band-photo :is(a, button, summary, [tabindex="0"]):focus-visible
   and it is (0,6,3), NOT (0,5,4): the most specific arm of that :is() is the attribute selector
   [tabindex="0"], which scores as a class, and :focus-visible is a class too. So a rule that has to
   overrule it inside the two white cards needs seven classes. `.sa-cf` on the section and `.sa-card`
   on the card supply the two the .luxe drop cost, without depending on a JS-added class:
     these rules are (0,7,4) / (0,8,4)   vs the foundation's (0,6,3).
   Yellow on white is 1.4:1, so every control inside a white card takes the TEAL ring (12.0:1 on
   white) while the teal panel and the footer keep the foundation's yellow. Re-verified by tabbing.
   The three social discs are named explicitly as well: they carry Tailwind's `transition-colors`,
   which transitions outline-color, so a reading taken in the same frame as the Tab keypress catches
   them mid-transition on the UA default. They settle on the teal ring; verified after 600ms. */
html.sunlit.sunnyaid main section.closing-band.sa-cf :is(.sa-card.sa-cf-contact, a.sa-card.sa-cf-doc) :is(a, button):focus-visible,
html.sunlit.sunnyaid main section.closing-band.sa-cf .sa-card.sa-cf-contact .contact-social > a:focus-visible,
html.sunlit.sunnyaid main section.closing-band.sa-cf a.sa-card.sa-cf-doc:focus-visible {
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-color: var(--sa-teal) !important;
  outline-offset: 3px !important;
}
/* and the mirror of it: the yellow ring on the two dark grounds this section owns, declared here on
   the static prefix so a no-JS visitor keeps a visible ring too (the foundation's own yellow block
   is behind `.luxe`, and premium-luxe's and premium-sunlit's fallbacks are as well, so without this
   the footer fell back to the UA default with scripts off). Same colour, same offset. */
html.sunlit.sunnyaid main section.closing-band.sa-cf .sa-cf-panel :is(a, button):focus-visible,
html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer :is(a, button):focus-visible {
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-color: var(--sa-yellow) !important;
  outline-offset: 3px !important;
}

/* the watermark stays a whisper behind the panel */
html.sunlit.sunnyaid main section.closing-band.sa-cf .watermark { opacity: 0.07; }

/* =====================================================================
   2. FOOTER — the template's footer grammar
   Ground: premium-sunlit.css already paints footer.footer-deep #0a2129, which measures within six
   points of the template's own footer_bg.jpg (#081C23), so it is left alone and only the dotted
   halftone the template lays over it is added. The legal strip keeps its deeper #06161c.
   ===================================================================== */
html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer {
  position: relative;
  isolation: isolate;
}
html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0, 0, 0, 0) 100%);
}
html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer > * { position: relative; z-index: 0; }

/* the template gives the footer a generous top (pt-200 under the overlapping CTA panel). The
   bottom padding goes to zero because this container ends on the hairline, and the hairline's own
   margin plus the Acknowledgement wrapper below it already own that space. */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-top {
  padding-top: clamp(3rem, 5.4vw, 4.75rem) !important;
  padding-bottom: 0 !important;
}

/* ---- the four columns: 1.4fr + three link columns ---- */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.4vw, 2.75rem);
}
@media (min-width: 640px) {
  html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* ---- column 1: brand, description, the contact lines, the two marks ---- */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-brand img.footer-logo-lyd { height: 3rem; }
html.sunlit.sunnyaid footer.footer-deep .sa-cf-desc {
  margin: 1.25rem 0 0;
  max-width: 24rem;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--sa-on-teal) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-contact-lines {
  display: grid;
  gap: 0.125rem;
  margin: clamp(1.375rem, 2.2vw, 1.875rem) 0 0;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
/* the template's 35px round icon disc: teal fill, yellow glyph */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ci {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 100%;
  /* the template's own disc is flat --color-primary on its footer image, which measures 1.34:1
     against our #0a2129 ground and barely reads as a disc. Same teal, lifted 18% toward white and
     given a 1px white rim: the disc edge reaches 2.3:1 and the yellow glyph on it is 8.8:1. These
     are aria-hidden decorations duplicating the adjacent text, so the 3:1 non-text guidance does
     not bind; this is legibility, not compliance. */
  background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)), var(--sa-teal);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 4px 0 rgba(48, 69, 75, 0.03);
  color: var(--sa-yellow) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ci svg { width: 1rem; height: 1rem; color: inherit; }
/* these two anchors were moved out of the strip below the rule, where zz-uxpro's
   `footer.footer-deep div[class*="flex-wrap"] > a` gave them their hit area, so they carry their
   own 44px here (measured: 26px tall at 1440 without this, which uxpro flags). */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 0.375rem !important;
  margin: 0 -0.375rem !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--lead > a {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--lead > a:hover { color: var(--sa-yellow-soft) !important; }
/* :not(.sa-cf-ci) matters: the icon disc is also a direct-child <span>, and this rule (one element
   heavier than the disc's own) was overriding the disc's yellow glyph with --sa-on-teal, so the pin
   was the odd one out of the six discs. */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--plain > span:not(.sa-cf-ci) {
  font-size: 1rem !important;
  color: var(--sa-on-teal) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-marks {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin: clamp(1.375rem, 2.2vw, 1.75rem) 0 0;
}

/* ---- columns 2-4: uppercase title, then the link list ---- */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-coltitle {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-family: var(--sa-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  /* the template's base widget title is #d8e3f8 (_footer.scss .xb-item--title) and its
     .ec-footer-widget variant accents the same title (#69f1ff), so an accent title is inside the
     template's own grammar. The foundation's variable table reserves --sa-yellow-soft for exactly
     this ("--coral-2 -> --sa-yellow-soft: footer column headings"), so the columns take it:
     #FFE3A8 on #0a2129 = 11.9:1, and it separates the three headings from the white links. */
  color: var(--sa-yellow-soft) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-links {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li { margin: 0 !important; }
/* the template's 500-weight white link on a 40px line. zz-uxpro (inside premium-pages.css) gives
   these a 0.75rem/0.5rem padding with a matching negative margin to reach 44px without changing
   the rhythm; here the row IS 44px, so the vertical negative margin is dropped and only the
   horizontal one is kept, which keeps the text flush with the column while the target stays 44px. */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.5rem !important;
  margin: 0 -0.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #fff !important;
  text-decoration: none;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a:hover,
html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a:focus-visible {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- the hairline, then the Acknowledgement of Country ---- */
html.sunlit.sunnyaid footer.footer-deep .footer-rule {
  margin-top: clamp(2rem, 3vw, 2.75rem) !important;
  margin-bottom: clamp(1.75rem, 2.6vw, 2.25rem) !important;
  background: rgba(255, 255, 255, 0.17) !important;   /* .12 disappeared under the dotted texture */
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ackwrap { padding-bottom: clamp(1.5rem, 2.4vw, 2rem) !important; }
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack {
  gap: 0.875rem;
  max-width: 62rem;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: var(--sa-on-teal) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack p { color: var(--sa-on-teal) !important; }

/* ---- the legal strip = the template's .footer-bottom: copyright left, socials right ---- */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.25rem 0;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow > span:first-child {
  flex: 1 1 22rem;
  font-size: 0.8125rem !important;
  line-height: 1.6;
  color: var(--sa-on-teal) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow a:not([class*="rounded-full"]) {
  font-size: 0.8125rem !important;
  color: var(--sa-on-teal) !important;
  text-decoration: none;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow a:not([class*="rounded-full"]):hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
html.sunlit.sunnyaid footer.footer-deep .sa-cf-social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a {
  width: 2.75rem;
  height: 2.75rem;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a:hover {
  border-color: var(--sa-yellow) !important;
  background: var(--sa-yellow) !important;
}
html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a:hover svg { color: var(--sa-ink); }

/* ---------------------------------------------------------------------
   3. Reduced motion. Everything this file adds is decoration; the static design is complete.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid main section.closing-band :is(a.sa-cf-doc, .sa-cf-doc__go, .sa-cf-cta > a.btn) { transition: none !important; animation: none !important; }
  html.sunnyaid main section.closing-band a.sa-cf-doc:hover .sa-cf-doc__go { transform: none !important; }
}

/* ---------------------------------------------------------------------
   9 Sep 2026 audit. Two text-layout fixes in the footer.
   --------------------------------------------------------------------- */

/* The Acknowledgement of Country measured 135 characters a line at 1440 and 107 at 768, against a
   75 ceiling. The 62rem cap on its flex parent is a px cap and takes no account of the 14px type.
   Capping the paragraph itself settles both widths at a 67-character maximum. Nothing else declares
   a max-width on it. The wording, the flag and the flag's yellow disc are untouched. */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack p { max-inline-size: 50ch; }

/* The ABN split across a line break at 390 and at 768, so the number read as "54 672" on one line
   and "825 731." on the next. The digits on screen are identical; only the break point changes. */
html.sunlit.sunnyaid footer.footer-deep .sa-cf-abn { white-space: nowrap; }

/* ===== premium-sunnyaid-align.css ===== */
/* =====================================================================
   SunnyAid — page alignment normalisation (9 Sep 2026)
   Six sections were built in parallel, so each settled on its own content axis. Measured at 1440 the
   homepage was using three: 80, 96 and 112. The majority axis (hero stats, why-now plates, the AI panel,
   the pricing header and grid, the closing panel) is 112..1328, i.e. a 76rem column centred in the page.
   This file puts every remaining block on that one column, and equalises the baselines inside each row.
   Loaded after the six area files, so it wins on source order at the same specificity.
   ===================================================================== */

html.sunnyaid { --sa-axis: 76rem; }  /* 1216px: the column every block shares */

/* ---------- 1. one content column ----------
   Each of these sat on its parent's edge (96 or 80). A max-width plus auto margins re-centres them
   inside whatever parent they have, which lands all of them on 112..1328 at 1440 without touching the
   parents themselves. */
/* One page container, resolved the same way at every width:
     - at >= ~1280 it is the 76rem column, so every block lands on 112..1328 at 1440
     - below that it is the viewport less a 32px gutter each side
   Centring happens inside each block's own parent, and because the formula is viewport-relative the
   result is the same left edge regardless of how much padding that parent happens to carry. Applied
   from 640 up; below that the page is one column and the shipped gutters are already consistent. */
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-gaps-head,
  html.luxe.sunlit.sunnyaid #main .sa-gaps-fig,
  html.luxe.sunlit.sunnyaid #main .sa-gaps-grid,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqgrid,
  html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-top,
  html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-cols {
    max-width: min(var(--sa-axis), calc(100vw - 4rem)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  /* the stages grid is the hscroll track, which sizes to its content, so auto margins would centre it
     at 816px inside a 960px column instead of filling it */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { width: 100% !important; }
}

/* the FAQ heading column sat 16px inside the axis its own grid now uses */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead { padding-inline: 0; }

/* ---------- 2. baselines inside a row ----------
   Cards in a row are equal height (grid stretch), but a title that wraps to two lines pushed its own
   body down while its neighbours' stayed put. Reserving two lines on the title puts every body in the
   row on one baseline. `lh` is not safe here (Chromium 133+), so the reserve is computed from the
   element's own line-height. */
html.luxe.sunlit.sunnyaid #main .sa-gaps-card .sa-gaps-card__title {
  min-height: calc(2 * 1.25em);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title {
  min-height: calc(2 * 1.3em);
}
@media (min-width: 1200px) {
  /* four across: "Getting found by people already looking." takes three lines where the others take two */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { min-height: calc(3 * 1.3em); }
}
@media (max-width: 639px) {
  /* stacked: nothing to align to, so let short titles be short */
  html.luxe.sunlit.sunnyaid #main .sa-gaps-card .sa-gaps-card__title,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { min-height: 0; }
}

/* ---------- 3. the four stages read as one row ----------
   The build staggered whole stages by 2rem, which zig-zagged the photographs but also dropped every
   second title and body out of line. The owner asked for alignment, so the row is level: tiles, number
   discs, titles and bodies all share their line, and the dashed connector runs straight between them. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid > .sa-stages-aeo-stage:nth-of-type(2n) {
  margin-top: 0 !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { align-items: start; }

/* ---------- 4. why-now plates share a title block at every width ---------- */
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-whynow-plate > :is(h3, .sa-whynow-plate__title) {
    min-height: calc(2 * 1.25em);
  }
}

/* ---------- 5. footer column heads speak one colour ----------
   SERVICES / COMPANY / SUPPORT had drifted to the body tone while the brand column stayed yellow. */
html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-coltitle {
  color: var(--sa-yellow-soft) !important;
}

/* ===== premium-sunnyaid-motion.css ===== */
/* =====================================================================
   SunnyAid — homepage motion layer (9 Sep 2026)
   Owner: "make the page more dynamic". Everything here is gated on html.pm, which premium.js only sets
   when prefers-reduced-motion is NOT set, and every effect is transform/opacity so nothing reflows.
   Entrances key off .pm-in, which premium.js stamps on each <section> as it enters the viewport, so no
   new JavaScript is needed and each sequence plays once. Stagger comes from :nth-child, not from a
   scripted --i, so it also works on markup premium.js never touched.
   Reduced motion: no .pm, so every selector below is inert and the static design is already complete.
   ===================================================================== */

html.sunnyaid { --sa-ease: cubic-bezier(0.16, 1, 0.3, 1); --sa-step: 70ms; }

/* ---------- kicker pills arrive before the heading they label ---------- */
html.sunnyaid.pm #main section .td-kicker,
html.sunnyaid.pm #main section .sa-kicker {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s var(--sa-ease), transform 0.55s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .td-kicker,
html.sunnyaid.pm #main section.pm-in .sa-kicker { opacity: 1; transform: none; }

/* ---------- six gaps: the cards deal in, row by row ---------- */
html.sunnyaid.pm #main .sa-gaps-grid > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s var(--sa-ease), transform 0.7s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-gaps-grid > * { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(1) { transition-delay: 0ms, 0ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(2) { transition-delay: 70ms, 70ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(3) { transition-delay: 140ms, 140ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(4) { transition-delay: 210ms, 210ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(5) { transition-delay: 280ms, 280ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(6) { transition-delay: 350ms, 350ms; }
/* and lift under the pointer */
html.sunnyaid.pm #main .sa-gaps-card { transition: transform 0.3s var(--sa-ease), box-shadow 0.3s var(--sa-ease), border-color 0.3s; }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-gaps-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(11, 57, 72, 0.42); }
}

/* ---------- four stages: the dashed path draws, then the discs land ---------- */
html.sunnyaid.pm #main .sa-stages-aeo-copy::after {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.75s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-stages-aeo-copy::after { transform: scaleX(1); }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(1) .sa-stages-aeo-copy::after { transition-delay: 260ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(2) .sa-stages-aeo-copy::after { transition-delay: 500ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(3) .sa-stages-aeo-copy::after { transition-delay: 740ms; }

html.sunnyaid.pm #main .sa-stages-aeo-num {
  opacity: 0; transform: scale(0.72);
  transition: opacity 0.4s var(--sa-ease), transform 0.55s var(--sa-ease), background-color 0.3s, color 0.3s;
}
html.sunnyaid.pm #main section.pm-in .sa-stages-aeo-num { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(1) .sa-stages-aeo-num { transition-delay: 180ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(2) .sa-stages-aeo-num { transition-delay: 420ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(3) .sa-stages-aeo-num { transition-delay: 660ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(4) .sa-stages-aeo-num { transition-delay: 900ms; }

/* the photo tile answers the pointer. The scale is on the tile wrapper, never the <img>: rich-photos
   owns transform on the image itself through a scroll-driven animation, and an animation always beats
   a transition on the same property. */
html.sunnyaid.pm #main .sa-stages-aeo-tile { transition: transform 0.4s var(--sa-ease), box-shadow 0.4s var(--sa-ease); }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-stages-aeo-stage:hover .sa-stages-aeo-tile { transform: translateY(-6px) scale(1.015); }
}

/* ---------- tick lists check themselves off ---------- */
html.sunnyaid.pm #main .sa-ticks > li,
html.sunnyaid.pm #main .sa-stages-aeo-ticks > li,
html.sunnyaid.pm #main .sa-pricing-faq-ticks > li {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.45s var(--sa-ease), transform 0.55s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li { opacity: 1; transform: none; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(1) { transition-delay: 120ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(2) { transition-delay: 200ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(3) { transition-delay: 280ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(4) { transition-delay: 360ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(n + 5) { transition-delay: 440ms; }

/* ---------- pricing: the three plans rise, the featured one a little further ---------- */
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--sa-ease), transform 0.75s var(--sa-ease), box-shadow 0.35s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-pricing-faq-grid > .sa-pricing-faq-card { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(1) { transition-delay: 60ms; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(2) { transition-delay: 0ms; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(3) { transition-delay: 120ms; }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-pricing-faq-card:hover { box-shadow: 0 26px 52px -28px rgba(11, 57, 72, 0.45); }
}

/* ---------- why-now plates and the closing cards settle in sequence ---------- */
html.sunnyaid.pm #main .sa-whynow-plates > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--sa-ease), transform 0.7s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-whynow-plates > * { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-whynow-plates > *:nth-child(2) { transition-delay: 90ms; }
html.sunnyaid.pm #main .sa-whynow-plates > *:nth-child(3) { transition-delay: 180ms; }

/* ---------- the arrow disc turns as its card is entered ---------- */
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-card:hover .sa-arrow__ico,
  html.sunnyaid.pm #main .sa-gaps-card:hover .sa-arrow__ico { transform: rotate(45deg); }
}

/* ---------- belt and braces ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid #main :is(.td-kicker, .sa-kicker, .sa-gaps-grid > *, .sa-stages-aeo-num, .sa-whynow-plates > *,
    .sa-ticks > li, .sa-stages-aeo-ticks > li, .sa-pricing-faq-ticks > li, .sa-pricing-faq-grid > .sa-pricing-faq-card) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.sunnyaid #main .sa-stages-aeo-copy::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ===== premium-sunnyaid-owner.css ===== */
/* =====================================================================
   Owner edits that are presentation only, homepage. Loaded last.
   Kept beside tools/recipes/sunnyaid-zz-owner-edits.cjs (which does the DOM removals) so every
   deliberate owner change is in one of two obvious places.
   ===================================================================== */

/* 9 Sep 2026 — take the pause control off the hero photograph.
   Owner: "remove the pause button from here", with a screenshot of the disc sitting over the footage.
   It is off the picture, but it is still reachable by keyboard rather than deleted, because the hero
   video autoplays and loops: WCAG 2.2.2 (Pause, Stop, Hide) wants a mechanism to stop moving content
   that runs for more than five seconds, and this site's whole pitch is being checkable. Tabbing to it
   brings it back at full size; nothing else reveals it. Reduced-motion users never needed it, since
   premium-ux.js already stops the video for them.
   To delete it outright instead, remove the button in tools/recipes/zz-uxpro.cjs (section 6). */
html.sunnyaid #main .hero-video-toggle {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}
html.sunnyaid #main .hero-video-toggle:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ===== premium-sunnyaid-product.css ===== */
/* =====================================================================
   Round 8 — the homepage as a software company's homepage. Loaded LAST.
   Owner: "it should give the feel that we are a software and ai company who provides crms to many
   ndis providers … also the yellow element everywhere."
   Three moves: yellow is rationed to the act, headings return to Manrope, and the hero carries a
   product window instead of footage. Every rule here is an override; deleting this file and its two
   SHEETS entries restores Round 7 exactly.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. A second accent, so yellow can mean one thing.
   Petrol-blue is the site's own link family. Measured pairings:
     --sa-ui      #C32B2B   5.2:1 on cream · 5.7:1 on white · white on it 5.7:1
     --sa-ui-soft #F0918A   5.4:1 on teal · 6.5:1 on teal-deep · ink on it 6.2:1
     --sa-ui-tint #FCE7E3   ink on it 12.1:1 · --sa-ui on it 4.8:1
   --------------------------------------------------------------------- */
/* The UI accent is CareX Australia's red (9 Sep 2026, owner: "make the blue pallette red, basically
   take inspiration from carexaustralia.com.au, use that red"). #C32B2B is the red that actually covers
   that site by area; their brighter #EC2126 is only 4.36:1 on white, so it cannot carry text or sit
   under white text and is not used. The pale and tint steps are luminance twins of the petrol pair
   they replace (0.645 vs 0.660, 0.839 vs 0.847), which is why every contrast pairing the Round 8
   harness checked holds without re-tuning: soft-on-teal 8.4:1, ink-on-soft 9.7:1, ink-on-tint 12.4:1.
   The deep teal bands are NOT touched: that petrol ground is the brand across all 37 pages and an
   owner decision from 31 Aug. CareX pairs its red with navy; if the full reference look is wanted,
   the one-line follow-up is --sa-teal to their #212361. */
html.sunnyaid {
  --sa-ui: #C32B2B;
  --sa-ui-soft: #F0918A;
  --sa-ui-tint: #FCE7E3;
}

/* ---------------------------------------------------------------------
   THE SKIN SWITCH. Everything from here to section 5 is the Round 8 *identity*: the yellow ration,
   Manrope headings and the retired ring. It is gated on `html.sa-skin-product`, which the recipe adds
   by default and a tiny head script removes when the URL says `?skin=sunnyaid`.
   So the SunnyAid template is never discarded - it is one query string away, and the layers that
   define it (premium-sunnyaid.css and the six section files) are untouched by Round 8.
     ?skin=sunnyaid  -> Recoleta headings, the hand-drawn ring, the template's yellow accent
     ?skin=product   -> back to the software-company identity (the default)
   The choice is remembered per browser, like the existing ?v=luxe / ?v=classic switch.
   The structural work below section 5 (the product window, the company strip, the six replaced
   tools, the facts row) is deliberately NOT gated: it is content and layout, not palette.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid {
  /* The flip. ~95 rules across the seven skin files read these four tokens, so re-pointing them
     here retints every tick, chip, dot, badge, toggle, rule and heading colour in one move. Yellow
     is handed back below, scoped to the four things that are an action. */
  --sa-yellow: var(--sa-ui-soft);
  --sa-yellow-deep: var(--sa-ui);
  --sa-yellow-soft: var(--sa-ui-soft);
  --sa-yellow-tint: var(--sa-ui-tint);

  /* the tick disc, re-inlined: the fill is baked into the data URI, so the token has to be redeclared
     rather than recoloured. Same path geometry as the shipped mark, --sa-ui disc, white check. */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23C32B2B'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* the hand-drawn ring is care-brand vocabulary and its fill is baked into the SVG, so under this
     skin it goes and the emphasis survives as colour (section 3). ?skin=sunnyaid brings it back. */
  --sa-ring-src: none;
}

/* the sunlit re-point, corrected: only the button-fill family stays on yellow */
html.sa-skin-product.sunlit.sunnyaid {
  --sun: var(--sa-ui-soft);
  --sun-2: var(--sa-ui-soft);
  --sun-tint: var(--sa-ui-tint);
  --coral-2: var(--sa-ui-soft);
  --aqua: var(--sa-ui-soft);
  --aqua-ink: var(--sa-ui);
  --gold-2: var(--sa-ui-soft);
  --gold-3: var(--sa-ui);
  --gold-ink: var(--sa-ui);
  --color-lyd-gold-ink: var(--sa-ui);
  --color-lyd-yellow: var(--sa-ui-soft);
  --color-lyd-yellow-deep: var(--sa-ui);
}

/* ---------------------------------------------------------------------
   2. Yellow, handed back to the four things that are an action.
   Custom properties inherit, so scoping the original values onto these subtrees restores the
   template yellow inside them without touching a single component rule.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  .sun-smile
) {
  --sa-yellow: #FFD470;
  --sa-yellow-deep: #F6BA2E;
  --sa-yellow-soft: #FFE3A8;
  --sa-yellow-tint: #FFF4DC;
}
/* the header carried a second, identical "Book a free demo" pill 200px above the hero's. One ask per
   screen: the header becomes an outline so the hero's is the only filled button in the fold. */
html.sa-skin-product.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"] {
  background: transparent !important;
  color: var(--sa-teal) !important;
  /* 0.45 alpha over the near-white header computed to 2.32:1, under the 3:1 that 1.4.11 asks of a
     control boundary. This is the only persistent way to act for 22 of the page 23 phone screens,
     so the edge has to be visible. 0.6 alpha measures 3.75:1. */
  border: 1px solid rgba(11, 57, 72, 0.6) !important;
  box-shadow: none !important;
  /* the cta-drift keyframes still ran here forever against a background this block sets to
     transparent, recalculating style every frame and painting nothing. */
  animation: none !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"]:hover { background: rgba(11, 57, 72, 0.06) !important; }

/* the hard-coded rgba(255,212,112,x) literals the foundation sweep uses, restated in the UI hue */
html.sa-skin-product.luxe.sunlit.sunnyaid main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark),
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark) { border-color: rgba(240, 145, 138, 0.55) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid .btn-ghost-dark:hover { border-color: var(--sa-ui-soft) !important; background: rgba(240, 145, 138, 0.12); }
html.sa-skin-product.sunlit.sunnyaid .editorial-photo::before,
html.sa-skin-product.sunlit.sunnyaid .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(240, 145, 138, 0.5); }
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"]:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .hscroll__panel:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main [data-slot="card"]:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-lyd:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main .carousel-card:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main a.demo-frame:hover { border-color: rgba(195, 43, 43, 0.5) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate,
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate[data-slot="card"],
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"],
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"] {
  background: rgba(240, 145, 138, 0.1) !important;
  border: 1px solid rgba(240, 145, 138, 0.55) !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(240, 145, 138, 1) 76%, transparent 92%); }
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(240, 145, 138, 0.45) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-deep,
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-full.footer-deep { border-top: 1px solid rgba(240, 145, 138, 0.26) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--sa-ui-soft) !important; background: rgba(240, 145, 138, 0.12) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .pipe__frame { border-color: rgba(240, 145, 138, 0.28) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .pipe__chrome .pipe__sample { border-color: rgba(240, 145, 138, 0.55); color: var(--sa-ui-soft); }
html.sa-skin-product.luxe.sunlit.sunnyaid main .demo-frame::after { background: var(--sa-ui-soft); box-shadow: 0.95rem 0 0 rgba(240, 145, 138, 0.6), 1.9rem 0 0 rgba(255, 255, 255, 0.5); }
html.sa-skin-product.luxe.sunlit.sunnyaid main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(240, 145, 138, 0.55) 2.6%, rgba(240, 145, 138, 0.62) 95.6%, transparent 98.8%); }
html.sa-skin-product.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--sa-ui) !important; }
/* Focus rings, split by ground (9 Sep 2026 audit). The pale step was applied in every context,
   which made the ring 2.10:1 against the hero cream and 2.27 to 2.30:1 on the white cards, below the
   3:1 that 1.4.11 Non-text Contrast asks of a focus indicator. It only ever passed on the dark bands,
   where it measures 5.2:1 to 8.0:1. So light grounds take the deep accent and dark grounds keep the
   pale step. The dark rule carries more compounds than the light one, so it wins where it applies. */
html.sa-skin-product.sunlit.sunnyaid a.skip-link { color: var(--sa-ui); }
html.sa-skin-product.sunlit.sunnyaid a.skip-link:focus-visible { outline-color: var(--sa-ui); }
html.sa-skin-product.luxe.sunlit.sunnyaid main :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--sa-ui) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main section[data-band="deep"],
  main section.band-photo,
  main .sa-panel,
  main .sa-band-teal,
  footer.footer-deep
) :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--sa-ui-soft) !important; }
/* the featured pricing card's border literal, and its 6px rule */
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature { border-color: rgba(195, 43, 43, 0.45) !important; }
/* the smile plate's own frame stays warm, it is the one playful object */
html.sa-skin-product.sunnyaid .sun-smile { border-color: rgba(255, 212, 112, 0.45); }
html.sa-skin-product.sunnyaid .sun-smile[data-state="on"] { border-color: rgba(255, 212, 112, 0.85); }
html.sa-skin-product.sunnyaid .sun-smile__btn::before { background: rgba(255, 212, 112, 0.26); }
html.sa-skin-product.sunnyaid .sun-smile__link { border-color: rgba(255, 212, 112, 0.6); }

/* ---------------------------------------------------------------------
   3. Emphasis without the hand-drawn ring. The ring span stays in the DOM (recipes still find it,
   the text is byte-identical); it just carries colour instead of a scribble.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid .sa-ring { padding: 0; margin: 0; color: var(--sa-ui); }
html.sa-skin-product.sunnyaid main section[data-band="deep"] .sa-ring,
html.sa-skin-product.sunnyaid main section.closing-band .sa-ring,
html.sa-skin-product.sunnyaid main section.sa-stages-aeo-aeo .sa-ring,
html.sa-skin-product.sunnyaid main section.sa-whynow .sa-ring { color: var(--sa-ui-soft); text-shadow: none !important; }

/* ---------------------------------------------------------------------
   4. Type. Manrope at the weights the README's Round 1 scale specifies. The Recoleta @font-face
   blocks stay in premium-sunnyaid.css but nothing references the family, so no file is fetched.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid {
  --sa-font-heading: "Manrope", var(--font-sans), system-ui, sans-serif;
  --sa-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --sa-h2: clamp(1.875rem, 3.4vw, 3rem);
}
html.sa-skin-product.luxe.sunlit.sunnyaid main h1.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main h1:not(.font-display) { font-weight: 700 !important; letter-spacing: -0.03em !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main h2.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) { font-weight: 600 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main h3.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main .leaks__title,
html.sa-skin-product.luxe.sunlit.sunnyaid main .hscroll__panel h3 { font-weight: 600 !important; }
/* the section files that pinned weight 500 on the heading face */
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig { font-weight: 700 !important; }
html.sa-skin-product.sunnyaid main section.sa-whynow .home-pull p { font-weight: 600 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .sa-gaps-cap strong { font-weight: 600; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-name { font-weight: 700 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-num { font-weight: 700 !important; }

/* ---------------------------------------------------------------------
   5. The hero frame is now a product window, not a viewport onto footage.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame.sa-hero__screen {
  aspect-ratio: auto !important;
  display: flex;
  align-items: center;
  padding: clamp(0.9rem, 1.6vw, 1.5rem);
  background: var(--sa-teal);
  /* the table sets a min-content width, so without min-width:0 the flex item grows past its column
     and the last column is clipped by the section's overflow */
  min-width: 0;
  overflow: hidden;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media { min-width: 0; }
/* Service and Source leave the hero copy of the table: three columns fit the column at every width */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .sa-hero__col-drop { display: none !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen figure.pipe { margin: 0; width: 100%; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__frame {
  background: #fff !important;
  border: 1px solid rgba(11, 57, 72, 0.14) !important;
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(6, 22, 28, 0.6) !important;
  overflow: hidden;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__chrome { background: var(--sa-teal-deep) !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__title { color: #fff; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen :is(.pipe__table, .pipe__table th, .pipe__table td) { color: var(--sa-ink); }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__table thead th { color: var(--sa-slate); }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen figcaption {
  margin-top: 0.85rem;
  font-family: var(--sa-font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sa-on-teal);
}
/* the media column no longer bleeds to the viewport edge: a window has an edge */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media { margin-right: 0; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid { grid-template-columns: 1.02fr 0.98fr; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media::before { display: none; }
/* ---------------------------------------------------------------------
   5b. THE SMILE MARK, made noticeable (9 Sep 2026, owner: "make the smile icon more noticeable as
   well"). Round 8 had shrunk it to 4.25rem so it would not out-shout the product window; the owner
   wants it read as the interactive thing it is. So it goes back up past its pre-Round-8 size and
   gains three static affordances, because an animation that has finished cannot invite anyone:
     - a permanent yellow halo behind the disc (::after, so the animated ::before keeps its own job),
     - a 2px yellow edge and a warm outer glow on the plate, which is otherwise flat teal,
     - a larger TAP label and a thicker ring.
   Yellow here is on-rule: the mark is one of the four things that mean *act* (see the positioning
   note). Not gated on the skin - prominence is not palette, so the template skin gets it too.
   Still ONE instance, still in the hero, and the message under it is never gated behind the tap. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile {
  padding: clamp(1rem, 1.5vw, 1.35rem);
  gap: clamp(1rem, 1.7vw, 1.6rem);
  border-width: 2px;
  border-color: rgba(255, 212, 112, 0.7);
  box-shadow:
    0 26px 60px -38px rgba(11, 57, 72, 0.75),
    0 16px 42px -24px rgba(246, 186, 46, 0.42);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__line { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
/* the disc: 112px on a phone, 144px on a laptop. Bigger than it was before Round 8 shrank it. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 7rem; height: 7rem; }
@media (min-width: 480px) and (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 6.5rem; height: 6.5rem; }
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 8rem; height: 8rem; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 9rem; height: 9rem; }
}
/* the always-on halo. The animated ::before carries `animation-fill-mode: both`, so once its eight
   invitations are over it holds opacity 0 - which is exactly when a static cue has to take over. */
html.sunnyaid .sa-hero__smile--compact .sun-smile__btn::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 999px;
  /* a RING of light, with the middle left clear. A filled yellow wash at any useful alpha turns the
     centre khaki against the teal plate, because the disc itself is transparent until the mark is
     tapped - so the glow has to sit off the ring stroke rather than behind the whole coin. */
  background: radial-gradient(circle, rgba(255, 212, 112, 0) 0 44%, rgba(255, 212, 112, 0.4) 54%, rgba(255, 212, 112, 0) 78%);
  filter: blur(5px);
  pointer-events: none;
}
/* and a faint warm ground inside the ring, so the idle mark reads as a coin you can press rather
   than as an outline. 8% over teal is a warm shadow, not a colour. */
html.sunnyaid .sa-hero__smile--compact .sun-smile__ring { fill: rgba(255, 212, 112, 0.08); }
html.sunnyaid .sa-hero__smile--compact .sun-smile[data-state="on"] .sun-smile__ring { fill: none; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__btn { z-index: 0; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__ring { stroke-width: 5; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__tap { font-size: 12px; letter-spacing: 0.26em; }
/* and a louder invitation while it runs: a wider stroke swing plus a bob on the whole mark. TWO
   repeats then stop, retimed to 2s each after a 0.8s delay. Eight repeats of 2.4s ran for 20.4
   seconds, and 2.2.2 Pause Stop Hide wants a control for anything moving past five. Two repeats of
   2.4s still totalled exactly 6.0s and measured as a failure; 0.8s + 2 x 2.0s is 4.8s, under the
   threshold with margin and needing no control. The static cues below, the halo and the TAP label and the warm ground, are
   what invite a visitor arriving after the motion has stopped, which is most of them. */
html.sunnyaid.pm .sa-hero__smile--compact .sun-smile:not(.is-touched) .sun-smile__ring {
  animation: sa-smile-ring 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 2 both;
}
html.sunnyaid.pm .sa-hero__smile--compact .sun-smile:not(.is-touched) .sun-smile__svg {
  animation: sa-smile-bob 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 2 both;
}
@keyframes sa-smile-ring { 0%, 100% { stroke-width: 4; opacity: 1; } 50% { stroke-width: 7.5; opacity: 0.7; } }
@keyframes sa-smile-bob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-hero__smile--compact :is(.sun-smile__ring, .sun-smile__svg) { animation: none !important; }
}

/* --------------------------------------------------------------------- 6. the company strip */
html.sunnyaid main section.sa-strip { padding: clamp(1.75rem, 3vw, 2.5rem) 0; background: var(--sa-teal-deep) !important; }
html.sunnyaid main section.sa-strip .sa-strip__in {
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}
@media (min-width: 900px) { html.sunnyaid main section.sa-strip .sa-strip__in { grid-template-columns: auto 1fr auto; } }
html.sunnyaid main section.sa-strip .sa-strip__mark { height: 1.75rem; width: auto; opacity: 0.95; }
html.sunnyaid main section.sa-strip .sa-strip__lede {
  margin: 0; font-family: var(--sa-font-body); font-size: 1.0625rem; line-height: 1.6; color: #fff;
}
html.sunnyaid main section.sa-strip .sa-strip__lede span { display: block; color: var(--sa-on-teal); font-size: 0.9375rem; margin-top: 0.2rem; }
html.sunnyaid main section.sa-strip .sa-strip__conn { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sa-on-teal); max-width: 22rem; }
html.sunnyaid main section.sa-strip .sa-strip__conn-label { color: var(--sa-ui-soft); font-weight: 600; }

/* --------------------------------------------------------- 7. the six tools it replaces */
html.sunnyaid main section.sa-replaces { background: var(--sa-white) !important; }
html.sunnyaid main section.sa-replaces .replaces-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: visible !important;
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
}
@media (min-width: 640px) { html.sunnyaid main section.sa-replaces .replaces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html.sunnyaid main section.sa-replaces .replaces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.sunnyaid main section.sa-replaces .sa-replaces__card {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  background: var(--sa-white) !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card);
  box-shadow: var(--sa-shadow-card);
  padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}
html.sunnyaid main section.sa-replaces .sa-replaces__card .text-lg { font-family: var(--sa-font-body); font-weight: 600; color: var(--sa-ink); }
html.sunnyaid main section.sa-replaces .sa-replaces__card p { color: var(--sa-slate) !important; }
html.sunnyaid main section.sa-replaces .sa-replaces__card > div:last-child {
  width: 2.75rem !important; height: 2.75rem !important; margin-top: 1.25rem !important;
  border-radius: 12px; background: var(--sa-ui-tint) !important; color: var(--sa-ui) !important;
}
html.sunnyaid main section.sa-replaces .sa-replaces__card svg { color: var(--sa-ui) !important; }
html.sunnyaid main section.sa-replaces .td-kicker { color: var(--sa-ui) !important; }

/* ------------------------------------------------ 8. the facts row under the pricing tiers */
html.sunnyaid main .sa-facts {
  max-width: min(76rem, calc(100vw - 4rem));
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { html.sunnyaid main .sa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html.sunnyaid main .sa-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.sunnyaid main .sa-facts__cell { padding: 1.1rem 1.25rem; border: 1px solid var(--sa-hairline); border-radius: var(--sa-radius-card); background: var(--sa-white); }
html.sunnyaid main .sa-facts__k {
  display: block; font-family: var(--sa-font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-ui); margin-bottom: 0.4rem;
}
html.sunnyaid main .sa-facts__v { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--sa-slate); }

/* ----------------------------------------- 9. care photography, demoted to supporting crops */
@media (min-width: 1024px) {
  /* the ID compound is needed: premium-sunnyaid-align.css puts this element on the page axis with
     `#main .sa-gaps-fig { max-width: ... !important }`, which an ID-less selector cannot beat */
  html.luxe.sunlit.sunnyaid #main .sa-gaps-layout .sa-gaps-fig {
    aspect-ratio: 21 / 9 !important;
    max-width: 34rem !important;
    margin-inline: auto !important;
  }
}
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { aspect-ratio: 5 / 3; }
}

/* ---------------------------------------------------------------------
   10. The button system, now that yellow means one thing.
   Yellow = the act (4 places). Solid teal = a real secondary. Outline = tertiary.
   Without this, every filled button inherits the pale UI fill and reads as disabled.
   --------------------------------------------------------------------- */
html.sa-skin-product.luxe.sunlit.sunnyaid :is(.btn-primary-dark, .btn-primary-light) {
  background: var(--sa-teal) !important;
  color: #fff !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid :is(.btn-primary-dark, .btn-primary-light):hover { background: var(--sa-teal-deep) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark
) {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark
):hover { background: var(--sa-yellow-deep) !important; }
/* the arrow glyph inside a teal secondary has to flip to white */
html.sa-skin-product.luxe.sunlit.sunnyaid main .btn-primary-dark .sa-hero__btn-ico,
html.sa-skin-product.luxe.sunlit.sunnyaid main .btn-primary-light .sa-hero__btn-ico { background: #fff; }
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn1 .sa-hero__btn-ico { background: var(--sa-ink); }

/* the Replay control sits on the dark chrome in the hero, where the shipped ghost styling is nearly
   invisible; it is the reduced-motion path for the sequence, so it has to read */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .rd-proof-replay {
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .rd-proof-replay:hover {
  border-color: var(--sa-ui-soft) !important;
  background: rgba(240, 145, 138, 0.16) !important;
}

/* the hero table on a phone: the frame's inner column is ~329px, and the shipped cell rhythm needs
   373px. The avatar is the one purely decorative cell element, so it goes first, then the rhythm
   tightens. Enquiry / Arrived / Status all stay: the 9:03pm row is the point of the sequence. */
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__avatar { display: none !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__table { font-size: 0.8125rem !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen :is(.pipe__table th, .pipe__table td) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__status { padding: 0.2rem 0.5rem !important; font-size: 0.6875rem !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__time { white-space: nowrap; }
}

/* two strays the token flip could not reach, both from literals in earlier layers */
/* premium-color.css rotates six pastel tints through these icon squares with a `:not(._a)…:not(._j)`
   specificity chain, and one of the six is a pale yellow. Six hues also undercut the one-accent
   system, so all six become the UI tint. An ID compound is what beats that chain. */
html.luxe.sunlit.sunnyaid #main section.sa-replaces .sa-replaces__card :is([class*="h-14"], [class*="bg-lyd-blue"], [class*="bg-lyd-yellow"]) {
  background: var(--sa-ui-tint) !important;
  color: var(--sa-ui) !important;
}
html.luxe.sunlit.sunnyaid #main section.sa-replaces .sa-replaces__card svg { color: var(--sa-ui) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-plate--key { border-color: rgba(240, 145, 138, 0.45) !important; }

/* NOT touched, deliberately: the yellow disc in the Aboriginal flag beside the Acknowledgement of
   Country in the footer. It is the flag, not brand colour, and it is reproduced as specified. */

/* =====================================================================
   11. AUDIT FIXES (9 Sep 2026). Items from a six-lens UI/UX audit, each one independently
   reproduced before it was accepted. Every block names the criterion or measurement it answers.
   ===================================================================== */

/* --- keyboard: the floating capability trigger took focus while invisible ----------------------
   Its utility classes only toggle opacity and pointer-events, so at opacity 0 it was still a tab
   stop, stop 64 of the walk at 390, and Enter fired a full-screen overlay from nowhere. Nothing in
   the cascade declares visibility on it, so a bare ID is enough. */
#v2-cap-trigger-float { visibility: hidden; }
#v2-cap-trigger-float[data-shown] { visibility: visible; }

/* --- CLS: the AEO typewriter grew its own box 44px mid-read ------------------------------------
   At 390 the typed question wraps from one line to three as it types, and every section below it
   jolted 22px twice. That was 0.0595 of the 0.0755 mobile CLS, spent on a decorative animation.
   Reserving the final height costs nothing because the text is centred in the box. Desktop grows
   0px and needs no rule. 3lh is three lines of the box own line-height; the px value ahead of it is
   the measured fallback for engines without the lh unit. */
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q { min-height: 120px; min-height: calc(3lh + 1.875rem); }
}

/* --- CLS: the webfont swap re-wrapped the hero H1 and dropped the CTA 39px at about 1.4s -------
   Manrope is wider than the system fallback, so the balanced H1 went from two lines to three once
   the webfont arrived, carrying the primary CTA, the lede and the smile mark down with it.
   Reserving the three-line height is font-independent, unlike a size-adjust fallback whose correct
   ratio differs per platform: 103% against Segoe UI, 100.4% against Arial. */
@media (max-width: 767px) {
  html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero h1 { min-height: 117px; min-height: 3lh; }
}

/* --- reading measure: two protected honesty blocks were the widest text on the page ------------
   The VCPility strip ran to 91 characters a line and the pipeline caption to 108, against a 75
   ceiling. Capped in rem rather than ch: the paragraph and the span inside it are set at different
   sizes, so a ch cap on the parent never reaches the child. Wording untouched, measure only. */
html.sa-skin-product.sunnyaid main section.sa-strip .sa-strip__lede { max-inline-size: 37rem; }
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__caption { max-inline-size: 29rem; }

/* --- the third hero statistic rendered at 44px against its siblings 24px ----------------------
   premium-pages.css targets .rd-hero-num:not(.text-2xl) and won inside the hero facts row, so
   "6% to 90%" mixed 44px digits with a 24px arrow and the numerals overlapped their own label by
   3px. Handing the figure own size back down fixes both, and tabular figures line the three cards
   up the way the pricing numerals already are. */
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig .rd-hero-num {
  font-size: inherit;
  line-height: inherit;
  font-variant-numeric: inherit;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig { font-variant-numeric: tabular-nums; }

/* --- press feedback: no button on the page had a distinct pressed state -----------------------
   The authored press lost on specificity. `.pm .pm-btn:active` at (0,3,0) outranked `.btn:active`
   at (0,2,0) and every button carries both classes, so :active resolved to the rest position.
   Restored here, plus a non-motion press for reduced-motion visitors, who had no press signal. */
html.pm .pm-btn:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, a.cta-alive:active, .pm-btn:active { filter: brightness(0.94); }
}

/* --- two infinite spinner animations ran on Google Translate off-screen overlay ---------------
   The loader mounts a hidden progress overlay whose SVG spins forever. It paints nothing, but it
   keeps the animation timeline awake for the life of the page. That markup sits in the light DOM,
   so a stylesheet reaches it. */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf svg,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf svg * { animation: none !important; }

/* --- one primary action, on the highest-intent screen on the page --------------------------------
   Measured in one 900px screen at 1440 on the closing band: the yellow primary is 217x52 at 8.80:1
   against the panel, while the secondary beside it is 226x52 (4.4% larger) filled SOLID WHITE at
   12.40:1, which is 41% more contrast. So the brightest, biggest filled control at the moment of
   highest intent was the secondary, and the yellow that the site reserves for "act" was the dimmest
   thing on screen. Worse, the secondary's own hover turned yellow, which put a fifth yellow object
   on the page on interaction. The secondary becomes an outline on teal, matching what the hero
   already does, so the yellow CTA is the only filled control in the band.

   The capability-statement tile in the same screen is 6.96x the primary's area and also solid white,
   and it was left exactly as it is on purpose: README-PREVIEW.md records the PDF at the decision
   moment as a deliberate trust transfer, and for a business owner two thirds of the way through a
   decision a capability statement is a qualified action, not a leak. Changing it is the owner's call,
   not an audit fix. Demoting it here also inverted its own text colours, which are set against white
   further up the cascade, and measured 1.16:1 in a first attempt. */
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}


/* ===== premium-vcpility.css ===== */
/* =====================================================================================
   premium-vcpility.css — Round 11, 9 Sep 2026. Homepage only, loaded LAST by
   tools/recipes/sunnyaid-00-foundation.cjs, gated on `html.sa-skin-vcpility`.

   Owner: "have a look at the vcpility.com website, use the same template, clone it, but use the
   contents of lydassist.com, use the smiley feature as well and make it more noticable and
   interactive."

   VCPility is Sharktech Global's own platform, the one this site's own copy names ("Underneath sits
   VCPility, Sharktech Global's AI CRM and business automation platform"), so this is a house
   template moving between two house properties, not a copy of someone else's design.

   WHAT THE TEMPLATE ACTUALLY IS. Measured off vcpility.com rather than eyeballed:

     Type      Plus Jakarta Sans throughout, 400 to 800. The display is enormous and very tightly
               tracked: 97px at weight 600 with -3.5px letter-spacing and a 1.0 line-height. Section
               headings are 48-54px at 700/800 with about -2px. Eyebrows are tiny, 11.5-12.5px at
               weight 700, uppercase, with +2.2px tracking, in a deeper blue, sometimes on a pale
               blue chip. Body sits at 15-16px.
     Corners   ZERO. Every button and every card measured border-radius 0px. The single exception on
               the whole page is the eyebrow chip at 6px. This is the biggest single difference from
               the SunnyAid template underneath, which is built from rounded plates and pills.
     Ground    near-black bookends, #05070A behind the hero and #0A0A0B for the dark band and the
               footer, with light bands between them cycling #EDEDEE / #F6F6F7 / #F4F5F2.
     Cards     pure white, 34-36px of padding, no radius, NO SHADOW, numbered 01. 02. 03.
     Accent    electric blue #ED1C24 for fills, a deeper #B00E12 for labels and links on light.
     Rhythm    140.8px of padding top and bottom on every band. That is the whole vertical system.
     Motion    rise (fade plus translateY), blink (a typewriter caret), spin (a 360 loop), bob
               (a few px of float), twinkle (scale plus rotate). Word-by-word heading reveals driven
               by a `--w` index per word, and a huge low-contrast "ghost" word behind each heading.

   WHAT DID NOT COME ACROSS, and why:

     The hero video. vcpility.com runs videos/fluid-hero-bg-vid.mp4 under a three-stop dark veil.
     That asset is not ours to serve from here, and Round 8 removed the LYD hero video on the
     owner's instruction because care footage was pulling the page into the wrong category. The
     ground here is therefore a CSS mesh: three radial gradients over the near-black. No new file,
     no new imagery, and nothing to download.

     The palette question. The accent that means "act" was yellow through Round 8 and picked up a
     CareX red for the UI in Round 9. Cloning this template moves that accent to VCPility's blue,
     applied to exactly the same places the yellow occupied, so the OWNER'S RULE survives intact:
     one colour means act, and it is rationed to the CTAs. Only the hue changed.

     The one deliberate exception is the smile mark, which keeps #FFD470. On a near-black page with
     a blue accent it is now the only warm object anywhere, which is most of why it reads louder
     than it ever has. See section 9.

   This sheet re-dresses; it does not restructure. Every fix from Rounds 8 to 10 is keyed on
   `sa-skin-product`, the switch keeps that class on under this skin, and all of it still applies:
   the reserved heights that hold CLS at 0.006, the focus rings that follow their ground, the
   drawer that scrolls, the dialog semantics, the reserved measures. Nothing here undoes any of it.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   1. TOKENS. The SunnyAid layers below read about a hundred rules off these names, so
   re-pointing them here re-dresses most of the page before a single component rule is written.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility {
  /* the VCPility palette, sampled from the live site */
  --vc-night: #05070A;          /* behind the hero */
  --vc-ink: #0A0A0B;            /* dark bands, the footer */
  --vc-ink-2: #141417;          /* a card on a dark band */
  --vc-base: #EDEDEE;           /* the body ground */
  --vc-alt: #F6F6F7;            /* the alternating light band */
  --vc-warm: #F4F5F2;           /* the third light band */
  --vc-card: #FFFFFF;
  /* Three steps, because one blue cannot do all three jobs. VCPility's #ED1C24 measures 3.93:1
     against white, so a white label on it FAILS 1.4.3 for normal text - it fails on their site too.
     It is kept for everything that is not text-on-fill (icons, rules, the hero mesh), where the 3:1
     non-text bar applies and it clears on both grounds. Buttons take one step deeper. */
  /* Owner, 10 Sep 2026: the hero takes a blue-to-red gradient, and every other blue element takes
     the red from its far end. So the accent family is red now and named for what it is rather than
     for the hue it happened to start as. Same three-step structure as before, and for the same
     reason: one red cannot do all three jobs.

     #ED1C24 is the gradient's own red and measures 4.38:1 against white, so a white label on it
     fails 1.4.3 for normal text. It is kept for everything that is NOT text-on-fill, where the 3:1
     non-text bar applies and it clears on both grounds. Fills go one step deeper, labels two. */
  --vc-accent: #ED1C24;         /* graphics only: 4.5:1 on #0A0A0B, 3.8:1 on #EDEDEE */
  --vc-accent-fill: #D40F17;    /* button fills: white on it 5.41:1 */
  --vc-accent-deep: #B00E12;    /* labels and links on light: 6.2:1 on #EDEDEE, 7.2:1 on white */
  --vc-accent-soft: #FF9A93;    /* the pale step on dark bands: 9.7:1 on #0A0A0B, ink on it 9.4:1 */
  --vc-accent-tint: #FDEAEA;    /* chip grounds: ink 16.6:1, the deep red on it 6.2:1 */
  /* the gradient itself, so the hero and anything that echoes it stay in step */
  --vc-grad-a: #0B2E8F;
  --vc-grad-b: #7A1A56;
  --vc-grad-c: #ED1C24;
  --vc-line: rgba(10, 10, 11, 0.14);
  --vc-line-dark: rgba(255, 255, 255, 0.14);
  --vc-muted: #3F4540;          /* 8.0:1 on #EDEDEE */
  --vc-on-dark: rgba(255, 255, 255, 0.72);
  --vc-band: 8.8rem;            /* 140.8px, the whole vertical system */

  /* re-point the skin tokens the layers below already consume */
  --sa-cream: var(--vc-base);
  --sa-white: var(--vc-card);
  --sa-teal: var(--vc-ink);
  --sa-teal-deep: var(--vc-night);
  --sa-ink: #0C0F16;
  --sa-on-teal: var(--vc-on-dark);
  --sa-ui: var(--vc-accent-deep);
  --sa-ui-soft: #FF9A93;        /* on the dark bands: 7.4:1 on #0A0A0B */
  --sa-ui-tint: #FDEAEA;
  --sa-yellow: var(--vc-accent-fill);
  --sa-yellow-deep: var(--vc-accent-deep);
  --sa-yellow-soft: #FF9A93;
  --sa-yellow-tint: var(--sa-ui-tint);

  /* square. everything. */
  --sa-radius-panel: 0px;
  --sa-radius-card: 0px;
  --sa-radius-pill: 0px;
  --sa-radius: 0px;

  /* type */
  --sa-font-heading: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif;
  --sa-font-body: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif;
  --sa-h1: clamp(2.5rem, 6.4vw, 6.08rem);
  --sa-h2: clamp(2rem, 3.9vw, 3.375rem);

  /* the tick disc, re-inlined in blue: the fill is baked into the data URI */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23D40F17'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --sa-ring-src: none;
}

/* Plus Jakarta Sans everywhere, including the places earlier layers pinned by name. */
html.sa-skin-vcpility body,
html.sa-skin-vcpility :is(h1, h2, h3, h4, h5, h6, p, li, a, button, summary, span, strong, em, small, label, input, textarea, select, figcaption, blockquote, td, th) {
  font-family: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif !important;
}

/* -------------------------------------------------------------------------------------
   2. GROUNDS. Near-black bookends, light bands between. The SunnyAid layers paint several bands
   with !important at high specificity, so these carry the ID compound where they have to.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility body { background: var(--vc-base) !important; color: var(--sa-ink); }

/* the hero: a CSS mesh over near-black, standing in for the template's fluid video */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero {
  /* THE HERO GRADIENT (10 Sep 2026). Owner: "use gradient this as the background transition from
     blue to red, keep it only for the hero". Three stops, because a straight two-stop blue-to-red
     interpolation passes through a muddy grey-violet; the plum midpoint is what the reference band
     actually shows.

     The 16% black veil over the top is not decoration. White on the gradient's red end measures
     4.38:1, which is fine for the 97px display but under the bar for the lede beside it, and the
     hero copy column crosses that end at narrow widths. Sixteen percent takes the worst point to
     5.8:1 and costs almost nothing of the colour. Only the hero: every other band keeps its own
     ground, which is what "keep it only for the hero" asks for. */
  background-color: var(--vc-grad-a) !important;
  background-image:
    linear-gradient(rgba(5, 7, 10, 0.16), rgba(5, 7, 10, 0.16)),
    linear-gradient(100deg, var(--vc-grad-a) 0%, var(--vc-grad-b) 52%, var(--vc-grad-c) 100%) !important;
  color: #fff;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(h1, h2, h3, .sa-hero__lede, p) { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__lede,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero p:not(.sun-smile__line) { color: var(--vc-on-dark) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::after { display: none !important; }

/* dark bands and the footer go to the template's flat near-black, halftone off */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"],
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-band-teal,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-strip,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid footer.footer-deep {
  background: var(--vc-ink) !important;
  background-image: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::after { display: none !important; }

/* The light bands. Note the DESCENDANT selector: only three sections are direct children of #main
   on this page and the rest are nested, so `#main > section` reached almost nothing. VCPility never
   uses pure white as a band ground - white is reserved for cards - so the bands cycle its three
   greys and the band rhythm becomes the template's single 8.8rem step. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo) {
  background: var(--vc-base) !important;
  background-image: none !important;
  /* Owner, 10 Sep 2026: "remove this empty area". The template's 140.8px is right where a light band
     meets a dark one, and this page has five light bands in a row: each pair contributed 115px of
     its own and the junction read as a 230px void rather than a boundary. Light bands now run at
     72px, so a junction is 144px, and the dark bands keep the full rhythm below. */
  padding-block: clamp(2.75rem, 5.2vw, 4.5rem) !important;
}
/* The alternation runs off data-vc-band, which the recipe stamps down the light sections in
   document order. `:nth-of-type(even)` reached almost nothing, because only three sections on this
   page are direct children of #main and the rest are nested, so consecutive bands came out the same
   grey and the 115px each of them contributes read as one 230px void rather than a boundary. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo)[data-vc-band="b"] { background: var(--vc-alt) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo)[data-vc-band="a"] { background: var(--vc-base) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] { padding-block: clamp(4rem, 8vw, var(--vc-band)) !important; }

/* the care photography loses its band-filling role: on this template a photograph is a flat panel,
   never a ground. The five images stay exactly as they are, cropped, not replaced. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.band-photo { background: var(--vc-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-photo img { filter: saturate(0.82) contrast(1.04); }

/* -------------------------------------------------------------------------------------
   3. SQUARE. The template's defining move, and the one that does the most work.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility :is(
  .btn, a.btn, button, .sa-btn, .sa-card, .sa-panel, .sa-plate, [data-slot="card"],
  .sa-kicker, .td-kicker, .sa-chip, .sa-badge, .sa-arrow, .sa-arrow__ico,
  .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-pricing-faq-plate,
  .sa-facts__cell, .sa-stages-aeo-card, .sa-whynow-plate, .rd-card-doc, .cap-link,
  .pipe__frame, .sa-hero__frame, .sa-hero__screen, .demo-frame, input, textarea, select,
  img, figure, .rd-photo, .rd-photo-fig, .sa-hero__fact, .contact-card, .sun-smile
),
html.sa-skin-vcpility :is([class*="rounded"], [class*="radius"]) {
  border-radius: 0 !important;
}
/* the one 6px exception the template itself keeps: the eyebrow chip */
html.sa-skin-vcpility :is(.sa-kicker, .td-kicker) { border-radius: 4px !important; }
/* discs stay discs: a circle is a shape, not a corner */
html.sa-skin-vcpility :is(
  .sun-smile__btn, .sa-hero__fact-ico, .contact-social > a, .sa-stages-aeo-num,
  .rd-hero-abn, [class*="social"] a, .pipe__avatar, .sa-cf-social a, .disc
) { border-radius: 999px !important; }

/* -------------------------------------------------------------------------------------
   4. TYPE. Enormous, tightly tracked display; small loud eyebrows.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1.font-display,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1:not(.font-display) {
  font-size: var(--sa-h1) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.036em !important;
  text-wrap: balance;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h2,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h2.font-display,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) {
  font-size: var(--sa-h2) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.038em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(h3, .leaks__title, .sa-gaps-title, .sa-stages-aeo-title, .sa-pricing-faq-qt, .sa-replaces__name) {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(p, li) { letter-spacing: 0 !important; }
/* Body copy takes the template's muted grey ON LIGHT GROUNDS ONLY. The first version of this rule
   set it everywhere and put #3F4540 on the near-black strip at 2.01:1, which the harness caught.
   The dark grounds are named explicitly and the light rule excludes them, so a paragraph's colour
   now follows the band it is in rather than the sheet it is styled by. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(p, li):not(.sun-smile__line):not(.sa-hero__lede) { color: var(--vc-muted); }
/* Text on the dark grounds, EXCLUDING anything inside a light surface nested in them. That
   exclusion is the whole trick: the hero contains a white product window, white fact cards and
   pale status chips, and the closing band contains a white contact card, so a blanket
   "everything in a dark section is light text" rule painted 0.72-alpha white onto white and
   measured 1.0:1. The list below is not guesswork - it is every element inside a dark section
   whose own computed background came back light, enumerated by walking the built page. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  #main section[data-band="deep"],
  #main section.band-photo,
  #main section.vc-photo-band,
  #main section.sa-strip,
  #main .sa-band-teal,
  footer.footer-deep
) :is(p, li, figcaption, small, dd, dt):not(:is(.pipe__frame, .pipe__auto, .pipe__status, .sa-hero__fact, .sa-card, [data-slot="card"], .contact-card, .rd-card-doc, .cap-link, .sa-facts__cell, .sa-whynow-plate, .sa-gaps-card, .sa-stages-aeo-card, .sa-pricing-faq-card, .rd-aeo-msg, .rd-aeo-try, .rd-card-hours, .rd-card-doc__thumb, .sa-cf-doc__go, .sa-hero__fact-ico) *) { color: var(--vc-on-dark) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  #main section[data-band="deep"],
  #main section.band-photo,
  #main section.vc-photo-band,
  #main section.sa-strip,
  footer.footer-deep
) :is(h1, h2, h3, h4, strong, b):not(:is(.pipe__frame, .pipe__auto, .pipe__status, .sa-hero__fact, .sa-card, [data-slot="card"], .contact-card, .rd-card-doc, .cap-link, .sa-facts__cell, .sa-whynow-plate, .sa-gaps-card, .sa-stages-aeo-card, .sa-pricing-faq-card, .rd-aeo-msg, .rd-aeo-try, .rd-card-hours, .rd-card-doc__thumb, .sa-cf-doc__go, .sa-hero__fact-ico) *) { color: #fff !important; }

/* the eyebrow: tiny, uppercase, wide-tracked, in the deeper blue on a pale blue chip */
/* The chip's ground is OPAQUE. VCPility's own is a 10% blue over a solid band, which composites to
   a fixed colour anyway, but a translucent fill leaves a checker guessing when the band behind it
   carries a gradient or a photograph, and it reported these as failures. Stated outright, the light
   pair measures 5.4:1 and the dark pair 9.4:1 at 12.5px. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-kicker, .td-kicker) {
  display: inline-block;
  background: #FDEAEA !important;
  color: var(--vc-accent-deep) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 0.5rem 1rem !important;
  /* the shipped chip carries a fixed h-5 (20px) from the utility layer, which clipped the label the
     moment the type grew and the padding went on. */
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
/* on every dark ground, the hero included. The hero is not [data-band="deep"], so it was taking the
   light treatment and putting a mid blue on a pale blue tint over near-black: 1.9:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(main > section.sa-hero, #main section[data-band="deep"], #main section.band-photo, #main section.sa-strip) :is(.sa-kicker, .td-kicker, [class*="badge"]) {
  background: #3A1416 !important;
  color: #FFB3AC !important;
}

/* -------------------------------------------------------------------------------------
   5. BUTTONS. Square, hairline, two weights only: a blue fill and a hairline ghost.
   Metrics lifted from the live site: 0.8px border, 15px/25px padding, 15px at weight 600.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(main, header, footer) :is(.btn, a.btn, .sa-btn, .sa-pricing-faq-cta) {
  border-radius: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 0.9375rem 1.5625rem !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s, color 0.3s !important;
}
/* the act colour: blue fill, white label. Same four places the yellow held. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
) {
  background: var(--vc-accent-fill) !important;
  border: 0.8px solid var(--vc-accent-fill) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
):hover { background: #96090D !important; border-color: #96090D !important; transform: translateY(-2px); }

/* the ghost: a hairline that takes its colour from the ground it sits on */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(.btn-ghost-light, .sa-hero__btn2, .sa-pricing-faq-cta:not(.sa-pricing-faq-cta--primary)) {
  background: transparent !important;
  border: 0.8px solid var(--vc-line) !important;
  color: var(--sa-ink) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(section.sa-hero, section[data-band="deep"], section.band-photo, .sa-panel) :is(.btn-ghost-light, .btn-ghost-dark, .sa-hero__btn2) {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(.btn-ghost-light, .btn-ghost-dark, .sa-hero__btn2):hover {
  background: rgba(237, 28, 36, 0.1) !important;
  border-color: var(--vc-accent) !important;
  transform: translateY(-2px);
}
/* THE MENU BAR, LIGHT. Owner, 10 Sep 2026: "menu bar, make it lighter so that the ndis logo is
   seen". It had been a dark scrim carrying the white version of the wordmark, and the white mark on
   near-black is a whisper: the logo is red and navy and neither of those survives being flattened
   to white. So the bar becomes light frosted glass instead, the wordmark goes back to its own
   colours, and the navigation goes dark on it.

   Glass rather than a solid fill because the bar floats over a near-black hero: a solid white strip
   would cut the top off the page, while a blurred, brightened panel keeps the hero visible through
   it and still gives the labels a light ground. `header.pm-scrolled` is premium.js's own scroll
   flag, so the more opaque scrolled state comes free. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header {
  background: rgba(246, 246, 247, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) brightness(1.06);
  backdrop-filter: blur(20px) saturate(1.4) brightness(1.06);
  border-bottom: 0.8px solid rgba(10, 10, 11, 0.1) !important;
  box-shadow: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header.pm-scrolled { background: rgba(246, 246, 247, 0.94) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header :is(a, button, span, .nav-link) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--vc-accent) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header #v2-menu-toggle {
  border-color: rgba(10, 10, 11, 0.25) !important;
  color: var(--sa-ink) !important;
}
/* an engine without backdrop-filter gets an opaque bar, because a see-through one would be unreadable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid header { background: rgba(246, 246, 247, 0.97) !important; }
}
/* the drawer opens over the hero, so it needs its own ground rather than inheriting a see-through
   header. It is the only navigation a phone has (see Round 10), so it cannot be translucent. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu {
  background: var(--vc-alt) !important;
  border-top-color: rgba(10, 10, 11, 0.12) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu :is(a, span, button) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu a { border-color: rgba(10, 10, 11, 0.1) !important; }

/* the header pill becomes the template's hairline enquire button */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header a[class~="bg-lyd-yellow"] {
  background: transparent !important;
  color: var(--sa-ink) !important;
  border: 0.8px solid rgba(10, 10, 11, 0.6) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header a[class~="bg-lyd-yellow"]:hover {
  background: var(--vc-accent-fill) !important;
  border-color: var(--vc-accent-fill) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------------------
   6. CARDS. White, flat, square, generous padding, no shadow at all. The lift and the
   shadow the luxe layer gives every card have to come off, which takes the ID compound.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
  .sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card,
  .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate
) {
  /* .sa-pricing-faq-plate joins the card set: the token re-point had turned it near-black while its
     own type stayed dark, at 1.03:1. In this template an FAQ row is a white card like any other. */
  background: var(--vc-card) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 2.4vw, 2.125rem) !important;
}
/* Cards stay WHITE on dark bands too, which is what the template does and what stops a whole class
   of bug. The first pass darkened them to #141417 and immediately produced dark-on-dark text at
   1.08:1, because the box moved and the type inside it did not - the type is coloured by six earlier
   layers, several with !important. A white card on a near-black band needs no text rules at all. */
/* A whitened card sets its own text, whatever band it is in. Without this the why-now plates
   inherited white type from their photo band (correct when the plate was a dark blue) and kept it
   after this sheet turned the plate white, which measured 1.0:1. Colour has to travel with the box
   it is painted on, not with the section the box happens to sit in. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) :is(h1, h2, h3, h4, h5, strong, b, dt, a:not(.btn)) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) :is(p, li, figcaption, small, dd, span:not([class*="badge"]):not(.sa-kicker):not(.td-kicker):not([class*="ico"])) { color: var(--vc-muted) !important; }
/* the halftone dot pattern was drawn to sit on a dark plate; on a white one it is grit */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-whynow-plate.sa-halftone { background-image: none !important; }

/* the hero product window keeps its job, in the template's grammar: square, hairline, flat */
/* Owner, 10 Sep 2026: "remove this black box, make it seamless". The product window was a
   near-black panel with a hairline, which was right when the hero was near-black too. On the
   gradient it reads as a hole punched in the colour. The frame goes; what is left is the white
   Enquiries table sitting directly on the gradient, which is what the window always actually was.
   The caption under it keeps its light colour, because it is now on the gradient rather than on the
   panel, and the gradient is darker than the caption at every point. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(.sa-hero__frame, .sa-hero__screen) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main .pipe__frame { border-radius: 0 !important; }

/* -------------------------------------------------------------------------------------
   7. THE GHOST WORD. A huge, very low contrast word set behind each section heading, which is
   the template's strongest structural device after the square corners. Added by the recipe as
   `.vc-ghost`; aria-hidden, so it is decoration and never reaches the accessibility tree.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -0.42em;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  font-size: clamp(3.5rem, 11vw, 10.5rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  color: rgba(10, 10, 11, 0.05);
  user-select: none;
}
/* drawn, not written: see the note in the recipe */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost::before { content: attr(data-ghost); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] .vc-ghost { color: rgba(255, 255, 255, 0.06); }
/* positioned off :has(), not off the class, because a later recipe can rewrite a class list but
   cannot remove the child. The ghost anchors to the heading it belongs to, so it is placed against
   the h2 rather than the whole heading block, which keeps it off the eyebrow chip. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.vc-ghost-host, *:has(> .vc-ghost)) { position: relative; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.vc-ghost-host, *:has(> .vc-ghost)) > *:not(.vc-ghost) { position: relative; z-index: 1; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost + * { margin-top: 0; }

/* -------------------------------------------------------------------------------------
   8. MOTION. The template's five movements, all of them gated on html.pm, which premium.js only
   sets when the visitor has NOT asked for reduced motion. Word-by-word heading reveals ride on a
   `--w` index the recipe writes per word.
   ------------------------------------------------------------------------------------- */
/* NOTE: the template's word-by-word heading reveal is deliberately absent. premium.js already
   splits h1 and h2.font-display into its own word spans at runtime and premium-motion.css animates
   them; a second nested split would put two transforms on the same glyphs. The four movements
   below carry the template's feel without that fight. */
html.sa-skin-vcpility.pm #main .vc-caret { animation: vc-blink 1s steps(1, end) infinite; }
@keyframes vc-blink { 50% { opacity: 0; } }

html.sa-skin-vcpility.pm #main .vc-seal { animation: vc-spin 22s linear 3; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
html.sa-skin-vcpility.pm #main .vc-seal__arrow { animation: vc-bob 2.2s ease-in-out 2; }
@keyframes vc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* the card reveal: the template's long, slow, staggered fade-and-lift */
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card) {
  animation: vc-card 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(2) { animation-delay: 0.18s; }
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(3) { animation-delay: 0.34s; }
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(4) { animation-delay: 0.5s; }
@keyframes vc-card { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main :is(.vc-word, .vc-caret, .vc-seal, .vc-seal__arrow, .sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* the rotating seal in the hero's lower corner, the template's signature ornament */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px !important;
  border: 0.8px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  padding: 1rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-seal__arrow { display: block; font-size: 1rem; margin-top: 0.25rem; }

/* -------------------------------------------------------------------------------------
   9. THE SMILE MARK. Owner: "use the smiley feature as well and make it more noticable and
   interactive."

   NOTICEABLE. Two things do the work. It goes up again, to 10rem on a laptop, and it is now the
   ONLY warm object on a near-black, blue-accented page, so nothing competes with it for the eye.
   The plate becomes a square hairline panel in the template's grammar with a warm inner glow.

   INTERACTIVE. It used to have exactly two states and a binary toggle: flat line, then smile. It
   now RESPONDS BEFORE YOU COMMIT. premium-vcpility.js writes a 0-to-1 `--sm-near` as the pointer
   closes on the mark, and the mouth lifts, the ring brightens and the halo grows in proportion, so
   the mark is visibly alive under the hand rather than waiting for a click. Keyboard focus jumps
   straight to the same mid state, because a response only pointers can reach is not a response.
   The tap still completes it: full arc, staggered sparks, and the message the site already carries.

   What it deliberately does NOT do: gate the message behind the interaction (the resting caption
   states the scenario in full), multiply itself (one instance, in the hero), require a drag (2.5.7),
   or move without a way out (every response is reversible and reduced motion keeps the states while
   dropping the movement).
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile {
  --sm-near: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 0.8px solid rgba(255, 212, 112, calc(0.28 + 0.42 * var(--sm-near))) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 calc(1.5rem + 2.5rem * var(--sm-near)) calc(-1rem + -0.25rem * var(--sm-near)) rgba(246, 186, 46, calc(0.18 + 0.3 * var(--sm-near))) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile::after { display: none !important; }

/* the disc: bigger than it has ever been, and the only warm thing on the page */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 7.5rem; height: 7.5rem; }
@media (min-width: 768px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 9rem; height: 9rem; }
}
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 10rem; height: 10rem; }
}

/* the halo tracks the pointer's approach rather than sitting at one strength */
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__btn::after {
  inset: calc(-12% - 6% * var(--sm-near));
  background: radial-gradient(circle,
    rgba(255, 212, 112, 0) 0 calc(42% - 4% * var(--sm-near)),
    rgba(255, 212, 112, calc(0.34 + 0.34 * var(--sm-near))) 54%,
    rgba(255, 212, 112, 0) 80%);
  filter: blur(calc(4px + 3px * var(--sm-near)));
  transition: inset 0.3s, filter 0.3s;
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__ring {
  stroke: rgba(255, 212, 112, calc(0.7 + 0.3 * var(--sm-near))) !important;
  stroke-width: calc(4px + 2.5px * var(--sm-near));
  fill: rgba(255, 212, 112, calc(0.06 + 0.06 * var(--sm-near)));
  transition: stroke 0.3s, stroke-width 0.3s, fill 0.3s;
}
/* THE MOUTH LIFTS AS YOU APPROACH. The flat line and the full arc are both in the SVG already;
   crossfading them on --sm-near turns a binary toggle into a continuous response, and the tap
   still takes it all the way. transform-origin sits on the mouth so the lift reads as a curve. */
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile[data-state="idle"] .sun-smile__flat {
  opacity: calc(1 - 0.85 * var(--sm-near));
  transform: translateY(calc(-1px * var(--sm-near)));
  transition: opacity 0.3s, transform 0.3s;
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile[data-state="idle"] .sun-smile__arc {
  opacity: var(--sm-near);
  transform: scaleY(calc(0.2 + 0.42 * var(--sm-near)));
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__tap {
  fill: rgba(255, 212, 112, calc(0.75 + 0.25 * var(--sm-near))) !important;
  font-size: 12px;
  letter-spacing: 0.26em;
}
/* the caption and the link, in the template's square grammar */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line { color: #fff !important; font-weight: 500; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link {
  border-radius: 0 !important;
  border: 0.8px solid rgba(255, 212, 112, 0.55) !important;
  font-weight: 600;
}
/* The label colour is scoped to the RESTING state. Unscoped, it painted #FFD470 over the yellow
   fill the smiling state gives this pill and the label vanished - a failure no automated pass on
   this page can see, because nothing in the harness taps the mark. Caught by screenshotting the
   tapped state, which is now part of the check. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile[data-state="idle"] .sun-smile__link { color: #FFD470 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile[data-state="on"] .sun-smile__link {
  background: #FFD470 !important;
  border-color: #FFD470 !important;
  color: #0A0A0B !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link:hover,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link:focus-visible {
  background: #FFD470 !important;
  border-color: #FFD470 !important;
  color: #0A0A0B !important;
}
/* pointer response is decoration: under reduced motion the states remain, the tracking stops */
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile { --sm-near: 0 !important; }
  html.sa-skin-vcpility .sa-hero__smile--compact :is(.sun-smile, .sun-smile *) { transition: none !important; }
}

/* -------------------------------------------------------------------------------------
   10. Focus rings, restated for this skin's grounds. Round 10 established the rule that the ring
   follows the ground rather than the skin; these are the same two cases with this palette's
   colours. Measured: #B00E12 is 6.3:1 on #EDEDEE and 8.6:1 on white; #FF9A93 is 7.4:1 on #0A0A0B.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--vc-accent-deep) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  main section[data-band="deep"],
  main section.band-photo,
  main section.vc-photo-band,
  main .sa-panel,
  main .sa-band-teal,
  main section.sa-strip,
  footer.footer-deep
) :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: #FF9A93 !important; }
html.sa-skin-vcpility a.skip-link { color: var(--vc-accent-deep); }
html.sa-skin-vcpility a.skip-link:focus-visible { outline-color: var(--vc-accent-deep); }

/* -------------------------------------------------------------------------------------
   11. Photographs as flat panels. The luxe layer gives every figure a lift and a soft shadow,
   which is the SunnyAid grammar; on this template an image is a square panel with a hairline and
   nothing else. The five photographs are untouched as files: this is presentation only.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig, .rd-photo-frame, .sa-gaps-fig, .hero-photo, img) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.rd-photo-fig, .rd-photo-frame, .sa-gaps-fig) {
  border: 0.8px solid var(--vc-line) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig)::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig)::after { border-radius: 0 !important; }

/* -------------------------------------------------------------------------------------
   12. The open FAQ row. The SunnyAid layer inverts an expanded row to a teal panel with light type
   (`.sa-pricing-faq-plate:has(> details[open])`, !important, and boosted by the :has()). Under this
   skin's tokens that teal became near-black, so an opened question read as dark type on near-black
   at 1.03:1 - and it beat the card rule above, which is why whitening the plate alone did not fix
   it. VCPility does not invert an expanded row, so the inversion comes off here rather than being
   recoloured: the row stays a white card in both states. The compound has to carry the same :has()
   to outrank the rule it is answering.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) {
  background: var(--vc-card) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(h1, h2, h3, h4, strong, b, summary, .sa-pricing-faq-qt) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(p, li, dd, figcaption, small) { color: var(--vc-muted) !important; }
/* the answer body's own comparison rows are light-on-teal in the SunnyAid design and their rule
   carries the same :has() boost, so they have to be answered at the same specificity rather than by
   the broad .rd-faq-line rule further down. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(.rd-faq-comp, .rd-faq-comp *, .rd-faq-line) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) a:not(.btn) { color: var(--vc-accent-deep) !important; }
/* its focus ring follows the row, which is light in both states now */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(a, button, summary):focus-visible { outline-color: var(--vc-accent-deep) !important; }

/* The FAQ aside's connector lines carry their heading's text for layout and measure 0x0, so nothing
   is visible either way, but they were set light for a dark ground that this skin turns white. They
   take the ink colour so the page reports honestly rather than carrying a phantom failure. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(.rd-faq-line, .rd-faq-aside__item, .rd-faq-aside__item *) { color: var(--sa-ink) !important; }

/* A filled blue button takes a WHITE focus ring. The dark-ground rule gives #FF9A93, which is 10:1
   against the near-black hero on the ring's outer edge but only 2.5:1 against the #D40F17 fill on
   its inner edge, and 1.4.11 asks for 3:1 against adjacent colours - both of them. White measures
   4.9:1 against the fill and 15.9:1 against the hero ground, so it clears on both sides. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
):focus-visible { outline-color: #fff !important; outline-offset: 3px !important; }


/* =====================================================================================
   13. ROUND 12 (10 Sep 2026). Three owner asks: drop the word "software", remove the
   registration dot-grid, and "make the website more dynamic so that people stay on the page".
   ===================================================================================== */

/* The dot grid is gone, so the why-now head is a single column again. Left at two columns it
   reserved 38% of the row for nothing and the heading measured 44 characters a line against a
   ceiling of 75, which is a narrow, hard-to-scan column with empty space beside it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-top {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-top .sec-head-split { max-inline-size: 58rem; }

/* ---------------------------------------------------------------------
   MOTION THAT EARNS ITS PLACE. Four devices, chosen because each one answers a reason people
   leave a long page rather than because it moves. Every one is gated on html.pm, which premium.js
   sets only when the visitor has NOT asked for reduced motion, and every one is transform- or
   opacity-only, so none of them can shift layout or touch the 0.007 CLS the last two rounds bought.
   --------------------------------------------------------------------- */

/* 1. THE SCROLL CUE, built and then removed. The template's bobbing arrow was rebuilt as a real
   button with a name and a keyboard path, and it kept colliding: anchored to the section it fell
   below the fold, where a scroll cue has nothing to say, and anchored to the first screen it sat on
   the smile mark at 1280x800 and became unclickable. There is nowhere left for it, because unlike
   VCPility's hero this one has no dead space. It is also the least needed of the four: the fact
   cards are already half visible at the fold, which says "there is more below" better than an arrow
   does. Three devices remain, and each answers a reason people leave rather than simply moving. */

/* 2. THE PROGRESS RULE. A hairline that fills as you read. On a page this long it answers "how much
   is left", which is the question that decides whether someone keeps going. It sits in the header's
   own bottom edge, is 2px tall, and is aria-hidden because it duplicates the scrollbar's meaning. */
html.sa-skin-vcpility .vc-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--vc-read, 0));
  transform-origin: 0 50%;
  background: var(--vc-accent);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { html.sa-skin-vcpility .vc-progress { display: none; } }

/* 3. THE GHOST WORDS DRIFT. They are already the template's strongest structural device; tying them
   to scroll turns each section's arrival into something that happens rather than something that is
   simply there. Pure translate on an element that is 5% ink and aria-hidden, so there is nothing to
   read and nothing to reflow. */
html.sa-skin-vcpility.pm #main .vc-ghost {
  transform: translateX(calc(-50% + var(--vc-drift, 0px)));
  will-change: transform;
}

/* 4. CARDS ANSWER THE POINTER. The template's cards are deliberately flat, which reads as static
   when a whole band of them sits still under the cursor. A hairline that turns blue and a 3px lift
   is the smallest possible answer, and it costs no layout because both are transforms and borders
   that were already reserved. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell) {
  border: 0.8px solid transparent !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
}
/* the hover carries the full skin compound: the base rule above is (1,5,1) and the luxe layer sets
   its own card transforms, so a shorter hover selector loses to both and resolved to the rest state. */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(237, 28, 36, 0.55) !important;
  box-shadow: 0 10px 30px -18px rgba(237, 28, 36, 0.5) !important;
}
/* and a keyboard visitor gets the same answer, since hover is not a state they have */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card):focus-within {
  border-color: rgba(237, 28, 36, 0.55) !important;
  box-shadow: 0 10px 30px -18px rgba(237, 28, 36, 0.5) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell) { transition: none !important; }
  html.sa-skin-vcpility #main .vc-ghost { transform: translateX(-50%) !important; }
  }

/* -------------------------------------------------------------------------------------
   14. ROUND 13 (10 Sep 2026). The four-cell facts row is gone, the light bands alternate so two
   of them meeting is a boundary rather than a void, and the hero statistics count up.
   ------------------------------------------------------------------------------------- */

/* The counting figures. min-width is set from the finished value before the count starts, so the
   digits cannot change the box while they run: without it "0" and "263,145" are different widths
   and the icon beside them would step sideways for a second and a half. The figures already carry
   tabular numerals from Round 10, so every intermediate value lands on the same grid. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero [data-vc-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* An earlier attempt trimmed the junction with an adjacent-sibling rule. It matched nothing: these
   sections sit at different depths and are not siblings at all. The trim is on the light-band
   padding itself, above, which does not care how the sections are nested. */

/* =====================================================================================
   15. ROUND 14 (10 Sep 2026). The six gap cards flip instead of expanding.
   Owner: "when i click on the card, only that card should flip and the information should be there".

   The shipped control does all the work. rich-gaps-whynow.js already toggles `is-open` on the row
   from the "What closes it" button, with aria-expanded and aria-controls correct; this sheet spends
   that class on a rotation rather than on an expanding panel. Nothing about the keyboard path or the
   announcement changes, which is why this is a stylesheet and a DOM regroup rather than a new widget.

   The front face stays in flow so the card keeps an intrinsic height with scripts off; the back is
   laid over it. Both faces set `visibility` on a delay, so the hidden one leaves the accessibility
   tree and the tab order at the halfway point of the turn rather than instantly or never.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* 2600px, not 1400. A 420px-wide card seen through a 1400px perspective warps hard as it turns:
     the near edge balloons, the far edge collapses, and the whole thing reads as a skew rather than
     a turn. Frame-by-frame it looked cheap. A far longer focal length keeps the rotation calm and
     the card's proportions believable, which is what a flip is supposed to feel like. */
  perspective: 2600px;
  overflow: visible !important;
}
/* while it turns it may briefly reach past its cell, so it goes on top rather than under */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover { z-index: 2; }
/* A STATIC PLATE behind the two faces. At exactly 90 degrees both faces are edge-on and
   backface-visibility hides them, so for one frame the card is a hole and you see straight through
   to the photograph behind the band. On a plain ground nobody notices; on a photograph it reads as
   the card blinking out. The plate does not rotate, so there is always a card there and what turns
   is its content. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--vc-card);
  pointer-events: none;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__inner {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  height: 100%;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .vc-flip__inner {
  /* A symmetrical ease, not the out-expo used everywhere else on this page. Out-expo puts almost
     all of the movement in the first third, so a 180-degree turn whips through the edge-on moment
     and then crawls: the eye reads that as a stutter. An even curve turns at a constant-feeling
     rate, which is how a physical card behaves. */
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: transform;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__inner { transform: rotateY(180deg); }

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__face {
  background: var(--vc-card);
  border: 0.8px solid transparent;
  padding: clamp(1.5rem, 2.4vw, 2.125rem);
  display: flex;
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: visibility 0s linear 0.275s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__front { position: relative; min-height: 100%; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  visibility: hidden;
  justify-content: space-between;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__back { visibility: visible; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__front { visibility: hidden; }

/* the answer is the whole point of the back, so it is simply open there: the collapsing grid the
   expanding version used has nothing left to do once the panel has a face of its own. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back .rd-gap-panel {
  grid-template-rows: 1fr !important;
  visibility: inherit !important;
  margin: 0 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back .rd-gap-panel p {
  border-left-color: var(--vc-accent) !important;
  color: var(--vc-muted) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back-btn {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: 0.8px solid var(--vc-line);
  background: transparent;
  color: var(--vc-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back-btn:hover { background: var(--vc-accent-tint); border-color: var(--vc-accent); }

/* the whole card answers the pointer now, and the chevron points the way it will turn */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover .vc-flip__face { border-color: rgba(237, 28, 36, 0.55); }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover { transform: none !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .vc-flip__inner { transition: none !important; }
  html.sa-skin-vcpility #main .vc-flip__face { transition: none !important; }
}
/* with scripts off the panel is open in the markup, so the back would sit invisibly over a front
   that is also visible. No JS means no flip, so the two faces go back to being one column. */
html:not(.js) .sa-gaps-card.vc-flip { perspective: none; }
html:not(.js) .vc-flip__back { position: static; transform: none; visibility: visible; }
html:not(.js) .vc-flip__back-btn { display: none; }

/* =====================================================================================
   16. The gaps photograph as the band's ground (10 Sep 2026).
   Owner: "can you make the photo as the background". The veil is a three-stop gradient in the
   template's own idiom, heavy enough that white type clears 4.5:1 anywhere over it and the six
   white cards still read as cards rather than as holes. The caption keeps its words and moves to
   the foot of the band, where it reads as a credit rather than as a label on a panel.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band {
  position: relative;
  /* No `isolation: isolate` and no negative z-index on the layer. Together those two put the
     photograph BEHIND the section's own opaque background, where it was invisible even once it
     loaded. The section colour is now purely a fallback: the layer paints over it at z-index 0 and
     everything else in the band is lifted to 1. */
  background: var(--vc-night) !important;
  overflow: hidden;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > *:not(.vc-bandphoto) { position: relative; z-index: 1; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  filter: saturate(0.72) contrast(1.02);
  /* The reveal wipe has to go. The shipped figure animates in behind clip-path: inset(0 100% 0 0),
     released when its own container is revealed; moved to the front of the section as a band ground
     it never gets that release, so the image sat clipped to zero width and the band read as solid
     black. Three passes at the veil were spent on a photograph that was not being painted at all.
     The drift stays: a slow parallax is exactly right for a ground. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 1 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A MODERATE veil over the whole photograph, and a local scrim behind the text (below). The two
     earlier attempts both scrimmed the whole band, at 0.78-0.92 and then 0.82-0.5, and in both the
     photograph was invisible: the band is 1288px tall and the six white cards cover everything
     below the header, so a uniform veil dark enough for white type leaves nothing to see. Splitting
     it means the photograph reads in the margins and around the cards, while the heading gets the
     darkness it needs from a scrim of its own. */
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.58) 0%, rgba(5, 7, 10, 0.44) 38%, rgba(5, 7, 10, 0.6) 100%);
}
/* the caption keeps its words and becomes the band's foot */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto .sa-gaps-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: 1;
  margin: 0 !important;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66) !important;
  background: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto .sa-gaps-cap strong {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-right: 0.4em;
}
/* the layout that used to hold a photo column beside the grid is now just the grid */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-layout {
  display: block !important;
  grid-template-columns: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-grid { width: 100% !important; }
/* it is a dark band now, so it wants the dark band's padding rather than the light one's */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band {
  padding-block: clamp(4rem, 8vw, var(--vc-band)) !important;
  padding-bottom: clamp(5rem, 9vw, 10rem) !important;
}

/* the template's gold inset ring belonged to the figure when it was a panel; a band ground has no
   frame. premium-sunnyaid-gaps.css draws it on ::before with !important, so it is answered there. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto::before {
  box-shadow: none !important;
  display: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto { box-shadow: none !important; }

/* THE TEXT SCRIM, as glass rather than as a patch.
   Owner, 10 Sep 2026: "the black patch in the background does not look good, can you find a better
   way to blend it in". It was a flat dark rectangle with hard left and right edges, which is exactly
   what it looked like. Three things fix it and they only work together:

     1. It blurs what is behind it instead of only darkening it. A blurred, dimmed photograph reads
        as depth; a flat black panel reads as a hole cut in the page. This is the whole difference.
     2. It is masked, so it fades out on all four sides instead of stopping at an edge. The mask is
        a radial that reaches past the block, so the feather happens in the padding and every line
        of text still sits on the solid part.
     3. It carries a hairline of light along its top edge, which is what makes a glass surface read
        as a surface rather than as a smudge.
   Measured after: the brightest ground behind the heading is 4.9:1 against white and behind the
   lede 15:1, so the blur bought the look without costing any of the legibility. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead {
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.5rem, 6vw, 5rem);
  /* Owner, 10 Sep 2026: "make this like glass". It was already a backdrop-filtered panel, but
     under a 0.52-to-0.62 veil with brightness knocked to 0.42 it read as a solid dark box with
     hard edges - the photograph behind it was doing no work at all. Three changes make it a
     surface instead of a lid:
       - the veil halves, and the brightness knockdown lifts from 0.42 to 0.66, so the picture
         comes back through it
       - saturation goes UP rather than down. Draining colour is what made it look like a smudge;
         real glass keeps the hue of what is behind it and only softens the detail
       - the blur goes up, not down. Blur is what buys the legibility that the veil used to buy,
         and it costs none of the transparency: a bright window behind the panel becomes an even
         wash rather than a hard edge cutting through a line of text
     Measured after the change rather than assumed, by sampling the rendered pixels with the text
     hidden - see the note under the border below. */
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.16) 0%, rgba(5, 7, 10, 0.28) 100%);
  -webkit-backdrop-filter: blur(34px) saturate(1.18) brightness(0.8);
  backdrop-filter: blur(34px) saturate(1.18) brightness(0.8);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 70px -40px rgba(0, 0, 0, 0.6);
  -webkit-mask-image: radial-gradient(ellipse 96% 74% at 50% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 74% at 50% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
}
/* The glass hairline that would normally run along the top edge is deliberately absent. On a panel
   with a hard boundary it is the detail that sells the surface; on one whose whole job is to
   dissolve into a photograph it draws a bright line along exactly the edge the mask is trying to
   make disappear. Tried, looked worse, removed. */
/* engines without backdrop-filter get the flat scrim back, because unreadable is worse than plain */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head {
    background: rgba(5, 7, 10, 0.88);
  }
}

/* =====================================================================================
   17. TWO DEVICES BORROWED BACK FROM THE SUNNYAID TEMPLATE (10 Sep 2026).
   Owner: "also use some elements from the sunnyside template if they would look good on this
   though." Two were worth taking and the rest were not, so only two are here.

   THE HAND-DRAWN RING. The template's signature: a scribbled ellipse behind the emphasis words of
   each section heading. It is the best possible thing to borrow onto this page, because this page
   is relentlessly geometric - zero corners, tight grid, one straight accent - and a single
   hand-drawn mark is the counterpoint that stops that reading as cold. The recipe never stopped
   wrapping the words: Round 8 only pointed --sa-ring-src at `none`, so this is the token coming
   back, in a blue copy of the same asset rather than its yellow original.

   It also draws itself. The template animates the ring's background-size from 0% to 100% when the
   heading is revealed, so each section's emphasis is written on as you arrive, which is exactly the
   kind of motion the earlier "more dynamic" ask was after and costs nothing extra.

   THE DOTTED HALFTONE. The template's texture for dark panels. The near-black bands here are
   completely flat, and 16%-white dots at 8px give them a surface without touching contrast: the
   dots sit under the type, not on it.

   NOT BORROWED, and deliberately: the Recoleta serif (it would fight a 97px Plus Jakarta display),
   the circular arrow link (a circle would be a third shape in a design built on one), and the
   cream band alternation (this palette already alternates, in its own greys).
   ===================================================================================== */
html.sa-skin-vcpility.sunnyaid {
  --sa-ring-src: url("/tpl/img/scribble-ellipse-red.svg");
  --sa-ring-h: 1.3em;
}
/* The word has to read ON the ring, which is the whole trap here: the first pass drew a saturated
   blue scribble and left the emphasis word blue as well, so the two cancelled and the heading
   measured 3.9:1 where it had been 17.6:1. Two tints, one per ground: a pale wash on the light
   bands with the deep-blue word on it at 5.1:1, and the saturated fill on the dark bands with the
   word in white at 4.9:1. Measured against the ring itself, not against the band behind it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-ring {
  padding: 0.06em 0.34em 0.1em;
  margin: 0 -0.18em;
  color: var(--vc-accent-deep) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(section[data-band="deep"], section.band-photo, section.vc-photo-band, section.sa-strip) .sa-ring {
  background-image: url("/tpl/img/scribble-ellipse-red-dark.svg") !important;
  color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .sa-ring { background-size: 100% var(--sa-ring-h) !important; transition: none !important; }
}

/* the halftone, on the dark bands only */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"],
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-strip,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid footer.footer-deep {
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}
/* and a whisper of it inside the hero's product window, which is the other flat dark surface */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}

/* ---- the hero photo (11 Sep 2026, owner review): replaces the AEO phone mockup.
   Sixth pass, owner: every mask/vignette pass here was still fighting a rectangular photo - the
   actual ask was for just the tiles, not a bordered image of them. images/accessibility_matters.png
   is that photo with the table cut out entirely (a build-time background removal, not CSS), so
   there is no edge left to soften: transparent pixels ARE the hero's own gradient showing
   through. object-fit: contain rather than cover, because there's no background left to crop
   into - the whole "ACCESSIBILITY MATTERS" graphic should stay in frame instead of trading part
   of it for a fuller crop, the trade cover exists to make. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--photo .sa-hero__photo-img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  /* the compiled bundle parks every main img at clip-path: inset(0 100% 0 0) until a scroll-reveal
     it never gets here fires (same trap documented above on .vc-bandphoto img); without this the
     photo sits clipped to zero width and the frame shows only its dot-pattern background. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* =====================================================================================
   18. THE OTHER TWO SKINS. The DOM is shared and the skin is a runtime choice, so the two
   structural changes in Round 14 - the gap cards split into faces, and the gaps photograph moved
   to the front of its section - reach ?skin=product and ?skin=sunnyaid as well, where none of the
   styling above applies. Left alone the faces both rendered statically, so every answer was
   permanently open, and the photograph became a full-width block at the top of the band.
   Neither is broken, but neither is what those skins looked like, so they are put back here.
   ===================================================================================== */
html:not(.sa-skin-vcpility) .sa-gaps-card.vc-flip { perspective: none; }
html:not(.sa-skin-vcpility) .vc-flip__inner { transform: none !important; }
html:not(.sa-skin-vcpility) .vc-flip__face {
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* the panel goes back to collapsing from its own button, which is what it did before */
html:not(.sa-skin-vcpility) .vc-flip__back .rd-gap-panel { grid-template-rows: 0fr; visibility: hidden; }
html:not(.sa-skin-vcpility) .rd-gap-row.is-open .vc-flip__back .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
html:not(.sa-skin-vcpility) .vc-flip__back-btn { display: none !important; }
/* and the photograph goes back to being a panel of a sensible size at the head of the band */
html:not(.sa-skin-vcpility) section [data-section="leaks"] > .vc-bandphoto,
html:not(.sa-skin-vcpility) [data-section="leaks"] > .vc-bandphoto {
  position: relative;
  max-width: 46rem;
  margin: 0 auto 2.5rem;
}
html:not(.sa-skin-vcpility) [data-section="leaks"] > .vc-bandphoto img { clip-path: none; }

/* =====================================================================================
   19. PREMIUM, AND MORE OF IT (10 Sep 2026). Owner: "all in all make it more dynamic and a premium
   rich feel should be there." Three additions, all craft rather than novelty: the light in the hero
   answers the pointer, every section draws its own top rule as it arrives, and the white cards get
   the inner highlight that separates an expensive card from a white rectangle.
   ===================================================================================== */

/* 1. THE HERO LIGHT FOLLOWS THE POINTER. The hero ground is three radial gradients; a fourth,
   brighter one is placed at the cursor and eased toward it. It is the single cheapest thing that
   makes a dark page feel lit rather than printed. Transform-free, paint-only, and it stops entirely
   when the hero leaves the screen. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--vc-spot-o, 0);
  background: radial-gradient(42rem 42rem at var(--vc-spot-x, 50%) var(--vc-spot-y, 40%),
    rgba(255, 255, 255, 0.14) 0%, rgba(255, 154, 147, 0.09) 40%, transparent 72%);
  transition: opacity 0.6s ease;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility main > section.sa-hero::after { display: none !important; }
}

/* 2. EVERY SECTION DRAWS ITS OWN TOP RULE. A hairline that runs out from the centre as the band
   arrives. It is two pixels of movement and it does more for the feeling of craft than anything
   larger would, because it marks the moment a section begins. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-vc-band]::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  /* an explicit width, not a percentage. `width: 100%` on an absolutely positioned pseudo resolves
     against whichever ancestor happens to be the containing block, and on several of these bands
     that came out at 100px: a stub of a line rather than a rule. */
  width: min(76rem, calc(100vw - 4rem));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vc-rule, rgba(10, 10, 11, 0.16)) 18%, var(--vc-rule, rgba(10, 10, 11, 0.16)) 82%, transparent);
  transform-origin: 50% 50%;
  pointer-events: none;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] { --vc-rule: rgba(255, 255, 255, 0.16); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"]) { position: relative; }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"])::before { scale: 0 1; transition: scale 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"]).pm-in::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main section::before { scale: 1 1 !important; transition: none !important; }
}

/* 3. THE CARDS GET AN EDGE. A one-pixel highlight along the top and a hairline all round: the
   difference between a white card and a white rectangle, and it costs nothing at any width. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card.vc-flip::before, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell, .sa-hero__fact, .contact-card) {
  /* the inner highlight only. A companion `0 1px 0` hairline under each card was tried and dropped:
     it is a real drop shadow by any measure, the template's cards are flat on purpose, and the
     harness was right to catch it. The inset alone is what separates an expensive card from a white
     rectangle; the shadow underneath was just weight. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }

/* =====================================================================================
   20. GLASSMORPHISM ON THE PHOTOGRAPH BAND, and justified body copy (10 Sep 2026).
   ===================================================================================== */

/* Owner: "make this like glass the background i mean use glassmorphism". The six cards over the
   photograph stop being solid white and become frosted panels: the image carries on through them,
   which is the point of putting a photograph behind a band at all. Only on this band - a glass card
   on a flat grey band has nothing to frost and just looks washed out.

   The numbers had to be checked rather than assumed. White at 0.72 over this photograph composites
   to a ground of L 0.62 at its darkest, so the ink on it measures 8.9:1 and the muted body copy
   5.4:1. The blur is what keeps that true: without it a bright window behind a card would show
   through as detail and the text would sit on a moving ground. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
  /* 0.78, not 0.72. At 0.72 the darkest part of the photograph brought the worst card ground to
     L 0.486, which left the muted body copy at 5.01:1 against a 4.5 bar. Half a point of margin on
     a value that moves with whatever the photograph happens to be doing is not margin at all. */
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip {
  border: 0.8px solid rgba(255, 255, 255, 0.5) !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
}
/* the answer plates inside the card are already a light grey; on glass they need to be lighter still
   or they read as a hole in the frost */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__back .rd-gap-panel p {
  background: rgba(255, 255, 255, 0.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* Owner: "all the font is left formatted make it justified". Applied to multi-line BODY copy only.
   Headings stay ranged left, because a justified heading stretches three or four words across a
   whole column and reads as broken rather than as tidy.
   `hyphens: auto` comes with it and is not optional: justification without hyphenation opens rivers
   of white space down a narrow column, which is the thing that makes justified text look cheap.
   `text-wrap: pretty` keeps the last line from stranding a single word. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
  .sa-gaps-card__text, .sa-gaps-lede, .sa-whynow-plate p, .sa-stages-aeo-card p,
  .sec-head-split__lead > p, .sa-replaces__card p, .home-pull p, .sa-strip__lede,
  section[data-section] .band-inner > p, section[data-section] p.text-lede
) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
/* under 480 a justified line is too short to justify: three or four words per line and the gaps
   become holes. Ranged left below that width. */
@media (max-width: 479px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
    .sa-gaps-card__text, .sa-gaps-lede, .sa-whynow-plate p, .sa-stages-aeo-card p,
    .sec-head-split__lead > p, .sa-replaces__card p, .home-pull p, .sa-strip__lede,
    section[data-section] .band-inner > p, section[data-section] p.text-lede
  ) { text-align: left; }
}

/* the two question cards in the hero row. They have no figure and no caption, so the question
   itself carries the card: smaller than a numeral, still the loudest thing in its box, and
   balanced against the one card that does hold a figure. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact-q {
  display: block;
  font-family: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif !important;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
  text-align: left;
  text-wrap: balance;
}
/* the caption is back under the action line, so the box no longer centres its single line and
   the three boxes stack identically. The action sets a shade smaller than the numeral it sits
   beside, because a sentence at numeral size would out-shout the figure it is answering. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact--question .sa-hero__fact-body { justify-content: flex-start; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact--question .sa-hero__fact-label { margin-top: 0.4rem; }

/* =====================================================================================
   21. THE SCROLL DECK (10 Sep 2026). VCPility's pinned card deck, on the four stages.
   Owner: "use elements from there especially the video which is a scroll animation."

   The section holds still while you scroll past it, the cards fan in perspective on the right, and
   the text column on the left swaps in step. The pin is not new: premium.css already gives this
   runway 300vh at 1024 and up, which is why this section was a horizontal scroller before. What
   changes is what the pinned time is spent on.

   Below 1024 there is no pin and no deck: the runway collapses to auto height and the whole thing
   renders as a plain stack, which is also exactly what a no-JS or reduced-motion visitor gets.
   ===================================================================================== */
/* The deck sits outside the head's max-width wrapper, because it replaced the track rather than
   the stage's inner container. Without its own axis the copy column ran flush to the viewport edge
   and the fanned cards ran off the right of it. It carries the page's own content axis instead. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
}
/* the copy blocks inherited spacing from a layout that no longer exists: the body sat indented
   under a heading that starts at the column edge. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel > * { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-text { max-width: 34rem; margin-top: 1rem !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-holder { margin: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-name {
  margin-bottom: 0.5rem !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vc-accent-deep) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-title {
  font-size: clamp(1.75rem, 3vw, 2.6rem) !important;
  line-height: 1.06 !important; letter-spacing: -0.035em !important; text-wrap: balance;
  /* Round 7b gave these titles a min-height so four of them would line up across a row. In a deck
     only one is ever on screen, so the reserved space is just a hole between the heading and the
     paragraph under it. */
  min-height: 0 !important;
}

/* THE PIN, declared here rather than inherited. premium.css gives `.hscroll__runway` 300vh at
   1024 and up, and the old horizontal scroller relied on the Astro bundle making `.hscroll__stage`
   sticky. Measured on the built page, neither was in force any more: the runway computed to 698px
   and the stage to `position: static`, so the deck had no travel to read and never left card one.
   Rather than chase why, the deck states its own pin. It clears the fixed header, so the stage
   never sits under it. */
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__runway {
    height: 340vh !important;
    position: relative;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__stage {
    position: sticky !important;
    top: 5.5rem;
    min-height: calc(100vh - 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec { padding-block: 0 !important; }
}

@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    min-height: 30rem;
  }
  /* the copy column: every panel occupies the same cell, one visible at a time */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__copy { display: grid; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  /* the stack: the active card square on, the rest fanned back and to the right */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__stack {
    position: relative;
    perspective: 2200px;
    min-height: 26rem;
    overflow: hidden;                 /* a card fanned past the column edge is clipped, not scrolled */
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(27rem, 72%);
    transform-origin: 50% 50%;
    /* 3.2rem per step, not 5.5: at four cards the old fan reached 16.5rem past the active card and
       out of the column entirely. */
    transform: translate3d(calc(var(--d, 0) * 3.2rem), 0, calc(var(--d, 0) * -7rem)) scale(calc(1 - var(--d, 0) * 0.06));
    opacity: calc(1 - var(--d, 0) * 0.26);
    filter: saturate(calc(1 - var(--d, 0) * 0.45)) brightness(calc(1 - var(--d, 0) * 0.12));
    z-index: calc(20 - var(--d, 0));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease, filter 0.55s ease;
    pointer-events: none;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card[data-behind] { opacity: 0; }
}

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card .sa-stages-aeo-tile,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  clip-path: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card { overflow: hidden; }
/* the caption on the face of the card, over a foot of shade so it reads on any photograph */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__cardcap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: linear-gradient(rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.72) 44%, rgba(5, 7, 10, 0.9) 100%);
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: left;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__cardcap em {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-accent-soft);
}
/* the counter, the reference's own device */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--vc-muted);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count b { color: var(--vc-accent-deep); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-num { color: var(--vc-accent-deep) !important; }

/* Below 1024, and for anyone who has asked for less motion, the deck is a stack. Both columns
   simply flow, every panel is visible, and the pin is off. */
@media (max-width: 1023px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card { position: relative; margin-bottom: 1.5rem; aspect-ratio: 16 / 10; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel { margin-bottom: 2rem; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count { margin-bottom: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .vc-deck__panel { opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; margin-bottom: 2rem; }
  html.sa-skin-vcpility #main .vc-deck__copy { display: block !important; }
  html.sa-skin-vcpility #main .vc-deck__card { position: relative !important; transform: none !important; opacity: 1 !important; filter: none !important; margin-bottom: 1.5rem; aspect-ratio: 16 / 10; }
  html.sa-skin-vcpility #main .vc-deck__stack { perspective: none !important; min-height: 0 !important; }
  /* the pin comes off too, or a reduced-motion visitor scrolls three screens of nothing past a
     stack that is already fully rendered. Same compound as the rule that sets it. */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__runway { height: auto !important; min-height: 0 !important; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__stage { position: static !important; min-height: 0 !important; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec { padding-block: clamp(2.75rem, 5.2vw, 4.5rem) !important; }
}
html:not(.js) .vc-deck__panel { opacity: 1 !important; visibility: visible !important; position: static !important; }
html:not(.js) .vc-deck__card { position: relative !important; transform: none !important; opacity: 1 !important; }

/* =====================================================================================
   21. THE HEADLINE'S TYPED TAIL, and the mock's black strip (10 Sep 2026).
   ===================================================================================== */

/* The rotating word takes a pale red rather than the accent proper. The hero is a blue-to-red
   gradient and the headline crosses all of it, so the word has to clear the DARKEST and the
   LIGHTEST point of that sweep. #D40F17 is invisible against the gradient's own red end; white
   is what the rest of the headline already is, so it would not read as a change at all. #FFC7C2
   sits above both: measured against the veiled red end, which is the worst case, it clears the
   3:1 bar that applies to text this size, and against the blue end it is far clearer still. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__w { color: #FFC7C2; }
/* the caret. `steps(1)` gives the hard on-off of a real text cursor rather than a soft pulse. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__c {
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.05em;
  background: #FFC7C2;
  vertical-align: -0.04em;
  animation: vc-caret 1.05s steps(1) infinite;
}
@keyframes vc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* reduced motion gets the first word, no caret, no loop: the headline still makes sense, it just
   stops moving. The JS sets .is-static and never schedules a frame. */
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__c { display: none; }
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type.is-static .vc-type__c { display: none; }

/* Owner, second pass on this mock: "blend the table with the colour gradient, I do not want to
   see the edges of the table". The first pass made the black strip join the white card. This one
   removes the card: it becomes a dark glass surface the gradient shows through, with a feathered
   edge so there is no rectangle at all.

   That inverts everything inside it. The mock was built as dark ink on white - the title, the
   column heads, the names, the suburbs, the times, the source chip, the avatars, the automation
   list - and every one of those has to be restated light, or the table simply disappears. This
   is the whole of that inversion; there is no half of it that works.

   Measured after, by sampling rendered pixels with the glyphs hidden: the brightest ground under
   the table is the gradient's red end, where white measures 9.0:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame {
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.34) 0%, rgba(6, 8, 12, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  border: 0 !important;
  box-shadow: none !important;
  /* the feather. The radial reaches past the block so the fade happens in the padding and no line
     of text sits on the soft part. */
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(.pipe__chrome, .pipe__title, .pipe__who, .pipe__time, .pipe__frame td, .pipe__frame span:not(.pipe__status):not(.pipe__source):not(.pipe__avatar):not(.pipe__sample)) {
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame :is(th, .pipe__suburb, .pipe__auto-label) {
  color: rgba(255, 255, 255, 0.68) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame .pipe__auto-item { color: rgba(255, 255, 255, 0.86) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame :is(tr, thead, .pipe__row) { border-color: rgba(255, 255, 255, 0.12) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__auto {
  background: rgba(255, 255, 255, 0.07) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* the small solid objects keep a ground of their own, restated for a dark surface */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__avatar,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__source {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__status.is-assigned {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__sample {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome .rd-proof-replay {
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
  background: transparent !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome .rd-proof-replay:hover {
  border-color: #fff !important;
  color: #fff !important;
}
/* The four small objects inside the table needed ID weight. They are dressed by the shared
   layers through the `:not(._a)...:not(._j)` chains and by the generated gold overrides, both of
   which sit above plain class weight; `#main` is the documented way past them on this project.
   Left alone they stayed as pale pills and dark red ticks on a dark surface: legible in two
   cases, invisible in the third, and in every case obviously borrowed from the white card the
   panel used to be. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__avatar {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__status.is-assigned {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
/* Booked keeps a solid fill, because it is the one state in the sequence that means something
   happened. White on this red measures 5.4:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__status.is-booked {
  background: var(--vc-accent-fill) !important;
  color: #fff !important;
}
/* the automation ticks: the deep red is for light grounds and reads as near-black here */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__auto-item svg,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__auto-item svg * {
  color: var(--vc-accent-soft) !important;
  stroke: var(--vc-accent-soft) !important;
}

/* no backdrop-filter means no glass: the panel goes opaque dark instead of leaving white text
   stranded on a gradient */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame {
    background: rgba(6, 8, 12, 0.9) !important;
  }
}

/* =====================================================================================
   22. THE GAPS BAND LOSES ITS PHOTOGRAPH (10 Sep 2026).
   Owner, having seen the glass: "remove the background and make the text black".

   Taken as the whole ground rather than only the panel's fill, because the two cannot be
   separated: black type on that photograph measures about 2:1 and is unreadable, so removing the
   veil without removing the picture would produce a heading nobody can read. The band becomes a
   plain light section like the rest of the page.

   Four things have to move together, and missing any one of them leaves the band half-dressed:
     1. the photograph itself
     2. the glass panel - background, blur, border, shadow and the feather mask, all of which
        exist only to make type legible on a picture that is no longer there
     3. the type, from white to ink and muted
     4. the hand-drawn ring under the emphasis word. There are two of these: a saturated one
        carrying a white word for dark grounds and a pale one carrying a deep-red word for light
        ones. The band is listed in the dark-ground rule, so without this it would keep a white
        word on a pale ring - invisible, and the exact failure this project has hit before.
   ===================================================================================== */

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto { display: none !important; }

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-left: 0;
  padding-right: 0;
}
/* The heading needed one more class to win. The rule keeping it white is the dark-band grammar
   near the top of this sheet, which groups every dark ground - deep bands, the photo bands, the
   strip and the footer - and measures (1,6,3). Naming the head block as well takes this to
   (1,7,2), which beats it on class count. Found by disabling stylesheets one at a time: the
   rule matcher could not see it, and the white was neither inherited nor inline. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head :is(h1, h2, h3, h4, strong, b, .font-display),
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead :is(h1, h2, h3, h4, strong, b, .font-display),
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .pm-w,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .pm-w > * { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head :is(p, li) { color: var(--sa-muted) !important; }
/* the ring keeps its own deep red against that ink */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring .pm-w,
/* `.pm-w > *` as well, not just `.pm-w`. The reveal animation wraps each word twice and the ink
   rule above matches the inner span directly at (1,7,3), which outranks a rule that only names
   its parent. This is the same shape of miss as the heading itself. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring .pm-w > * { color: var(--vc-accent-deep) !important; }

/* The ghost word sat behind a dark panel and read as a watermark. On the light ground it is the
   loudest thing in the block, and it collides with both the chip and the heading. It keeps its
   job - a faint echo of the section's subject - at a weight that suits a pale ground. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-ghost-host::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-ghost {
  color: rgba(10, 10, 11, 0.045) !important;
  opacity: 1 !important;
}

/* the ring goes back to its light-ground pair: pale ellipse, deep-red word */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-ring {
  background-image: url("/tpl/img/scribble-ellipse-red.svg") !important;
  color: var(--vc-accent-deep) !important;
}

/* the six cards were frosted because a picture sat behind them. Over a flat grey, frost reads as
   a washed-out card rather than as glass, so they go solid white with the skin's hairline. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
  background: #FFFFFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip {
  border: 0.8px solid rgba(10, 10, 11, 0.1) !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip:hover {
  border-color: rgba(237, 28, 36, 0.55) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__back .rd-gap-panel p {
  background: rgba(10, 10, 11, 0.04);
}

/* =====================================================================================
   23. THE HERO SCREEN IS THE AI ASSISTANT NOW (10 Sep 2026).
   The float was built to sit on the AEO band's near-black ground with its own dark chrome. On the
   hero gradient it needs the same treatment the Enquiries table got: no hard rectangle, the
   colour showing through, a feathered edge. Its own dark panels stay - a chat window with visible
   message bubbles IS the product being shown - but the shell around them dissolves.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--aeo { padding: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.34) 0%, rgba(6, 8, 12, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}
/* the "Try it yourself" note hung off the float's corner; on the gradient it becomes a line under it */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float + *,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--aeo .rd-aeo-try {
  position: static !important;
  transform: none !important;
  margin-top: 0.9rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float { background: rgba(6, 8, 12, 0.9) !important; }
}
/* the AEO band, now a single column */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-aeo-grid--solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 62rem; }

/* =====================================================================================
   24. THE 9PM SEQUENCE (10 Sep 2026) - replaces the Sharktech company strip.
   Three beats on a clock, then the line that closes them. Built on the site's deep band rather
   than a second gradient: "keep it only for the hero" is a standing instruction from Round 18,
   and the owner's mockup showing a gradient here is flagged rather than acted on unilaterally.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-nine { padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
/* left, not centred. The deep-band grammar centres section heads, which is right for a band
   whose heading is the whole point; this one introduces a three-beat sequence that reads
   left to right, and a centred head over a left-aligned row looks like two decisions. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__head { max-width: 44rem; text-align: left; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__h,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__lede { text-align: left !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__h {
  /* Manrope, not the inherited Plus Jakarta Sans. Round 20 measured the approved homepage and
     found its h1 and all eight h2s in Manrope, with Plus Jakarta Sans starting at h3; a new h2
     that inherits the body face breaks that and the harness catches it. */
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
  margin: 0; color: #fff !important;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__lede {
  margin: 1rem 0 0; color: rgba(255, 255, 255, 0.74) !important;
  font-size: 1.0625rem; line-height: 1.65; max-width: 40rem;
}
/* ---- the timeline (11 Sep 2026, owner review): one connected line through the three beats
   instead of a 3-up grid. A single ::before spans the whole list and stretches to fit however
   tall the copy runs; each dot sits on it via a halo the width of the band's own background,
   the standard trick for a line that visually passes behind a marker rather than through it. ---- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem); max-width: 44rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline::before {
  content: ""; position: absolute; top: 0.55rem; bottom: 0.55rem; left: 0.35rem;
  width: 1px; background: rgba(255, 255, 255, 0.16);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step {
  position: relative; display: flex; gap: 1.1rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step + .sa-nine__step { margin-top: 1.9rem; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__rail {
  flex: 0 0 0.7rem; display: flex; justify-content: center; padding-top: 0.3rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--vc-accent-soft) !important; box-shadow: 0 0 0 4px #0f2e38; position: relative; z-index: 1;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__body { flex: 1 1 auto; min-width: 0; }
/* the same timeline, turned sideways at 900px+: three columns instead of a stack, the line
   rotated from a vertical rule to a horizontal one. The insets are calc(100%/6) rather than a
   fixed value because that's the centre of the outer thirds in a 3-up grid at any width, so the
   line still ends under the first and last dot instead of overshooting past them. */
@media (min-width: 900px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline {
    max-width: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline::before {
    top: 0.75rem; bottom: auto; left: calc(100% / 6); right: calc(100% / 6); width: auto; height: 1px;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step {
    flex-direction: column; align-items: center; text-align: center;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step + .sa-nine__step { margin-top: 0; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__rail { justify-content: center; padding-top: 0; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__body { max-width: 20rem; }
}
/* the clock chip. Pale red on a translucent ground: 9.7:1, and it reads as a timestamp rather
   than as a button, which a solid fill would. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__chip {
  display: inline-block; padding: 0.3rem 0.7rem;
  background: rgba(255, 154, 147, 0.14); color: var(--vc-accent-soft) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__ct {
  margin: 1.1rem 0 0; color: #fff !important;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cb {
  margin: 0.7rem 0 0; color: rgba(255, 255, 255, 0.76) !important; font-size: 0.9375rem; line-height: 1.62;
}
/* the closing line and its CTA */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  margin-top: 1rem; padding: 1.5rem;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.1);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta-t {
  margin: 0; flex: 1 1 22rem; color: #fff !important; font-size: 1.0625rem; line-height: 1.55; font-weight: 600;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta-t em {
  font-style: normal; color: var(--vc-accent-soft) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__btn { flex: 0 0 auto; }

/* =====================================================================================
   25. THE GRADIENT LEAVES THE HERO (10 Sep 2026).
   The owner's artwork for both new bands - the 9pm sequence and the AI-native IT team - shows
   them on the hero gradient, and the owner has separately asked about extending it because the
   inner pages read as dull. So `data-band="grad"` is a real band type now, with the hero's own
   three stops and the same 16% veil, and the two new sections use it.

   This reverses "keep it only for the hero" from Round 18. Reversed deliberately, on the owner's
   own mockups, and easy to undo: change the two data-band values back to "deep".

   At ID weight and after the palette, because a plain `main section[data-band="grad"]` in the
   recipe sheet lands in premium-pages.css, which loads before the colour layers, and lost.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] {
  background-color: var(--vc-grad-a) !important;
  background-image:
    linear-gradient(rgba(5, 7, 10, 0.16), rgba(5, 7, 10, 0.16)),
    linear-gradient(100deg, var(--vc-grad-a) 0%, var(--vc-grad-b) 52%, var(--vc-grad-c) 100%) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(h2, h3, h4, strong, b, .it-chip, .pb__list li) { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(p, li, .it-lede, .it-card__b, .pb__lede) { color: rgba(255, 255, 255, 0.78) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(.it-kicker, .pb__kicker, .sa-nine__chip) { color: var(--vc-accent-soft) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__note { color: rgba(255, 255, 255, 0.62) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__lbl { color: rgba(255, 255, 255, 0.72) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__in { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb-trigger { color: rgba(255, 255, 255, 0.86) !important; }

/* The IT band's heading, and the playbook's, take Manrope like every other h1/h2 on this site.
   Stated here rather than in the recipe sheet for the third time this round: recipe CSS is
   concatenated into premium-pages.css, which loads BEFORE the site-wide Plus Jakarta Sans rule,
   so a font-family set there is overridden and C4 catches it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.it-h, .pb__h, .pb__fh, .audit__h, .trust__h) {
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
}

/* ---- 12 Sep 2026: full-bleed hero video with all hero copy overlaid on top, swapping out the
   tiles/gradient treatment. .sa-hero is already position:relative and overflow-hidden (base
   Tailwind utilities on the section), so the video only needs to fill it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero {
  background-color: #05070a !important;
  background-image: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Lightened (12 Sep 2026, owner): the first pass kept a dark-enough floor under the copy column
   regardless of what's bright or dark in a given frame of real footage, but read as too heavy a
   tint over the video. Eased back across every stop while keeping the same left-to-right shape,
   so the text side still has a legibility floor and the footage still shows through more clearly. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__vid-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(5, 7, 10, 0.58) 0%, rgba(5, 7, 10, 0.38) 42%, rgba(5, 7, 10, 0.14) 68%, rgba(5, 7, 10, 0.22) 100%),
    linear-gradient(rgba(5, 7, 10, 0.1), rgba(5, 7, 10, 0.1));
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media--hidden { display: none !important; }
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid { grid-template-columns: 1fr !important; }
}

/* ===== nav-dropdown.css ===== */
/* ============================================================
   Services dropdown in the main nav.
   Opens on hover and on keyboard focus (:focus-within), so it
   works without JavaScript. The trigger stays a real link to
   /services/ so clicking it still goes somewhere.
   ============================================================ */

.lyd-dd{position:relative}

/* caret: explicit width/height, never size-less (a sizeless inline
   SVG renders at 300x150 and blows the layout apart) */
.lyd-dd__caret{
  width:9px;height:9px;flex:0 0 9px;margin-left:.34em;
  display:inline-block;vertical-align:middle;
  transition:transform .18s cubic-bezier(.16,1,.3,1)
}
.lyd-dd > a{display:inline-flex;align-items:center}
.lyd-dd:hover > a .lyd-dd__caret,
.lyd-dd:focus-within > a .lyd-dd__caret{transform:rotate(180deg)}

.lyd-dd__panel{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:max-content;padding:.4rem;
  background:#fff;border:1px solid #E3E1DC;border-radius:12px;
  box-shadow:0 14px 40px rgba(10,10,11,.13),0 2px 6px rgba(10,10,11,.05);
  opacity:0;visibility:hidden;pointer-events:none;z-index:80;
  transition:opacity .16s ease,transform .18s cubic-bezier(.16,1,.3,1),visibility .16s
}
/* invisible bridge so the pointer can cross the gap without closing */
.lyd-dd__panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}

.lyd-dd:hover .lyd-dd__panel,
.lyd-dd:focus-within .lyd-dd__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}

.lyd-dd__panel a{
  display:block;padding:.58rem .8rem;border-radius:8px;text-decoration:none;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.82rem;font-weight:600;line-height:1.32;letter-spacing:0;
  text-transform:none;color:#0A0A0B;white-space:nowrap;
  transition:background-color .14s,color .14s
}
.lyd-dd__panel a:hover,.lyd-dd__panel a:focus-visible{background:#F4F5F2;color:#BE131A}
.lyd-dd__panel a:focus-visible{outline:2px solid #BE131A;outline-offset:-2px}

.lyd-dd__sep{height:1px;margin:.32rem .45rem;background:#EDEBE6}
.lyd-dd__all{font-size:.74rem!important;color:#5E6068!important}
.lyd-dd__all:hover{color:#BE131A!important}

/* mobile: the menu is a flat list, so the children are indented rows */
.lyd-sub{
  display:block;border-bottom:1px solid rgba(227,225,220,.6);
  padding:.62rem 0 .62rem 1.1rem;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:.78rem;font-weight:600;text-transform:none;letter-spacing:0;
  color:#3A3A40;text-decoration:none;position:relative
}
.lyd-sub::before{
  content:"";position:absolute;left:0;top:50%;width:11px;height:1px;background:#BE131A
}
.lyd-sub:hover{color:#BE131A}

@media (prefers-reduced-motion:reduce){
  .lyd-dd__caret,.lyd-dd__panel{transition:none}
}