/* =====================================================================
   LYD NDIS — 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; }
/* 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;
}