/* ================= Dark mode (html[data-theme="dark"]) ================= */
:root{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --dk-bg:#091513;--dk-bg2:#0c1b19;--dk-card:#12231f;--dk-card2:#162a26;--dk-card3:#1b322d;--dk-card4:#203a34;
  --dk-text:#e7f0eb;--dk-muted:#a8bab2;--dk-faint:#7e918a;--dk-line:rgba(170,205,190,.14);
  --dk-primary:#72c6e8;--dk-green:#8fd4b1;--dk-gold:#e9bd61;
  --dk-glass:linear-gradient(140deg,rgba(24,46,41,.82),rgba(17,36,33,.78) 58%,rgba(46,40,24,.5));
}
/* smooth switch */
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .5s ease,background .5s ease,color .4s ease,border-color .5s ease,box-shadow .5s ease,fill .4s ease!important}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
html.vt-theme::view-transition-old(root){animation:none;z-index:1}
html.vt-theme::view-transition-new(root){animation:theme-reveal .75s cubic-bezier(.65,0,.35,1) both;z-index:2}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--tx,90%) var(--ty,40px))}to{clip-path:circle(var(--tr,150vmax) at var(--tx,90%) var(--ty,40px))}}

/* ---------- page backgrounds ---------- */
html[data-theme="dark"] body,html[data-theme="dark"] body.bg-surface{background:radial-gradient(ellipse at 15% 0%,rgba(22,128,154,.16),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(189,139,45,.10),transparent 50%),linear-gradient(135deg,#08201f 0%,#091513 50%,#0d1712 100%)!important;background-color:var(--dk-bg)!important;color:var(--dk-text)}
html[data-theme="dark"] main.bg-surface{background:linear-gradient(135deg,#0a1b1c 0%,#091513 45%,#101810 100%)!important;background-color:var(--dk-bg)!important}

/* ---------- header / footer ---------- */
html[data-theme="dark"] header,html[data-theme="dark"] header.is-scrolled{background:rgba(9,24,22,.78)!important;border-bottom:1px solid rgba(170,205,190,.12)!important;box-shadow:0 10px 35px rgba(0,0,0,.35)!important}
html[data-theme="dark"] header nav.xl\:hidden{background:rgba(9,24,22,.92)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] footer{background:linear-gradient(135deg,rgba(10,30,30,.95),rgba(12,28,24,.95) 54%,rgba(30,27,16,.95))!important;border-top:1px solid var(--dk-line)!important}
html[data-theme="dark"] .site-logo{border-color:rgba(255,255,255,.2)}

/* ---------- tailwind token remaps ---------- */
html[data-theme="dark"] .text-on-surface,html[data-theme="dark"] .text-on-background{color:var(--dk-text)!important}
html[data-theme="dark"] .text-on-surface-variant{color:var(--dk-muted)!important}
html[data-theme="dark"] .text-primary,html[data-theme="dark"] .text-primary-container,html[data-theme="dark"] .text-on-primary-fixed-variant,html[data-theme="dark"] .text-on-primary-fixed{color:var(--dk-primary)!important}
html[data-theme="dark"] .text-primary\/20{color:rgba(114,198,232,.28)!important}
html[data-theme="dark"] .text-secondary,html[data-theme="dark"] .text-on-secondary-container{color:var(--dk-green)!important}
html[data-theme="dark"] .text-tertiary,html[data-theme="dark"] .text-tertiary-container,html[data-theme="dark"] .text-tertiary-fixed{color:var(--dk-gold)!important}
html[data-theme="dark"] .text-outline,html[data-theme="dark"] .text-outline-variant{color:var(--dk-faint)!important}
html[data-theme="dark"] .text-surface,html[data-theme="dark"] .text-surface-bright{color:#f3f7f4!important}
html[data-theme="dark"] [class*="border-outline-variant"],html[data-theme="dark"] .border-outline{border-color:var(--dk-line)!important}
html[data-theme="dark"] .bg-surface:not(body):not(main),html[data-theme="dark"] .bg-surface\/90,html[data-theme="dark"] .bg-surface\/95{background:transparent!important}
html[data-theme="dark"] .bg-surface-container-lowest,html[data-theme="dark"] .bg-surface-container-lowest\/80,html[data-theme="dark"] .bg-surface-container-lowest\/90{background:var(--dk-glass)!important;border-color:rgba(170,205,190,.14)!important;box-shadow:0 14px 36px rgba(0,0,0,.28)!important}
html[data-theme="dark"] .bg-surface-container-low{background:linear-gradient(130deg,rgba(12,36,40,.85),rgba(13,32,28,.85) 52%,rgba(34,30,18,.75))!important}
html[data-theme="dark"] .bg-surface-container,html[data-theme="dark"] .bg-surface-container-high,html[data-theme="dark"] .bg-surface-container-highest,html[data-theme="dark"] .bg-surface-container-high\/60,html[data-theme="dark"] .bg-surface-container-highest\/80{background:linear-gradient(135deg,rgba(22,48,46,.9),rgba(20,42,36,.9) 56%,rgba(44,38,22,.7))!important;border-color:rgba(170,205,190,.12)!important}
html[data-theme="dark"] .bg-secondary-container,html[data-theme="dark"] .bg-primary-fixed,html[data-theme="dark"] .bg-tertiary-fixed\/20{background:rgba(114,198,232,.12)!important}
html[data-theme="dark"] .bg-primary-fixed{color:var(--dk-primary)!important}
html[data-theme="dark"] .policy-card,html[data-theme="dark"] .faq-item{background:var(--dk-glass)!important;border-color:rgba(170,205,190,.14)!important;box-shadow:0 14px 36px rgba(0,0,0,.3)!important}
html[data-theme="dark"] .tilt-card::before{background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(114,198,232,.14),rgba(189,139,45,.06) 40%,transparent 65%)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:rgba(8,22,20,.75)!important;color:var(--dk-text)!important;border-color:rgba(170,205,190,.2)!important;box-shadow:none!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--dk-faint)}
html[data-theme="dark"] select option{background:#12231f;color:var(--dk-text)}
html[data-theme="dark"] .bg-surface-container-lowest.text-primary,html[data-theme="dark"] a.bg-surface-container-lowest{color:var(--dk-primary)!important}
html[data-theme="dark"] .bg-white{background:#e7f0eb!important}

/* ---------- custom components ---------- */
html[data-theme="dark"] .pg-chip,html[data-theme="dark"] .life-pillars span,html[data-theme="dark"] .prod-jump a{background:rgba(22,48,44,.8);border-color:rgba(170,205,190,.18);color:var(--dk-primary)}
html[data-theme="dark"] .life-pillars span:nth-child(2){color:var(--dk-green)}html[data-theme="dark"] .life-pillars span:nth-child(3){color:var(--dk-gold)}
html[data-theme="dark"] .prod-jump a:hover{background:var(--dk-primary);color:#06201f}
html[data-theme="dark"] .pg-pullquote,html[data-theme="dark"] .pg-commitment{color:var(--dk-text)}
html[data-theme="dark"] .pg-pullquote strong,html[data-theme="dark"] .pg-commitment strong{color:var(--dk-primary)}
html[data-theme="dark"] .pg-journey-card{background:rgba(20,42,38,.8);border-color:rgba(170,205,190,.16)}
html[data-theme="dark"] .pg-journey-card figcaption{color:var(--dk-text)}
html[data-theme="dark"] .prod-box,html[data-theme="dark"] .prod-row,html[data-theme="dark"] .tos-card{background:var(--dk-glass);border-color:rgba(170,205,190,.14);box-shadow:0 14px 36px rgba(0,0,0,.3)}
html[data-theme="dark"] .prod-box h3,html[data-theme="dark"] .prod-row h3,html[data-theme="dark"] .prod-row p strong,html[data-theme="dark"] .tos-sec h2{color:var(--dk-text)}
html[data-theme="dark"] .prod-box p,html[data-theme="dark"] .prod-row p,html[data-theme="dark"] .tos-sec p,html[data-theme="dark"] .tos-lead{color:var(--dk-muted)}
html[data-theme="dark"] .prod-box-link,html[data-theme="dark"] .prod-row-link,html[data-theme="dark"] .tos-sec a{color:var(--dk-primary)}
html[data-theme="dark"] .tos-meta{color:var(--dk-gold)}
html[data-theme="dark"] .tos-sec+.tos-sec{border-color:var(--dk-line)}
html[data-theme="dark"] .tos-callout{background:rgba(233,189,97,.1)}html[data-theme="dark"] .tos-callout strong{color:var(--dk-gold)}html[data-theme="dark"] .tos-callout p{color:#efe3c6}
html[data-theme="dark"] .tos-contact a{background:rgba(143,212,177,.12);color:var(--dk-green)!important}
html[data-theme="dark"] .coverage-compare-section,html[data-theme="dark"] .coverage-ladder-section{background:linear-gradient(135deg,#0b2224 0%,#0d1f1b 52%,#1d1a10 100%)}
html[data-theme="dark"] .coverage-compare-glass,html[data-theme="dark"] .coverage-ladder-glass{background:var(--dk-glass);border-color:rgba(170,205,190,.14);box-shadow:0 22px 58px rgba(0,0,0,.35)}
html[data-theme="dark"] .coverage-compare-intro h2,html[data-theme="dark"] .coverage-ladder-intro h2,html[data-theme="dark"] .coverage-compare-table,html[data-theme="dark"] .coverage-ladder-total,html[data-theme="dark"] .ladder-stage strong{color:var(--dk-text)}
html[data-theme="dark"] .coverage-compare-intro p,html[data-theme="dark"] .coverage-ladder-intro p,html[data-theme="dark"] .compare-legacy-title,html[data-theme="dark"] .coverage-compare-table thead th:first-child,html[data-theme="dark"] .ladder-stage p{color:var(--dk-muted)}
html[data-theme="dark"] .coverage-compare-table thead th{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .coverage-compare-table th,html[data-theme="dark"] .coverage-compare-table td,html[data-theme="dark"] .coverage-compare-disclaimer,html[data-theme="dark"] .coverage-ladder-top{border-color:var(--dk-line)}
html[data-theme="dark"] .coverage-compare-eyebrow,html[data-theme="dark"] .coverage-ladder-tag{color:var(--dk-green)}
html[data-theme="dark"] .ladder-stage{background:rgba(255,255,255,.04);border-color:rgba(170,205,190,.14);box-shadow:none}
html[data-theme="dark"] .page-curtain-panel:nth-child(2){background:#0b1a18}
html[data-theme="dark"] .site-scroll-progress{background:rgba(114,198,232,.1)}
html[data-theme="dark"] ::selection{background:#1f4a3f;color:#fff}

/* ---------- theme toggle button ---------- */
.theme-toggle{position:relative;width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#075985;background:rgba(255,255,255,.75);border:1px solid rgba(7,89,133,.18);box-shadow:0 6px 16px rgba(21,58,51,.1);transition:transform .3s cubic-bezier(.22,.68,0,1.2),background .3s ease,color .3s ease,border-color .3s ease;overflow:hidden}
.theme-toggle:hover{transform:translateY(-2px) rotate(-8deg)}
.theme-toggle:focus-visible{outline:2px solid #16809a;outline-offset:3px}
.theme-toggle .material-symbols-outlined{position:absolute;font-size:22px;transition:transform .55s cubic-bezier(.22,.68,0,1.2),opacity .35s ease}
.theme-toggle .ic-sun{transform:translateY(130%) rotate(-90deg);opacity:0}
.theme-toggle .ic-moon{transform:none;opacity:1}
html[data-theme="dark"] .theme-toggle{color:#f3cf7a;background:rgba(22,48,44,.85);border-color:rgba(233,189,97,.35);box-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-theme="dark"] .theme-toggle .ic-sun{transform:none;opacity:1}
html[data-theme="dark"] .theme-toggle .ic-moon{transform:translateY(-130%) rotate(90deg);opacity:0}
@media(max-width:479px){.theme-toggle{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){html.theme-anim *{transition:none!important}.theme-toggle .material-symbols-outlined{transition:none}}
html[data-theme="dark"] .bg-white.text-primary{color:#075985!important}
html[data-theme="dark"] .policy-card::after{background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.07) 48%,transparent 72%)!important}
html[data-theme="dark"] [class*="bg-gradient-to"][class*="from-surface"]{background:transparent!important}
html[data-theme="dark"] [class*="via-surface-container"],html[data-theme="dark"] [class*="from-surface-container-highest"]{opacity:.22}

/* ================= Dark mode: brand gradients (blue → green → gold) ================= */
html[data-theme="dark"]{
  --dk-glass:linear-gradient(140deg,rgba(12,74,102,.55) 0%,rgba(18,84,64,.45) 55%,rgba(120,86,24,.38) 100%);
  --dk-sec:linear-gradient(125deg,rgba(7,67,96,.55) 0%,rgba(16,78,60,.45) 50%,rgba(112,80,22,.38) 100%);
}
html[data-theme="dark"] body,html[data-theme="dark"] body.bg-surface{
  background:
    radial-gradient(ellipse 60% 45% at 0% 0%,rgba(22,128,170,.38),transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 45%,rgba(39,140,100,.28),transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 100%,rgba(189,139,45,.30),transparent 70%),
    linear-gradient(135deg,#062536 0%,#073330 38%,#0b2a22 62%,#2a210d 100%)!important;
  background-attachment:fixed!important;background-color:#062536!important}
html[data-theme="dark"] main.bg-surface{background:transparent!important}
html[data-theme="dark"] header,html[data-theme="dark"] header.is-scrolled{background:linear-gradient(100deg,rgba(6,52,74,.82),rgba(8,60,48,.8) 55%,rgba(70,52,16,.78))!important}
html[data-theme="dark"] header nav.xl\:hidden{background:linear-gradient(100deg,rgba(6,52,74,.9),rgba(8,60,48,.9) 55%,rgba(70,52,16,.88))!important}
html[data-theme="dark"] footer{background:linear-gradient(120deg,rgba(5,45,66,.92) 0%,rgba(8,56,44,.92) 50%,rgba(78,58,18,.9) 100%)!important}
html[data-theme="dark"] .bg-surface-container-low,html[data-theme="dark"] .coverage-compare-section,html[data-theme="dark"] .coverage-ladder-section{background:var(--dk-sec)!important}
html[data-theme="dark"] .bg-surface-container,html[data-theme="dark"] .bg-surface-container-high,html[data-theme="dark"] .bg-surface-container-highest,html[data-theme="dark"] .bg-surface-container-high\/60,html[data-theme="dark"] .bg-surface-container-highest\/80{background:linear-gradient(135deg,rgba(14,86,116,.5),rgba(22,96,72,.42) 55%,rgba(130,94,28,.36))!important}
html[data-theme="dark"] .bg-surface-container-lowest,html[data-theme="dark"] .bg-surface-container-lowest\/80,html[data-theme="dark"] .bg-surface-container-lowest\/90,
html[data-theme="dark"] .policy-card,html[data-theme="dark"] .faq-item,html[data-theme="dark"] .prod-box,html[data-theme="dark"] .prod-row,html[data-theme="dark"] .tos-card,
html[data-theme="dark"] .coverage-compare-glass,html[data-theme="dark"] .coverage-ladder-glass,html[data-theme="dark"] .pg-journey-card{background:var(--dk-glass)!important;border-color:rgba(160,215,230,.18)!important}
html[data-theme="dark"] .pg-dark{background:radial-gradient(ellipse at 85% 0%,rgba(233,189,97,.22),transparent 55%),linear-gradient(120deg,#05304a 0%,#0a3f33 55%,#3a2c0e 100%)!important}
/* gradient headlines */
html[data-theme="dark"] main h2.text-on-surface,html[data-theme="dark"] main h1.text-on-surface,html[data-theme="dark"] .coverage-compare-intro h2,html[data-theme="dark"] .coverage-ladder-intro h2{background:linear-gradient(100deg,#ffffff 0%,#bfe6f2 40%,#bfe3d0 65%,#f3cf7a 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* gradient accent line under header */
html[data-theme="dark"] header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#16809a,#2fa37a 50%,#e9bd61);opacity:.8;pointer-events:none}
