/* Light theme for the marketing pages. The pages are designed dark (their
   own :root tokens); this only re-maps those tokens and the few hard-coded
   dark colours, so layouts and components stay exactly the same.
   Palette: clean white surfaces, near-black ink, the Gydmation blue. */
:root[data-theme="light"]{
  --bg:#ffffff;--bg-2:#f6f7fa;--bg-3:#eef0f5;--bg-4:#e4e7ee;
  --border:rgba(15,23,42,.09);--border-2:rgba(15,23,42,.15);--border-3:rgba(15,23,42,.24);
  --text:#0b1020;--text-2:rgba(11,16,32,.74);--text-3:rgba(11,16,32,.62);
  --accent:#4d63f7;--accent-h:#3a4fe6;--accent-2:#2f45d8;--accent-glow:rgba(77,99,247,.22);
  --success:#15803d;--ok:#15803d;--err:#b91c1c;--warning:#b45309;--warn:#b45309;
  color-scheme:light;
}

/* Sticky header bar (hard-coded translucent black on every page). */
html[data-theme="light"] body>nav,
html[data-theme="light"] nav:first-of-type{background:rgba(255,255,255,.85)}
html[data-theme="light"] .mobile-nav{background:#ffffff}

/* Softer shadows: black drop shadows read as smudges on white. */
html[data-theme="light"] .step:hover{box-shadow:0 24px 44px -24px rgba(15,23,42,.18)}
html[data-theme="light"] .mock:hover{box-shadow:0 40px 80px -30px rgba(15,23,42,.22)}

/* Comparison table tints. */
html[data-theme="light"] .compare-mark.no{background:rgba(15,23,42,.06)}
html[data-theme="light"] .compare-row:not(.head):hover{background:rgba(15,23,42,.025)}

/* Status colours tuned for white (the dark-theme pastels are too faint). */
html[data-theme="light"] .s2{color:#c81e1e}
html[data-theme="light"] .bad{color:#b45309}
/* AI models page: deeper badge/provider colours on white. */
:root[data-theme="light"]{--amber:#92400e;--cyan:#075985}
html[data-theme="light"] .badge-green{color:#166534;background:rgba(22,163,74,.1)}
html[data-theme="light"] .badge-amber{background:rgba(180,83,9,.09)}
html[data-theme="light"] .provider-openai{background:rgba(3,105,161,.1)}
html[data-theme="light"] .provider-groq{background:rgba(180,83,9,.09)}
html[data-theme="light"] .provider-anthropic{background:rgba(47,69,216,.1)}

/* Homepage hero 3D scene, light edition: porcelain tiles and a glass
   window instead of the dark obsidian ones (dark theme unchanged). */
html[data-theme="light"] .hm-tile-face{
  background:linear-gradient(160deg,#ffffff,#eef1fb);
  border:1px solid rgba(77,99,247,.22);
  box-shadow:
    0 1.8vmin 0 0 #d5dbee,
    0 2.6vmin 3.6vmin -0.6vmin rgba(30,41,82,.22),
    0 0 4.5vmin 0.2vmin rgba(77,99,247,.16);
}
html[data-theme="light"] .hm-center .hm-tile-face{
  background:linear-gradient(155deg,#6075ff,#3346dd 60%,#2a3bc4);
  border-color:rgba(255,255,255,.35);
  box-shadow:
    0 2.2vmin 0 0 #1f2c9a,
    0 3.2vmin 5vmin -1vmin rgba(37,52,170,.45),
    0 0 7vmin 0.6vmin rgba(77,99,247,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="light"] .hm-center .hm-tile-face svg path{fill:#fff}
html[data-theme="light"] .hm-window{
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(243,246,253,.94));
  border:1px solid rgba(77,99,247,.2);
  box-shadow:0 30px 60px -24px rgba(30,41,82,.28),0 0 40px -8px rgba(77,99,247,.22),inset 0 1px 0 #fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
html[data-theme="light"] .hm-status{border-top-color:rgba(15,23,42,.08)}
html[data-theme="light"] .hm-label{color:rgba(11,16,32,.62)}
html[data-theme="light"] .hm-wire{stroke:#4d63f7;opacity:.35}
html[data-theme="light"] .hm-pulse{fill:#4d63f7}
html[data-theme="light"] .hm-send{box-shadow:0 6px 16px -4px rgba(77,99,247,.55)}

/* Elevated surfaces: white cards with a hairline border and a soft,
   layered shadow (the grey-on-white boxes looked flat). */
html[data-theme="light"] .feat,html[data-theme="light"] .demo-shell,html[data-theme="light"] .step,html[data-theme="light"] .plan,html[data-theme="light"] .early,html[data-theme="light"] .reason-card,html[data-theme="light"] .example,html[data-theme="light"] .mock,html[data-theme="light"] .rank-item,html[data-theme="light"] .model-card,html[data-theme="light"] .link-card,html[data-theme="light"] .price-card,html[data-theme="light"] .contact-form,html[data-theme="light"] .support-card,html[data-theme="light"] .cta-box,html[data-theme="light"] .nf-card,html[data-theme="light"] .quote-block{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.14)}
html[data-theme="light"] .feat:hover,html[data-theme="light"] .plan:hover,html[data-theme="light"] .model-card:hover,html[data-theme="light"] .link-card:hover,html[data-theme="light"] .support-card:hover,html[data-theme="light"] .reason-card:hover{box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -18px rgba(30,41,82,.22)}
html[data-theme="light"] .nav-dd-menu-inner{background:#fff;box-shadow:0 18px 44px -14px rgba(15,23,42,.22)}

/* Callouts and notices: a gentle brand tint instead of grey. */
html[data-theme="light"] .callout,html[data-theme="light"] .notice,html[data-theme="light"] .short-version{background:rgba(77,99,247,.05);border-color:rgba(77,99,247,.18)}

/* Secondary buttons and fields: white with a crisp border. */
html[data-theme="light"] .btn-ghost,html[data-theme="light"] .btn.g,html[data-theme="light"] textarea,html[data-theme="light"] input:not([type=checkbox]):not([type=radio]),html[data-theme="light"] select{background:#fff;border-color:rgba(15,23,42,.16)}
html[data-theme="light"] .btn-ghost:hover,html[data-theme="light"] .btn.g:hover{background:#f6f7fa}

/* Signed-in profile menu (public/nav-account.js). */
html[data-theme="light"] .gyd-acct-menu{background:#fff;box-shadow:0 18px 50px -12px rgba(15,23,42,.22)}
html[data-theme="light"] .gyd-item:hover,html[data-theme="light"] .gyd-item:focus-visible{background:var(--bg-3)}
html[data-theme="light"] .gyd-pill{background:var(--bg-3)}
html[data-theme="light"] .gyd-pill-pro{background:rgba(22,163,74,.1);color:#166534}
html[data-theme="light"] .gyd-out:hover,html[data-theme="light"] .gyd-out:focus-visible{color:#b91c1c}
html[data-theme="light"] .gyd-acct-btn{background:#fff}

/* Ambient background glow: lighter on white. */
html[data-theme="light"] .bg-bubble{opacity:.45}

html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}

/* ── theme switch (header) ──────────────────────────────────────────── */
.nav-end{display:flex;align-items:center}
.theme-sw{position:relative;display:flex;align-items:center;margin-right:10px}
.theme-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border-2);background:transparent;color:var(--text-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.theme-btn:hover{background:var(--bg-3);color:var(--text)}
.theme-btn svg{width:16px;height:16px}
.theme-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:5px;border-radius:12px;border:1px solid var(--border-2);background:var(--bg-2);box-shadow:0 16px 40px -12px rgba(0,0,0,.45);z-index:100;display:flex;flex-direction:column;gap:1px}
.theme-menu[hidden]{display:none}
html[data-theme="light"] .theme-menu{background:#fff;box-shadow:0 16px 40px -14px rgba(15,23,42,.25)}
.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:inherit;font-size:.86rem;text-align:left;cursor:pointer}
.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--bg-3);color:var(--text);outline:none}
.theme-menu button svg{width:15px;height:15px;flex-shrink:0}
.theme-menu button span{flex:1}
.theme-menu .theme-tick{visibility:hidden;color:var(--accent-2)}
.theme-menu button[aria-checked="true"]{color:var(--text)}
.theme-menu button[aria-checked="true"] .theme-tick{visibility:visible}
@media (max-width:760px){.nav-end{margin-left:auto;margin-right:8px}.theme-sw{margin-right:0}}