/* Cream light theme, after selfhelp.ai. Loaded on top of style.css and toggled by js/theme.js. */
:root {
  --bg: #f6f4ee;
  --bg-2: #ece9df;
  --bg-3: #e2ded2;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.16);
  --text: #0f172a;
  --muted: #4e5a6b;
  --muted-2: #7a8394;
  --brand: #2563eb;
  --brand-2: #2563eb;
  --brand-deep: #1d4fd7;
  --glow: rgba(37, 99, 235, 0.22);
  --ok: #15803d;
  --warn: #d97706;
  --ink: #0f172a;
  --paper: #f6f4ee;
  --card: #ffffff;
}
body { background: var(--bg); color: var(--text); }
::selection { background: var(--ink); color: var(--paper); }

/* buttons: ink primary, white ghost */
.btn { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); box-shadow: 0 12px 30px -14px rgba(15,23,42,0.55); }
.btn--primary:hover { box-shadow: 0 16px 36px -14px rgba(15,23,42,0.6); }
.btn--ghost { --btn-bg: var(--card); --btn-fg: var(--text); box-shadow: 0 0 0 1px var(--line-strong) inset; backdrop-filter: none; }
.btn--ghost:hover { background: #fbfaf7; }

/* chrome */
.preloader { background: var(--bg); }
.preloader__bar { background: var(--line-strong); }
.preloader__bar i { background: var(--ink); }
.nav__inner { background: rgba(246, 244, 238, 0.72); box-shadow: 0 0 0 1px var(--line) inset, 0 10px 30px -20px rgba(15,23,42,0.35); }
.nav__links a:hover { background: rgba(15,23,42,0.05); }
.menu { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .cursor { background: var(--ink); }
  .cursor.is-link, .cursor.is-media { background: var(--ink); }
  .cursor span { color: var(--paper); }
}

/* hero */
.hero__bg::before { background: radial-gradient(60% 60% at 50% 30%, rgba(37,99,235,0.14), transparent 70%), radial-gradient(40% 40% at 20% 60%, rgba(236,233,223,0.9), transparent 70%); }
.hero__grid { background-image: linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px); }
.hero__caption { background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px var(--line) inset, 0 10px 30px -16px rgba(15,23,42,0.35); }
.hero__dots i { background: var(--line-strong); }
.hero__dots i.is-active { background: var(--brand); }

/* product frames */
.frame { background: var(--card); box-shadow: 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(15,23,42,0.35), 0 20px 50px -30px var(--glow); }
.frame__bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.frame__dots i { background: #cfc9bb; }
.frame__url { background: rgba(15,23,42,0.06); color: var(--muted); }
.device { background: var(--card); box-shadow: 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(15,23,42,0.35), 0 20px 50px -30px var(--glow); }
.device__bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.device__bar i { background: #cfc9bb; }
.device__bar span { color: var(--muted-2); }

/* hero live cards */
.hcard__inner { background: var(--card); box-shadow: 0 0 0 1px var(--line) inset, 0 30px 60px -28px rgba(15,23,42,0.45), 0 16px 40px -30px var(--glow); }
@media (hover: hover) and (pointer: fine) {
  .hcard:hover .hcard__inner { box-shadow: 0 0 0 1px var(--line-strong) inset, 0 40px 70px -28px rgba(15,23,42,0.5), 0 20px 50px -24px var(--glow); }
}
.hcard__head span { color: var(--muted-2); }
.hcard__btn { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 24px -12px var(--glow); }
.hmsg.in { background: rgba(15,23,42,0.06); }
.hmsg.out { background: var(--brand); color: #fff; }
.hmsg.out::after { background: #fff; }
.hmsg.typing { background: rgba(15,23,42,0.06); }
.hcall__ring { color: #fff; }
.hcall__answer { color: #fff; }
.hwave i { background: var(--brand); }
.hbadge { background: rgba(21,128,61,0.1); box-shadow: 0 0 0 1px rgba(21,128,61,0.3) inset; }
.hpipe__col { background: rgba(15,23,42,0.04); }
.hpipe__col.is-over { background: rgba(37,99,235,0.08); }
.hpipe__col:nth-child(3).is-done { background: rgba(21,128,61,0.08); box-shadow: 0 0 0 1px rgba(21,128,61,0.4) inset; }
.hpipe__chip { box-shadow: 0 0 0 1px var(--line) inset, 0 10px 24px -10px rgba(15,23,42,0.5); }
.hstats > div { background: rgba(15,23,42,0.04); }
.hswitch i { background: rgba(15,23,42,0.15); }
.hswitch input:checked + i { background: var(--ok); }

/* marquee, stats, chapters */
.marquee__item { background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; }
.marquee__item i { background: var(--muted-2); }
.pill { background: rgba(37,99,235,0.08); box-shadow: 0 0 0 1px rgba(37,99,235,0.25) inset; }
.stats__grid { background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.stat { background: var(--card); }
.chapter__num { background: rgba(37,99,235,0.08); box-shadow: 0 0 0 1px rgba(37,99,235,0.3) inset; }
.step .tag { background: rgba(37,99,235,0.08); }
.step::before { background: var(--line-strong); }
.step.is-active::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(37,99,235,0.18); }

/* AI simulations */
.sim { background: radial-gradient(50% 60% at 50% 40%, rgba(37,99,235,0.12), transparent 70%), linear-gradient(180deg, #f6f4ee, #ece9df); }
.call { background: var(--card); backdrop-filter: none; box-shadow: 0 0 0 1px var(--line) inset, 0 40px 80px -30px rgba(15,23,42,0.4); color: var(--text); }
.call__avatar { color: #fff; }
.call__timer { color: var(--ok); }
.transcript p.ai { background: rgba(37,99,235,0.08); box-shadow: 0 0 0 1px rgba(37,99,235,0.25) inset; }
.transcript p.user { background: rgba(15,23,42,0.06); }
.call__actions span { background: rgba(15,23,42,0.05); }
.call__actions span.is-hot { background: rgba(21,128,61,0.12); }
.phone { color: #f1f5f9; }
.phone__head small { color: #94a3b8; }
.phone__head { border-bottom-color: rgba(255,255,255,0.1); }

/* workflow canvas */
.workflow__canvas { background: var(--card); background-image: radial-gradient(rgba(15,23,42,0.12) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 0 0 1px var(--line) inset; }
.workflow__canvas .node rect { fill: #fff; stroke: rgba(15,23,42,0.16); }
.workflow__canvas .node text { fill: var(--text); }
.workflow__canvas .node text.sub { fill: var(--muted); }
.workflow__canvas .node .ic { stroke: var(--brand); }
.workflow__canvas .node.trigger .ic { stroke: var(--ok); }
.workflow__canvas .badge rect { fill: #fff7c2; stroke: #e5c76b; }
.workflow__canvas .badge text { fill: #6b5200; }
.workflow__note { box-shadow: 0 10px 30px -12px rgba(15,23,42,0.4); }

/* cards, quotes, plans, faq */
.card { background: var(--card); box-shadow: 0 0 0 1px var(--line) inset, 0 20px 40px -30px rgba(15,23,42,0.3); }
@media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 0 0 1px var(--line-strong) inset, 0 30px 60px -30px rgba(15,23,42,0.35); } }
.card__icon { background: rgba(37,99,235,0.08); color: var(--brand); }
.card__meta i { animation: none; }
.quote { background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; }
.quote footer i { color: #fff; }
.plan { background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; }
.plan--hot { background: linear-gradient(180deg, #eef3ff, #ffffff 60%); box-shadow: 0 0 0 1px rgba(37,99,235,0.45) inset, 0 40px 80px -40px var(--glow); }
.plan__badge { background: var(--brand); color: #fff; }
.plan li::before, .plan-features li::before { background-color: rgba(21,128,61,0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.faq__q i::before, .faq__q i::after { background: var(--text); }
.faq__item.is-open .faq__q i { background: var(--ink); }
.faq__item.is-open .faq__q i::before, .faq__item.is-open .faq__q i::after { background: var(--paper); }

/* dark CTA band, like selfhelp's ink buttons */
.cta__box { background: radial-gradient(80% 120% at 50% 120%, rgba(37,99,235,0.45), transparent 60%), var(--ink); color: var(--paper); box-shadow: none; }
.cta__box .lead { color: #c9cfdd; }
.cta__box .eyebrow { color: #93c5fd; }
.cta__box .h2 em { color: #93c5fd; }
.cta__box .btn--primary { --btn-bg: var(--paper); --btn-fg: var(--ink); box-shadow: 0 12px 30px -14px rgba(0,0,0,0.6); }
.cta__box .btn--ghost { --btn-bg: rgba(255,255,255,0.08); --btn-fg: var(--paper); box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset; }
.cta__ring { box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset; }
.cta__ring::before { box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; }
.cta__ring::after { box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; }

/* lightbox */
.lightbox__backdrop { background: rgba(15,23,42,0.55); }
.lightbox__panel { background: var(--card); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 60px 140px -40px rgba(15,23,42,0.6); }
.lightbox__close { background: rgba(15,23,42,0.06); box-shadow: 0 0 0 1px var(--line) inset; }
.lightbox__close:hover { background: rgba(15,23,42,0.12); }

/* sub pages */
.checkout { background: var(--card); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 40px 80px -40px rgba(15,23,42,0.35); }
.checkout__item { background: rgba(15,23,42,0.04); }
.checkout__fields i { background: rgba(15,23,42,0.05); }
.checkout__placeholder { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.4); }
.checkout__note b { color: var(--brand); }
.plan-switch { background: rgba(15,23,42,0.05); }
.plan-switch a.is-active { background: var(--ink); color: var(--paper); }
.plan-switch a.is-active span { color: rgba(246,244,238,0.7); }
.success__steps li { background: var(--card); }
.success__steps li::before { background: rgba(37,99,235,0.1); color: var(--brand); }
.legal__body a { color: var(--brand); }
.plan__price s { color: var(--muted-2); }
.tour__video { box-shadow: 0 0 0 1px var(--line) inset, 0 40px 100px -40px rgba(15,23,42,0.5); }