/*!
 * TaxVault — premium pass for the landing hero, the closing CTA band and the
 * footer. Pure overrides on the built site; selectors are compound so they
 * outrank Tailwind's single-class utilities without !important.
 *
 * Colour comes from the site's own --lx-* tokens so both themes stay coherent.
 */

/* ============================================================ HERO ======= */
section.pt-28.pb-24.overflow-hidden {
  --tv-gold: 212, 175, 55;
  --tv-grid: rgba(26, 24, 23, .075);
  --tv-glow-a: rgba(212, 175, 55, .22);
  --tv-glow-b: rgba(124, 140, 220, .16);
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(760px 400px at 50% -60px, var(--tv-glow-a), transparent 70%),
    radial-gradient(900px 540px at 88% 112%, var(--tv-glow-b), transparent 66%),
    var(--lx-bg);
}
.dark section.pt-28.pb-24.overflow-hidden {
  --tv-grid: rgba(255, 255, 255, .048);
  --tv-glow-a: rgba(212, 175, 55, .20);
  --tv-glow-b: rgba(64, 86, 170, .26);
}

/* A fine grid, masked to a soft ellipse, so the field reads as depth rather
   than as wallpaper. */
section.pt-28.pb-24.overflow-hidden::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--tv-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tv-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 28%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 28%, transparent 76%);
}

/* Gold horizon where the hero meets the next section. */
section.pt-28.pb-24.overflow-hidden::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(920px, 82%); height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .6), transparent);
}

section.pt-28.pb-24.overflow-hidden > div.relative { position: relative; z-index: 1; }

/* The existing blur blob was at 5% - barely there. */
section.pt-28.pb-24.overflow-hidden > div.absolute.inset-0 > div {
  width: 860px; height: 440px; top: -140px;
  background: rgba(var(--tv-gold), .15);
}

/* badge */
section.pt-28.pb-24.overflow-hidden .glass-gold.rounded-full {
  background: linear-gradient(180deg, rgba(var(--tv-gold), .17), rgba(var(--tv-gold), .08));
  border: 1px solid rgba(var(--tv-gold), .40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 28px rgba(var(--tv-gold), .14);
  letter-spacing: .01em;
}

/* headline */
section.pt-28.pb-24.overflow-hidden h1 { letter-spacing: -.035em; line-height: 1.03; }
section.pt-28.pb-24.overflow-hidden h1 > span.text-luxury-gold {
  background: linear-gradient(100deg, #f5d77a 0%, #d4af37 46%, #b8932f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dark section.pt-28.pb-24.overflow-hidden h1 > span.text-luxury-gold {
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, .28));
}

/* primary + secondary CTA */
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :first-child {
  background: linear-gradient(180deg, #ecc75a 0%, #d4af37 54%, #c29a28 100%);
  color: #1a1500;
  border: 1px solid rgba(160, 122, 18, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 0 rgba(0, 0, 0, .18),
    0 10px 30px rgba(212, 175, 55, .36);
  transition: transform .2s ease, box-shadow .2s ease;
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :first-child:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 0 rgba(0, 0, 0, .18),
    0 16px 40px rgba(212, 175, 55, .46);
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :nth-child(2) {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .2s ease, border-color .2s ease;
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :nth-child(2):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tv-gold), .5);
}

/* stat cards */
section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl {
  border: 1px solid var(--lx-border);
  border-top-color: rgba(var(--tv-gold), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .09);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dark section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .45);
}
section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tv-gold), .45);
}

/* ======================================================= CTA BAND ======= */
section.py-20.text-center.overflow-hidden {
  --tv-gold: 212, 175, 55;
  isolation: isolate;
  border-top: 0; border-bottom: 0;
  background:
    radial-gradient(680px 360px at 50% 0%, rgba(var(--tv-gold), .16), transparent 70%),
    var(--lx-bg);
}
section.py-20.text-center.overflow-hidden::before,
section.py-20.text-center.overflow-hidden::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(920px, 82%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .5), transparent);
}
section.py-20.text-center.overflow-hidden::before { top: 0; }
section.py-20.text-center.overflow-hidden::after  { bottom: 0; }

section.py-20.text-center.overflow-hidden .glass-gold.rounded-2xl {
  width: 64px; height: 64px;
  background: linear-gradient(160deg, rgba(var(--tv-gold), .28), rgba(var(--tv-gold), .10));
  border: 1px solid rgba(var(--tv-gold), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 32px rgba(var(--tv-gold), .22);
  color: #d4af37;
}
section.py-20.text-center.overflow-hidden h2 { letter-spacing: -.025em; }
section.py-20.text-center.overflow-hidden a[class*="bg-luxury-gold"],
section.py-20.text-center.overflow-hidden button[class*="bg-luxury-gold"] {
  background: linear-gradient(180deg, #ecc75a 0%, #d4af37 54%, #c29a28 100%);
  color: #1a1500;
  border: 1px solid rgba(160, 122, 18, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 34px rgba(212, 175, 55, .36);
  transition: transform .2s ease, box-shadow .2s ease;
}
section.py-20.text-center.overflow-hidden a[class*="bg-luxury-gold"]:hover,
section.py-20.text-center.overflow-hidden button[class*="bg-luxury-gold"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 18px 44px rgba(212, 175, 55, .46);
}

/* ========================================================= FOOTER ======= */
footer.bg-luxury-surface {
  --tv-gold: 212, 175, 55;
  --tv-dot: rgba(26, 24, 23, .11);
  position: relative; isolation: isolate;
  border-top: 0;
  background:
    radial-gradient(640px 320px at 10% 0%, rgba(var(--tv-gold), .11), transparent 66%),
    linear-gradient(180deg, var(--lx-surface) 0%, var(--lx-bg) 100%);
}
.dark footer.bg-luxury-surface { --tv-dot: rgba(255, 255, 255, .055); }

footer.bg-luxury-surface::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--tv-gold), .55) 28%,
                              rgba(var(--tv-gold), .55) 72%, transparent 100%);
}
footer.bg-luxury-surface::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--tv-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 88%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 88%);
}

/* column headings get a short gold rule beneath */
footer.bg-luxury-surface .uppercase.tracking-widest {
  color: var(--lx-text);
  font-size: 11px; letter-spacing: .18em;
  position: relative; padding-bottom: 10px;
}
footer.bg-luxury-surface .uppercase.tracking-widest::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #d4af37, #f5d77a);
}

/* links */
footer.bg-luxury-surface a.text-sm.text-luxury-secondary {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
footer.bg-luxury-surface a.text-sm.text-luxury-secondary:hover {
  color: #d4af37; transform: translateX(3px);
}

/* brand tile */
footer.bg-luxury-surface .w-9.h-9 {
  box-shadow:
    0 0 0 1px rgba(var(--tv-gold), .38),
    0 8px 20px rgba(var(--tv-gold), .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* pills: South Africa / SSL Secured */
footer.bg-luxury-surface .flex.gap-2.flex-wrap > * {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  display: inline-flex; align-items: center; gap: 6px;
}

/* trust list in the Get Started column */
footer.bg-luxury-surface .mt-6.space-y-2 > div { gap: 8px; }

/* bottom bar */
footer.bg-luxury-surface .border-t.mt-12.pt-8 { border-top: 0; position: relative; }
footer.bg-luxury-surface .border-t.mt-12.pt-8::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(var(--tv-gold), .35), var(--lx-border) 38%,
                              var(--lx-border) 62%, rgba(var(--tv-gold), .35));
}
footer.bg-luxury-surface .border-t.mt-12.pt-8 a:hover { color: #d4af37; }

/* ============================================= inline icon slots (JS) == */
.tv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: 0 0 auto;
}
.tv-ico svg { width: 100%; height: 100%; display: block; }
.tv-ico-flag svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.tv-ico-lock svg, .tv-ico-bolt svg { fill: none; stroke: #d4af37; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-ico-shield svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
section.py-20.text-center.overflow-hidden .tv-ico { width: 30px; height: 30px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  section.pt-28.pb-24.overflow-hidden *, footer.bg-luxury-surface * { transition: none !important; }
}


/* ================================================ footer download block == */
footer.bg-luxury-surface .tv-dl {
  --tv-gold: 212, 175, 55;
  /* Top-aligned, not centred: the left column is the card plus its caption,
     so centring put the badges half a caption lower than the QR. With the
     badges sized to the card's height, top-aligning lines up both edges. */
  display: flex; align-items: flex-start; gap: 16px;
  /* breathing room under the South Africa / SSL pills (they carry mb-5 = 20px) */
  margin-top: 24px;
  /* No panel behind the block - the QR card and badges sit straight on the
     footer. Padding is zero so nothing shifts relative to the column edge. */
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  width: fit-content; max-width: 100%;
}
footer.bg-luxury-surface .tv-dl-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; flex: 0 0 auto;
}
footer.bg-luxury-surface .tv-dl-card {
  display: block; padding: 8px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
footer.bg-luxury-surface .tv-dl-card img { display: block; border-radius: 6px; }
footer.bg-luxury-surface .tv-dl-qr:hover .tv-dl-card {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--tv-gold), .55), 0 12px 28px rgba(var(--tv-gold), .25);
}
footer.bg-luxury-surface .tv-dl-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--lx-text);
}
footer.bg-luxury-surface .tv-dl-sub { font-size: 11px; color: var(--lx-muted); margin-top: -4px; }
footer.bg-luxury-surface .tv-dl-badges { display: flex; flex-direction: column; gap: 10px; margin: 0; }
/* The badges are inline SVGs. Give the wrapper the width and let the SVG
   fill it, so it scales in proportion instead of collapsing to its viewBox. */
/* Each badge is <button><img width="160" style="width:160px;height:auto">.
   The inline style outranks any stylesheet rule, so !important is the only
   way to let the wrapper width drive the image. Sized so the two badges
   together stand exactly as tall as the QR card (badge is ~3.55:1):
   phone: content 400px; card = 116 + 16 = 132 -> (132 - 10) / 2 = 61px each -> 216px;
   132 + 16 + 216 + 28 padding = 392. */
footer.bg-luxury-surface .tv-dl-badges > * { display: block; width: 216px; flex: 0 0 auto; }
footer.bg-luxury-surface .tv-dl-badges img,
footer.bg-luxury-surface .tv-dl-badges svg {
  display: block !important; width: 100% !important; height: auto !important;
}
footer.bg-luxury-surface .tv-dl-badges > * {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.28);
}
/* From md up the footer is a 4-column grid and the brand column is ~230px,
   so the block goes compact to keep QR and badges side by side. */
/* Tiers keyed to the brand column's own width via container queries.
   Every tier keeps the two badges exactly as tall as the QR card (badge is
   ~3.55:1) and the whole row inside the column. Base = narrowest column. */
footer.bg-luxury-surface .tv-dl-host { container-type: inline-size; }

/* <262px (iPad portrait 4-col, ~212): card 58+12=70 -> 31px badges -> 110px; total 208 */
footer.bg-luxury-surface .tv-dl { --qr: 58px; --qpad: 6px; gap: 8px; padding: 0; }
footer.bg-luxury-surface .tv-dl-card { padding: var(--qpad); border-radius: 12px; }
footer.bg-luxury-surface .tv-dl-card img { width: var(--qr); height: var(--qr); }
/* The caption was wider than a small QR card, which widened the whole left
   column and pushed the badges out of the panel. Lock the column to the card
   and let the caption wrap beneath it. */
footer.bg-luxury-surface .tv-dl-qr { width: calc(var(--qr) + 2 * var(--qpad)); }
footer.bg-luxury-surface .tv-dl-cap,
footer.bg-luxury-surface .tv-dl-sub { width: 100%; text-align: center; white-space: normal; line-height: 1.15; }
footer.bg-luxury-surface .tv-dl-badges { gap: 8px; }
footer.bg-luxury-surface .tv-dl-badges > * { width: 110px; }
footer.bg-luxury-surface .tv-dl-cap { font-size: 11px; }
footer.bg-luxury-surface .tv-dl-sub { font-size: 10px; }

/* 262-379px (desktop 4-col, ~274): card 78+12=90 -> 41px -> 146px; total 270 */
@container (min-width: 262px) {
  footer.bg-luxury-surface .tv-dl { --qr: 78px; gap: 10px; padding: 0; }
  footer.bg-luxury-surface .tv-dl-badges > * { width: 146px; }
  footer.bg-luxury-surface .tv-dl-cap { font-size: 12px; }
}

/* >=380px (phone single column, ~400): card 116+16=132 -> 61px -> 216px; total 392 */
@container (min-width: 380px) {
  footer.bg-luxury-surface .tv-dl { --qr: 116px; --qpad: 8px; gap: 16px; padding: 0; }
  footer.bg-luxury-surface .tv-dl-card { border-radius: 14px; }
  footer.bg-luxury-surface .tv-dl-badges { gap: 10px; }
  footer.bg-luxury-surface .tv-dl-badges > * { width: 216px; }
  footer.bg-luxury-surface .tv-dl-cap { font-size: 13px; }
  footer.bg-luxury-surface .tv-dl-sub { font-size: 11px; }
}
@media (max-width: 380px) {
  footer.bg-luxury-surface .tv-dl { flex-direction: column; align-items: flex-start; }
}


/* ======================================================= FEATURES ======= */
section.tv-features {
  --tv-gold: 212, 175, 55;
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(820px 420px at 50% 0%, rgba(var(--tv-gold), .10), transparent 70%),
    var(--lx-bg);
}
section.tv-features::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(920px, 82%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .5), transparent);
}
section.tv-features h2 {
  letter-spacing: -.03em; font-size: clamp(2.1rem, 4vw, 2.75rem);
}
section.tv-features .text-center.mb-14 > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--tv-gold), .10);
  border: 1px solid rgba(var(--tv-gold), .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  letter-spacing: .18em;
}

/* cards */
section.tv-features .tv-fcard {
  position: relative; overflow: hidden;
  padding: 28px 26px 26px;
  border-radius: 20px;
  background: linear-gradient(170deg, var(--lx-surface), var(--lx-bg));
  border: 1px solid var(--lx-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.07);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.dark section.tv-features .tv-fcard {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.42);
}
/* gold hairline that draws across the top on hover */
section.tv-features .tv-fcard::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .9), transparent);
  transform: scaleX(.2); opacity: 0; transition: transform .45s ease, opacity .45s ease;
}
/* soft spotlight from the icon corner */
section.tv-features .tv-fcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(260px 200px at 0% 0%, rgba(var(--tv-gold), .10), transparent 70%);
  opacity: .6; transition: opacity .35s ease;
}
section.tv-features .tv-fcard > * { position: relative; z-index: 1; }
section.tv-features .tv-fcard:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--tv-gold), .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 50px rgba(var(--tv-gold), .16);
}
section.tv-features .tv-fcard:hover::before { transform: scaleX(1); opacity: 1; }
section.tv-features .tv-fcard:hover::after  { opacity: 1; }
section.tv-features .tv-fcard h3 { font-size: 1.06rem; letter-spacing: -.01em; margin-bottom: 8px; }

/* 3D icon tile: raised gold block with a lit top face and a cast shadow */
section.tv-features .tv-fi {
  width: 58px; height: 58px; margin-bottom: 22px;
  border-radius: 17px; position: relative;
  background: linear-gradient(180deg, #8a6a14 0%, #5e470b 100%);   /* side wall */
  box-shadow:
    0 14px 24px -8px rgba(var(--tv-gold), .55),
    0 4px 8px rgba(0,0,0,.25);
  transform: perspective(500px) rotateX(10deg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
section.tv-features .tv-fi-face {
  position: absolute; inset: 0 0 4px 0;   /* face sits 4px above the wall */
  border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #fbe7a1 0%, #e9c14e 42%, #c79a22 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(120,86,8,.45),
    inset 0 0 0 1px rgba(255,240,190,.35);
  color: #2b2105;
}
section.tv-features .tv-fi-face::after {   /* glossy sheen */
  content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 45%;
  border-radius: 12px 12px 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none;
}
section.tv-features .tv-fi svg {
  width: 27px; height: 27px; position: relative; z-index: 1;
  filter: drop-shadow(0 1px 0 rgba(255,245,210,.6));
}
section.tv-features .tv-fcard:hover .tv-fi {
  transform: perspective(500px) rotateX(0deg) translateY(-3px);
  box-shadow: 0 20px 30px -8px rgba(var(--tv-gold), .65), 0 6px 12px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
  section.tv-features .tv-fcard, section.tv-features .tv-fi { transition: none; }
}


/* ==========================================================================
   Header — refined glass bar with a gold hairline, pill navigation, a gold
   call-to-action and a scrolled state. The TV logo replaces the padlock in
   every brand lockup (header, footer, login, register).
   ========================================================================== */
.tv-brand-tile {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 11px !important;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 6px 16px -6px rgba(0,0,0,.55),
              0 0 18px -6px rgba(212,175,55,.45);
  transition: transform .3s cubic-bezier(.3,.9,.3,1.2), box-shadow .3s ease;
}
.tv-brand-tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
a:hover > .tv-brand-tile {
  transform: translateY(-1px) rotate(-3deg);
  box-shadow: 0 0 0 1px rgba(212,175,55,.6), 0 8px 20px -6px rgba(0,0,0,.6),
              0 0 24px -4px rgba(212,175,55,.55);
}
:root:not(.dark) .tv-brand-tile {
  box-shadow: 0 0 0 1px rgba(184,148,10,.35), 0 6px 14px -6px rgba(60,45,10,.35);
}

header.tv-hdr {
  --tvh-bg: rgba(10, 12, 18, .58);
  --tvh-bg-s: rgba(10, 12, 18, .86);
  --tvh-line: rgba(255,255,255,.07);
  --tvh-pill: rgba(255,255,255,.035);
  --tvh-pill-b: rgba(255,255,255,.075);
  --tvh-hover: rgba(255,255,255,.06);
  --tvh-on: rgba(212,175,55,.13);
  --tvh-on-t: #e7c55a;
  background: var(--tvh-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--tvh-line) !important;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
:root:not(.dark) header.tv-hdr {
  --tvh-bg: rgba(255, 255, 255, .66);
  --tvh-bg-s: rgba(255, 255, 255, .9);
  --tvh-line: rgba(20, 24, 34, .08);
  --tvh-pill: rgba(20, 24, 34, .035);
  --tvh-pill-b: rgba(20, 24, 34, .08);
  --tvh-hover: rgba(20, 24, 34, .05);
  --tvh-on: rgba(184,148,10,.12);
  --tvh-on-t: #8a6d08;
}
/* gold hairline: brightest in the middle, fading to the edges */
header.tv-hdr::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.0) 8%,
              rgba(212,175,55,.55) 50%, rgba(212,175,55,0) 92%, transparent 100%);
  opacity: .55; pointer-events: none; transition: opacity .35s ease;
}
header.tv-hdr.tv-scrolled {
  background: var(--tvh-bg-s) !important;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.55);
}
:root:not(.dark) header.tv-hdr.tv-scrolled { box-shadow: 0 10px 28px -16px rgba(30,30,50,.28); }
header.tv-hdr.tv-scrolled::after { opacity: 1; }

header.tv-hdr > div:first-child > div { height: 72px !important; transition: height .3s ease; }
header.tv-hdr.tv-scrolled > div:first-child > div { height: 62px !important; }

/* wordmark */
header.tv-hdr .tv-brand-tile { width: 40px !important; height: 40px !important; }
header.tv-hdr .tv-wordmark > span:first-child,
footer .tv-wordmark > span:first-child { font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
header.tv-hdr .tv-wordmark > span:last-child,
footer .tv-wordmark > span:last-child {
  font-size: 9.5px !important; letter-spacing: .32em !important; margin-top: 3px;
  font-weight: 600 !important;
}

/* pill navigation */
header.tv-hdr nav.tv-nav {
  padding: 4px;
  gap: 2px !important;
  border-radius: 999px;
  background: var(--tvh-pill);
  border: 1px solid var(--tvh-pill-b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
header.tv-hdr nav.tv-nav a {
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .005em;
  background: transparent !important;
  transition: color .2s ease, background .2s ease !important;
}
header.tv-hdr nav.tv-nav a:hover { background: var(--tvh-hover) !important; color: var(--lx-text) !important; }
header.tv-hdr nav.tv-nav a.tv-on {
  background: var(--tvh-on) !important;
  color: var(--tvh-on-t) !important;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.28);
}

/* actions */
header.tv-hdr a.tv-login {
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  background: transparent !important;
  border: 1px solid var(--tvh-pill-b) !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
header.tv-hdr a.tv-login:hover {
  border-color: rgba(212,175,55,.55) !important; color: var(--tvh-on-t) !important;
  background: var(--tvh-on) !important;
}
header.tv-hdr a.tv-cta {
  position: relative; overflow: hidden;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px !important;
  padding: 9px 18px 9px 20px !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  color: #1a1405 !important;
  background: linear-gradient(180deg, #f1d77a 0%, #d4af37 48%, #b8940a 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -1px 0 rgba(0,0,0,.18) inset,
              0 8px 20px -8px rgba(212,175,55,.75) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
header.tv-hdr a.tv-cta::before {               /* moving sheen */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
header.tv-hdr a.tv-cta:hover::before { left: 120%; }
header.tv-hdr a.tv-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -1px 0 rgba(0,0,0,.18) inset,
              0 12px 26px -8px rgba(212,175,55,.9) !important;
}
header.tv-hdr .tv-cta-arrow { transition: transform .25s ease; }
header.tv-hdr a.tv-cta:hover .tv-cta-arrow { transform: translateX(3px); }

/* burger */
header.tv-hdr button.tv-burger {
  width: 42px; height: 42px; padding: 0 !important;
  place-items: center;
  border-radius: 12px !important;
  background: var(--tvh-pill) !important;
  border: 1px solid var(--tvh-pill-b) !important;
  color: var(--lx-text) !important;
}
header.tv-hdr button.tv-burger:active { transform: scale(.95); }

/* mobile menu: floating card under the bar */
header.tv-hdr .tv-mmenu {
  margin: 0 12px 12px;
  padding: 10px !important;
  border-radius: 18px;
  border: 1px solid var(--tvh-pill-b) !important;
  background: var(--tvh-bg-s) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
  animation: tvMenuIn .28s cubic-bezier(.2,.9,.3,1) both;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
@keyframes tvMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
header.tv-hdr .tv-mmenu > a {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 13px 16px !important; font-size: 15px !important; border-radius: 12px !important;
}
header.tv-hdr .tv-mmenu > a::after {
  content: ""; width: 7px; height: 7px; opacity: .45;
  border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
}
header.tv-hdr .tv-mmenu > a:hover,
header.tv-hdr .tv-mmenu > a.tv-on { background: var(--tvh-on) !important; color: var(--tvh-on-t) !important; }
header.tv-hdr .tv-mmenu > div { border-top-color: var(--tvh-line) !important; margin-top: 8px !important; padding-top: 12px !important; gap: 10px !important; }
header.tv-hdr .tv-mmenu a.tv-login,
header.tv-hdr .tv-mmenu a.tv-cta { width: 100%; padding: 13px 18px !important; font-size: 15px !important; }

/* --- responsive tiers ---------------------------------------------------- */
/* tablet landscape / small laptop: tighten so the row never wraps */
@media (min-width: 768px) and (max-width: 1199px) {
  header.tv-hdr > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }
  header.tv-hdr nav.tv-nav a { padding: 7px 11px !important; font-size: 13px !important; }
  header.tv-hdr a.tv-login { padding: 8px 14px !important; font-size: 13px !important; }
  header.tv-hdr a.tv-cta { padding: 9px 14px 9px 16px !important; font-size: 13px !important; }
  header.tv-hdr a.tv-cta .tv-free { display: none; }
  header.tv-hdr .tv-wordmark > span:last-child { display: none !important; }
  header.tv-hdr .tv-tt-slot { margin-right: 6px; }
  header.tv-hdr .tv-theme-toggle { --tt-w: 52px; --tt-h: 27px; }
}
@media (min-width: 768px) and (max-width: 860px) {
  header.tv-hdr a.tv-login { display: none !important; }
}
/* phones */
@media (max-width: 767px) {
  header.tv-hdr button.tv-burger { display: inline-grid; }
  header.tv-hdr > div:first-child > div { height: 64px !important; }
  header.tv-hdr.tv-scrolled > div:first-child > div { height: 58px !important; }
  header.tv-hdr .tv-brand-tile { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  header.tv-hdr .tv-wordmark > span:first-child { font-size: 17.5px !important; }
}
@media (max-width: 359px) {
  header.tv-hdr .tv-wordmark > span:last-child { display: none !important; }
  header.tv-hdr .tv-tt-slot { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  header.tv-hdr, header.tv-hdr *, header.tv-hdr *::before { transition: none !important; animation: none !important; }
}

/* Row layout: brand left, nav centred, actions + theme switch grouped right. */
header.tv-hdr { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }
header.tv-hdr > div:first-child > div { justify-content: flex-start !important; gap: 12px; }
header.tv-hdr .tv-tt-slot { order: 5; margin: 0 0 0 4px; }
header.tv-hdr button.tv-burger { order: 6; }
@media (max-width: 767px) {
  header.tv-hdr .tv-tt-slot { margin-left: auto; margin-right: 2px; }
}
/* Desktop/tablet: true centre. Three columns with equal outer tracks, so the
   pill nav sits on the page's centre line whatever the brand and action widths.
   The actions group and the theme switch share the right track: the switch is
   pinned to the far edge and the actions keep clear of it with a margin. */
@media (min-width: 768px) {
  header.tv-hdr { --tvh-tt: 60px; }
  header.tv-hdr > div:first-child > div {
    display: grid !important;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    column-gap: 24px;
  }
  header.tv-hdr > div:first-child > div > a:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
  header.tv-hdr nav.tv-nav { grid-column: 2; grid-row: 1; margin: 0 !important; }
  header.tv-hdr > div:first-child > div > div.hidden {
    grid-column: 3; grid-row: 1; justify-self: end;
    margin-right: calc(var(--tvh-tt) + 14px);
  }
  header.tv-hdr .tv-tt-slot { grid-column: 3; grid-row: 1; justify-self: end; margin: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  header.tv-hdr { --tvh-tt: 52px; }
  header.tv-hdr > div:first-child > div { column-gap: 14px; }
}