/* ===== 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-vcpility-golds.css ===== */
/* =====================================================================================
   premium-vcpility-golds.css - GENERATED. Do not edit by hand.
   Regenerate with:  node tools/gen-vcpility-golds.cjs

   The gold literals hard-coded into the shared premium layers, re-stated in red for every
   page that carries html.vc-site - which is every page except the homepage, whose other two
   skins are deliberately still yellow. See tools/gen-vcpility-golds.cjs for the role mapping
   and for why the literals themselves are left alone.

   Loaded BEFORE premium-vcpility-site.css, so a hand-written rule there always wins a tie.
   ===================================================================================== */

/* ---------------- from premium.css (9 rules) ---------------- */
html.vc-site main .replaces-grid .carousel-card .flex.items-start::after {
  border: 1px solid rgba(212, 15, 23, 0.45) !important;
}
html.vc-site main section[data-band="deep"] .replaces-grid .carousel-card .flex.items-start::after {
  color: #FF9A93 !important;
}
html.vc-site main .cap-link {
  color: #FF9A93 !important;
}
html.vc-site main .contact-card .ci {
  border: 1px solid rgba(255, 154, 147, 0.35) !important;
  color: #FF9A93 !important;
}
html.vc-site main .contact-card .contact-social a {
  border: 1px solid rgba(255, 154, 147, 0.35) !important;
}
html.vc-site main .contact-card .contact-social a:hover {
  border-color: #FF9A93 !important;
  background: rgba(253, 234, 234, 0.1) !important;
}
html.vc-site main .feat-tile {
  border-top: 2px solid #D40F17 !important;
}
html.vc-site main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child {
  background: rgba(253, 234, 234, 0.14) !important;
}
html.vc-site main section[data-band="deep"] .replaces-grid .carousel-card > div:last-child svg {
  color: #FF9A93 !important;
}

/* ---------------- from premium-motion.css (2 rules) ---------------- */
html.vc-site.pm .btn-primary-dark:hover,
html.vc-site.pm header a[class*="bg-lyd-yellow"]:hover {
  box-shadow: 0 12px 28px -12px rgba(248, 207, 207, 0.55) !important;
}
html.vc-site.pm main .card-elevate::before {
  background: conic-gradient(from var(--pm-a), transparent 0 62%, rgba(253, 234, 234, 0.95) 78%, transparent 92%) !important;
}

/* ---------------- from premium-luxe.css (32 rules) ---------------- */
html.vc-site.luxe main .marker {
  background-image: linear-gradient(100deg, transparent 0.4%, rgba(212, 15, 23, 0.45) 2.6%, rgba(253, 234, 234, 0.55) 95.6%, transparent 98.8%) !important;
}
html.vc-site.luxe .btn-primary-dark,
html.vc-site.luxe .btn-primary-light,
html.vc-site.luxe header a[class*="bg-lyd-yellow"],
html.vc-site.luxe main a.bg-lyd-yellow[class*="px-"],
html.vc-site.luxe main a.bg-primary,
html.vc-site.luxe main a.bg-lyd-ink[class*="px-"],
html.vc-site.luxe main .card-elevate .btn-primary-light,
html.vc-site.luxe main section[data-band="deep"] .btn-primary-light,
html.vc-site.luxe footer.footer-deep .btn-primary-light,
html.vc-site.luxe main form button[type="submit"] {
  box-shadow: 0 10px 24px -14px rgba(212, 15, 23, 0.55) !important;
}
html.vc-site.luxe .pm-btn.btn-primary-dark:hover,
html.vc-site.luxe .pm-btn.btn-primary-light:hover {
  box-shadow: 0 16px 32px -14px rgba(212, 15, 23, 0.6) !important;
}
html.vc-site.luxe .btn-ghost-dark {
  border: 1px solid rgba(255, 154, 147, 0.45) !important;
}
html.vc-site.luxe .btn-ghost-dark:hover {
  background: rgba(253, 234, 234, 0.08) !important;
}
html.vc-site.luxe main [data-elevate="hero"] :is(.bg-lyd-yellow,
html.vc-site .bg-lyd-yellow-deep) {
  background: rgba(212, 15, 23, 0.12) !important;
}
html.vc-site.luxe main [data-slot="card"]:hover,
html.vc-site.luxe main .card-lyd:hover,
html.vc-site.luxe main .carousel-card:hover {
  border-color: rgba(212, 15, 23, 0.5) !important;
}
html.vc-site.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"]),
html.vc-site.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: #FDEAEA !important;
  border: 1px solid rgba(212, 15, 23, 0.25) !important;
}
html.vc-site.luxe main section[data-band="deep"]::before {
  background: radial-gradient(45% 40% at 88% 0%, rgba(212, 15, 23, 0.09), transparent 70%) !important;
}
html.vc-site.luxe main section[data-band="deep"] [data-slot="card"]:hover,
html.vc-site.luxe main section.hscroll[data-band="deep"] .hscroll__panel:hover,
html.vc-site.luxe main section[data-band="deep"] .proof-card:hover {
  border-color: rgba(255, 154, 147, 0.4) !important;
}
html.vc-site.luxe main section[data-band="deep"] .proof-card :is(.bg-white,
html.vc-site .bg-lyd-blue,
html.vc-site .bg-lyd-yellow,
html.vc-site .bg-lyd-yellow-deep)[class*="h-1"] {
  background: rgba(253, 234, 234, 0.14) !important;
}
html.vc-site.luxe main .pipe__frame {
  border: 1px solid rgba(255, 154, 147, 0.25) !important;
}
html.vc-site.luxe main .pipe__chrome .pipe__sample {
  border-color: rgba(255, 154, 147, 0.5) !important;
}
html.vc-site.luxe main .card-elevate,
html.vc-site.luxe main .card-elevate[data-slot="card"] {
  background: rgba(212, 15, 23, 0.12) !important;
  border: 1px solid rgba(255, 154, 147, 0.55) !important;
}
html.vc-site.luxe main .card-elevate::before {
  background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(253, 234, 234, 1) 76%, transparent 92%) !important;
}
html.vc-site.luxe main section[data-band="deep"] [data-slot="card"] .btn-ghost-light {
  border-color: rgba(255, 154, 147, 0.4) !important;
}
html.vc-site.luxe main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"],
html.vc-site.luxe main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"],
html.vc-site.luxe main section[data-band="deep"] [class*="bg-lyd-blue/"][class*="p-"] {
  background: rgba(212, 15, 23, 0.12) !important;
  border: 1px solid rgba(255, 154, 147, 0.5) !important;
}
html.vc-site.luxe main section[data-band="deep"] a[class*="border-lyd-ink"],
html.vc-site.luxe main section[data-band="deep"] a[class*="border-lyd-line"],
html.vc-site.luxe main section[data-band="deep"] button[class*="border-lyd-line"],
html.vc-site.luxe main section[data-band="deep"] button[class*="border"] {
  border-color: rgba(255, 154, 147, 0.45) !important;
}
html.vc-site.luxe footer.footer-deep,
html.vc-site.luxe footer.footer-full.footer-deep {
  border-top: 1px solid rgba(255, 154, 147, 0.22) !important;
}
html.vc-site.luxe footer.footer-deep [class*="rounded-full"][class*="border"] {
  border-color: rgba(255, 154, 147, 0.35) !important;
}
html.vc-site.luxe footer.footer-deep [class*="rounded-full"][class*="border"]:hover {
  background: rgba(253, 234, 234, 0.1) !important;
}
html.vc-site.luxe main section.closing-band .contact-card a[href^="mailto:"] {
  text-decoration-color: rgba(255, 154, 147, 0.55) !important;
}
html.vc-site.luxe main .demo-frame::after {
  box-shadow: 0.95rem 0 0 rgba(255, 154, 147, 0.6), 1.9rem 0 0 rgba(255, 154, 147, 0.35) !important;
}
html.vc-site.luxe main a.demo-frame:hover {
  border-color: rgba(212, 15, 23, 0.5) !important;
}
html.vc-site header a:focus-visible,
html.vc-site footer a:focus-visible,
html.vc-site main a:focus-visible:not(.btn),
html.vc-site main button:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site.luxe body.hero-dark header:not(.pm-scrolled) a:focus-visible {
  outline-color: #FF9A93 !important;
}
html.vc-site.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light,
html.vc-site.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-dark {
  border: 1px solid rgba(255, 154, 147, 0.45) !important;
}
html.vc-site.luxe main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) .btn-primary-light:hover,
html.vc-site.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(253, 234, 234, 0.12) !important;
}
html.vc-site main section[data-section="race"] .race-win {
  border: 1px solid rgba(176, 14, 18, 0.35) !important;
  box-shadow: 0 14px 30px -18px rgba(176, 14, 18, 0.5) !important;
}
html.vc-site main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow::before {
  background: linear-gradient(90deg, var(--gold-2, #FDEAEA), #fff3c4) !important;
}
html.vc-site.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,
html.vc-site.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 {
  border: 1px solid rgba(255, 154, 147, 0.45) !important;
}
html.vc-site.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,
html.vc-site .btn-primary-dark):hover {
  background: rgba(253, 234, 234, 0.12) !important;
  border-color: #FF9A93 !important;
}

/* ---------------- from premium-photo.css (9 rules) ---------------- */
html.vc-site main section.ticker {
  border-top: 1px solid rgba(255, 154, 147, 0.22) !important;
}
html.vc-site .ticker__item strong {
  color: #FF9A93 !important;
}
html.vc-site .ticker__item::before {
  background: #D40F17 !important;
}
html.vc-site .editorial-photo::before,
html.vc-site .hero-photo::before {
  box-shadow: inset 0 0 0 1px rgba(255, 154, 147, 0.35) !important;
}
html.vc-site .hero-photo figcaption .kicker-mini {
  color: #FF9A93 !important;
}
html.vc-site .hero-photo figcaption .kicker-mini::before {
  background: #D40F17 !important;
}
html.vc-site main section.band-photo .td-kicker {
  color: #FF9A93 !important;
}
html.vc-site main section.band-photo .td-kicker::before {
  background: linear-gradient(90deg, #FDEAEA, #fff3c4) !important;
}
html.vc-site main > section.hero-interior[data-band="deep"] .hero-photo::before {
  box-shadow: inset 0 0 0 1px rgba(255, 154, 147, 0.45) !important;
}

/* ---------------- from premium-color.css (10 rules) ---------------- */
html.vc-site 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, #FDEAEA) !important;
}
html.vc-site 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),
html.vc-site 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),
html.vc-site 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),
html.vc-site 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: #FF9A93 !important;
}
html.vc-site 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(253, 234, 234, 0.18) !important;
}
html.vc-site main section.hscroll[data-band="deep"] .hscroll__panel:nth-of-type(4) [class*="text-5xl"] {
  color: #FF9A93 !important;
}
html.vc-site 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) {
  color: #B00E12 !important;
}
html.vc-site main .demo-frame:nth-child(4n+4)::before {
  background: #96090D !important;
}
html.vc-site .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: #B00E12 !important;
}
html.vc-site 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),
html.vc-site.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: #FDEBE9 !important;
}
html.vc-site 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(253, 234, 234, 0.14) !important;
}
html.vc-site 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: #FF9A93 !important;
}

/* ---------------- from premium-pages.css (78 rules) ---------------- */
html.vc-site main article .blog-lead-photo::before {
  box-shadow: inset 0 0 0 1px rgba(255, 154, 147, 0.35) !important;
}
html.vc-site main section.blog-related a.blog-rel-card:hover {
  border-color: rgba(212, 15, 23, 0.5) !important;
}
html.vc-site 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, #B00E12) !important;
  border-bottom: 1px solid rgba(176, 14, 18, 0.35) !important;
}
html.vc-site main[data-page="company"] a.co-text-link:hover {
  border-bottom-color: #B00E12 !important;
}
html.vc-site.luxe main[data-page="company"] .co-team__card:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h) {
  border: 1px solid rgba(255, 154, 147, 0.28) !important;
}
html.vc-site.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: #FF9A93 !important;
}
html.vc-site.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: #D40F17 !important;
}
html.vc-site 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: #FDEBE9 !important;
}
html.vc-site main a.text-link {
  border-bottom: 1px solid rgba(176, 14, 18, 0.35) !important;
}
html.vc-site main > section.faq-hero-band a.faq-start .faq-hero__arrow {
  border: 1px solid rgba(176, 14, 18, 0.45) !important;
}
html.vc-site main .faq-list details.faq-row[open] {
  border-bottom-color: rgba(212, 15, 23, 0.7) !important;
}
html.vc-site main .faq-list .faq-item__sign {
  border: 1px solid rgba(212, 15, 23, 0.55) !important;
}
html.vc-site main.conv-page .conv-talk a.conv-mail,
html.vc-site main.conv-page .conv-talk a.conv-talk__mail {
  text-decoration-color: rgba(255, 154, 147, 0.5) !important;
}
html.vc-site main.conv-page .conv-talk a.conv-talk__mail-inline {
  text-decoration-color: rgba(255, 154, 147, 0.5) !important;
}
html.vc-site main.conv-page .conv-form p.conv-form__fallback a {
  text-decoration-color: rgba(176, 14, 18, 0.45) !important;
}
html.vc-site main .home-pull p strong {
  color: #FF9A93 !important;
}
html.vc-site .rd-aeo-toggle:hover {
  border-color: rgba(255, 154, 147, .7) !important;
}
html.vc-site .rd-aeo-li::before {
  background: var(--gold-2, #FDEAEA) !important;
}
html.vc-site .rd-aeo-copy:hover,
html.vc-site .rd-aeo-copy.is-done {
  border-color: var(--gold-2, #FF9A93) !important;
}
html.vc-site .rd-aeo-copy__tick {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site.luxe main section[data-section="aeo"] .rd-aeo-q .rd-aeo-copy .rd-aeo-copy__tick {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site main .cap-link.rd-card-doc:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main .cap-link.rd-card-doc .rd-card-doc__thumb::after {
  border-color: transparent #0f2e38 #FF9A93 transparent !important;
}
html.vc-site main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong,
html.vc-site.luxe main section.closing-band .cap-link.rd-card-doc .rd-card-doc__meta strong {
  color: #FF9A93 !important;
}
html.vc-site.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"],
html.vc-site main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"] {
  color: #FF9A93 !important;
  border-top: 1px solid rgba(255, 154, 147, 0.35) !important;
}
html.vc-site.luxe main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible,
html.vc-site main section.closing-band .contact-card.rd-card-colophon a[href^="tel:"]:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main [data-section="faq"] .faq-acc summary .rd-faq-idx {
  color: var(--gold-3, #B00E12) !important;
}
html.vc-site main [data-section="faq"] .faq-acc[open] > summary::before {
  background: var(--gold, #D40F17) !important;
}
html.vc-site main [data-section="faq"] .rd-faq-k {
  color: var(--gold-3, #B00E12) !important;
}
html.vc-site main [data-section="faq"] a.rd-faq-link {
  color: var(--gold-3, #B00E12) !important;
  text-decoration-color: rgba(176, 14, 18, 0.45) !important;
}
html.vc-site main [data-section="faq"] a.rd-faq-link:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main [data-section="faq"] .rd-faq-aside {
  border-top: 2px solid var(--gold, #D40F17) !important;
}
html.vc-site main .rd-gap-btn__t {
  text-decoration-color: var(--gold, #D40F17) !important;
}
html.vc-site main .rd-gap-btn:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main .rd-gap-panel p {
  border-left: 2px solid var(--gold, #D40F17) !important;
}
html.vc-site main .rd-gap-decade__fill {
  background: var(--gold-2, #FDEAEA) !important;
}
html.vc-site main .rd-gap-decade__tick::before {
  background: var(--gold-2, #FDEAEA) !important;
}
html.vc-site main .rd-gap-decade__tick b {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site main .rd-gap-decade__now i {
  border: 2px solid var(--gold-2, #FF9A93) !important;
}
html.vc-site main .rd-gap-decade__now b {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site main > section:first-of-type .rd-hero-abn {
  text-decoration: underline 1px rgba(255, 154, 147, .45) !important;
}
html.vc-site main > section:first-of-type .rd-hero-abn:hover,
html.vc-site main > section:first-of-type .rd-hero-abn:focus-visible {
  color: #FF9A93 !important;
  text-decoration-color: #FF9A93 !important;
}
html.vc-site main > section:first-of-type .rd-hero-abn:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main .btn.rd-proof-replay:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main section[data-band="deep"] .btn.rd-proof-replay:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site.luxe main :is([data-section="pricing"],
html.vc-site #plans) [data-slot="card"] .rd-tier-num {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site.luxe main :is([data-section="pricing"],
html.vc-site #plans) [data-slot="card"] .rd-tier-unit {
  color: var(--gold-2, #FF9A93) !important;
}
html.vc-site.luxe main :is([data-section="pricing"],
html.vc-site #plans) .rd-tier-ladder__link {
  background: #FDEAEA !important;
}
@media (max-width: 1023px) {
html.vc-site.luxe main :is([data-section="pricing"],
html.vc-site #plans) .rd-tier-inherit::before {
  background: #FDEAEA !important;
}
}
html.vc-site main .rd-tier-row::before {
  background: #D40F17 !important;
}
html.vc-site main .rd-tier-inc__sum:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main .rd-tier-bar__label {
  color: #B00E12 !important;
}
html.vc-site main .rd-tier-cmp__col:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main .rd-tier-cmp__col[aria-pressed="true"]::after {
  background: #D40F17 !important;
}
html.vc-site main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="1"] :is(th,
html.vc-site 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.vc-site main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="2"] :is(th,
html.vc-site 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.vc-site main .rd-tier-cmp.rd-tier-cmp--js[data-rd-focus="3"] :is(th,
html.vc-site 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(212, 15, 23, 0.14) !important;
  box-shadow: inset 1px 0 0 #D40F17, inset -1px 0 0 #D40F17 !important;
}
html.vc-site main .rd-tier-adds::before {
  background: #D40F17 !important;
}
html.vc-site main.svc-page .svc-card .svc-link::after {
  color: #B00E12 !important;
}
html.vc-site main.svc-page .svc-card .svc-link:hover {
  color: #B00E12 !important;
}
html.vc-site main.svc-page section.svc-editorial .svc-photo::before {
  box-shadow: inset 0 0 0 1px rgba(255, 154, 147, 0.35) !important;
}
html.vc-site main.svc-page section.svc-editorial .td-kicker-light::before {
  background: linear-gradient(90deg, #c9b2ff, #FDEAEA) !important;
}
html.vc-site main.svc-page section.svc-editorial .btn-ghost-dark {
  border-color: rgba(255, 154, 147, 0.5) !important;
}
html.vc-site main.svc-page section.svc-editorial .td-kicker-light::before {
  background: linear-gradient(90deg, #D40F17, #FDEAEA) !important;
}
html.vc-site main.svc-page section.svc-editorial .td-kicker-light,
html.vc-site main.svc-page section.svc-editorial .td-kicker {
  color: #FF9A93 !important;
}
html.vc-site main.svc-page section.svc-editorial .td-kicker::before,
html.vc-site main.svc-page section.svc-editorial .td-kicker-light::before {
  background: #D40F17 !important;
}
html.vc-site main.svc-page .svc-include .svc-disc,
html.vc-site main.svc-page .svc-include .disc,
html.vc-site main.svc-page .svc-include [class*="rounded-full"] {
  color: #FF9A93 !important;
}
html.vc-site.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),
html.vc-site 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, #FDEBE9 0%, #f3f1ec 100%) !important;
}
html.vc-site main[data-variant="bold"] section.var-hero .hero-photo {
  box-shadow: 0 0 0 6px rgba(255, 154, 147, 0.18), 0 40px 90px -40px rgba(0, 0, 0, 0.8) !important;
}
html.vc-site main[data-variant] section.var-hero .hero-photo figcaption .kicker-mini {
  color: #FF9A93 !important;
}
html.vc-site 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 #D40F17 !important;
}
html.vc-site main[data-variant] section.var-close .var-other h3.td-kicker {
  color: #FF9A93 !important;
}
html.vc-site main[data-legal] .legal-toc a::before {
  color: #B00E12 !important;
}
html.vc-site main[data-legal] .legal-toc a:hover {
  color: #B00E12 !important;
}
html.vc-site main[data-legal] .legal-h2::before {
  background: #D40F17 !important;
}
html.vc-site a.skip-link {
  color: #FF9A93 !important;
}
html.vc-site a.skip-link:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site main [tabindex="0"]:focus-visible {
  outline: 2px solid #D40F17 !important;
}
html.vc-site .hero-video-toggle:hover,
html.vc-site .ticker__toggle:hover {
  border-color: rgba(255, 154, 147, 0.7) !important;
}
html.vc-site .hero-video-toggle:focus-visible,
html.vc-site .ticker__toggle:focus-visible {
  outline: 2px solid #FF9A93 !important;
}

/* ---------------- from premium-compact.css (3 rules) ---------------- */
html.vc-site main .faq-acc summary::after {
  color: #B00E12 !important;
}
html.vc-site main .faq-acc summary:hover h3 {
  color: #B00E12 !important;
}
html.vc-site main .faq-acc summary:focus-visible {
  outline: 2px solid #D40F17 !important;
}

/* ===== premium-vcpility-site.css ===== */
/* =====================================================================================
   premium-vcpility-site.css — the VCPility palette for the OTHER 36 pages (10 Sep 2026).
   Owner: "also complete the other pages with the same colour palette."

   The homepage's own sheet, premium-vcpility.css, is a homepage-only layer: nearly every selector
   in it is prefixed `html.sa-skin-vcpility.luxe.sunlit.sunnyaid`, and the sunnyaid and sunlit
   classes exist on the homepage alone. Loading it elsewhere would achieve almost nothing. So this
   is a separate, page-agnostic layer, keyed on `html.vc-site`, which transform.cjs adds to every
   page except the homepage.

   It works the same way the earlier re-skins did: the site already declares its palette as custom
   properties and about a thousand rules read them, so re-pointing the tokens re-dresses nearly
   everything before a single component rule is written. What follows the token block is only the
   handful of things a token cannot reach - the type, the corners, the flat cards, the header.

   Contrast, measured, all pairings at or above the 4.5:1 bar:
     ink #0C0F16 on #EDEDEE   16.2:1        muted #3F4540 on #EDEDEE   8.0:1
     white on the fill red    5.4:1         deep red #B00E12 on white  7.2:1
     white on the deep band   18.9:1        pale red #FF9A93 on it     9.7:1
   ===================================================================================== */

html.vc-site {
  /* the accent family, identical to the homepage's so the two never drift */
  --vc-accent: #ED1C24;
  --vc-accent-fill: #D40F17;
  --vc-accent-deep: #B00E12;
  --vc-accent-soft: #FF9A93;
  --vc-accent-tint: #FDEAEA;
  --vc-ink: #0A0A0B;
  --vc-base: #EDEDEE;
  --vc-alt: #F6F6F7;

  /* the site's own tokens, re-pointed. This is the move that does the work. */
  --color-lyd-cream: #EDEDEE;
  --color-lyd-surface: #F6F6F7;
  --color-lyd-ink: #0C0F16;
  --color-lyd-muted: #3F4540;
  --color-lyd-line: #DCDCDE;
  --color-lyd-line-strong: #C3C3C6;
  --color-lyd-secondary: #4A4F52;

  /* the deep petrol family becomes the template's near-blacks */
  --color-lyd-deep: #0A0A0B;
  --color-lyd-deep-800: #05070A;
  --color-lyd-deep-600: #141417;
  --color-lyd-deep-400: #2A2A2E;
  --color-lyd-dark-body: rgba(255, 255, 255, 0.72);

  /* yellow was the act colour. It is red now, everywhere, exactly as on the homepage. The label on
     it has to move to white in the same breath: dark ink on this red is 4.4:1 and fails. */
  --color-lyd-yellow: #D40F17;
  --color-lyd-yellow-deep: #96090D;
  --color-lyd-gold-ink: #B00E12;
  --gold: #ED1C24;
  --gold-2: #FF9A93;
  --gold-3: #B00E12;
  --c-gold: #ED1C24;
  --c-gold-ink: #B00E12;

  /* the pale blues become pale reds */
  --color-lyd-blue: #FDEAEA;
  --color-lyd-blue-deep: #F8CFCF;

  /* Round 19, second pass. The five properties below were missed the first time, and a sweep of
     all 24 pages found 271 elements still rendering gold because of them: every skip link, every
     kicker, the FAQ signs, the numbered discs, the peach tint cards, the comparison table's column
     heads. They are declared as bare literals on `:root` and `.luxe` in the shared sheets, so
     re-pointing them here - at `html.vc-site`, which is one class more specific and exists on no
     other page - reaches every consumer without touching the homepage's other two skins.
     Matched by role, not by hue: a pale gold that sat on a dark band becomes a pale red, a dark
     gold that sat on a light band becomes a deep red, a fill stays a fill. */
  --gold-ink: #B00E12;
  --gold-grad: #D40F17;
  --conv-gold: #D40F17;
  --conv-gold-2: #FF9A93;
  --peach-tint: #FDEBE9;

  /* square, like the template */
  --sa-radius-panel: 0px;
  --sa-radius-card: 0px;
  --sa-radius-pill: 0px;
}

/* ---------------- type ---------------- */
/* h1 and h2 are deliberately NOT in this list. The approved homepage sets its h1 and all eight of
   its h2s in Manrope and only starts Plus Jakarta Sans at h3, so forcing the display face here
   would have made these pages differ from the page they are being matched to - the opposite of the
   ask. Measured, not assumed: the first version of this rule included them and the harness failed
   the homepage against its own siblings. */
html.vc-site body,
html.vc-site :is(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;
}
html.vc-site main :is(h1, h2) { letter-spacing: -0.035em !important; }
html.vc-site main h3 { letter-spacing: -0.02em !important; }

/* ---------------- square ---------------- */
html.vc-site :is(
  .btn, a.btn, button, [data-slot="card"], .card, .card-lyd, .carousel-card, .demo-frame,
  .pipe__frame, input, textarea, select, img, figure, .rd-photo-fig, .rd-photo-frame,
  .cap-link, .rd-card-doc, .contact-card, .chip, .badge
),
html.vc-site :is([class*="rounded"], [class*="radius"]) { border-radius: 0 !important; }
/* a circle is a shape, not a corner */
html.vc-site :is(.disc, [class*="social"] a, .contact-social > a, .rd-hero-abn, .pipe__avatar, .sa-cf-social a) { border-radius: 999px !important; }

/* ---------------- grounds ---------------- */
html.vc-site body { background: var(--vc-base) !important; }
html.vc-site main section[data-band="deep"],
html.vc-site footer.footer-deep {
  background: var(--vc-ink) !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}

/* ---------------- cards: white and flat, as the template has them ---------------- */
/* `:not(section[data-band="deep"] *)` again, and for the same reason as the text rules below: a
   card on a dark band is a translucent glass panel with light type inside it, and forcing it white
   left the type white on white. It was two nodes on /demo, both measuring 1:1. */
html.vc-site #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *) {
  border: 0.8px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
}
/* The white ground is stated separately, and exempts six things, because the first version of this
   rule set it on every card at ID weight and wiped out work that was deliberate: premium-color.css
   gives four cards on /about and /features a sky, lilac, mint or peach tint, .card-anchor is meant
   to be the near-black card in its row, and .bg-lyd-blue is the pale panel the palette re-points
   rather than replaces. Flat and white are two different decisions; a tinted card can be flat.

   `.co-team__card` is on the list for the same reason and was found by measurement rather than by
   reading: a pass that snapshots every card's ground with this sheet on and off, and reports any
   that flipped from dark to light, named it as the only one site-wide. It is the founder's card on
   /team, a deep petrol panel deliberately placed on a light band, and flattening it to white left
   its light type at 1.25:1. It stays dark, in the palette's near-black. */
html.vc-site #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(.card-anchor):not(.card-elevate):not(.co-team__card):not([class~="bg-lyd-blue"]):not([class~="bg-lyd-yellow"]) {
  background: #FFFFFF !important;
}
html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):not(section[data-band="deep"] *):hover {
  transform: translateY(-3px);
  border-color: rgba(237, 28, 36, 0.55) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card) { transition: none !important; }
}

/* ---------------- buttons: one red fill, one hairline ghost ---------------- */
html.vc-site :is(.btn, a.btn) {
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}
/* `[class~=]`, not `[class*=]`. A substring match also matches Tailwind's own `hover:bg-lyd-yellow`,
   which turned every hover-only fill into a permanent one: the service cards on /demo, the language
   buttons and three CTAs on /pricing all came out solid red with their original dark labels still on
   them. `~=` matches the class as a whole word, so only elements that really are filled match. */
html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float) {
  background: var(--vc-accent-fill) !important;
  border: 0.8px solid var(--vc-accent-fill) !important;
  color: #fff !important;                     /* 5.4:1. Dark ink on this red is 4.4:1 and fails */
}
/* and the LABELS inside them. Setting colour on the button is not enough: these components wrap
   their text in spans that carry their own `text-lyd-ink`, which beats an inherited white. Dark ink
   on this red is 3.54:1 and the harness caught it on four pages at once. */
html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float) :is(span, strong, em, small, svg, path) {
  color: #fff !important;
  stroke: currentColor;
}
html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float):hover {
  background: #96090D !important;
  border-color: #96090D !important;
}
html.vc-site main :is(.btn-ghost-light, .btn-ghost-dark) {
  background: transparent !important;
  border: 0.8px solid rgba(10, 10, 11, 0.22) !important;
  color: var(--color-lyd-ink) !important;
}
html.vc-site main :is(section[data-band="deep"], .sa-panel) :is(.btn-ghost-light, .btn-ghost-dark) {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}

/* ---------------- the header, light frosted glass, as on the homepage ---------------- */
html.vc-site 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.vc-site header.pm-scrolled { background: rgba(246, 246, 247, 0.94) !important; }
html.vc-site header :is(a, button, span, .nav-link) { color: var(--color-lyd-ink) !important; }
html.vc-site header .nav-link::after { background: var(--vc-accent) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.vc-site header { background: rgba(246, 246, 247, 0.97) !important; }
}
html.vc-site #v2-mobile-menu { background: var(--vc-alt) !important; }
html.vc-site #v2-mobile-menu :is(a, span, button) { color: var(--color-lyd-ink) !important; }

/* ---------------- focus rings follow the ground, as Round 10 established ---------------- */
html.vc-site main :is(a, button, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--vc-accent-deep) !important; outline-offset: 3px; }
html.vc-site :is(main section[data-band="deep"], main .sa-panel, footer.footer-deep) :is(a, button, summary, [tabindex="0"]):focus-visible {
  outline-color: var(--vc-accent-soft) !important;
}
html.vc-site :is(main, header, footer) :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"]):focus-visible {
  outline-color: #fff !important;             /* white clears both the fill and the ground beside it */
}

/* A broad "anything classed bg-lyd-yellow gets white text" rule was tried here and made things
   worse, so it is recorded rather than left in. The premium layers carry 105 HARD-CODED gold
   literals (#dcb13a, #f1d27c, #f8efd6) across seven shared stylesheets, and a class-based rule
   cannot tell an element the token painted red from one a literal still paints gold. It put white
   on gold at 2.02:1 and white on cream at 1.15:1 - four new failures to fix three old ones.
   Those literals are not re-pointed, because those seven sheets are shared with the two other
   skins on the homepage, which are deliberately still yellow. The three elements that really do
   take the red fill are named below instead. */

/* A white card states its own text colours. The pricing tier cards are forced white by the card
   rule above, but their contents inherited from whatever sits behind them, and the contrast walker
   composited two of their labels against a red ancestor rather than against the card. Saying it
   here removes the ambiguity: the card is white and its type is ink and muted, full stop. */
/* Weight matters here and it is NOT the same for every rule in this block. The SHADOW and
   BACKGROUND rules above sit at `#main` because they have to clear the shared layers'
   `:not(._a)...:not(._j)` chains. These TEXT rules deliberately stay at plain `main` weight: raised
   to ID weight they beat the narrow rules that put a white label on a red fill, and twelve rows
   came back - the estimator's selected plan, the "You, on LYD AssistOS" row, the tick discs on the
   tinted cards. `.card-anchor` is excluded outright: it is the near-black card, and 25 axe
   violations on /features were this block painting ink and muted onto it.

   `:not(section[data-band="deep"] *)` is doing real work here too, and the first version of this
   rule did not have it. It is written as a negation on the card itself rather than as
   `section:not([data-band="deep"]) .card`, because that form silently requires a section ancestor
   and most cards on /about, /contact, /quote and /how-it-works have none - twelve C2 rows.

   `#main` rather than `main`, and `[data-lift]` in the list, are both load-bearing. The shared
   layers dress cards through the `:not(._a)...:not(._j)` chains, which measure (0,11,x) and beat
   any amount of !important at plain class weight; an ID compound is the documented way past them
   on this project. And 23 of the 24 cards the harness counts on /features are matched by
   `[data-lift]` alone, so without it the flat treatment reached one card in twenty-four and every
   other one kept a 28px drop shadow. Not every card in this template sits on a light ground: the pricing tiers and
   several closing bands are translucent glass panels over a near-black section, and their text
   was always light. Stating ink and muted on those turned twenty-one text nodes across four pages
   into dark-on-dark, the worst of them 1.03:1. The dark bands already dress their own contents,
   so the only cards that need telling are the ones on a light ground. */
html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *) { color: var(--color-lyd-ink) !important; }
html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *)
  :is(h1, h2, h3, h4, strong, b, dt, .font-display) { color: var(--color-lyd-ink) !important; }
html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *)
  :is(p, li, dd, small, figcaption, span:not([class~="bg-lyd-ink"]):not([class~="bg-lyd-yellow"])) { color: var(--color-lyd-muted) !important; }
/* except the badges, which paint their own ground and carry their own label */
html.vc-site main :is([data-slot="card"], .card) :is([class~="bg-lyd-ink"], [class~="bg-lyd-yellow"]) { color: #fff !important; }

/* ---------------- anything the act colour fills carries a white label ---------------- */
/* These are the elements a token re-point turned from a light yellow ground into a deep red one
   while leaving the dark label that used to sit on the yellow. Named one by one rather than swept
   by class, for the reason recorded above: a class cannot tell red from the gold a literal still
   paints. Each was measured on the page - 2.89:1 before, 5.4:1 after. */
/* A sweep by CLASS was tried here for the third time and failed for the third time, so the
   reasoning is left in place. `[class~="bg-lyd-yellow"]` matches two different things that look
   identical in the markup: the small solid chips the token now paints deep red, which do want a
   white label, and the large tinted panels a premium literal paints pale, which emphatically do
   not. Whitening both put white on #F8EFD6 at 1.15:1 on six text nodes across /demo and /pricing.
   The panels are handled by re-colouring their GROUND in premium-vcpility-golds.css instead, and
   only the elements that really are a red fill are named here. */
html.vc-site main :is(.pipe__status.is-booked, .pipe__status.is-won) { color: #fff !important; }

/* The discriminator the class-based attempts were missing, found by reading what the generated
   sheet actually does. The pale treatment in premium-luxe.css is `[class*="bg-lyd-yellow"]
   [class*="p-"]:not(.race-win):not(.btn)` - a padded panel is a tint, an unpadded one is a fill.
   So the elements the act colour really does fill solid are the small round tick discs, which
   carry no padding class, and the one row that rule explicitly excludes. Their contents were dark
   ink left over from the yellow, 2.89:1 on the red; white measures 5.4:1. The ticks are covered
   too: an icon that carries meaning answers to the 3:1 non-text bar and was also failing. */
html.vc-site main [class~="bg-lyd-yellow"]:not([class*="p-"]),
html.vc-site main [class~="bg-lyd-yellow"]:not([class*="p-"]) :is(span, strong, small, svg, path),
html.vc-site main [class~="bg-lyd-yellow"].race-win,
html.vc-site main [class~="bg-lyd-yellow"].race-win > :is(span, strong, small, p, h2, h3, h4) {
  color: #fff !important;
}
/* the pale-red sample chip reads as pink-on-white at 2.04:1, so on a light ground it takes the
   deep red instead. Its hairline stays pale: a border answers to 3:1, not 4.5:1. */
html.vc-site main .pipe__sample { color: var(--vc-accent-deep) !important; }

/* ---------------- the pricing estimator's selected state ---------------- */
/* The page's own scoped rule is `.est-plan.is-active { background: var(--color-lyd-yellow) }`,
   written when that token was a light yellow that dark labels sat on happily. The token is a deep
   red now, so the two labels inside the selected button measured 3.54:1 and 1.53:1. The fill is
   right - selection is an act, and red is the act colour on this site - so the labels move to
   white (5.4:1) and the sub-label to a white at 82%, which still measures 4.6:1 and keeps the
   two lines distinguishable from each other. */
html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on),
html.vc-site main :is(.est-addon, .est-platform).is-on {
  border-color: var(--vc-accent-fill) !important;
}
html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on) :is(span, strong, small, em),
html.vc-site main :is(.est-addon, .est-platform).is-on :is(span, strong, small, em) {
  color: #fff !important;
}
html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on) span.text-lyd-muted,
html.vc-site main :is(.est-addon, .est-platform).is-on span.text-lyd-muted {
  color: rgba(255, 255, 255, 0.92) !important;  /* 4.7:1 on the fill; 0.82 measured 3.95:1 */
}

/* ---------------- the /demo pipeline mock ---------------- */
/* Not a Round 19 regression: disabling both vcpility sheets and dropping the vc-site class
   reproduces it exactly, so this has been on /demo since the mock was placed there. The frame is
   a white plate, but it sits inside a navy band, and the chrome inherits that band's white type,
   so the "Enquiries" title and the Replay label were white on white - 1:1, invisible, and the
   Replay control has no other affordance. The homepage's copy of the same mock is unaffected: it
   is placed on the hero gradient, where the chrome is dressed by premium-vcpility.css.
   The ghost button needs its hairline moved too, or it is an invisible border on white. */
html.vc-site main .pipe__frame :is(.pipe__title, .pipe__chrome, .pipe__meta, .rd-proof-replay) {
  color: var(--color-lyd-ink) !important;
}
/* The Replay button needs the extra weight, and the rule it is beating is one of mine: the
   deep-band ghost-button rule further up this sheet measures (0,3,3) and paints every ghost
   button on a dark band white. That is right for a ghost button ON the band and wrong for one
   inside a white plate that happens to sit on it. Naming the chrome and the tag takes this to
   (0,4,3), which is the smallest step that wins. */
html.vc-site main .pipe__frame .pipe__chrome button.btn.rd-proof-replay {
  color: var(--color-lyd-ink) !important;
  border-color: rgba(10, 10, 11, 0.28) !important;
}
html.vc-site main .pipe__frame .pipe__chrome button.btn.rd-proof-replay:hover {
  border-color: var(--vc-accent-fill) !important;
  color: var(--vc-accent-deep) !important;
}

/* ---------------- a light panel inside the dark anchor card ---------------- */
/* premium.css:429 paints every heading inside a .card-anchor white, which is right, because the
   anchor is the near-black card. On /features that anchor also contains a PALE panel, and its
   heading - "It's a second engine, not a new one." - was white on it: 1.15:1, six words axe
   reports as serious, and a heading nobody can read. Not a Round 19 regression; the panel was a
   pale gold before it was a pale red. The word spans have to be named as well as the heading,
   because the reveal animation wraps each one and the white is declared on the span. */
/* The first version of this rule required a `.card-anchor` ancestor, because that is where
   premium.css:429 declares the white. Measuring the actual element showed the panel is not inside
   an anchor at all and the white is INHERITED, which is why no rule matched the span and why the
   first fix did nothing. So the rule keys on the panel instead, and sets the colour on the span
   directly rather than hoping inheritance carries it. `.race-win` is the one bg-lyd-yellow element
   that really is a solid red fill, so it is excluded. */
/* and `:not(section[data-band="deep"] *)` for the third time in this sheet. Without it this rule
   reached the .proof-card on /demo, which also carries bg-lyd-yellow but is a glass panel over a
   navy band: ink on navy, 1.2:1. A pale act-colour panel wants ink; the same class on a dark band
   does not. */
html.vc-site main [class~="bg-lyd-yellow"]:not(.race-win):not(section[data-band="deep"] *) :is(h1, h2, h3, h4, .font-display),
html.vc-site main [class~="bg-lyd-yellow"]:not(.race-win):not(section[data-band="deep"] *) :is(h1, h2, h3, h4, .font-display) :is(span, .word, .pm-w, .pm-w > span) {
  color: var(--color-lyd-ink) !important;
}

/* The numbered discs. The act colour fills them and the numeral inside was inherited dark ink,
   2.89:1 - four serious axe rows on /team and three more pages carrying the same component.
   They are aria-hidden, so this is not a text-contrast obligation, but a numeral you cannot read
   is a numeral there is no point drawing. */
html.vc-site main :is(.disc, .co-disc):is([class~="bg-lyd-yellow"], .co-disc) { color: #fff !important; }

/* ---------------- the pipeline table at phone width ---------------- */
/* At 390 the mock's table lays out 375px wide inside a 358px frame whose overflow is hidden, so
   the Status column is cut off with nothing to scroll. `table-layout: fixed` with a full-width
   table makes the columns share what there is; the cells hold "Amara S.", "7:42pm" and "Assigned",
   so they wrap rather than truncate. Scrolling the frame instead was the other option and was not
   taken: a scrollable region needs to be reachable by keyboard, and this is a decorative mock. */
@media (max-width: 640px) {
  html.vc-site main .pipe__frame table { width: 100% !important; table-layout: fixed !important; }
  html.vc-site main .pipe__frame :is(th, td) { padding-left: 0.5rem !important; padding-right: 0.5rem !important; overflow-wrap: anywhere; }
}

/* the founder's card on /team keeps being a dark card on a light band, in the new near-black */
html.vc-site #main .co-team__card {
  background: var(--vc-ink) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html.vc-site #main .co-team__card .td-kicker { color: var(--vc-accent-soft) !important; }

/* ---------------- one headline size, the homepage's ---------------- */
/* Owner: "the font size in features, about, pricing and all, use the font size of Automate,
   Market and Grow". Measured rather than guessed, and it turned out to be a reduction: the
   homepage H1 renders 56px at 1440 and 36px at 390, while every other page was running 73.6px
   and 38.4px - a third larger on desktop. The clamp below reproduces the homepage's own two
   endpoints exactly. Weight and line height come with it, because a 56px heading at 700 next to
   a 56px heading at 600 still does not look like the same page. */
/* `#main`, because the interior-hero size is set five times over in the shared layers and the
   winner was premium-compact.css at `.luxe main > section:first-of-type h1.font-display`, which
   measures (0,2,3). A plain `html.vc-site main h1` is (0,1,3) and lost silently. */
html.vc-site #main h1 {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}

/* =====================================================================================
   THE INNER-PAGE HERO GRADIENT, and the rhythm band (10 Sep 2026).
   The background itself is set inline by zz-inner-polish.cjs - see that file for why a
   stylesheet cannot win it. Everything below is the inversion the gradient forces: those heroes
   were built dark-on-light, so the kicker, the H1, the lede and the buttons all have to be
   restated. Missing any one of them leaves a line of near-black type on a mid-blue ground.
   ===================================================================================== */
html.vc-site #main > section.inner-grad { color: #fff !important; }
/* The `:not(... *)` chain is load-bearing. Several inner heroes contain a WHITE panel - the
   contact form's fallback line, a card, the pipeline frame - and inverting everything in the
   hero painted that panel's own type white on white. 1:1, on /contact and /quote. The gradient
   is the hero's ground, not the ground of everything sitting on it. */
html.vc-site #main > section.inner-grad :is(h1, h2, h3, h4, strong, b, .font-display):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: #fff !important; }
html.vc-site #main > section.inner-grad :is(p, li, .text-lede, .co-lede):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: rgba(255, 255, 255, 0.82) !important; }
/* the kicker chip: pale red on a translucent ground reads as a label rather than a button */
html.vc-site #main > section.inner-grad .td-kicker,
html.vc-site #main > section.inner-grad [class*="kicker"] { color: #FFC7C2 !important; }
html.vc-site #main > section.inner-grad .td-kicker::before { background: #FFC7C2 !important; }
/* the marker highlight behind an emphasis word was tuned for a light ground */
html.vc-site #main > section.inner-grad .marker {
  background-image: linear-gradient(100deg, transparent 0.4%, rgba(255, 255, 255, 0.22) 2.6%,
    rgba(255, 255, 255, 0.14) 95.6%, transparent 98.8%) !important;
  color: #fff !important;
}
/* buttons: the filled one keeps its red, the ghost goes light */
html.vc-site #main > section.inner-grad :is(.btn-ghost-light, .btn-ghost-dark, a.cro-demoted) {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  background: transparent !important;
}
html.vc-site #main > section.inner-grad :is(a, button, summary, [tabindex="0"]):focus-visible {
  outline-color: #fff !important;
}
/* breadcrumbs and any small print riding in the hero */
html.vc-site #main > section.inner-grad :is(nav a, small, figcaption, time):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: rgba(255, 255, 255, 0.78) !important; }

/* ---------------- the second dark band ---------------- */
/* data-band="deep" already carries the site's dark grammar, so this only adds the ground and the
   dot pattern the homepage's deep bands use. The text is handled by that existing grammar. */
html.vc-site #main > section.inner-rhythm {
  background: var(--vc-ink) !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}

/* ---------------- devices already built, reused ---------------- */
/* card hover, matching the homepage's flat-card lift */
html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):not(section[data-band="deep"] *):hover {
  transform: translateY(-3px);
  border-color: rgba(237, 28, 36, 0.55) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):hover { transform: none; }
}

/* =====================================================================================
   ARTICLE BODY (10 Sep 2026) - shared by generated blog posts and any long-form page.
   The first long-form page shipped its own scoped <style> block, which was fine for one page
   and wrong the moment a second one existed: tools/new-post.cjs produced a post whose body
   headings fell back to the site-wide body face at weight 400, because the styles it was
   written against lived only in the other page's head. These live in the last-loaded sheet
   instead, so any page can opt in with class="lyd-article".
   ===================================================================================== */
html.vc-site #main .lyd-article :is(h2, h3, h4) {
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
html.vc-site #main .lyd-article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) !important; line-height: 1.22; margin: 2.75rem 0 0.75rem; }
html.vc-site #main .lyd-article h3 { font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }
html.vc-site #main .lyd-article p { margin: 0 0 1rem; line-height: 1.7; }
html.vc-site #main .lyd-article :is(ul, ol) { margin: 0 0 1.15rem; padding-left: 1.4rem; }
html.vc-site #main .lyd-article li { margin: 0 0 0.5rem; line-height: 1.6; }
html.vc-site #main .lyd-article .tblwrap { overflow-x: auto; margin: 0 0 1.5rem; }
html.vc-site #main .lyd-article .tblwrap:focus-visible { outline: 2px solid var(--vc-accent-deep); outline-offset: 3px; }
html.vc-site #main .lyd-article table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
html.vc-site #main .lyd-article th { background: #0A0A0B !important; color: #fff !important; text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.6rem 0.65rem; font-weight: 700; }
html.vc-site #main .lyd-article td { padding: 0.6rem 0.65rem; border-bottom: 1px solid rgba(10, 10, 11, 0.12); vertical-align: top; }
html.vc-site #main .lyd-article tbody tr:nth-child(even) { background: rgba(10, 10, 11, 0.03); }

/* =====================================================================================
   HEADINGS AT HOMEPAGE FACE (21 Sep 2026)
   Interior pages leave --font-display as Manrope, while the homepage loads
   premium-vcpility.css and resolves it to Plus Jakarta Sans. At an identical 44px a
   Manrope h2 reads markedly heavier than the homepage's, which is why interior headings
   looked oversized next to it.
   A page opts in with .headings-home-face on <main>. Scoped to headings, so the Manrope
   numerals on the plan cards and the estimate total are left alone.
   The hero keeps the interior size deliberately: the homepage h1 is 76px in an 1183px
   column, but interior heroes are ~605px wide, where 76px wraps to four lines.
   ===================================================================================== */
html.vc-site #main.headings-home-face :is(h1, h2, h3, h4).font-display {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
}
html.vc-site #main.headings-home-face h1.font-display {
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
}

/* =====================================================================================
   BOOKING CALENDAR (23 Sep 2026) - the GHL calendar under the hero copy on /quote.
   form_embed.js measures the cross-origin widget and sets an inline height on the frame
   (725px at every width tested, 706px at 390px), then grows it when a date is picked, so
   the frame tracks its content and the widget never scrolls inside itself. The resizer
   also forces scrolling="yes" and inline overflow:auto on the frame, which is why there
   is no overflow rule here - an inline style would win over it anyway.
   min-height is only the pre-resizer fallback: 700px sits just under the measured content
   height, so it is never the winning value in practice and leaves no dead space, while
   still rendering a usable calendar if form_embed.js is ever blocked.
   Deliberately no data-reveal on the card: the reveal observer starts at opacity 0, and a
   booking widget is not worth the risk of an unobserved section staying invisible.
   ===================================================================================== */
main.conv-page .conv-cal.card-lyd { margin-top: 2rem; }
main.conv-page .conv-cal h2.conv-form__h { padding-bottom: 0.5rem; }
main.conv-page .conv-cal iframe.conv-cal__frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  height: auto;
  min-height: 700px;
  color-scheme: light;
}

/* =====================================================================================
   QUOTE HERO, conv-hero-grid single column (23 Sep 2026)
   The enquiry form that filled the second track is gone, the calendar replaces it, so the
   two-track grid would otherwise leave a 34rem hole beside the copy. One track capped at
   46rem keeps the column close to the width it had beside the form (~40rem), so the h1,
   the calendar card and the three trust cards keep their proportions instead of stretching
   across the full 80rem band. Scoped to data-conv="quote": /contact shares .conv-page and
   still runs its own grid-template-areas layout.
   ===================================================================================== */
main[data-conv="quote"] > section.hero-interior .conv-hero-grid { grid-template-columns: minmax(0, 1fr); }
/* The site-wide hero rule (main > section.hero-interior > div:not(.band-inner) > div)
   caps interior hero columns at 56rem. With the form gone the calendar is the page, and
   at full width the GHL widget switches to its three-column layout - event, calendar and
   bookable times side by side - instead of hiding the times behind a date tap. */
main[data-conv="quote"] > section.hero-interior > .conv-hero-grid > div { max-width: none; }

/* =====================================================================================
   FULL-BLEED INTERIOR HERO, horizontal only (24 Sep 2026)
   The gradient hero sits inside the page grid: max-w-7xl with auto side margins, so it
   reads as a floating panel with grey gutters on three sides rather than the top of the
   page. This spans the gradient to the viewport while the text stays on the same 80rem
   grid as the rest of the page: the side padding is the old gutter plus the section's
   own responsive padding, so the first character does not move (verified: h1 sits at
   112px from the viewport edge at 1440px, both before and after).
   Deliberately does not touch padding-top or margin-top. Those are now tuned per page
   type (data-page="company", svc-page, conv-page, topic-hero, blog-hero-band,
   faq-hero-band) elsewhere in this stylesheet and in premium-pages.css; a blanket pull
   here would fight that tuning rather than complement it.
   Scoped to inner-grad, which every hero needing this already carries for its white-on-
   gradient text colour, so the same 24 pages that get that styling get this.
   ===================================================================================== */
html.vc-site #main > section.inner-grad {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: max(1.5rem, calc((100% - 80rem) / 2 + 2rem)) !important;
}

/* =====================================================================================
   ONBOARDING FORM FRAME (24 Sep 2026)
   The GHL form paints its background on its own html/body with background-size:cover and
   background-attachment:fixed, so the image is sized to the IFRAME viewport, not to the
   form card. form_embed.js grows the frame to the full form height (2495px at desktop),
   and cover on a 1821x864 landscape photo then scales by height - 2.89x - leaving only
   the middle 27% visible: the dark centre of the picture. That is why the embed looked
   like a plain navy wash while the form preview looked right.
   Holding the frame at viewport height restores what the form was designed for: the photo
   covers at 1.04x exactly as in preview, and the form scrolls over a fixed background
   inside the frame. !important is required, it has to beat the inline height that
   form_embed.js writes onto the element.
   form_embed.js wraps the frame in two generated divs at runtime
   (.ep-iFrameContainer > .ep-wrapper), so a child selector never matches - use descendant,
   and pin the wrappers too so they cannot reintroduce the full form height.
   ===================================================================================== */
main.form-solo .ep-iFrameContainer,
main.form-solo .ep-wrapper { height: 100dvh !important; max-height: 100dvh !important; }
main.form-solo iframe { height: 100dvh !important; }

/* =====================================================================================
   ONBOARDING PAGE BACKGROUND (24 Sep 2026)
   The GHL form no longer paints a background of its own, so the frame is transparent and
   the page carries the photo instead. That also frees the frame to grow to the full form
   height again, so the page scrolls normally instead of scrolling inside the iframe -
   which is why .onboarding-solo has come out of the height-pinning rule above.
   A position:fixed layer, not background-attachment:fixed: iOS Safari ignores fixed
   attachment and falls back to scroll, which would size cover against the whole 2495px
   page and blow the photo up exactly the way the old embed did. A fixed layer is the
   viewport on every browser.
   cover rather than a literal auto/100vh: on a 1821x864 photo the two are identical on
   any viewport taller than it is wide, but cover also fills ultrawide screens, where
   auto/100vh would leave bare edges.
   ===================================================================================== */
main.onboarding-solo { background: transparent; }
main.onboarding-solo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/images/onb-form-bg.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* the audit band's heading. Declared here rather than in the recipe sheet because recipe CSS is
   concatenated into premium-pages.css, which loads before the site-wide face rule and loses. */
html.vc-site #main .audit__h {
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* ===== services-page.css ===== */
/* ============================================================
   LYD AssistOS - service page design system
   Scoped to .svc-page so it cannot leak into the site shell.
   Palette, type and accent inherited from the site (vc-site).
   Radius rule: pills 999px, media 14px, no card containers.
   ============================================================ */

.svc-page{
  --sv-ink:#0A0A0B;
  --sv-ink-2:#2B2B30;
  --sv-muted:#5E6068;
  --sv-line:#E3E1DC;
  --sv-line-soft:#EDEBE6;
  --sv-paper:#FFFFFF;
  --sv-warm:#F4F5F2;
  --sv-night:#0A0A0B;
  --sv-on-night:#B9BAC0;
  --sv-accent:#ED1C24;
  --sv-accent-ink:#BE131A;   /* small-text accent, AA on white and cream */
  --sv-accent-fill:#E3181F;  /* button fill, AA with white label at 14px */

  --sv-max:76rem;
  --sv-gut:clamp(1.25rem,4vw,2.5rem);
  --sv-band:clamp(4.5rem,8vw,7.5rem);

  --sv-display:"Manrope",system-ui,sans-serif;           /* matches the site: headings are Manrope */
  --sv-body:"Plus Jakarta Sans",system-ui,sans-serif;    /* matches the site: body is Plus Jakarta Sans */

  --sv-h1:clamp(2.35rem,5.2vw,4.1rem);
  --sv-h2:clamp(1.85rem,3.4vw,2.85rem);
  --sv-h3:clamp(1.05rem,1.35vw,1.2rem);

  --sv-ease:cubic-bezier(.16,1,.3,1);

  font-family:var(--sv-body);
  color:var(--sv-ink);
  background:var(--sv-paper);
}

.svc-page *,.svc-page *::before,.svc-page *::after{box-sizing:border-box}
/* the site shell centre-aligns headings globally; this page is left-aligned editorial */
.svc-page,.svc-page h1,.svc-page h2,.svc-page h3,.svc-page p,.svc-page li,
.svc-page .sv-h1,.svc-page .sv-h2,.svc-page .sv-lead,.svc-page summary{text-align:left}
.svc-page img{max-width:100%;height:auto;display:block}

/* ---------- shared primitives ---------- */
.sv-wrap{max-width:var(--sv-max);margin-inline:auto;padding-inline:var(--sv-gut)}
.sv-band{padding-block:var(--sv-band)}
.sv-band--tight{padding-block:clamp(3rem,5vw,4.5rem)}

.sv-eyebrow{
  font-family:var(--sv-body);font-size:.68rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--sv-accent-ink);
  margin:0 0 1.15rem
}

.svc-page .sv-h1{
  font-family:var(--sv-display);font-weight:800;font-size:var(--sv-h1);
  line-height:1.05;letter-spacing:-.036em;margin:0;text-wrap:balance
}
.svc-page .sv-h2{
  font-family:var(--sv-display);font-weight:800;font-size:var(--sv-h2);
  line-height:1.12;letter-spacing:-.036em;margin:0;text-wrap:balance
}
.sv-h2 em{font-style:normal;color:var(--sv-accent)}
.sv-lead{
  font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;color:var(--sv-muted);
  margin:1.15rem 0 0;max-width:56ch
}
.sv-body{font-size:.95rem;line-height:1.66;color:var(--sv-muted);margin:.5rem 0 0}

/* buttons: pill radius, one accent, AA contrast both variants */
.sv-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.svc-page a.sv-btn,.svc-page .sv-btn{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--sv-body);font-size:.875rem;font-weight:600;letter-spacing:.01em;
  padding:.82rem 1.45rem;border-radius:999px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--sv-ease),background-color .18s,border-color .18s
}
.svc-page a.sv-btn--primary,.svc-page .sv-btn--primary{background:var(--sv-accent-fill);color:#fff}
.svc-page a.sv-btn--primary:hover,.svc-page .sv-btn--primary:hover{background:#C9151C;color:#fff}
.svc-page a.sv-btn--ghost,.svc-page .sv-btn--ghost{background:transparent;color:var(--sv-ink);border-color:var(--sv-line)}
.sv-btn--ghost:hover{border-color:var(--sv-ink);background:var(--sv-warm)}
.svc-page .sv-btn:active{transform:translateY(1px)}
.svc-page .sv-btn:focus-visible{outline:2px solid var(--sv-accent);outline-offset:3px}

/* premium-pages.css ships
   `main a[href^="tel:"]:not(.btn):not([class*="px-"]):not([class*="conv-"])`
   at specificity (0,4,2), which strips display and padding off any phone link
   in main. Rather than chain classes to out-specify it, override just the two
   properties it touches. Nothing else here needs !important. */
.svc-page a.sv-btn{display:inline-flex!important;padding:.82rem 1.45rem!important}
@media (max-width:560px){.svc-page a.sv-btn{width:100%;justify-content:center}}

/* ---------- 1. hero: asymmetric split ---------- */
.sv-hero{background:var(--sv-warm);border-bottom:1px solid var(--sv-line-soft)}
.sv-hero__grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(3.25rem,6vw,6rem)
}
.sv-hero__media{position:relative;border-radius:14px;overflow:hidden;background:var(--sv-line-soft)}
.sv-hero__media img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.sv-crumb{font-size:.78rem;color:var(--sv-muted);margin:0 0 1.5rem}
.sv-crumb a{color:var(--sv-muted);text-decoration:none}
.sv-crumb a:hover{color:var(--sv-ink);text-decoration:underline}

/* sector row sits under the hero, not inside it */
.sv-sectors{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  border-top:1px solid var(--sv-line-soft);padding-block:1.15rem
}
.sv-sectors span{font-size:.8rem;color:var(--sv-muted)}
.sv-sectors span::before{content:"";display:inline-block;width:14px;height:1px;background:var(--sv-accent);vertical-align:middle;margin-right:.6rem}

/* ---------- 2. statement strip ---------- */
.sv-statement{border-bottom:1px solid var(--sv-line-soft)}
.sv-statement p{
  font-family:var(--sv-display);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.45;letter-spacing:-.012em;
  color:var(--sv-ink-2);margin:0;max-width:44ch
}
.sv-statement .sv-body{max-width:52ch;margin-top:1.1rem}

/* ---------- 3. headline + rule list ---------- */
.sv-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,5vw,4.5rem)}
.sv-rules{display:grid;gap:2.1rem}
.sv-rule{padding-top:1.1rem;border-top:1px solid var(--sv-line)}
.svc-page .sv-rule h3{
  font-family:var(--sv-display);font-size:var(--sv-h3);font-weight:700;
  letter-spacing:-.01em;line-height:1.3;margin:0;color:var(--sv-ink)
}
.sv-rule p{font-size:.92rem;line-height:1.62;color:var(--sv-muted);margin:.5rem 0 0}

/* ---------- 4. sticky rail + service register (the centrepiece) ---------- */
.sv-reg{background:var(--sv-paper);border-top:1px solid var(--sv-line-soft)}
.sv-reg__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sv-rail{position:sticky;top:104px}
.sv-rail__note{
  margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--sv-line);
  font-size:.85rem;line-height:1.6;color:var(--sv-muted);max-width:34ch
}
.sv-reg__list{display:grid}
.sv-svc{
  display:grid;grid-template-columns:2.6rem 1fr;gap:1.4rem;
  padding:1.9rem 0;border-top:1px solid var(--sv-line)
}
.sv-svc:last-child{border-bottom:1px solid var(--sv-line)}
.sv-svc__n{
  font-family:var(--sv-body);font-size:.78rem;font-weight:600;
  color:var(--sv-accent-ink);padding-top:.32rem;font-variant-numeric:tabular-nums
}
.svc-page .sv-svc__name{
  font-family:var(--sv-display);font-size:1.15rem;font-weight:700;
  letter-spacing:-.012em;line-height:1.3;margin:0;color:var(--sv-ink)
}
.sv-svc__out{
  font-size:.95rem;line-height:1.5;color:var(--sv-ink-2);
  margin:.4rem 0 0;font-weight:500
}
.sv-svc__body{font-size:.9rem;line-height:1.64;color:var(--sv-muted);margin:.62rem 0 0;max-width:60ch}
.sv-chip{
  display:inline-block;margin-top:.8rem;padding:.3rem .7rem;border-radius:999px;
  background:var(--sv-warm);border:1px solid var(--sv-line);
  font-size:.72rem;font-weight:500;color:var(--sv-muted);white-space:nowrap
}

/* ---------- 5. the one dark band ---------- */
.sv-night{background:var(--sv-night);color:#fff}
.sv-night .sv-h2{color:#fff}
.sv-night .sv-lead{color:var(--sv-on-night)}
.sv-night .sv-eyebrow{color:#FF6B6F}
.sv-domains{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2.5rem,4vw,3.75rem);
  border-top:1px solid rgba(255,255,255,.16)
}
.sv-domain{padding:1.85rem 1.75rem 1.85rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.sv-domain h3{
  font-family:var(--sv-display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.008em;margin:0;color:#fff
}
.sv-domain p{font-size:.88rem;line-height:1.6;color:var(--sv-on-night);margin:.45rem 0 0;max-width:34ch}

/* ---------- 6. numbered process row ---------- */
.sv-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1.75rem;margin-top:clamp(2.25rem,4vw,3.25rem)}
.sv-step{padding-top:1rem;border-top:2px solid var(--sv-ink)}
.sv-step b{
  display:block;font-family:var(--sv-body);font-size:.75rem;font-weight:600;
  color:var(--sv-accent-ink);letter-spacing:.06em;font-variant-numeric:tabular-nums
}
.sv-step h3{font-family:var(--sv-display);font-size:1.02rem;font-weight:700;margin:.55rem 0 0;letter-spacing:-.01em}
.sv-step p{font-size:.88rem;line-height:1.6;color:var(--sv-muted);margin:.4rem 0 0}

/* ---------- 7. asymmetric trio ---------- */
.sv-trio{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.25rem,4vw,3.25rem)}
.sv-trio__side{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-content:start}
.sv-model{padding:1.6rem 1.75rem;border-radius:14px;background:var(--sv-warm);border:1px solid var(--sv-line-soft)}
.sv-model--lead{background:var(--sv-ink);border-color:var(--sv-ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:2.1rem 1.9rem}
.sv-model h3{font-family:var(--sv-display);font-size:1.12rem;font-weight:700;margin:0;letter-spacing:-.012em}
.sv-model--lead h3{color:#fff}
.sv-model p{font-size:.9rem;line-height:1.62;color:var(--sv-muted);margin:.6rem 0 0}
.sv-model--lead p{color:var(--sv-on-night)}

/* ---------- 8. quiet boundaries ---------- */
.sv-quiet{background:var(--sv-warm)}
.sv-bounds{display:grid;grid-template-columns:1fr 1fr;gap:2rem clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,3.5vw,3rem)}
.sv-bound{padding-top:1rem;border-top:1px solid var(--sv-line)}
.sv-bound h3{font-family:var(--sv-display);font-size:1rem;font-weight:700;margin:0;letter-spacing:-.008em}
.sv-bound p{font-size:.89rem;line-height:1.62;color:var(--sv-muted);margin:.45rem 0 0}

/* ---------- 9. faq ---------- */
.sv-faq__list{margin-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--sv-line)}
.sv-q{border-bottom:1px solid var(--sv-line)}
.svc-page .sv-q summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:var(--sv-display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.008em;line-height:1.42;color:var(--sv-ink)
}
.sv-q summary::-webkit-details-marker{display:none}
.sv-q summary::after{
  content:"";flex:0 0 12px;width:12px;height:12px;margin-top:.42rem;
  background:var(--sv-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--sv-ease)
}
.sv-q[open] summary::after{transform:rotate(180deg)}
.sv-q summary:hover{color:var(--sv-accent)}
.sv-q summary:focus-visible{outline:2px solid var(--sv-accent);outline-offset:2px}
.sv-q__a{font-size:.94rem;line-height:1.7;color:var(--sv-muted);margin:0;padding:0 0 1.45rem;max-width:70ch}

/* ---------- 10. closing cta ---------- */
.sv-close{background:var(--sv-ink);color:#fff}
.sv-close__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:end}
.sv-close .sv-h2{color:#fff}
.sv-close .sv-lead{color:var(--sv-on-night)}
.svc-page .sv-close a.sv-btn--ghost,.svc-page .sv-close .sv-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.sv-close .sv-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- related ---------- */
.sv-next{border-top:1px solid var(--sv-line-soft)}
.sv-next a{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  text-decoration:none;color:var(--sv-ink);padding-block:1.9rem
}
.sv-next a:hover .sv-next__t{color:var(--sv-accent)}
.sv-next__k{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sv-muted)}
.sv-next__t{font-family:var(--sv-display);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;letter-spacing:-.02em;margin:.35rem 0 0;transition:color .18s}
.sv-next__arrow{font-size:1.4rem;color:var(--sv-accent)}

/* ---------- motion: MOTION_INTENSITY 4, reveal only ---------- */
@media (prefers-reduced-motion:no-preference){
  .svc-page [data-reveal]{opacity:0;transform:translateY(18px);
    transition:opacity .62s var(--sv-ease),transform .62s var(--sv-ease)}
  .svc-page [data-reveal].is-in{opacity:1;transform:none}
}

/* ---------- responsive: explicit collapse ---------- */
@media (max-width:1024px){
  .sv-domains{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .sv-hero__grid,.sv-split,.sv-reg__grid,.sv-trio,.sv-close__grid{grid-template-columns:1fr}
  .sv-rail{position:static}
  .sv-hero__media{order:-1}
  .sv-hero__media img{aspect-ratio:16/10}
  .sv-bounds{grid-template-columns:1fr}
  .sv-close__grid{align-items:start}
}
@media (max-width:560px){
  .sv-domains,.sv-steps{grid-template-columns:1fr}
  .sv-domain{padding-right:0}
  .sv-svc{grid-template-columns:1fr;gap:.35rem}
  .sv-svc__n{padding-top:0}
  .sv-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- service register: inclusions + deliverable ---------- */
.sv-svc__list{list-style:none;margin:.95rem 0 0;padding:0;display:grid;gap:.42rem}
.sv-svc__list li{
  position:relative;padding-left:1.35rem;font-size:.875rem;line-height:1.55;color:var(--sv-muted)
}
.sv-svc__list li::before{
  content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--sv-accent)
}
.sv-svc__get{
  margin:1rem 0 0;padding-top:.85rem;border-top:1px dashed var(--sv-line);
  font-size:.875rem;line-height:1.55;color:var(--sv-ink-2)
}
.sv-svc__get strong{font-weight:650;color:var(--sv-ink)}
.sv-svc__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem}
@media (min-width:1100px){
  .sv-svc__list{grid-template-columns:1fr 1fr;gap:.42rem 1.5rem}
}

/* ---------- ecosystem: three outbound links ---------- */
.sv-eco{border-top:1px solid var(--sv-line-soft);background:var(--sv-warm)}
.sv-eco__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--sv-line)}
.sv-eco__item{display:flex;flex-direction:column;padding:1.75rem 1.75rem 1.75rem 0;border-bottom:1px solid var(--sv-line)}
.sv-eco__item h3{font-family:var(--sv-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:0}
.sv-eco__item p{font-size:.88rem;line-height:1.6;color:var(--sv-muted);margin:.45rem 0 1.1rem;max-width:32ch}
.sv-eco__link{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--sv-accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.sv-eco__link:hover{text-decoration:underline}
@media (max-width:860px){.sv-eco__grid{grid-template-columns:1fr}.sv-eco__item{padding-right:0}}

/* ---------- operations grid (light, 3 across) ---------- */
.sv-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--sv-line)}
.sv-ops__item{padding:1.7rem 1.75rem 1.7rem 0;border-bottom:1px solid var(--sv-line)}
.sv-ops__item h3{font-family:var(--sv-display);font-size:1rem;font-weight:700;letter-spacing:-.008em;margin:0}
.sv-ops__item p{font-size:.88rem;line-height:1.6;color:var(--sv-muted);margin:.45rem 0 0;max-width:34ch}

/* ---------- kpi row ---------- */
.sv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.75rem;margin-top:clamp(2rem,3.5vw,3rem)}
.sv-kpi{padding-top:1rem;border-top:2px solid var(--sv-accent)}
.sv-kpi h3{font-family:var(--sv-display);font-size:1.02rem;font-weight:700;margin:0;letter-spacing:-.01em}
.sv-kpi p{font-size:.88rem;line-height:1.6;color:var(--sv-muted);margin:.4rem 0 0}

/* ---------- comparison table ---------- */
.sv-cmp-wrap{margin-top:clamp(2rem,3.5vw,3rem);overflow-x:auto}
.sv-cmp{width:100%;border-collapse:collapse;min-width:44rem}
.sv-cmp th,.sv-cmp td{text-align:left;vertical-align:top;padding:1.1rem 1.25rem 1.1rem 0;border-bottom:1px solid var(--sv-line)}
.sv-cmp thead th{
  font-family:var(--sv-display);font-size:.92rem;font-weight:700;letter-spacing:-.008em;
  color:var(--sv-ink);border-bottom:2px solid var(--sv-ink);padding-bottom:.85rem
}
.sv-cmp tbody th{
  font-family:var(--sv-body);font-size:.88rem;font-weight:600;color:var(--sv-ink);width:11rem
}
.sv-cmp td{font-size:.88rem;line-height:1.6;color:var(--sv-muted)}
.sv-cmp tbody tr:last-child th,.sv-cmp tbody tr:last-child td{border-bottom:none}

@media (max-width:1024px){.sv-ops{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sv-ops{grid-template-columns:1fr}.sv-ops__item{padding-right:0}}

/* ---------- stat strip ---------- */
.sv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.sv-stat{padding-top:1.1rem;border-top:1px solid var(--sv-line)}
.sv-stat b{
  display:block;font-family:var(--sv-display);font-weight:800;
  font-size:clamp(2rem,3.4vw,2.85rem);line-height:1;letter-spacing:-.03em;
  color:var(--sv-ink);font-variant-numeric:tabular-nums
}
.sv-stat span{display:block;font-size:.875rem;line-height:1.5;color:var(--sv-muted);margin-top:.6rem;max-width:26ch}
@media (max-width:640px){.sv-stats{grid-template-columns:1fr}}

/* ---------- inline callout ---------- */
.sv-note{background:var(--sv-warm);border-top:1px solid var(--sv-line-soft);border-bottom:1px solid var(--sv-line-soft)}
.sv-note p{
  font-family:var(--sv-display);font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.5;letter-spacing:-.01em;
  color:var(--sv-ink-2);margin:0;max-width:62ch
}
.sv-note p b{font-weight:800;color:var(--sv-ink)}

/* ---------- service index: image tiles ---------- */
.sv-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.75rem);margin-top:clamp(2.25rem,4vw,3.25rem)}
.svc-page a.sv-tile{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--sv-line);border-radius:14px;overflow:hidden;background:var(--sv-paper);
  transition:border-color .2s var(--sv-ease),transform .2s var(--sv-ease)
}
.svc-page a.sv-tile:hover{border-color:var(--sv-ink);transform:translateY(-3px)}
.svc-page a.sv-tile:focus-visible{outline:2px solid var(--sv-accent);outline-offset:3px}
.sv-tile__media{aspect-ratio:16/9;overflow:hidden;background:var(--sv-line-soft)}
.sv-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--sv-ease)}
.svc-page a.sv-tile:hover .sv-tile__media img{transform:scale(1.03)}
.sv-tile__body{padding:1.6rem 1.75rem 1.75rem;display:flex;flex-direction:column;flex:1}
.sv-tile__k{font-size:.68rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--sv-accent-ink);margin:0}
.svc-page .sv-tile__t{font-family:var(--sv-display);font-size:clamp(1.25rem,1.9vw,1.55rem);font-weight:800;letter-spacing:-.028em;line-height:1.16;margin:.7rem 0 0;color:var(--sv-ink)}
.sv-tile__d{font-size:.92rem;line-height:1.62;color:var(--sv-muted);margin:.65rem 0 0}
.sv-tile__go{margin-top:1.4rem;font-size:.85rem;font-weight:600;color:var(--sv-accent-ink);display:inline-flex;align-items:center;gap:.4rem}
.svc-page a.sv-tile:hover .sv-tile__go{text-decoration:underline}
@media (max-width:860px){.sv-tiles{grid-template-columns:1fr}}

/* ===== 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}
}