/* Light and dark (owner, 7 Nov 2026: both looks with a top-right switch and a click animation; later the same day:
   "keep by default dark theme"). <html data-theme="dark"> is the default (tools/build.mjs); assets/js/head.js applies a visitor's saved choice before
   the first paint; site.js switches with a circle that grows from the switch (View Transitions, where the browser has it).
   Dark is the original v2 look, so it needs no rules here. Showcase bands stay dark in both looks: the Diwali night sky,
   the interactive Product Demo (its controls are drawn for a dark stage), the Future Vision and Product Demo page heroes. */

/* ---------- the switch ---------- */
.theme-tg{order:3;position:relative;display:inline-grid;place-items:center;flex:none;width:42px;height:42px;margin-left:16px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#E9D5FF;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.5,1.6,.4,1),background .3s,box-shadow .3s}
.theme-tg:hover{transform:rotate(-14deg) scale(1.07)}
.theme-tg:active{transform:scale(.88)}
.theme-tg:focus-visible{outline:3px solid #FFD23F;outline-offset:3px}
.theme-tg svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transition:transform .55s cubic-bezier(.5,1.6,.4,1),opacity .3s}
.theme-tg .tg-moon{fill:currentColor;stroke:none}
html[data-theme=light] .tg-moon,html:not([data-theme]) .tg-moon{transform:translateY(130%) rotate(-100deg);opacity:0}
html[data-theme=dark] .tg-sun{transform:translateY(-130%) rotate(100deg);opacity:0}
html[data-theme=light] .theme-tg{border-color:rgba(28,18,56,.14);background:#fff;color:#F59E0B;box-shadow:0 8px 20px -10px rgba(124,58,237,.45)}
.top-in .nav{order:2}.top-in .nav-toggle{order:4}
@media (max-width:1020px){.theme-tg{margin-left:auto;margin-right:6px}}
.wm-ink{display:none}
html[data-theme=light] .wm-light{display:none}
html[data-theme=light] .wm-ink{display:inline-block}

/* the switch animation: the new look grows as a circle from the switch */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
html.theme-swap,html.theme-swap *,html.theme-swap *::before,html.theme-swap *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease!important}

/* ---------- LIGHT (default) ---------- */
html[data-theme=light]{--line-d:rgba(28,18,56,.12)}
html[data-theme=light] .top.scrolled,html[data-theme=light] body:not(.home) .top,html[data-theme=light] .top.solid{background:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(28,18,56,.08);backdrop-filter:blur(12px)}
html[data-theme=light] .nav a:not(.btn),html[data-theme=light] .dd-btn{color:var(--ink)}
html[data-theme=light] .nav-join{color:var(--ink-2)}
html[data-theme=light] .nav-toggle i{background:var(--ink)}
@media (max-width:1020px){
  html[data-theme=light] .nav{background:rgba(255,255,255,.98);box-shadow:0 18px 30px -12px rgba(46,16,101,.25)}
  html[data-theme=light] .dd-btn{color:var(--ink-2)}
  html[data-theme=light] .nav .dd-menu a{color:var(--ink)}
}

/* home hero */
html[data-theme=light] .hero{background:linear-gradient(180deg,#FFFAF3 0%,#FBF4FF 55%,#FFF0F7 100%);color:var(--ink)}
html[data-theme=light] .hero-aura{background:radial-gradient(50% 60% at 82% 30%,rgba(167,139,250,.38),transparent 72%),radial-gradient(36% 46% at 100% 95%,rgba(244,114,182,.28),transparent 72%),radial-gradient(42% 42% at 0 0,rgba(255,196,64,.26),transparent 70%)}
html[data-theme=light] .grad{background:linear-gradient(100deg,#6D28D9,#A21CAF 52%,#DB2777);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .dw .grad,html[data-theme=light] .future .grad,html[data-theme=light] .closing .grad,html[data-theme=light] .page-hero.night .grad,html[data-theme=light] .sim-sec .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text}
html[data-theme=light] .hero .buddy,html[data-theme=light] .tagline,html[data-theme=light] .rot{color:var(--ink)}
html[data-theme=light] .rot-w{background:linear-gradient(100deg,#6D28D9,#A21CAF 52%,#DB2777);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .hero .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,18,56,.16),0 10px 24px -16px rgba(46,16,101,.45)}
html[data-theme=light] .hero .btn-ghost:hover{background:#FBF8FF}
html[data-theme=light] .price-note{color:var(--ink-2)}
html[data-theme=light] .price-note b{color:var(--ink)}
html[data-theme=light] .path li{background:#fff;box-shadow:inset 0 0 0 1px rgba(28,18,56,.1),0 6px 16px -12px rgba(46,16,101,.35);color:var(--ink)}
html[data-theme=light] .path li .i{color:var(--pink)}
html[data-theme=light] .path li+li::before{background:rgba(28,18,56,.18)}
html[data-theme=light] .hero-foot{color:var(--ink-2)}
html[data-theme=light] .hero-foot a{color:var(--violet-d)}
html[data-theme=light] .dw-chip a{background:linear-gradient(90deg,#FFF4DC,#FFE4F1);border-color:#F2B35A;color:#7C2D00}
html[data-theme=light] .dw-chip a b{color:#C2410C}
html[data-theme=light] .diya{box-shadow:inset 0 3px 0 #F4A15A,0 0 18px rgba(255,150,40,.35)}

/* dark bands that turn light (the Diwali band and Future Vision stay night) */
html[data-theme=light] .dark:not(.dw){background:linear-gradient(180deg,#F8F3FF,#FFF3F9);color:var(--ink)}
html[data-theme=light] .dark:not(.dw) .sec-head p:not(.pill):not(.eyebrow){color:var(--ink-2)}
html[data-theme=light] .dark:not(.dw) .eyebrow{color:var(--pink)}
html[data-theme=light] .dark:not(.dw) .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,18,56,.16)}
html[data-theme=light] .dark:not(.dw) .feat-lede{color:var(--ink-2)}
html[data-theme=light] .biz{background:radial-gradient(70% 70% at 90% 0,rgba(167,139,250,.32),transparent 70%),radial-gradient(60% 60% at 0 100%,rgba(244,114,182,.22),transparent 70%),#FBF8FF;color:var(--ink)}
html[data-theme=light] .biz .sec-head p:not(.pill):not(.eyebrow){color:var(--ink-2)}
html[data-theme=light] .biz .eyebrow{color:var(--pink)}
html[data-theme=light] .foot{background:#F7F2FE;color:var(--ink-2)}
html[data-theme=light] .foot a{color:var(--ink)}
html[data-theme=light] .foot-col h2{color:var(--ink)}
html[data-theme=light] .sticky{box-shadow:0 14px 30px -12px rgba(124,58,237,.6)}