/*
 * Premium layer (docs/WEBSITE_PREMIUM_PROMPT.md). Loaded after site.css and
 * landing.css on every page; only restyles, never changes what the JS uses.
 * Tokens match the app (mobile/lib/core/theme/app_colors.dart): brand from
 * the backend (--brand), ink navy #0B1A33, accent teal #00B8A9.
 */
:root {
  --ink: #0B1A33;
  --heading: var(--ink);
  --accent: #00B8A9;
  --ring-top: inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-1: 0 1px 2px rgba(11, 26, 51, .05), 0 1px 1px rgba(11, 26, 51, .03);
  --shadow-2: 0 1px 2px rgba(11, 26, 51, .05), 0 18px 40px -20px rgba(11, 26, 51, .22);
  --shadow-3: 0 1px 2px rgba(11, 26, 51, .06), 0 30px 60px -28px rgba(11, 26, 51, .32);
  --grad: linear-gradient(120deg, var(--brand), var(--accent));
}
body { color: var(--ink); }

/* Wordmark: same as the app's AppWordmark (Montserrat 800, Meet ink + Card brand) */
.wordmark { font-family: 'Montserrat', 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.wordmark b { font-weight: 800; color: var(--brand); }
.tagline { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }

/* Gradient text for one accent phrase per heading */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons: pill like the app, softer depth */
.btn-sq, .btn-sq:focus-visible { border-radius: 999px; }
.btn-primary, .btn-brand { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.btn-ghost { box-shadow: var(--shadow-1), var(--ring-top); }
.btn-ghost:hover { background: #fff; box-shadow: var(--shadow-2); }
.btn .arrow-move { transition: transform .2s ease-out; }
.btn:hover .arrow-move { transform: translateX(3px); }

/* Header: glass after scrolling; links in a soft pill track */
.header-glass, .scrolled .mock-bar { background: color-mix(in srgb, #fff 82%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); }
.header-glass { box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent); border-bottom: 0; }
.nav-track { padding: 4px; border-radius: 999px; background: color-mix(in srgb, #fff 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); gap: 2px !important; }
.nav-track a { padding: 8px 16px; border-radius: 999px; color: #475569; transition: background .2s, color .2s, box-shadow .2s; }
.nav-track a:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

/* Hero */
.hero-dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); }
.hero-badge { gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.badge-dot { position: relative; width: 8px; height: 8px; border-radius: 99px; background: var(--brand); }
.badge-dot::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; background: var(--brand); opacity: .35; animation: dot-pulse 2s ease-out infinite; }
@keyframes dot-pulse { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
.hero-h1 { color: var(--heading); letter-spacing: -.045em; }
.hero-lead { color: #475569; }
.htag { color: var(--ink); font-weight: 600; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow-2), var(--ring-top); }

/* Phone mockups: brand-blue metal frame (like a coloured titanium phone), not
   black. Mixed from --brand so a brand change carries over. The island is deep
   brand navy, not black. */
:root {
  --frame-hi: color-mix(in srgb, var(--brand) 45%, #fff);
  --frame-mid: color-mix(in srgb, var(--brand) 88%, #fff);
  --frame-lo: color-mix(in srgb, var(--brand) 70%, var(--ink));
  --frame: linear-gradient(150deg, var(--frame-hi) 0%, var(--frame-mid) 22%, var(--brand) 50%, var(--frame-mid) 70%, var(--frame-lo) 100%);
  --island: color-mix(in srgb, var(--brand) 22%, var(--ink));
}
.phone, .hero-phone-front, .hero-phone-back { background: var(--frame); }
.phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 1px rgba(255, 255, 255, .7), 0 50px 90px -40px color-mix(in srgb, var(--brand) 60%, transparent), 0 24px 40px -28px rgba(11, 26, 51, .35); }
.hero-phone-front { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 1px rgba(255, 255, 255, .7), 0 60px 90px -40px color-mix(in srgb, var(--brand) 60%, transparent), 0 20px 40px -24px rgba(11, 26, 51, .3); }
.hero-phone-back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 1px rgba(255, 255, 255, .7), 0 40px 70px -40px color-mix(in srgb, var(--brand) 55%, transparent); }
.hero-phone-front::before, .hero-phone-front::after { background: linear-gradient(90deg, var(--frame-lo), var(--frame-mid)); }
.hero-phone-front::after { box-shadow: 0 66px 0 var(--frame-lo); }
/* Thin inner bezel between frame and screen, like a real phone */
.phone-screen { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, #fff); }
/* Dynamic-island pill floating inside the screen */
.notch, .hero-visual .notch { background: var(--island); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hero-visual .notch { top: 9px; width: 30%; height: 22px; border-radius: 99px; }
.notch::after { content: ""; position: absolute; top: 50%; right: 14%; width: 8px; height: 8px; margin-top: -4px; border-radius: 99px; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--brand) 70%, #fff) 0 18%, color-mix(in srgb, var(--brand) 40%, var(--ink)) 45%, var(--island) 75%); }
/* Status bar sits either side of the island */
.hero-visual .hs-status { top: 12px; }
/* "Many cards, one photo" viewfinder frame: same blue metal, not black */
.multi-photo { box-shadow: 0 0 0 5px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 60%, var(--ink)), 0 18px 34px -16px color-mix(in srgb, var(--brand) 55%, transparent); }

/* Trust strip: product facts, not invented numbers */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-2); overflow: hidden; }
.trust > div { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.trust > div + div { border-left: 1px solid var(--line); }
.trust > div:nth-child(3) { border-left: 0; }
.trust > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.trust b { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.trust small { display: block; font-size: .8rem; color: var(--muted); }
.trust .icon-tile { width: 40px; height: 40px; border-radius: 12px; flex: none; }
@media (max-width: 639px) {
  .trust > div { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .trust b { font-size: .9rem; }
}
@media (min-width: 1024px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust > div:nth-child(3) { border-left: 1px solid var(--line); }
  .trust > div:nth-child(n+3) { border-top: 0; }
  .trust > div { padding: 22px 24px; }
}

/* Section headings */
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; letter-spacing: .14em; }
.h2 { color: var(--heading); letter-spacing: -.035em; }
.lead { color: #5B6B82; }

/* Icon tiles: soft brand gradient with an inner ring, like the app */
.icon-tile { background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 14%, #fff), color-mix(in srgb, var(--accent) 12%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent), var(--ring-top); }

/* Cards: hairline + inner highlight; gradient border on hover */
.surface, .surface-lg, .stage, .compare, .app-card { box-shadow: var(--shadow-1), var(--ring-top); }
.surface-lg { box-shadow: var(--shadow-2), var(--ring-top); }
.stage { box-shadow: var(--shadow-3); }
.bento { border-radius: 24px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; box-shadow: var(--shadow-1); }
.bento:hover { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--brand) 55%, var(--line)), color-mix(in srgb, var(--accent) 45%, var(--line))) border-box; box-shadow: var(--shadow-3); transform: translateY(-2px); }
.bento.reveal { transition: opacity .7s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.bento h3 { color: var(--ink); font-size: 1.1rem; letter-spacing: -.015em; }
.compare-new { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }
.compare-new .mark { background: var(--grad); }

/* Pricing */
.plan { border-radius: 24px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-1); }
.plan:hover { box-shadow: var(--shadow-2); }
.plan[aria-selected=true] { border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, #fff), #fff 40%) padding-box, var(--grad) border-box; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 9%, transparent), var(--shadow-3); }
.plan [data-badge] { background: var(--ink) !important; letter-spacing: .02em; box-shadow: var(--shadow-2); }
.plan [data-price] { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.segmented { box-shadow: var(--shadow-1); }
.per[aria-pressed=true] { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.paybtn { border-radius: 999px; }

/* FAQ */
.faq { border-radius: 18px; }
.faq .chev { box-sizing: content-box; padding: 6px; border-radius: 99px; background: #F1F4F9; transition: transform .25s, background .2s, color .2s; }
.faq[open] .chev { background: var(--brand); color: #fff; }
.faq summary { color: var(--ink); }

/* CTA band: ink navy with brand + teal glows and a masked grid */
.cta-band { background: var(--ink); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink) 80%, transparent); }
.cta-band::before { background:
  radial-gradient(560px 300px at 85% 0%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 70%),
  radial-gradient(480px 260px at 5% 100%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); }
.cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%); }
.cta-band .btn { border-radius: 999px; }

.cta-band .h2 { color: #fff; }

/* Footer */
footer .foot-link:hover { color: var(--ink); }

/* Inner pages */
.prose h1, .prose h2 { color: var(--ink); }

/* ---- Motion (assets/motion.js); our own takes on originkit.dev effects ---- */
.m-split .m-w, .m-split .m-c, .m-unit { display: inline-block; }
.m-split .m-w { white-space: nowrap; }
/* Failsafe: if motion.js never splits the headline, show it anyway */
.m-js .hero-h1:not(.m-split) { opacity: 0; animation: m-show 0s 1.2s forwards; }
@keyframes m-show { to { opacity: 1; } }

/* 1. Text colour sweep: letters rise while a teal-to-brand band passes, then settle to ink */
.m-js .hero-h1.m-split .m-c { opacity: 0; }
.hero-h1.m-in .m-c { animation: m-sweep .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 30ms + 120ms); }
@keyframes m-sweep {
  0% { opacity: 0; transform: translateY(.42em); color: var(--accent); }
  45% { opacity: 1; transform: none; color: var(--brand); }
  100% { opacity: 1; transform: none; color: var(--heading); }
}
/* The gradient phrase rises as one piece, then a light glint crosses it now and then */
.m-js .hero-h1.m-split .m-unit { opacity: 0; }
.hero-h1.m-in .m-unit {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%), var(--grad);
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  animation: m-rise 1s cubic-bezier(.2, .8, .2, 1) both, m-glint 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 30ms + 220ms), 2.6s;
}
@keyframes m-glint { 0%, 70% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

/* 2. Stagger rise: section headings come in word by word and de-blur */
.m-js #landing .h2.m-split .m-w { opacity: 0; }
#landing .h2.m-in .m-w { animation: m-rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
@keyframes m-rise { from { opacity: 0; transform: translateY(.38em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* 3. Spotlight cards: soft glow + lit border under the cursor */
.spot { position: relative; }
.spot::after, .spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease-out; }
.spot::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 8%, transparent), transparent 50%); }
.spot::before { padding: 1.5px; z-index: 1;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 80%, var(--accent)), transparent 65%);
  -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 exclude, linear-gradient(#000 0 0); }
.spot:hover::after, .spot:hover::before { opacity: 1; }
.trust > .spot::before { display: none; }

/* 4. Magnetic buttons: lean to the cursor (translate, so hover transforms still work)
      and fill from the point the cursor came in */
.m-mag { position: relative; isolation: isolate; overflow: hidden; transition: translate .45s cubic-bezier(.2, .8, .2, 1), transform .15s, filter .15s, background .15s, box-shadow .2s; }
.m-mag:hover { transition: translate .12s linear, transform .15s, filter .15s, background .15s, box-shadow .2s; }
.m-wipe { position: absolute; z-index: -1; width: 0; height: 0; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); transition: transform .55s cubic-bezier(.2, .8, .2, 1); background: color-mix(in srgb, var(--brand) 55%, var(--ink)); }
.m-hot .m-wipe { transform: translate(-50%, -50%) scale(1); }
.cta-band .bg-white .m-wipe { background: var(--brand-soft); }
.cta-band .border .m-wipe { background: rgba(255, 255, 255, .14); }

/* 5. Reactive dot grid: hero dots turn brand blue around the cursor */
.hero-dots-lit { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background-image: radial-gradient(var(--brand) 1.3px, transparent 1.7px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(200px circle at var(--hx, 50%) var(--hy, 50%), #000, transparent 72%);
  mask-image: radial-gradient(200px circle at var(--hx, 50%) var(--hy, 50%), #000, transparent 72%); }
.hero-dots-lit.on { opacity: .85; }

/* 6. Orbit border: the chosen plan's gradient border slowly turns */
@property --pa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plan[aria-selected=true] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, #fff), #fff 40%) padding-box,
    conic-gradient(from var(--pa), var(--brand), var(--accent), color-mix(in srgb, var(--brand) 20%, #fff), var(--brand)) border-box;
  animation: m-orbit 6s linear infinite;
}
@keyframes m-orbit { to { --pa: 360deg; } }

/* 7. Smooth scroll (Lenis' own CSS, assets/vendor/lenis.min.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* 8. 3D tilt: hero phones turn towards the cursor; the back phone moves further */
.hero-visual.m-tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.m-tilt .hero-phone-back { translate: var(--px, 0px) var(--py, 0px); transition: translate .7s cubic-bezier(.2, .8, .2, 1); }
.m-tilt .hero-phone-front { translate: calc(var(--px, 0px) * -.35) calc(var(--py, 0px) * -.35); transition: translate .7s cubic-bezier(.2, .8, .2, 1); }

/* 9. Scroll progress line under the header */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1; pointer-events: none; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

/* 10. Language marquee */
.lm-track { display: flex; width: max-content; animation: lm-scroll 45s linear infinite; }
.lang-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lm-track:hover { animation-play-state: paused; }
.lm-row { display: flex; gap: 14px; padding-right: 14px; }
.lm-row li { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1), var(--ring-top); white-space: nowrap; }
.lm-word { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.lm-lang { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
@keyframes lm-scroll { to { transform: translateX(-50%); } }

/* 11. Mobile dock: slim "Get Started" bar after the hero (phones only) */
.dock { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; opacity: 0; transform: translateY(140%); pointer-events: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.dock.on { opacity: 1; transform: none; pointer-events: auto; }
.dock-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 24px; background: color-mix(in srgb, #fff 88%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); border: 1px solid var(--line); box-shadow: 0 20px 40px -18px rgba(11, 26, 51, .35); }
@media (min-width: 768px) { .dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .lm-track { animation: none; }
  .hero-visual.m-tilt { transform: none; }
  .dock { transition: none; }
  .plan[aria-selected=true] { animation: none; }
  .badge-dot::after { animation: none; }
  .bento:hover { transform: none; }
  .btn:hover .arrow-move { transform: none; }
}

/* ================= Dark mode (follows the phone/computer setting) =================
   Same dark palette as the app (app_colors.dart: darkBackground #0B1020,
   darkSurface #151B2E, brand text lightened like brandOnDark). The phone
   mockups keep their light app screens. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0B1020; --surface: #151B2E; --surface-2: #1C2440; --line: #252E48;
    --text: #E8ECF5; --text-2: #C3CBDA; --muted: #94A0B8; --heading: #F3F6FB;
    --brand-light: color-mix(in srgb, var(--brand) 55%, #fff);
    --soft: color-mix(in srgb, var(--brand) 18%, #151B2E);
    --ring-top: inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -20px rgba(0, 0, 0, .7);
    --shadow-3: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .8);
  }
  body { background: var(--bg); color: var(--text); }
  .page-bg { background:
    radial-gradient(900px 480px at 85% -120px, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(700px 420px at -10% 0px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); }
  .mock-glow { background: radial-gradient(closest-side circle at 66% 44%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 85%) 66% 44% / 820px 700px no-repeat, linear-gradient(180deg, #0D1326, var(--bg) 92%); }
  .hero-dots { background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.2px); }

  /* Text */
  .wordmark { color: var(--text); }
  .wordmark b, .text-brand:not(.phone-screen *), .eyebrow, .prose a, .lm-lang, .mini-chip:not(.phone-screen *), .tier, .faq[open] summary, .faq summary:hover { color: var(--brand-light); }
  .hero-h1, .h2, .bento h3, .trust b, .lm-word, .faq summary, .prose h1, .prose h2, .plan [data-price], .demo-step, .pick-name, .fval, .multi-list b, .htag, .hero-badge, .btn-ghost:not(.phone-screen *), .st-title { color: var(--heading); }
  .hero-lead, .lead, .bento p, .prose p, .prose li { color: var(--text-2); }
  :is(.text-slate-900, .text-slate-800):not(.phone-screen *):not(.vcard *):not(.cta-band *) { color: var(--heading); }
  :is(.text-slate-700, .text-slate-600):not(.phone-screen *):not(.vcard *) { color: var(--text-2); }
  :is(.text-slate-500, .text-slate-400):not(.phone-screen *):not(.vcard *) { color: var(--muted); }
  .text-green-700:not(.phone-screen *) { color: #4ADE80; }
  .foot-link:hover, footer .foot-link:hover { color: var(--heading); }

  /* Surfaces */
  :is(.surface, .surface-lg, .stage, .compare-old, .htag, .hero-badge, .trust, .lm-row li, .btn-ghost, .segmented, .sound-btn, .search-box, .multi-list li, .sheet, .step-dot, .pick):not(.phone-screen *) { background: var(--surface); border-color: var(--line); }
  .bg-white:not(.phone-screen *):not(.cta-band *):not(.hs-card) { background: var(--surface); }
  [class*="bg-[#F1F4F9]"], .scan-zone, .faq .chev, .compare-old .mark, .field { background: var(--surface-2); }
  .field { color: var(--text); border-color: var(--line); }
  .bento { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(var(--line), var(--line)) border-box; }
  .bento:hover { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, var(--line)), color-mix(in srgb, var(--accent) 50%, var(--line))) border-box; }
  .compare-new { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
  .plan { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(var(--line), var(--line)) border-box; }
  .plan[aria-selected=true] { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface) 45%) padding-box,
    conic-gradient(from var(--pa), var(--brand), var(--accent), color-mix(in srgb, var(--brand) 35%, var(--surface)), var(--brand)) border-box; }
  .paybtn { background: transparent; color: var(--brand-light); border-color: color-mix(in srgb, var(--brand) 70%, #fff); }
  .plan[aria-selected=true] .paybtn { color: #fff; border-color: var(--brand); }
  /* The light app screens keep their own dark text */
  .phone-screen { color: #0F172A; }
  .pick-ink { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .plan [data-badge] { background: var(--brand) !important; }
  .pick[aria-checked=true] { background: var(--soft); }
  .fval:empty::after { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); }
  .s-row + .s-row, .hc-row:not(.phone-screen *) { border-color: var(--line); }
  .border-slate-200\/70, footer, footer * { border-color: var(--line) !important; }
  footer.mt-auto { background: color-mix(in srgb, var(--surface) 60%, transparent) !important; }
  footer .font-semibold, footer p.font-semibold { color: var(--heading); }

  /* Brand-tinted bits */
  .eyebrow, .icon-tile, .mini-chip:not(.phone-screen *), .tier, .bg-brand-soft, .check { background: var(--soft); }
  .icon-tile, .check { color: var(--brand-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
  .per { color: var(--text-2); }
  .per .save { background: rgba(22, 163, 74, .18); color: #4ADE80; }

  /* Glass bars */
  .header-glass, .scrolled .mock-bar, .dock-in { background: color-mix(in srgb, var(--bg) 82%, transparent); }
  .header-glass { box-shadow: 0 1px 0 var(--line); }
  .dock-in { border-color: var(--line); }
  .nav-track { background: rgba(255, 255, 255, .04); border-color: var(--line); }
  .nav-track a { color: var(--text-2); }
  .nav-track a:hover { background: var(--surface-2); color: var(--heading); }
  .hero-av { box-shadow: 0 0 0 3px var(--bg); }

  /* CTA band stays ink navy, outlined so it doesn't melt into the page */
  .cta-band { background: #0E1A36; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .8); }

  /* Spotlight a touch stronger on dark */
  .spot::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 14%, transparent), transparent 50%); }
}

/* Checkout details form (dark) */
@media (prefers-color-scheme: dark) {
  .consent { color: var(--text-2); }
  .sheet-foot { background: var(--surface); border-color: var(--line); }
  .field-error { color: #F87171; }
  .field[aria-invalid="true"] { border-color: #F87171; }
}