/* White mode (2026-11-06): follows the visitor's system setting, or the sun/moon button in the nav
   (themes.js, data-mode on <html>). Same brand gradient; screens and mockups stay dark like a real Mac. */
:root[data-mode="light"] {
  --bg: #fbfafc; --panel: #ffffff; --panel-2: #f1eff4;
  --white: #fbfafc; --light: #f1eff4; --ink: #17151b; --ink-2: #55535a; --ink-3: #737079; --line: #e4e1e8;
  --line-2: rgba(23, 21, 27, .09); --dots: rgba(23, 21, 27, .11); --note: #d23f9c;
  --accent: #d2348f; --link: #b9287d;
  color-scheme: light;
}
:root[data-mode="light"] body { background: var(--bg); color: var(--ink); }
:root[data-mode="light"] h1, :root[data-mode="light"] .h2, :root[data-mode="light"] h3 { color: var(--ink); }

/* Nav */
:root[data-mode="light"] .nav { color: var(--ink); }
:root[data-mode="light"] .nav .wrap { background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 24px rgba(23, 21, 27, .06); }
:root[data-mode="light"] .nav-links { color: var(--ink-2); }
:root[data-mode="light"] .nav-links a:hover { color: var(--ink); }
:root[data-mode="light"] .th-btn, :root[data-mode="light"] .md-btn { background: rgba(23, 21, 27, .06); color: var(--ink); }
:root[data-mode="light"] .th-btn:hover, :root[data-mode="light"] .md-btn:hover { background: rgba(23, 21, 27, .11); }
:root[data-mode="light"] .th-menu { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px rgba(23, 21, 27, .16); }
:root[data-mode="light"] .th-menu button { color: var(--ink); }
:root[data-mode="light"] .th-menu button:hover { background: rgba(23, 21, 27, .05); }
:root[data-mode="light"] .th-menu button[aria-checked="true"] { background: rgba(23, 21, 27, .08); }
:root[data-mode="light"] .th-menu small { color: var(--ink-3); }

/* First screen */
:root[data-mode="light"] .hero3 .hero2-sub, :root[data-mode="light"] .hero2-sub { color: var(--ink-2); }
:root[data-mode="light"] .btn-big, :root[data-mode="light"] .btn-big:hover { background: #17151b; color: #fff; box-shadow: 0 10px 34px color-mix(in srgb, var(--c3) 26%, transparent); }
:root[data-mode="light"] .h3-meta, :root[data-mode="light"] .h3-meta a { color: var(--ink-3); }
:root[data-mode="light"] .h3-meta b { color: var(--ink); }
:root[data-mode="light"] .h3-meta a { text-decoration-color: rgba(23, 21, 27, .25); }
:root[data-mode="light"] .h3-meta a:hover { color: var(--ink); }
:root[data-mode="light"] .h3-more { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 14px rgba(23, 21, 27, .06); }
:root[data-mode="light"] .h3-more:hover { color: var(--ink); }
:root[data-mode="light"] .h3-list li { color: var(--ink); }
:root[data-mode="light"] .h3-toast { box-shadow: 0 24px 50px rgba(23, 21, 27, .25); }
:root[data-mode="light"] .hero2-fine, :root[data-mode="light"] .hero2-works { color: var(--ink-3); }
:root[data-mode="light"] .hero2-fine b { color: var(--ink); }
:root[data-mode="light"] .hero2-works b { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-mode="light"] .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23, 21, 27, .2); }
:root[data-mode="light"] .btn-ghost:hover { background: rgba(23, 21, 27, .05); }
:root[data-mode="light"] .mbp { filter: drop-shadow(0 30px 40px rgba(23, 21, 27, .22)); }

/* Sections: white cards on the off-white page */
:root[data-mode="light"] .section-sub, :root[data-mode="light"] .try-sub, :root[data-mode="light"] .try-note,
:root[data-mode="light"] .why-line, :root[data-mode="light"] .v2-line { color: var(--ink-2); }
:root[data-mode="light"] .try-note b, :root[data-mode="light"] .v2-line b { color: var(--ink); }
:root[data-mode="light"] .vs > div, :root[data-mode="light"] .vs-b, :root[data-mode="light"] .fc, :root[data-mode="light"] .mt,
:root[data-mode="light"] .meet2-grid, :root[data-mode="light"] .pcard2, :root[data-mode="light"] .more-list button.on {
  background: #fff !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(23, 21, 27, .04); }
:root[data-mode="light"] .vs li, :root[data-mode="light"] .vs-a li { color: var(--ink-2); }
:root[data-mode="light"] .vs-b li { color: var(--ink); }
:root[data-mode="light"] .vs h3 { color: var(--ink-3); }
:root[data-mode="light"] .vs-b h3 { color: var(--accent); }
:root[data-mode="light"] .fc p, :root[data-mode="light"] .mt span, :root[data-mode="light"] .meet2 p { color: var(--ink-2); }
:root[data-mode="light"] .fc h3, :root[data-mode="light"] .mt b, :root[data-mode="light"] .more-h { color: var(--ink); }
:root[data-mode="light"] .mt i { background: rgba(23, 21, 27, .05); }
:root[data-mode="light"] .fc-chips span { background: rgba(23, 21, 27, .04); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-mode="light"] .more-list button b, :root[data-mode="light"] .more-list button span { color: var(--ink-2); }
:root[data-mode="light"] .more-list button:hover b { color: var(--ink); }
:root[data-mode="light"] .ticker.flat { color: var(--ink); }
:root[data-mode="light"] .meet2 { color: var(--ink); }
:root[data-mode="light"] .meet2 .acts button { background: rgba(23, 21, 27, .05); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-mode="light"] .meet2 .acts button:hover { background: rgba(23, 21, 27, .1); color: var(--ink); }
:root[data-mode="light"] .pcard2-l { color: var(--ink); border-color: var(--line-2); }
:root[data-mode="light"] .pcard2-was { color: var(--ink-2); }
:root[data-mode="light"] .pcard2-was s { color: var(--ink-3); }
:root[data-mode="light"] .pcard2-pitch, :root[data-mode="light"] .pcard2-r li { color: var(--ink-2); }
:root[data-mode="light"] .pcard2-l .hero2-fine { color: var(--ink-3); }

/* FAQ, the close, the footer */
:root[data-mode="light"] .faq details, :root[data-mode="light"] .faq summary { border-color: var(--line); color: var(--ink); }
:root[data-mode="light"] .faq p, :root[data-mode="light"] .faq li, :root[data-mode="light"] .faq td { color: var(--ink-2); }
:root[data-mode="light"] .faq th { color: var(--ink); }
:root[data-mode="light"] .final2 { color: var(--ink); }
:root[data-mode="light"] .final2 .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23, 21, 27, .22); }
:root[data-mode="light"] footer { color: var(--ink-3); border-top-color: var(--line); }
:root[data-mode="light"] .fcols b { color: var(--ink); }
:root[data-mode="light"] .fcols a:hover { color: var(--ink); }
:root[data-mode="light"] .fbase { border-top-color: var(--line); }

/* Christmas snow is white: give it an outline on a white page. */
:root[data-mode="light"] #thFx { filter: drop-shadow(0 0 1px rgba(40, 60, 90, .55)); }

/* The sun/moon button */
.md-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s, transform .2s; }
.md-btn:hover { background: rgba(255, 255, 255, .2); transform: rotate(-8deg); }
.md-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.md-btn .sun { display: none; }
:root[data-mode="light"] .md-btn .sun { display: block; }
:root[data-mode="light"] .md-btn .moon { display: none; }