/* Light theme for the site (Oct 2026): the app's own look, a warm stone canvas, white glass, charcoal type and the
   yellow kept for what matters. Loaded last, over the page's dark styles and the film's (scenes.css, film.css). */
:root {
  --bg: #f2f0ec; --panel: rgba(255,255,255,.72); --panel-2: #ebe7e0; --line: rgba(22,22,22,.09);
  --ink: #161616; --ink-2: #4a4741; --dim: #8a8478; --brand: #ffd21f; --brand-2: #f5b800; --green: #1f9d55;
  --gold: #a87400;
}
html, body { background: #efede9; color: var(--ink); }
body { background: radial-gradient(1200px 800px at 85% -10%, #fff 0, rgba(255,255,255,0) 60%), radial-gradient(1000px 800px at -10% 30%, #f6ead8 0, rgba(246,234,216,0) 60%), linear-gradient(180deg, #f2f0ec, #e8e4de); background-attachment: scroll; }
.sky { background: radial-gradient(1100px 800px at 80% -10%, rgba(255,210,31,.12), transparent 60%), radial-gradient(1000px 800px at -10% 110%, rgba(170,190,255,.10), transparent 60%) !important; }

/* nav and buttons */
.nav, .nav.solid { color: var(--ink); }
header.nav.solid { background: rgba(250,249,246,.82) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line) !important; }
.nav-links { color: var(--ink-2); }
.nav-links a.l:hover { color: var(--ink); }
.btn-g { background: rgba(255,255,255,.8); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(22,22,22,.1), 0 4px 14px rgba(24,28,36,.06); }
.btn-g:hover { background: #fff; }
.btn-y { color: #161616; box-shadow: 0 8px 22px rgba(214,160,0,.25); }
@media (max-width: 720px) { .nav-links .si { background: rgba(255,255,255,.85) !important; box-shadow: inset 0 0 0 1px rgba(22,22,22,.1) !important; } }

/* sections */
.eyebrow { color: var(--gold) !important; }
h2.big em { color: var(--gold); }
.lead, .fine, p { color: var(--ink-2); }
.fine { color: var(--dim); }
.seg { background: rgba(255,255,255,.7) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.seg button { color: var(--ink-2); }
.seg button.on { background: #161616 !important; color: #fff !important; }
.tier, .cmp, .faq details, .feat > div, .steps > div { background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 32px rgba(24,28,36,.07) !important; color: var(--ink); }
.tier.pop { box-shadow: inset 0 0 0 2px var(--brand), 0 18px 44px rgba(214,160,0,.16) !important; }
.tier ul { color: var(--ink-2); }
.cmp-bar { background: rgba(22,22,22,.07) !important; }
.cmp-bar i { background: rgba(22,22,22,.28) !important; }
.cmp-save b { color: var(--gold) !important; }
.faq summary::after { color: var(--gold) !important; }
footer { border-top: 1px solid var(--line) !important; }
.foot small, .foot .links { color: var(--ink-2); }
.hero-cta .trust { color: var(--ink-2); }

/* the flow section: on a light page the scene sits on white glass, the copy in charcoal */
.fl-now .n { color: var(--gold); }
.fl-now p { color: var(--ink-2); }
.fl-dots i { background: rgba(22,22,22,.1); }
.fx { box-shadow: 0 40px 100px rgba(24,28,36,.18), 0 0 0 1px rgba(255,255,255,.9) !important; }