/* ==========================================================================
   Octavia — second theme (Daylight)

   Additive override layer. Every rule is scoped to html[data-theme="light"],
   so with no attribute set, or data-theme="dark", this file changes nothing
   and the original design renders exactly as before.

   Specificity note: html[data-theme="light"] .x is (0,2,0) + element, which
   outranks both Tailwind's (0,1,0) utilities and the page's own single-class
   rules regardless of source order, so no !important is needed.
   ========================================================================== */

html[data-theme="light"] {
  /* ground — no neutral greys anywhere: every off-white carries a whisper of
     lilac so soft surfaces read as light, never as grey */
  --t-pg: #ffffff;
  --t-pg-2: #fbfaff;
  --t-pg-3: #f6f4fd;
  --t-tint-bg: #faf8ff;           /* lilac-white, for pills and washes */

  /* ink — neutrals carry a faint violet bias so greys read as Octavia's,
     not as a default grey ramp. fg-3 and fg-4 both clear 4.5:1 on white. */
  --t-fg: #0c0a14;
  --t-fg-2: #3d3a4a;
  --t-fg-3: #555262;
  --t-fg-4: #6e6a7c;

  /* hairlines and tints carry the brand hue rather than black, so a panel or
     a divider on white reads as soft lilac instead of grey */
  --t-line-soft: rgba(91, 33, 182, 0.07);
  --t-line: rgba(91, 33, 182, 0.1);
  --t-line-strong: rgba(91, 33, 182, 0.17);
  --t-tint: rgba(124, 58, 237, 0.035);
  --t-tint-2: rgba(124, 58, 237, 0.06);
  --t-tint-3: rgba(124, 58, 237, 0.09);

  /* brand — purple-600/700 instead of 400/500, which needs the extra
     weight to hold contrast against a white ground */
  --t-brand: #7c3aed;
  --t-brand-2: #6d28d9;
  --t-brand-ink: #5b21b6;
  --t-brand-soft: rgba(124, 58, 237, 0.08);
  --t-brand-line: rgba(124, 58, 237, 0.16);

  /* accent words: saturated violet into indigo, readable at display sizes */
  --t-grad-text: linear-gradient(90deg, #7c3aed 0%, #6d28d9 45%, #4f46e5 100%);

  /* ambient light */
  --t-glow-violet: rgba(167, 139, 250, 0.22);
  --t-glow-indigo: rgba(129, 140, 248, 0.16);

  /* soft elevation: wide blur, negative spread, violet-black at low alpha */
  --t-shadow-c: rgba(28, 20, 60, 0.1);
  --t-shadow-c2: rgba(28, 20, 60, 0.16);
  --t-shadow-1: 0 1px 2px rgba(28, 20, 60, 0.04), 0 6px 18px -10px rgba(28, 20, 60, 0.1);
  --t-shadow-2: 0 1px 2px rgba(28, 20, 60, 0.04), 0 24px 48px -28px rgba(46, 16, 101, 0.2);
  --t-shadow-3: 0 2px 6px rgba(28, 20, 60, 0.05), 0 40px 80px -40px rgba(46, 16, 101, 0.28);
  --t-shadow-hover: 0 2px 6px rgba(28, 20, 60, 0.05), 0 30px 60px -30px rgba(76, 29, 149, 0.3);

  /* cards */
  --t-card-bg: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  --t-card-border: rgba(91, 33, 182, 0.08);

  color-scheme: light;
  background-color: var(--t-pg);
}

/* --------------------------------------------------------------- 1. roots */

html[data-theme="light"] body {
  background: var(--t-pg);
  background-color: var(--t-pg);
  color: var(--t-fg);
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--t-pg-3); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.2); }
html[data-theme="light"] ::selection { background: var(--t-brand-soft); color: var(--t-fg); }

/* ------------------------------------------- 2. inverted primary controls */
/* A solid-white button is invisible on a white page, so the primary action
   flips to ink-on-white. Its paired .text-black flips with it. */

html[data-theme="light"] .bg-white { background-color: var(--t-fg); }
html[data-theme="light"] .text-black { color: #ffffff; }
html[data-theme="light"] .hover\:bg-white:hover { background-color: var(--t-fg-2); }
html[data-theme="light"] .hover\:bg-neutral-200:hover { background-color: var(--t-fg-2); }
html[data-theme="light"] .border-white { border-color: var(--t-fg); }

/* ------------------------------------------------------------ 3. surfaces */

html[data-theme="light"] .bg-black { background-color: var(--t-pg); }
html[data-theme="light"] .bg-neutral-950 { background-color: var(--t-pg); }
html[data-theme="light"] .bg-neutral-900 { background-color: var(--t-pg-2); }
html[data-theme="light"] .bg-neutral-900\/10,
html[data-theme="light"] .bg-neutral-900\/20,
html[data-theme="light"] .bg-neutral-900\/30,
html[data-theme="light"] .bg-neutral-900\/40 { background-color: var(--t-pg-2); }
html[data-theme="light"] .bg-\[\#0A0A0A\] { background-color: var(--t-pg-2); }

html[data-theme="light"] .bg-white\/5 { background-color: var(--t-tint); }
html[data-theme="light"] .bg-white\/10 { background-color: var(--t-tint-2); }
html[data-theme="light"] .bg-white\/20 { background-color: var(--t-tint-3); }
html[data-theme="light"] .bg-white\/30 { background-color: rgba(124, 58, 237, 0.14); }
html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(124, 58, 237, 0.02); }
html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(124, 58, 237, 0.03); }

html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: var(--t-tint); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: var(--t-tint-2); }
html[data-theme="light"] .group:hover .group-hover\:bg-white\/20 { background-color: var(--t-tint-3); }

html[data-theme="light"] .bg-neutral-800 { background-color: var(--t-pg-3); }
html[data-theme="light"] .bg-neutral-800\/50 { background-color: var(--t-pg-3); }
html[data-theme="light"] .bg-black\/20 { background-color: rgba(124, 58, 237, 0.05); }
html[data-theme="light"] .bg-black\/70 { background-color: rgba(255, 255, 255, 0.82); }

/* Section-edge gradient ramps fade a dark ground out; they have to fade a light
   one instead. Tailwind's from-* sets three custom properties including a
   position, so each has to be restated in full rather than just the colour.
   (from-neutral-900/60 and via-neutral-950/80 appear in the markup but were
   never compiled into the stylesheet, so there is nothing to override.) */
html[data-theme="light"] .from-neutral-950 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .from-black {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .to-neutral-950 {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}
/* the one from-white is a decorative sheen, which has to darken to stay visible */
html[data-theme="light"] .from-white {
  --tw-gradient-from: rgba(124, 58, 237, 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(124, 58, 237, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .text-white\/\[0\.03\] { color: rgba(91, 33, 182, 0.04); }

/* backdrop panels that leaned on a dark blur */
html[data-theme="light"] .backdrop-blur-xl,
html[data-theme="light"] .backdrop-blur-md { backdrop-filter: blur(16px) saturate(140%); }

/* ---------------------------------------------------------------- 4. text */

html[data-theme="light"] .text-white { color: var(--t-fg); }
html[data-theme="light"] .text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"] .text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"] .text-neutral-500 { color: var(--t-fg-4); }
html[data-theme="light"] .text-white\/60 { color: var(--t-fg-3); }
html[data-theme="light"] .text-white\/70 { color: var(--t-fg-3); }
html[data-theme="light"] .text-white\/80 { color: var(--t-fg-2); }
html[data-theme="light"] .text-white\/90,
html[data-theme="light"] .text-white\/95 { color: var(--t-fg); }
html[data-theme="light"] .text-white\/40 { color: var(--t-fg-4); }

html[data-theme="light"] .hover\:text-white:hover { color: var(--t-fg); }
html[data-theme="light"] .group:hover .group-hover\:text-white { color: var(--t-fg); }

/* purple accent text needs more weight on white */
html[data-theme="light"] .text-purple-400,
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-200,
html[data-theme="light"] .text-purple-100 { color: var(--t-brand); }
html[data-theme="light"] .text-purple-500 { color: var(--t-brand-2); }
html[data-theme="light"] .text-\[\#A855F7\] { color: var(--t-brand-2); }
html[data-theme="light"] .text-\[\#E9D5FF\] { color: var(--t-brand); }

/* ------------------------------------------------------------- 5. borders */

html[data-theme="light"] .border-white\/5 { border-color: var(--t-line-soft); }
html[data-theme="light"] .border-white\/10 { border-color: var(--t-line); }
html[data-theme="light"] .border-white\/20 { border-color: var(--t-line-strong); }
html[data-theme="light"] .border-white\/40 { border-color: rgba(91, 33, 182, 0.26); }
html[data-theme="light"] .border-white\/70 { border-color: rgba(91, 33, 182, 0.4); }

html[data-theme="light"] .hover\:border-white\/10:hover { border-color: var(--t-line); }
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: var(--t-line-strong); }
html[data-theme="light"] .group:hover .group-hover\:border-white\/20 { border-color: var(--t-line-strong); }
html[data-theme="light"] .group:hover .group-hover\:border-white\/70 { border-color: rgba(91, 33, 182, 0.4); }

html[data-theme="light"] .border-purple-500\/10 { border-color: rgba(124, 58, 237, 0.14); }
html[data-theme="light"] .border-purple-500\/20 { border-color: rgba(124, 58, 237, 0.2); }
html[data-theme="light"] .border-purple-500\/30 { border-color: rgba(124, 58, 237, 0.28); }
html[data-theme="light"] .border-purple-500\/50 { border-color: rgba(124, 58, 237, 0.45); }

html[data-theme="light"] .bg-purple-500\/5 { background-color: rgba(124, 58, 237, 0.05); }
html[data-theme="light"] .bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.08); }
html[data-theme="light"] .bg-purple-500\/20 { background-color: rgba(124, 58, 237, 0.12); }
html[data-theme="light"] .bg-purple-500\/30 { background-color: rgba(124, 58, 237, 0.16); }

/* ------------------------------------------------------- 6. hero + header */

html[data-theme="light"] .hero-title { color: var(--t-fg); }
/* the headline's white-to-lilac ramp becomes ink-to-brand */
html[data-theme="light"] .hero-title span {
  background-image: linear-gradient(to bottom right, var(--t-fg), #4c1d95, var(--t-brand));
}
html[data-theme="light"] .hero-subtitle { color: var(--t-fg-2); }

/* The hero's WebGL layer paints an opaque black field, so swap it for a
   light wash rather than leaving a black band at the top of a white page. */
html[data-theme="light"] .unicorn-scene,
html[data-theme="light"] .unicorn-placeholder { display: none; }
html[data-theme="light"] .unicorn-stage { background: transparent; }
html[data-theme="light"] .hero-header {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(124, 58, 237, 0.12), transparent 60%),
    radial-gradient(80% 60% at 85% 10%, rgba(96, 165, 250, 0.08), transparent 62%),
    var(--t-pg);
}

html[data-theme="light"] .glass { border-bottom: 1px solid var(--t-line-soft); }
html[data-theme="light"] #navbar-bg { border-bottom-color: var(--t-line-soft); }
html[data-theme="light"] .fu-row { border-bottom: 1px solid var(--t-line-soft); }
html[data-theme="light"] .fu-sep { background: rgba(124, 58, 237, 0.14); }
html[data-theme="light"] .fu-link iconify-icon { color: var(--t-brand); }
html[data-theme="light"] .fu-link:hover { color: var(--t-brand-2); }

/* ------------------------------------------------- 7. the dark app mock */
/* The product UI itself is a dark interface. It stays dark inside the light
   page, the way a screenshot would, so these restore its own palette. */

html[data-theme="light"] .hero-mock { color: #ffffff; }
html[data-theme="light"] .hero-mock .text-white { color: #ffffff; }
html[data-theme="light"] .hero-mock .text-neutral-300 { color: #d4d4d4; }
html[data-theme="light"] .hero-mock .text-neutral-400 { color: #a3a3a3; }
html[data-theme="light"] .hero-mock .text-neutral-500 { color: #737373; }
html[data-theme="light"] .hero-mock .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] .hero-mock .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
html[data-theme="light"] .hero-mock .bg-white\/30 { background-color: rgba(255, 255, 255, 0.3); }
html[data-theme="light"] .hero-mock .bg-white\/\[0\.03\] { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="light"] .hero-mock .border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] .hero-mock .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="light"] .hero-mock .text-purple-400,
html[data-theme="light"] .hero-mock .text-purple-100 { color: #c084fc; }
html[data-theme="light"] .hero-mock .bg-white { background-color: #ffffff; }
/* its sidebar hovers: the restores above outrank Tailwind's hover:text-white,
   and the page-level hover tints are dark ink, invisible on the dark mock */
html[data-theme="light"] .hero-mock .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] .hero-mock .hover\:text-white:hover { color: #ffffff; }

/* --------------------------------------------- 8. named section families */

/* feature strip */
html[data-theme="light"] .fs-section { background: var(--t-pg); }
html[data-theme="light"] .fs-card {
  background: var(--t-pg);
  border: 1px solid var(--t-line);
  box-shadow: 0 1px 0 rgba(28, 20, 60, 0.03), 0 30px 80px -48px var(--t-shadow-c2);
}
html[data-theme="light"] .fs-card:hover {
  box-shadow: 0 1px 0 rgba(28, 20, 60, 0.04), 0 36px 90px -44px rgba(124, 58, 237, 0.3);
}
html[data-theme="light"] .fs-item:hover { background: var(--t-tint); }
html[data-theme="light"] .fs-item:hover .fs-title { color: var(--t-fg); }
html[data-theme="light"] .fs-title { color: var(--t-fg); }
html[data-theme="light"] .fs-icon { color: var(--t-brand); }

/* demo card */
html[data-theme="light"] .demo-card {
  background: var(--t-pg);
  border: 1px solid var(--t-line);
  box-shadow: 0 40px 110px -45px var(--t-shadow-c2), 0 0 26px -12px var(--t-shadow-c);
}
html[data-theme="light"] .demo-card:hover {
  border-color: var(--t-line-strong);
  box-shadow: 0 46px 120px -42px rgba(28, 20, 60, 0.22);
}
html[data-theme="light"] .demo-play {
  color: var(--t-fg);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--t-line-strong);
  box-shadow: 0 0 50px -16px var(--t-shadow-c2);
}
html[data-theme="light"] .demo-card:hover .demo-play { background: #ffffff; }
html[data-theme="light"] .demo-caption { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9); }

/* workflow */
html[data-theme="light"] .wf-section { background: var(--t-pg); }
html[data-theme="light"] .wf-title { color: var(--t-fg); }
html[data-theme="light"] .wf-accent {
  background-image: linear-gradient(to right, var(--t-brand-2), var(--t-brand), #4c1d95);
}
html[data-theme="light"] .wf-sub { color: var(--t-fg-3); }
html[data-theme="light"] .wf-bubble {
  color: var(--t-fg);
  background: #f5f3ff;
  border: 3px solid #ddd6fe;
}
html[data-theme="light"] .wf-num { color: #ffffff; background: var(--t-brand); }
html[data-theme="light"] .wf-node:hover .wf-bubble iconify-icon { color: var(--t-brand-2); }
html[data-theme="light"] .wf-label h3 { color: var(--t-fg); }

/* input / output */
html[data-theme="light"] .io-section { background: var(--t-pg); }
html[data-theme="light"] .io-title { color: var(--t-fg); }
html[data-theme="light"] .io-accent {
  background-image: linear-gradient(to right, var(--t-brand-2), var(--t-brand), #4c1d95);
}
html[data-theme="light"] .io-source {
  box-shadow: 0 1px 0 rgba(28, 20, 60, 0.04), 0 40px 80px -50px rgba(124, 58, 237, 0.45);
}
html[data-theme="light"] .io-source-icon {
  color: var(--t-brand-2);
  border: 1px solid var(--t-line);
  background: var(--t-tint);
}
html[data-theme="light"] .io-source-label { color: var(--t-fg); }
html[data-theme="light"] .io-card {
  border: 1px solid var(--t-line);
  background: linear-gradient(162deg, rgba(124, 58, 237, 0.03), rgba(124, 58, 237, 0.008));
}
html[data-theme="light"] .io-card h3 { color: var(--t-fg); }

/* pricing */
html[data-theme="light"] .pricing-grid > div {
  background: var(--t-pg);
  box-shadow: 0 1px 0 0 rgba(28, 20, 60, 0.04);
}
html[data-theme="light"] .pricing-grid > div:hover {
  box-shadow: 0 1px 0 0 rgba(28, 20, 60, 0.05), 0 30px 70px -34px var(--t-shadow-c2),
    0 0 60px -22px rgba(var(--accent), 0.4);
}

/* night-map band */
html[data-theme="light"] .nm-section { background: var(--t-pg); }
html[data-theme="light"] .nm-section::before {
  background: linear-gradient(to bottom, var(--t-pg), rgba(255, 255, 255, 0));
}
html[data-theme="light"] .nm-fade-left {
  background: linear-gradient(to right, var(--t-pg) 0%, rgba(255, 255, 255, 0.6) 35%, transparent 100%);
}
html[data-theme="light"] .nm-fade-bottom {
  background: linear-gradient(to top, var(--t-pg) 0%, transparent 45%);
}
html[data-theme="light"] .nm-title { color: var(--t-fg); }
html[data-theme="light"] .nm-btn {
  background: var(--t-fg);
  color: #ffffff;
  box-shadow: 0 10px 24px -12px var(--t-shadow-c2);
}
html[data-theme="light"] .nm-btn:hover { box-shadow: 0 14px 30px -12px rgba(28, 20, 60, 0.3); }
html[data-theme="light"] .nm-band {
  border-top: 1px solid var(--t-line-soft);
  background: rgba(124, 58, 237, 0.03);
}
/* the globe artwork is a dark-field render; keep it on its own dark plate */
html[data-theme="light"] .nm-globe-wrap { background: #050505; border-radius: 1rem; }

/* video modal stays dark — it frames video */
html[data-theme="light"] .yt-modal-inner {
  box-shadow: 0 40px 120px -20px rgba(28, 20, 60, 0.45), 0 0 90px -30px rgba(124, 58, 237, 0.3);
}

/* accordion / FAQ */
html[data-theme="light"] .accordion-content { color: var(--t-fg-3); }

/* ------------------------------------------------------ 9. footer + menu */

html[data-theme="light"] .oc-foot { background: var(--t-pg-2); color: var(--t-fg); }
html[data-theme="light"] .oc-foot-signup input {
  background: var(--t-pg);
  border: 1px solid var(--t-line);
  color: var(--t-fg);
}
html[data-theme="light"] .oc-foot-go { background: var(--t-fg); color: #ffffff; }
html[data-theme="light"] .oc-foot-social { background: var(--t-tint); }
html[data-theme="light"] .oc-foot-card-glyph { color: rgba(255, 255, 255, 0.16); }
html[data-theme="light"] .oc-foot-card-meta { border-top: 1px solid rgba(91, 33, 182, 0.14); }
html[data-theme="light"] .oc-foot-mark { color: rgba(91, 33, 182, 0.16); }
html[data-theme="light"] .oc-foot a { color: inherit; }

html[data-theme="light"] .mnav { background: var(--t-pg); color: var(--t-fg); }
html[data-theme="light"] .mnav-inner { background: var(--t-pg); }
html[data-theme="light"] .mnav-sec { color: var(--t-fg-4); }
html[data-theme="light"] .mnav-link { color: var(--t-fg); border-color: var(--t-line-soft); }
html[data-theme="light"] .mnav-link:hover { background: var(--t-tint); }
html[data-theme="light"] .nav-burger { color: var(--t-fg); }

/* --------------------------------------------------- 10. the theme toggle */
/* A sliding switch: moon on the left, sun on the right, and a knob that rests
   under whichever theme is showing. The knob glides on the same slow curve as
   the page wave (assets/octavia-theme.js), so the control and the page move
   as one. Unscoped on purpose: the switch exists in both themes. */

:root {
  --tt-ease: cubic-bezier(0.45, 0, 0.4, 1);  /* same curve as WAVE_EASE */
  --tt-glide: 1.2s;                          /* knob travel */
  --tt-fade: 0.9s;                           /* FADE_MS: no-view-transition fallback */
}

.theme-toggle {
  --tt-w: 56px;
  --tt-h: 30px;
  --tt-k: 24px;                                    /* knob; leaves a 2px inset */
  --tt-travel: calc(var(--tt-w) - var(--tt-k) - 6px);
  --tt-c: calc(2px + var(--tt-k) / 2);             /* knob centre, from the left */
  position: relative;
  display: inline-block;
  width: var(--tt-w);
  height: var(--tt-h);
  flex: none;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--tt-k);
  height: var(--tt-k);
  border-radius: 50%;
  background-color: rgba(167, 139, 250, 0.22);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.3), 0 0 18px -3px rgba(168, 85, 247, 0.6);
  transform: translateX(0);
  transition:
    transform var(--tt-glide) var(--tt-ease),
    background-color var(--tt-glide) var(--tt-ease),
    box-shadow var(--tt-glide) var(--tt-ease);
}

.theme-toggle iconify-icon {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  pointer-events: none;
  transition:
    color var(--tt-glide) var(--tt-ease),
    opacity var(--tt-glide) var(--tt-ease),
    transform var(--tt-glide) var(--tt-ease);
}

.theme-toggle .ti-moon { left: var(--tt-c); }
.theme-toggle .ti-sun { left: calc(var(--tt-c) + var(--tt-travel)); }

/* dark: knob under the moon; the sun waits, dimmed and turned back */
.theme-toggle .ti-moon {
  color: #ffffff;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.theme-toggle .ti-sun {
  color: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.07);
}
.theme-toggle:hover .ti-sun { color: rgba(255, 255, 255, 0.7); }

.theme-toggle:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}

/* light: a recessed track and a white knob carried over to the sun */
html[data-theme="light"] .theme-toggle {
  border-color: var(--t-line);
  background-color: var(--t-pg-3);
  box-shadow: inset 0 1px 2px rgba(28, 20, 60, 0.08);
}
html[data-theme="light"] .theme-toggle:hover { border-color: var(--t-brand-line); }
html[data-theme="light"] .theme-toggle:focus-visible { outline-color: var(--t-brand); }

html[data-theme="light"] .theme-toggle::before {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(28, 20, 60, 0.05), 0 3px 10px -3px rgba(46, 16, 101, 0.32);
  transform: translateX(var(--tt-travel));
}
html[data-theme="light"] .theme-toggle .ti-sun {
  color: var(--t-brand-2);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
html[data-theme="light"] .theme-toggle .ti-moon {
  color: var(--t-fg-4);
  transform: translate(-50%, -50%) rotate(40deg) scale(0.8);
}
html[data-theme="light"] .theme-toggle:hover .ti-moon { color: var(--t-fg-2); }

/* phones: the navbar is tight, so the switch shrinks a step */
@media (max-width: 400px) {
  .theme-toggle { --tt-w: 48px; --tt-h: 28px; --tt-k: 22px; }
}

/* smallest phones: no room for a track, so it folds to a round button. The
   travel collapses to zero, both icons share the knob, and the change shows
   as the moon turning away while the sun turns in. */
@media (max-width: 359px) {
  .theme-toggle { --tt-w: 30px; --tt-h: 30px; --tt-k: 24px; }
  .theme-toggle .ti-sun,
  html[data-theme="light"] .theme-toggle .ti-moon { opacity: 0; }
  html[data-theme="light"] .theme-toggle .ti-sun { opacity: 1; }
}

/* The theme change itself. While a view transition runs, the page underneath
   is two snapshots: the new theme grows as a soft disc from the switch, and
   the old theme parts a little ahead of it, so the seam between them is a
   glow of violet (--tt-band, set by the script) rather than a grey smear of
   the two themes mixed. The script animates both masks on one clock. */
html.theme-wave::view-transition {
  background-color: var(--tt-band, transparent);
}
html.theme-wave::view-transition-old(root),
html.theme-wave::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  mask-repeat: no-repeat;
}
html.theme-wave::view-transition-new(root) {
  /* opaque out to 70% of the radius (CORE in the script), then a long falloff */
  mask-image: radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0.82) 76%, rgba(0, 0, 0, 0.42) 87%, transparent 100%);
  mask-size: 0 0;
}
html.theme-wave::view-transition-old(root) {
  /* the same falloff, cut out of a full-viewport layer */
  mask-image:
    radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0.82) 76%, rgba(0, 0, 0, 0.42) 87%, transparent 100%),
    linear-gradient(#000, #000);
  mask-size: 0 0, 100% 100%;
  mask-position: 0 0, 0 0;
  mask-composite: exclude;
}

/* reduced motion: a short crossfade, nothing travels */
html.theme-soft::view-transition-old(root),
html.theme-soft::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: ease;
}

/* Elements with their own short transitions would otherwise change at their
   own pace inside the new snapshot. Hold them still; the wave carries them. */
html.theme-switching :not(.theme-toggle, .theme-toggle *),
html.theme-switching :not(.theme-toggle)::before,
html.theme-switching :not(.theme-toggle)::after {
  transition: none !important;
}

/* No view transitions: every colour fades on one shared clock instead. */
html.theme-fading,
html.theme-fading :not(.theme-toggle, .theme-toggle *),
html.theme-fading :not(.theme-toggle)::before,
html.theme-fading :not(.theme-toggle)::after {
  transition:
    background-color var(--tt-fade) var(--tt-ease),
    color var(--tt-fade) var(--tt-ease),
    border-color var(--tt-fade) var(--tt-ease),
    box-shadow var(--tt-fade) var(--tt-ease),
    fill var(--tt-fade) var(--tt-ease),
    stroke var(--tt-fade) var(--tt-ease) !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle::before,
  .theme-toggle iconify-icon { transition: none; }
}

/* ------------------------------------------------ 11. foundation: soft system */

/* Saturated fills keep white text. The global .text-white -> ink swap is right
   for text on the page ground and wrong for text on a purple button or badge. */
html[data-theme="light"] .bg-purple-600.text-white,
html[data-theme="light"] .bg-purple-600 .text-white,
html[data-theme="light"] .from-purple-600.text-white,
html[data-theme="light"] .from-purple-600 .text-white,
html[data-theme="light"] .hover\:bg-purple-500.text-white:hover,
html[data-theme="light"] .hover\:bg-purple-600.text-white:hover,
html[data-theme="light"] .group:hover .group-hover\:bg-purple-500.group-hover\:text-white { color: #ffffff; }

/* The ambient glows were blended with `screen`, and screen against a white
   ground always yields white, so every wash on the page vanished in Daylight.
   Multiply lets the same lilac blobs tint the white instead. The app mock is a
   dark island and keeps its screen blend. */
html[data-theme="light"] .mix-blend-screen:not(.hero-mock *) { mix-blend-mode: multiply; }

/* Accent words: the purple-400 family washes out on white. The hero headline
   has its own ink-to-violet ramp and is left alone. */
html[data-theme="light"] .bg-clip-text.text-transparent:not(.hero-title *) {
  background-image: var(--t-grad-text);
}

/* Tailwind's large shadows were tuned for a black ground; on white they read as
   grey smudges. Swap them for the soft elevation ramp. */
html[data-theme="light"] .shadow-lg:not(.hero-mock *) { box-shadow: var(--t-shadow-1); }
html[data-theme="light"] .shadow-xl:not(.hero-mock *) { box-shadow: var(--t-shadow-2); }
html[data-theme="light"] .shadow-2xl:not(.hero-mock *) { box-shadow: var(--t-shadow-3); }

/* the app mock's credit figure keeps its own violet */
html[data-theme="light"] .hero-mock .text-\[\#A855F7\] { color: #a855f7; }

/* ==================== soft daylight: section layers ==================== */

/* ---------------------------------------------------------------------------
   00-utilities: generated light translation of dark Tailwind utilities (every page but home)
   --------------------------------------------------------------------------- */
/* Generated by gen-utilities.js from 411 pages — do not edit by hand.
   bg 61, border 17, divide 1, from 15, text 97, shadow 18, via 11, placeholder 2, ring 1, to 9; 286 colour utilities already light-safe. */
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-\[\#050505\], .bg-\[\#060606\], .bg-\[\#0A0A0A\], .bg-\[\#0c0c0c\], .bg-\[\#111\], .bg-black):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: #ffffff; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-\[\#0A0A0A\]\/80, .bg-\[\#0A0A0A\]\/90, .bg-neutral-900, .bg-neutral-900\/80, .bg-neutral-950\/90):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: #fbfaff; }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-amber-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(254, 243, 199, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-amber-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(254, 243, 199, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-black\/20, .bg-neutral-900\/10, .bg-neutral-900\/20, .bg-slate-400\/10):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.03); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-black\/30, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-neutral-900\/30, .bg-neutral-900\/40, .bg-neutral-900\/50, .bg-neutral-900\/60):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(251, 250, 255, 0.86); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-blue-900\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(219, 234, 254, 0.64); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-blue-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(219, 234, 254, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-cyan-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(207, 250, 254, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-emerald-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(209, 250, 229, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-emerald-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(209, 250, 229, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-green-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(220, 252, 231, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-indigo-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(224, 231, 255, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-neutral-600:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: #d8cff7; }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-neutral-700:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: #efebfb; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-neutral-800, .bg-neutral-800\/80):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: #f6f4fd; }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-pink-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(252, 231, 243, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-purple-900\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.16); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-purple-900\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.64); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-purple-950\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.32); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-purple-950\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-red-950\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(254, 226, 226, 0.32); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-red-950\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(254, 226, 226, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-rose-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(255, 228, 230, 0.48); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-violet-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.07); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.bg-white\/20, .bg-white\/50):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.1); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.035); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-white\/\[0\.02\]:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.02); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-white\/\[0\.03\]:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.021); }
html[data-theme="light"]:where(:not([data-page="home"])) .bg-white\/\[0\.06\]:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.042); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.border-\[\#0A0A0A\], .border-neutral-700, .border-neutral-800, .border-neutral-900, .border-white\/10):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: var(--t-line); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.border-slate-400\/20, .border-white\/20):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: var(--t-line-strong); }
html[data-theme="light"]:where(:not([data-page="home"])) .border-white\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: rgba(91, 33, 182, 0.28); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.border-white\/5, .border-white\/\[0\.06\]):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: var(--t-line-soft); }
html[data-theme="light"]:where(:not([data-page="home"])) .divide-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) > :not([hidden]) ~ :not([hidden]) { border-color: var(--t-line-soft); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.from-\[\#050505\], .from-\[\#060606\]):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: #ffffff var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-black\/80:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(255, 255, 255, 0.8) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-black\/90:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(255, 255, 255, 0.9) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-emerald-950\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(209, 250, 229, 0.64) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-neutral-900:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: #fbfaff var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-neutral-950\/60:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(255, 255, 255, 0.6) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-purple-900\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(237, 233, 254, 0.16) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-purple-900\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(237, 233, 254, 0.32) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-purple-900\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(237, 233, 254, 0.48) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-purple-900\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(237, 233, 254, 0.64) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(167, 139, 250, 0.05) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .from-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(167, 139, 250, 0.1) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.from-white\/\[0\.02\], .from-white\/\[0\.04\]):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-from: rgba(167, 139, 250, 0.02) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-amber-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #b45309; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-blue-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #1d4ed8; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-cyan-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #0e7490; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-emerald-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #047857; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-indigo-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #4338ca; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-pink-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #be185d; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-purple-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #6d28d9; }
html[data-theme="light"]:where(:not([data-page="home"])) .group\/item:hover .group-hover\/item\:text-rose-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #be123c; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:bg-blue-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(219, 234, 254, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:bg-purple-900\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(237, 233, 254, 0.7); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:bg-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { background-color: rgba(124, 58, 237, 0.1); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:border-purple-900:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: rgba(109, 40, 217, 0.3); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:border-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: var(--t-line-strong); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:border-white\/70:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: rgba(91, 33, 182, 0.28); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-amber-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #b45309; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-blue-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #1d4ed8; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-blue-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #2563eb; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-cyan-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #0e7490; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-emerald-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #047857; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-green-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #15803d; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-neutral-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: var(--t-fg-2); }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-orange-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #c2410c; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-pink-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #db2777; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover :is(.group-hover\:text-purple-200, .group-hover\:text-purple-300, .group-hover\:text-purple-400, .group-hover\:text-violet-300):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #6d28d9; }
html[data-theme="light"]:where(:not([data-page="home"])) .group:hover .group-hover\:text-purple-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #7c3aed; }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:bg-neutral-200:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { background-color: #efebfb; }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:bg-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { background-color: rgba(124, 58, 237, 0.07); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:bg-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { background-color: rgba(124, 58, 237, 0.1); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:bg-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { background-color: rgba(124, 58, 237, 0.035); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:bg-white\/\[0\.02\]:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { background-color: rgba(124, 58, 237, 0.02); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:border-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { border-color: var(--t-line); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:border-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { border-color: var(--t-line-strong); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:border-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { border-color: var(--t-line-soft); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:shadow-purple-900\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)):hover { --tw-shadow-color: rgba(46, 16, 101, 0.16); --tw-shadow: var(--tw-shadow-colored); }
html[data-theme="light"]:where(:not([data-page="home"])) .hover\:text-neutral-300:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)):hover { color: var(--t-fg-2); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.hover\:text-purple-300, .hover\:text-purple-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)):hover { color: #6d28d9; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.placeholder-neutral-500, .placeholder-neutral-600):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *))::placeholder { color: var(--t-fg-4); }
html[data-theme="light"]:where(:not([data-page="home"])) .ring-white\/20:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-ring-color: var(--t-line-strong); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.shadow-amber-900\/20, .shadow-blue-900\/20, .shadow-cyan-900\/20, .shadow-emerald-900\/20, .shadow-fuchsia-900\/20, .shadow-green-900\/20, .shadow-indigo-900\/20, .shadow-lime-900\/20, .shadow-orange-900\/20, .shadow-pink-900\/20, .shadow-purple-900\/20, .shadow-red-900\/20, .shadow-rose-900\/20, .shadow-teal-900\/20, .shadow-violet-900\/20, .shadow-yellow-900\/20):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-shadow-color: rgba(46, 16, 101, 0.08); --tw-shadow: var(--tw-shadow-colored); }
html[data-theme="light"]:where(:not([data-page="home"])) .shadow-black:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-shadow-color: rgba(46, 16, 101, 0.22); --tw-shadow: var(--tw-shadow-colored); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-amber-300, .text-amber-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #b45309; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-black, .text-neutral-700, .text-neutral-900):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: rgba(91, 33, 182, 0.14); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-blue-300, .text-blue-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #1d4ed8; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-blue-500, .text-blue-500\/30):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #2563eb; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-cyan-300, .text-cyan-400, .text-cyan-500):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #0e7490; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-emerald-300, .text-emerald-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #047857; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-fuchsia-300, .text-fuchsia-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #a21caf; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-green-300, .text-green-400, .text-green-500):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #15803d; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-indigo-300, .text-indigo-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #4338ca; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-lime-300, .text-lime-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #4d7c0f; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-neutral-300, .text-slate-300, .text-white\/70, .text-white\/75, .text-white\/80):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: var(--t-fg-2); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-neutral-400, .text-white\/55, .text-white\/60, .text-white\/65):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: var(--t-fg-3); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-neutral-500, .text-neutral-600, .text-white\/15, .text-white\/20, .text-white\/40):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: var(--t-fg-4); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-orange-300, .text-orange-400, .text-orange-500):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #c2410c; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-pink-300, .text-pink-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #be185d; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-pink-500, .text-pink-500\/30):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #db2777; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-purple-200, .text-purple-300, .text-purple-400, .text-purple-400\/20, .text-purple-400\/60, .text-purple-400\/70, .text-violet-300, .text-violet-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #6d28d9; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-purple-500, .text-purple-500\/30, .text-purple-500\/70, .text-purple-500\/80):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #7c3aed; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-red-200, .text-red-300, .text-red-400, .text-red-400\/20, .text-red-400\/70):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #b91c1c; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-rose-300, .text-rose-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #be123c; }
html[data-theme="light"]:where(:not([data-page="home"])) .text-rose-500\/70:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #e11d48; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-sky-300, .text-sky-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #0369a1; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-teal-300, .text-teal-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #0f766e; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-white\/90, .text-white\/95):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: var(--t-fg); }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.text-yellow-300, .text-yellow-400):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *, .bg-blue-500 *, .bg-pink-500 *, .bg-green-500 *, .from-blue-600 *, .bg-cyan-500 *, .bg-emerald-500 *, .bg-teal-500 *, .from-cyan-600 *, .bg-lime-500 *, .from-green-600 *, .bg-orange-500 *, .bg-red-500 *, .from-orange-600 *, .bg-fuchsia-500 *, .bg-purple-500 *, .from-pink-600 *, .from-purple-600 *, .bg-purple-600 *)) { color: #a16207; }
html[data-theme="light"]:where(:not([data-page="home"])) :is(.to-\[\#050505\], .to-neutral-950):where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: #ffffff var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-\[\#050505\]\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0.3) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-neutral-500:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: #e2dcf9 var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-neutral-900\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(251, 250, 255, 0.4) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-neutral-900\/60:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(251, 250, 255, 0.6) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(167, 139, 250, 0.05) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(167, 139, 250, 0.025) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .to-white\/\[0\.01\]:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(167, 139, 250, 0.02) var(--tw-gradient-to-position); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-\[\#050505\]\/45:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-\[\#050505\]\/50:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-\[\#050505\]\/60:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-\[\#060606\]\/70:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-black\/30:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-black\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-neutral-200:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #efebfb var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-neutral-900\/60:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(251, 250, 255, 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-white\/0:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(167, 139, 250, 0.02) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"]:where(:not([data-page="home"])) .via-white\/10:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(167, 139, 250, 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to); }
@media (min-width: 1024px) {
  html[data-theme="light"]:where(:not([data-page="home"])) .lg\:border-white\/5:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { border-color: var(--t-line-soft); }
  html[data-theme="light"]:where(:not([data-page="home"])) .lg\:via-\[\#060606\]\/40:where(:not(body > nav, body > nav *, #mobile-menu, #mobile-menu *, .oc-foot, .oc-foot *, .hero-mock, .hero-mock *, .demo-card *, .yt-modal *, [data-dark-island], [data-dark-island] *, [data-page="pricing"] body > header, [data-page="pricing"] body > header *)) { --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); }
}

/* ---------------------------------------------------------------------------
   g1-nav: navigation, follow-us row, dropdowns, mobile menu, logo marquee
   --------------------------------------------------------------------------- */
/* ==========================================================================
   g1-nav — Daylight treatment for the navigation bar, follow-us row,
   Features / Showcase dropdowns, theme toggle + CTAs, burger, mobile menu,
   and the logo marquee band under the hero.

   Every selector starts with html[data-theme="light"]; treatment only.
   ========================================================================== */

/* ------------------------------------------------------------ 1. the bar */

/* At the top of the page the bar sits on the hero wash: a whisper of white
   glass so the follow-us strip and the main row read as one surface. */
html[data-theme="light"] body > nav #navbar-bg {
  background-color: rgba(255, 255, 255, 0.28);
  border-bottom-color: var(--t-line-soft);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Scrolled: the page script swaps bg-transparent for bg-black/50, which on
   white became a muddy grey slab. Soft frosted white glass instead. The
   backdrop is flattened (contrast) and lifted (brightness) under the white
   veil, so the glass stays near-white while it passes over the dark hero
   mock, and still reads as translucent over the white page. */
html[data-theme="light"] body > nav #navbar-bg.bg-black\/50 {
  background-color: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(140%) contrast(0.55) brightness(1.6);
  backdrop-filter: blur(24px) saturate(140%) contrast(0.55) brightness(1.6);
  border-bottom-color: var(--t-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px -22px rgba(46, 16, 101, 0.22);
}

/* Mobile menu open: octavia-mobile.css paints the bar #050505. The panel
   below carries its own top hairline, so the bar drops its bottom one to
   avoid a doubled rule at the junction. */
html[data-theme="light"] body.mnav-open > nav #navbar-bg {
  background-color: rgba(255, 255, 255, 0.97);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------ 2. follow-us row */

html[data-theme="light"] body > nav .fu-row {
  border-bottom-color: var(--t-line-soft);
}
html[data-theme="light"] body > nav .fu-label { color: var(--t-fg-3); }
html[data-theme="light"] body > nav .fu-sep { background: var(--t-line-strong); }
html[data-theme="light"] body > nav .fu-link { color: var(--t-fg-2); }
html[data-theme="light"] body > nav .fu-link iconify-icon { color: var(--t-brand); }
html[data-theme="light"] body > nav .fu-link:hover { color: var(--t-brand-2); }
html[data-theme="light"] body > nav .fu-link:hover iconify-icon { color: var(--t-brand-2); }

/* ------------------------------------------------------------- 3. logo */

/* The wordmark is a white PNG; brightness(0) renders it as solid ink while
   keeping the alpha edge, so it stays crisp. */
html[data-theme="light"] body > nav img[alt="LUNARTECH"] {
  filter: brightness(0);
}
html[data-theme="light"] body > nav .nav-logo a:hover img[alt="LUNARTECH"] {
  filter: brightness(0) drop-shadow(0 0 10px rgba(124, 58, 237, 0.28));
}
html[data-theme="light"] body > nav .nav-logo .bg-purple-500\/20 {
  background-color: rgba(167, 139, 250, 0.22);
}

/* ------------------------------------------------------- 4. centre links */

html[data-theme="light"] body > nav nav.hidden > a,
html[data-theme="light"] body > nav nav.hidden > .group > button { color: var(--t-fg-3); }
html[data-theme="light"] body > nav nav.hidden > a:hover,
html[data-theme="light"] body > nav nav.hidden > .group:hover > button { color: var(--t-fg); }

/* --------------------------------------------------- 5. dropdown panels */

html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(129, 140, 248, 0.06), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .border-white\/5 { border-color: var(--t-line-soft); }

/* menu items: lilac hover tint */
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover {
  background-color: rgba(124, 58, 237, 0.045);
}
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .text-white { color: var(--t-fg); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .text-neutral-500 { color: var(--t-fg-4); }

/* capability-hued icon tiles: hue at ~9% fill, ~18% border, 600-shade icon */
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.18); color: #7c3aed; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-pink-500\/10 { background-color: rgba(219, 39, 119, 0.08); border-color: rgba(219, 39, 119, 0.18); color: #db2777; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18); color: #2563eb; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-amber-500\/10 { background-color: rgba(217, 119, 6, 0.09); border-color: rgba(217, 119, 6, 0.2); color: #d97706; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.18); color: #059669; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-cyan-500\/10 { background-color: rgba(8, 145, 178, 0.08); border-color: rgba(8, 145, 178, 0.18); color: #0891b2; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-rose-500\/10 { background-color: rgba(225, 29, 72, 0.08); border-color: rgba(225, 29, 72, 0.18); color: #e11d48; }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .bg-indigo-500\/10 { background-color: rgba(79, 70, 229, 0.08); border-color: rgba(79, 70, 229, 0.18); color: #4f46e5; }

/* tile on item hover: a touch deeper */
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-pink-500\/10 { background-color: rgba(219, 39, 119, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-amber-500\/10 { background-color: rgba(217, 119, 6, 0.14); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-cyan-500\/10 { background-color: rgba(8, 145, 178, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-rose-500\/10 { background-color: rgba(225, 29, 72, 0.13); }
html[data-theme="light"] body > nav .bg-\[\#0A0A0A\] .group\/item:hover .bg-indigo-500\/10 { background-color: rgba(79, 70, 229, 0.13); }

/* item title on hover takes its hue at the 700 shade */
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-purple-300 { color: #6d28d9; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-pink-300 { color: #be185d; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-blue-300 { color: #1d4ed8; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-amber-300 { color: #b45309; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-emerald-300 { color: #047857; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-cyan-300 { color: #0e7490; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-rose-300 { color: #be123c; }
html[data-theme="light"] body > nav .group\/item:hover .group-hover\/item\:text-indigo-300 { color: #4338ca; }

/* ------------------------------------------- 6. toggle + CTAs + burger */

/* secondary: white fill, faint line, soft shadow, ink text */
html[data-theme="light"] body > nav .nav-cta-login {
  background-color: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] body > nav .nav-cta-login:hover {
  background-color: #ffffff;
  border-color: var(--t-brand-line);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 10px 24px -14px rgba(76, 29, 149, 0.3);
}
html[data-theme="light"] body > nav .nav-cta-login iconify-icon { color: var(--t-brand); }
html[data-theme="light"] body > nav .nav-cta-login:hover iconify-icon { color: var(--t-brand-2); }
html[data-theme="light"] body > nav .nav-cta-login .from-purple-500\/10 {
  --tw-gradient-from: rgba(124, 58, 237, 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(59, 130, 246, 0.06) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* primary: ink fill, white text */
html[data-theme="light"] body > nav .nav-cta-signup {
  background-color: var(--t-fg);
  border-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 8px 20px -12px rgba(46, 16, 101, 0.35);
}
html[data-theme="light"] body > nav .nav-cta-signup:hover {
  background-color: #1f1a2e;
  border-color: #1f1a2e;
}




/* burger (phones / small tablets) */
html[data-theme="light"] body > nav .nav-burger {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] body > nav .nav-burger[aria-expanded="true"] {
  background: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
}

/* --------------------------------------------------------- 7. mobile menu */

html[data-theme="light"] #mobile-menu {
  background:
    radial-gradient(90% 30% at 100% 0%, rgba(167, 139, 250, 0.11), transparent 100%),
    radial-gradient(90% 30% at 0% 100%, rgba(129, 140, 248, 0.07), transparent 100%),
    var(--t-pg);
  border-top-color: var(--t-line-soft);
  color: var(--t-fg);
}
html[data-theme="light"] #mobile-menu .mnav-inner { background: transparent; }
html[data-theme="light"] #mobile-menu .mnav-label { color: var(--t-fg-4); }
html[data-theme="light"] #mobile-menu .mnav-item { color: var(--t-fg); }
html[data-theme="light"] #mobile-menu .mnav-item:active,
html[data-theme="light"] #mobile-menu .mnav-item:hover { background: rgba(124, 58, 237, 0.045); }
html[data-theme="light"] #mobile-menu .mnav-desc { color: var(--t-fg-4); }

/* icon tiles: the inline --mi hues are 400 shades; light uses the 600 shade */
html[data-theme="light"] #mobile-menu .mnav-ico { --mi-l: #7c3aed; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#60a5fa"] { --mi-l: #2563eb; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#34d399"] { --mi-l: #059669; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#f472b6"] { --mi-l: #db2777; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#fbbf24"] { --mi-l: #d97706; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#22d3ee"] { --mi-l: #0891b2; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#fb7185"] { --mi-l: #e11d48; }
html[data-theme="light"] #mobile-menu .mnav-ico[style*="#818cf8"] { --mi-l: #4f46e5; }
html[data-theme="light"] #mobile-menu .mnav-ico {
  color: var(--mi-l);
  background: color-mix(in srgb, var(--mi-l) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--mi-l) 18%, transparent);
}

html[data-theme="light"] #mobile-menu .mnav-btn-primary {
  background: var(--t-fg);
  border-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 10px 24px -14px rgba(46, 16, 101, 0.4);
}
html[data-theme="light"] #mobile-menu .mnav-btn-ghost {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] #mobile-menu .mnav-btn-ghost iconify-icon { color: var(--t-brand); }

/* --------------------------------------------------------- 8. logo marquee */
/* A <script> sits between the hero header and the band, so both adjacency
   forms are listed.

   The hero clips its own lilac mock glow at its bottom edge, so whatever the
   band paints, a flat step would remain. The band therefore paints one lilac
   profile (soft at the sides, a little deeper under the mock), and a ::before
   veil reaches up into the hero's empty bottom padding (64px desktop / 48px
   phone; the veil is 56 / 44px, so it never touches the mock) and fades the
   clipped glow into that same profile. The seam row is then identical on
   both sides at every x, and the band dissolves into white below. */
html[data-theme="light"] .hero-header + section,
html[data-theme="light"] .hero-header + script + section {
  --g1-band-lilac: linear-gradient(90deg, #fcfbff 0%, #f8f5ff 22%, #f4f0fe 50%, #f8f5ff 78%, #fcfbff 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.9) 75%, #ffffff 100%),
    var(--g1-band-lilac);
  /* paint under the 1px border-y too, so no artefact line remains */
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  border-color: transparent;
}
html[data-theme="light"] .hero-header + section::before,
html[data-theme="light"] .hero-header + script + section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 44px;
  background: var(--g1-band-lilac);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
  pointer-events: none;
}
@media (min-width: 768px) {
  html[data-theme="light"] .hero-header + section::before,
  html[data-theme="light"] .hero-header + script + section::before { height: 56px; }
}
html[data-theme="light"] .hero-header + section .animate-marquee,
html[data-theme="light"] .hero-header + script + section .animate-marquee {
  color: var(--t-fg-2);
  opacity: 0.62;
}

/* ---------------------------------------------------------------------------
   g2-hero: hero and feature strip
   --------------------------------------------------------------------------- */
/* ==========================================================================
   g2-hero — Daylight treatment for the hero header and the feature strip.
   Every selector is scoped to html[data-theme="light"] and to its region.
   Treatment only: colour, background, border colour, shadow, filter.
   ========================================================================== */

/* ------------------------------------------------------------ hero ground */
/* Soft daylight: a lilac sky at the top, a periwinkle bloom off the right
   shoulder, a faint lilac pool on the left and a violet halo behind the lower
   half of the app mock.
   The hand-off to the logo band below has one owner: g1. The band paints a
   horizontal lilac profile plus a ::before veil that reaches up into the
   hero's empty bottom padding and fades the clipped glow into that same
   profile, so the hero itself only settles onto white (see the ramp below). */
html[data-theme="light"] .hero-header {
  background:
    radial-gradient(16% 34% at 50% 0%, rgba(196, 181, 253, 0.30), rgba(196, 181, 253, 0) 75%),
    radial-gradient(70% 36% at 50% 0%, rgba(167, 139, 250, 0.24), rgba(167, 139, 250, 0) 72%),
    radial-gradient(52% 36% at 92% 12%, rgba(129, 140, 248, 0.15), rgba(129, 140, 248, 0) 72%),
    radial-gradient(46% 34% at 4% 26%, rgba(196, 181, 253, 0.20), rgba(196, 181, 253, 0) 72%),
    radial-gradient(22% 34% at 0% 66%, rgba(167, 139, 250, 0.20), rgba(167, 139, 250, 0) 72%),
    radial-gradient(22% 34% at 100% 62%, rgba(129, 140, 248, 0.18), rgba(129, 140, 248, 0) 72%),
    radial-gradient(60% 30% at 50% 78%, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0) 70%),
    linear-gradient(180deg, #f7f4ff 0%, #fcfbff 34%, #ffffff 60%, #fbfaff 86%, #ffffff 100%);
}

/* The bottom ramp (from-black in Dark) settles the hero onto plain white;
   g1's band ::before veil carries the lilac across the seam. */
html[data-theme="light"] .hero-header > .-z-10 > .from-black {
  background-image:
    linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.96) 22%, rgba(255, 255, 255, 0) 100%);
}

/* ----------------------------------------------------------- social proof */
html[data-theme="light"] .hero-header .border-\[\#050505\] {
  border-color: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.08), 0 4px 10px -4px rgba(46, 16, 101, 0.28);
}

/* ------------------------------------------------------------------- CTAs */
/* primary: ink fill (from the foundation), soft violet-black lift instead of
   the white bloom that was tuned for a black ground */
html[data-theme="light"] .hero-header .hero-cta > a {
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.14), 0 10px 24px -12px rgba(46, 16, 101, 0.45);
}
html[data-theme="light"] .hero-header .hero-cta > a:hover {
  background-color: #1c1830;
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.14), 0 14px 28px -12px rgba(76, 29, 149, 0.5);
}

/* secondary: soft white with a hairline */
html[data-theme="light"] .hero-header #watch-demo-btn {
  background-color: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] .hero-header #watch-demo-btn:hover {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-1), 0 8px 22px -14px rgba(124, 58, 237, 0.35);
}

/* -------------------------------------------------------------- app mock */
/* The mock's interior keeps its own dark palette. Only how it sits on the
   page changes: a hairline edge, a soft elevation and a violet ambient.
   Every layer is sized to die out inside the hero's 64px bottom gutter
   (offset - spread + 3 sigma <= 64px), so nothing reaches the header's
   overflow clip and no lilac band is cut off at the section edge. */
html[data-theme="light"] .hero-header .hero-mock {
  box-shadow:
    0 0 0 1px rgba(28, 20, 60, 0.06),
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 22px 44px -22px rgba(76, 29, 149, 0.26),
    0 12px 48px -22px rgba(139, 92, 246, 0.20),
    0 0 56px -18px rgba(167, 139, 250, 0.16);
}
html[data-theme="light"] .hero-header .hero-mock-wrap.group:hover .hero-mock {
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.10),
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 22px 44px -20px rgba(76, 29, 149, 0.30),
    0 12px 48px -20px rgba(139, 92, 246, 0.24),
    0 0 56px -16px rgba(167, 139, 250, 0.20);
}

/* The extruded base glow sits 48px below the mock with a 100px blur, so on
   a light ground it always ran past the header and was clipped flat. The
   ambient above does its job, so it is switched off in Daylight. */
html[data-theme="light"] .hero-header .hero-mock-wrap > .bg-purple-600\/30,
html[data-theme="light"] .hero-header .hero-mock-wrap.group:hover > .group-hover\:bg-purple-600\/40 {
  background-color: transparent;
}

/* ------------------------------------------------------- feature strip */
/* The strip is lit by the same light as the hero. Its top edge opens on the
   white that the logo band (g1) settles to, then the lilac gathers again:
   a soft violet pool behind the left of the card, a periwinkle pool behind
   the right, and a faint lilac veil under the card that drifts down toward
   the demo section. Every layer is ~0 at the section edges (the band above
   and #demo below both meet it on white), so the light reads as one
   continuous field with no band or step at either boundary. */
html[data-theme="light"] .fs-section {
  background:
    radial-gradient(44% 64% at 22% 52%, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0) 74%),
    radial-gradient(38% 64% at 80% 56%, rgba(129, 140, 248, 0.10), rgba(129, 140, 248, 0) 74%),
    radial-gradient(70% 50% at 50% 62%, rgba(196, 181, 253, 0.10), rgba(196, 181, 253, 0) 100%),
    var(--t-pg);
}

/* featured soft card */
html[data-theme="light"] .fs-section .fs-card {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(167, 139, 250, 0.17), rgba(167, 139, 250, 0) 50%),
    radial-gradient(70% 90% at 0% 100%, rgba(129, 140, 248, 0.06), rgba(129, 140, 248, 0) 55%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--t-shadow-3);
}
html[data-theme="light"] .fs-section .fs-card:hover {
  border-color: var(--t-brand-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--t-shadow-hover);
}
html[data-theme="light"] .fs-section .fs-card::before {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%),
      rgba(139, 92, 246, 0.08), transparent 62%);
}

/* items: a faint violet tint on hover */
html[data-theme="light"] .fs-section .fs-item:hover {
  background: rgba(124, 58, 237, 0.045);
  border-color: var(--t-brand-line);
  box-shadow: 0 14px 30px -20px rgba(76, 29, 149, 0.32);
}

html[data-theme="light"] .fs-section .fs-icon { color: var(--t-brand); }
html[data-theme="light"] .fs-section .fs-item:hover .fs-icon {
  color: var(--t-brand-2);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.30));
}

html[data-theme="light"] .fs-section .fs-title { color: var(--t-fg); }
html[data-theme="light"] .fs-section .fs-item:hover .fs-title {
  color: var(--t-fg);
  text-shadow: none;
}

html[data-theme="light"] .fs-section .fs-desc { color: var(--t-fg-3); }
html[data-theme="light"] .fs-section .fs-item:hover .fs-desc { color: var(--t-fg-2); }

/* ---------------------------------------------------------------------------
   g3-features: demo and features grid
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Daylight — g3: demo section (#demo) + features bento grid (#features)
   Every selector is scoped to html[data-theme="light"], so Dark is untouched.
   Treatment only: colour / background / border-colour / shadow.
   ========================================================================== */

/* ------------------------------------------------------------------ DEMO */
/* The video frame is a dark island: its interior (image, overlay, glass play
   button, caption) keeps the Dark palette. Only the way it sits on the page
   changes: a soft violet-black elevation instead of the grey halo. */

html[data-theme="light"] #demo .demo-card {
  background: #000;
  border-color: rgba(28, 20, 60, 0.1);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.06),
    0 30px 60px -34px rgba(28, 20, 60, 0.32),
    0 60px 120px -50px rgba(76, 29, 149, 0.34);
}
html[data-theme="light"] #demo .demo-card:hover {
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.06),
    0 36px 70px -34px rgba(28, 20, 60, 0.36),
    0 70px 130px -50px rgba(109, 40, 217, 0.42);
}

/* restore the dark glass play button and caption exactly as in Dark */
html[data-theme="light"] #demo .demo-play {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 50px -10px rgba(255, 255, 255, 0.35);
}
html[data-theme="light"] #demo .demo-card:hover .demo-play {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 70px -8px rgba(255, 255, 255, 0.5);
}
html[data-theme="light"] #demo .demo-caption {
  color: #e5e5e5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------------------------- FEATURES */

/* a faint lilac wash behind the grid so the cards feel lit, not pasted.
   The first layer is the upper half of a seam wash shared with .wf-section
   (g4 paints the mirror half at 100% 0%): px-sized, so both halves evaluate
   identically on the shared edge and the light crosses it. Transparent
   ground (body is white) so the section never paints over a neighbour. */
html[data-theme="light"] #features {
  background:
    radial-gradient(760px 300px at 100% 100%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
    radial-gradient(55% 35% at 88% 42%, rgba(167, 139, 250, 0.075), transparent 70%),
    radial-gradient(50% 30% at 8% 82%, rgba(129, 140, 248, 0.055), transparent 70%),
    transparent;
}
/* tall phone stack: key the lower wash's height in px so it fades inside
   the box instead of being cut flat at the features -> workflow edge */
@media (max-width: 1023.98px) {
  html[data-theme="light"] #features {
    background:
      radial-gradient(760px 300px at 100% 100%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
      radial-gradient(55% 35% at 88% 42%, rgba(167, 139, 250, 0.075), transparent 70%),
      radial-gradient(60% 420px at 8% calc(100% - 520px), rgba(129, 140, 248, 0.055), transparent 70%),
      transparent;
  }
}

/* soft card */
html[data-theme="light"] #features .grid > div {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"] #features .grid > div:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}

/* featured: the flagship translator card and multi-speaker diarization */
html[data-theme="light"] #features .grid > div:nth-child(1),
html[data-theme="light"] #features .grid > div:nth-child(8) {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(167, 139, 250, 0.17), rgba(167, 139, 250, 0.05) 45%, transparent 70%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"] #features .grid > div:nth-child(1):hover,
html[data-theme="light"] #features .grid > div:nth-child(8):hover {
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 40px 80px -38px rgba(76, 29, 149, 0.34);
}

/* card text */
html[data-theme="light"] #features .grid h3 { color: var(--t-fg); }
html[data-theme="light"] #features .grid p { color: var(--t-fg-3); }

/* the flagship's right-edge hairline */
html[data-theme="light"] #features .grid > div:nth-child(1) > .absolute.w-\[1px\] {
  background-image: linear-gradient(to bottom, rgba(124, 58, 237, 0.32), rgba(124, 58, 237, 0));
}

/* icon tiles: tinted with each capability hue (fill ~9%, border ~20%, icon at 600) */
html[data-theme="light"] #features .grid .w-10.h-10.rounded-xl {
  --g3-hue: 124 58 237;
  --g3-ink: #7c3aed;
  background-color: rgb(var(--g3-hue) / 0.09);
  border-color: rgb(var(--g3-hue) / 0.2);
  color: var(--g3-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"] #features .grid .group:hover .w-10.h-10.rounded-xl {
  background-color: rgb(var(--g3-hue) / 0.14);
  border-color: rgb(var(--g3-hue) / 0.28);
}
html[data-theme="light"] #features .grid .w-10.h-10.text-purple-400  { --g3-hue: 124 58 237; --g3-ink: #7c3aed; }
html[data-theme="light"] #features .grid .w-10.h-10.text-amber-400   { --g3-hue: 245 158 11; --g3-ink: #d97706; }
html[data-theme="light"] #features .grid .w-10.h-10.text-emerald-400 { --g3-hue: 16 185 129;  --g3-ink: #059669; }
html[data-theme="light"] #features .grid .w-10.h-10.text-pink-400    { --g3-hue: 236 72 153;  --g3-ink: #db2777; }
html[data-theme="light"] #features .grid .w-10.h-10.text-blue-400    { --g3-hue: 59 130 246;  --g3-ink: #2563eb; }
html[data-theme="light"] #features .grid .w-10.h-10.text-cyan-400    { --g3-hue: 6 182 212;   --g3-ink: #0891b2; }
html[data-theme="light"] #features .grid .w-10.h-10.text-violet-400  { --g3-hue: 139 92 246;  --g3-ink: #7c3aed; }
html[data-theme="light"] #features .grid .w-10.h-10.text-indigo-400  { --g3-hue: 99 102 241;  --g3-ink: #4f46e5; }
/* text-sky-400 is not in the compiled Tailwind build (so Dark shows plain
   ink), but the markup clearly intends sky (group-hover:bg-sky-500/10);
   Daylight gives it the sky hue like the other seven capability tiles */
html[data-theme="light"] #features .grid .w-10.h-10.text-sky-400 {
  --g3-hue: 14 165 233;
  --g3-ink: #0284c7;
  background-color: rgba(14, 165, 233, 0.09);
  border-color: rgba(14, 165, 233, 0.18);
}
html[data-theme="light"] #features .grid .group:hover .w-10.h-10.text-sky-400 {
  background-color: rgba(14, 165, 233, 0.13);
  border-color: rgba(14, 165, 233, 0.26);
}

/* "4 seconds": amber-300 is invisible on white; amber-700 clears 4.5:1 */
html[data-theme="light"] #features .text-amber-300 { color: #b45309; }

/* chips as soft pills */
html[data-theme="light"] #features .grid span.rounded-full.uppercase {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
/* the neutral "Diarization" chip stays neutral until hover, as in Dark */
html[data-theme="light"] #features .grid span.rounded-full.uppercase.bg-white\/5 {
  background-color: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg-3);
}
html[data-theme="light"] #features .grid .group:hover span.rounded-full.uppercase.bg-white\/5 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
}

/* Magic Mode's waveform strokes: keep the pink, a touch deeper on white */
html[data-theme="light"] #features .bg-pink-500\/40 { background-color: rgb(219 39 119 / 0.38); }
html[data-theme="light"] #features .bg-pink-500\/60 { background-color: rgb(219 39 119 / 0.55); }
html[data-theme="light"] #features .bg-pink-500\/30 { background-color: rgb(219 39 119 / 0.26); }

/* ---------------------------------------------------------------------------
   g4-flow: workflow orbit and input/output diagram
   --------------------------------------------------------------------------- */
/* =====================================================================
   g4-flow — Daylight treatment for the workflow orbit (.wf-section)
   and the input/output diagram (.io-section).
   Treatment only: colour / background / border-colour / shadow / filter.
   Every selector starts with html[data-theme="light"].
   ===================================================================== */

/* ---------------------------------------------------------------------
   WORKFLOW ORBIT
   --------------------------------------------------------------------- */

/* Continuous ground with a faint lilac wash centred on the orbit, fading
   out well before the section edges so it reads as ambient light.
   Seam washes (px-sized half-ellipses centred on the shared edges, so both
   halves match exactly at the boundary):
     top-right    = lower half of the features -> workflow wash (g3 paints the upper)
     bottom-left  = upper half of the workflow -> io wash (io paints the lower)
   Transparent ground, so the last features card's shadow is not painted over. */
html[data-theme="light"] .wf-section {
  background:
    radial-gradient(760px 300px at 100% 0%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
    radial-gradient(760px 300px at 0% 100%, rgba(129, 140, 248, 0.09), rgba(129, 140, 248, 0) 100%),
    radial-gradient(48% 38% at 50% 64%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 72%),
    transparent;
}

/* Node copy: readable muted ink instead of #9ca3af */
html[data-theme="light"] .wf-section .wf-label h3 { color: var(--t-fg); }
html[data-theme="light"] .wf-section .wf-label p { color: var(--t-fg-4); }

/* Bubbles: soft lilac glass on white */
html[data-theme="light"] .wf-section .wf-bubble {
  background:
    radial-gradient(120% 120% at 30% 18%, #ffffff 0%, #faf7ff 45%, #f1ebff 100%);
  border-color: rgba(196, 181, 253, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 14px -8px rgba(124, 58, 237, 0.14),
    0 1px 2px rgba(28, 20, 60, 0.05),
    0 14px 28px -14px rgba(76, 29, 149, 0.30),
    0 0 0 5px rgba(167, 139, 250, 0.06);
}
html[data-theme="light"] .wf-section .wf-bubble iconify-icon { color: var(--t-brand); }

html[data-theme="light"] .wf-section .wf-node:hover .wf-bubble {
  border-color: rgba(167, 139, 250, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 14px -8px rgba(124, 58, 237, 0.18),
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 22px 38px -16px rgba(76, 29, 149, 0.38),
    0 0 0 7px rgba(167, 139, 250, 0.11);
}
html[data-theme="light"] .wf-section .wf-node:hover .wf-bubble iconify-icon { color: var(--t-brand-ink); }

/* Number badges: saturated violet chip, white numeral, white keyline */
html[data-theme="light"] .wf-section .wf-num {
  color: #ffffff;
  background: linear-gradient(140deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #ffffff;
  box-shadow: 0 4px 10px -3px rgba(109, 40, 217, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.12);
}

/* Dashed orbit ring + spokes: soft lilac lines */
html[data-theme="light"] .wf-section .wf-ring {
  border-color: rgba(139, 92, 246, 0.30);
  box-shadow: 0 0 70px rgba(167, 139, 250, 0.10), inset 0 0 70px rgba(167, 139, 250, 0.08);
}
html[data-theme="light"] .wf-section .wf-ray {
  background: linear-gradient(to right, rgba(139, 92, 246, 0) 22%, rgba(139, 92, 246, 0.32));
}
html[data-theme="light"] .wf-section .wf-ray::after {
  background: linear-gradient(to right, rgba(139, 92, 246, 0), rgba(124, 58, 237, 0.55), rgba(139, 92, 246, 0));
}

/* AI core: keep the dark brand orb; replace the halo smear with a soft
   violet light that falls off gently, and seat the orb with a shadow. */
html[data-theme="light"] .wf-section .wf-core::before {
  background: radial-gradient(circle,
    rgba(167, 139, 250, 0.30) 0%,
    rgba(196, 181, 253, 0.18) 38%,
    rgba(221, 214, 254, 0.08) 56%,
    rgba(221, 214, 254, 0) 70%);
  filter: blur(12px);
}
/* drop-shadow follows the orb's alpha (the PNG has transparent padding),
   so no disc appears; the image itself is not tinted or washed. */
html[data-theme="light"] .wf-section .wf-core img {
  filter: drop-shadow(0 18px 22px rgba(46, 16, 101, 0.28)) drop-shadow(0 2px 4px rgba(46, 16, 101, 0.18));
}

/* ---------------------------------------------------------------------
   INPUT / OUTPUT
   --------------------------------------------------------------------- */

/* seam washes: top-left = lower half of the workflow -> io wash;
   bottom-right = upper half of the io -> process wash (g5 paints the lower) */
html[data-theme="light"] .io-section {
  background:
    radial-gradient(760px 300px at 0% 0%, rgba(129, 140, 248, 0.09), rgba(129, 140, 248, 0) 100%),
    radial-gradient(760px 300px at 100% 100%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
    radial-gradient(36% 46% at 12% 62%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 72%),
    transparent;
}

html[data-theme="light"] .io-section .io-sub { color: var(--t-fg-3); }

/* Source card — the featured soft card */
html[data-theme="light"] .io-section .io-source {
  border-color: rgba(124, 58, 237, 0.20);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #faf7ff 48%, #f1eaff 100%);
  box-shadow: inset 0 1px 0 #ffffff, var(--t-shadow-3);
}
html[data-theme="light"] .io-section .io-source-pulse {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.26), rgba(167, 139, 250, 0) 66%);
  filter: blur(14px);
}
/* In the stacked (row) layout the pulse sits mid-card, away from the icon,
   and reads as a smudge; keep it as a barely-there breath of light. */
@media (max-width: 1023px) {
  html[data-theme="light"] .io-section .io-source-pulse {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0) 66%);
  }
}
html[data-theme="light"] .io-section .io-source-icon {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(140deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 24px -10px rgba(109, 40, 217, 0.55),
    0 0 0 5px rgba(167, 139, 250, 0.12);
}
html[data-theme="light"] .io-section .io-source-label { color: var(--t-fg); }
html[data-theme="light"] .io-section .io-source-sub { color: var(--t-brand-2); }

/* Dotted connectors: soft lilac, fading in from the source */
html[data-theme="light"] .io-section .io-link stop:first-child { stop-color: #a78bfa; stop-opacity: 0.35; }
html[data-theme="light"] .io-section .io-link stop:last-child { stop-color: #8b5cf6; stop-opacity: 0.9; }

/* Output cards: soft white cards */
html[data-theme="light"] .io-section .io-card {
  border-color: var(--t-card-border);
  background: var(--t-card-bg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] .io-section .io-card h3 { color: var(--t-fg); }
html[data-theme="light"] .io-section .io-card:hover {
  border-color: rgba(var(--c6), 0.28);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 26px 48px -26px rgba(var(--c6), 0.45);
}

/* Capability hue at its 600 shade, keyed on each card's own inline --c (the
   400 shade) rather than its position, so reordering cannot mismatch hues.
   Violet is the default for any card without a known --c. */
html[data-theme="light"] .io-section .io-card { --c6: 124, 58, 237; }
html[data-theme="light"] .io-section .io-card[style*="167,139,250"] { --c6: 124, 58, 237; }  /* violet  */
html[data-theme="light"] .io-section .io-card[style*="96,165,250"]  { --c6: 37, 99, 235; }   /* blue    */
html[data-theme="light"] .io-section .io-card[style*="52,211,153"]  { --c6: 5, 150, 105; }   /* emerald */
html[data-theme="light"] .io-section .io-card[style*="244,114,182"] { --c6: 219, 39, 119; }  /* pink    */
html[data-theme="light"] .io-section .io-card[style*="34,211,238"]  { --c6: 8, 145, 178; }   /* cyan    */
html[data-theme="light"] .io-section .io-card[style*="251,191,36"]  { --c6: 217, 119, 6; }   /* amber   */
html[data-theme="light"] .io-section .io-card[style*="232,121,249"] { --c6: 192, 38, 211; }  /* fuchsia */
html[data-theme="light"] .io-section .io-card[style*="129,140,248"] { --c6: 79, 70, 229; }   /* indigo  */

html[data-theme="light"] .io-section .io-tile {
  color: rgb(var(--c6));
  background: rgba(var(--c6), 0.09);
  border-color: rgba(var(--c6), 0.20);
}
html[data-theme="light"] .io-section .io-card:hover .io-tile {
  background: rgba(var(--c6), 0.13);
  box-shadow: 0 10px 20px -10px rgba(var(--c6), 0.50);
}
html[data-theme="light"] .io-section .io-combo-arrow { color: var(--t-fg-4); }

/* ---------------------------------------------------------------------------
   g5-pricing: process steps and pricing
   --------------------------------------------------------------------------- */
/* ==========================================================================
   g5-pricing — Daylight treatment for "From Upload to Worldwide" (process)
   and "Pricing that scales with you" (+ enterprise banner).
   Every selector starts with html[data-theme="light"]. Treatment only.

   !important note: the pricing block's own inline <style> sets card
   border-color, check-icon colour, accent-pill colours and accent-btn colours
   with !important, and the enterprise banner sets its background in a style=""
   attribute. Neither can be beaten by specificity alone, so the matching
   overrides below carry !important (scoped to light, so Dark is untouched).
   ========================================================================== */

/* ------------------------------------------------------------- PROCESS */

/* Outer band (bg-neutral-900/20 + border-y) and inner section (bg-neutral-950
   + border-t) become one continuous ground with a faint lilac wash that
   drifts in from the section edges. The first layer is the lower half of
   the io -> process seam wash (g4 paints the upper half at 100% 100%).
   border-box origin + no-repeat: the washes paint under the kept 1px
   transparent border-y instead of tiling the opposite end into those rows. */
html[data-theme="light"] .io-section + section {
  background:
    radial-gradient(760px 300px at 100% 0%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
    radial-gradient(60% 40% at 0% 18%, rgba(167, 139, 250, 0.10), transparent 70%),
    radial-gradient(55% 40% at 100% 88%, rgba(129, 140, 248, 0.08), transparent 70%),
    transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
/* tall phone stack: key the corner washes' height in px so each one fades
   inside the box instead of being cut flat at the top and bottom edges */
@media (max-width: 1023.98px) {
  html[data-theme="light"] .io-section + section {
    background:
      radial-gradient(760px 300px at 100% 0%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
      radial-gradient(70% 420px at 0% 520px, rgba(167, 139, 250, 0.10), transparent 70%),
      radial-gradient(65% 420px at 100% calc(100% - 520px), rgba(129, 140, 248, 0.08), transparent 70%),
      transparent;
    background-origin: border-box;
    background-repeat: no-repeat;
  }
}
html[data-theme="light"] .io-section + section > section {
  background: transparent;
  border-top-color: transparent;
}

/* step + feature cards -> soft cards */
html[data-theme="light"] .io-section + section .grid > .rounded-3xl {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"] .io-section + section .grid > .rounded-3xl:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}

/* step eyebrows: 500 shades are too light on white */
html[data-theme="light"] .io-section + section .text-purple-500 { color: var(--t-brand-2); }
html[data-theme="light"] .io-section + section .text-blue-500 { color: #1d4ed8; }
html[data-theme="light"] .io-section + section .text-green-500 { color: #15803d; }

/* MP4 / MOV / WAV stacked format chips */
html[data-theme="light"] .io-section + section .rounded-full.bg-neutral-800 {
  background: #ffffff;
  border-color: var(--t-line-strong);
  color: var(--t-fg-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.06), 0 4px 10px -6px rgba(28, 20, 60, 0.18);
}

/* AI processing progress bar */
html[data-theme="light"] .io-section + section .h-1.bg-neutral-800 {
  background: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .io-section + section .h-1 .bg-blue-500 {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.30);
}

/* EN / JP / ES language chips */
html[data-theme="light"] .io-section + section .rounded.bg-neutral-800 {
  background: var(--t-pg-3);
  border-color: var(--t-line);
  color: var(--t-fg-3);
}
html[data-theme="light"] .io-section + section .bg-green-500\/20 {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.26);
  color: #15803d;
}

/* feature icon tiles keep their capability hue */
html[data-theme="light"] .io-section + section .rounded-xl.bg-neutral-800 {
  border-color: var(--t-line);
}
html[data-theme="light"] .io-section + section .rounded-xl.text-pink-400 {
  background: rgba(219, 39, 119, 0.08);
  border-color: rgba(219, 39, 119, 0.18);
  color: #db2777;
}
html[data-theme="light"] .io-section + section .rounded-xl.text-orange-400 {
  background: rgba(234, 88, 12, 0.08);
  border-color: rgba(234, 88, 12, 0.18);
  color: #ea580c;
}
html[data-theme="light"] .io-section + section .rounded-xl.text-cyan-400 {
  background: rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.18);
  color: #0891b2;
}
html[data-theme="light"] .io-section + section .group:hover .rounded-xl.text-pink-400 { background: rgba(219, 39, 119, 0.13); }
html[data-theme="light"] .io-section + section .group:hover .rounded-xl.text-orange-400 { background: rgba(234, 88, 12, 0.13); }
html[data-theme="light"] .io-section + section .group:hover .rounded-xl.text-cyan-400 { background: rgba(8, 145, 178, 0.13); }

/* ------------------------------------------------------------- PRICING */

/* faint ambient light behind the featured card and the enterprise panel.
   The first layer is the upper half of the pricing -> globe seam wash
   (g6 paints the lower half at 0% 0% on .nm-section). */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load {
  background:
    radial-gradient(760px 300px at 0% 100%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
    radial-gradient(45% 35% at 72% 30%, rgba(167, 139, 250, 0.10), transparent 70%),
    radial-gradient(50% 30% at 15% 92%, rgba(129, 140, 248, 0.07), transparent 70%),
    transparent;
}
/* tall phone stack: the lower wash keyed in px so it fades inside the box */
@media (max-width: 1023.98px) {
  html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load {
    background:
      radial-gradient(760px 300px at 0% 100%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
      radial-gradient(45% 35% at 72% 30%, rgba(167, 139, 250, 0.10), transparent 70%),
      radial-gradient(60% 420px at 15% calc(100% - 520px), rgba(129, 140, 248, 0.07), transparent 70%),
      transparent;
  }
}

/* per-tier ink shade (the 700 of each accent hue) for text and icons */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(1) { --a-ink: 51, 65, 85; }    /* slate-700 */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(2) { --a-ink: 3, 105, 161; }   /* sky-700 */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(3) { --a-ink: 4, 120, 87; }    /* emerald-700 */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(4) { --a-ink: 109, 40, 217; }  /* violet-700 */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(5) { --a-ink: 185, 28, 28; }   /* red-700 */

/* soft white cards: the tier hue moves off the outline (a near-neutral .13
   hairline) into a faint corner light; Pro keeps the one strong outline and
   hover still reveals the hue at .45 */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div {
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(var(--accent), 0.06), transparent 60%),
    var(--t-card-bg);
  border-color: rgba(var(--accent), 0.13) !important;
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(1) {
  border-color: var(--t-card-border) !important;
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:hover {
  border-color: rgba(var(--accent), 0.45) !important;
  box-shadow: var(--t-shadow-hover), 0 0 60px -26px rgba(var(--accent), 0.45);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div:nth-child(1):hover {
  border-color: var(--t-line-strong) !important;
}

/* Pro: featured card with a violet corner glow */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div.pro-pop {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 55%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.34) !important;
  box-shadow: var(--t-shadow-3), 0 0 0 4px rgba(124, 58, 237, 0.04);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div.pro-pop:hover {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: var(--t-shadow-3), 0 36px 80px -36px rgba(124, 58, 237, 0.38), 0 0 0 4px rgba(124, 58, 237, 0.06);
}

/* "/mo" sits inside the corner glow on the featured card; one step darker */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pro-pop .text-neutral-500 { color: var(--t-fg-3); }

/* "Most Popular" badge: white on violet, soft lift */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pro-pop > .absolute.from-purple-600 {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 16px -6px rgba(109, 40, 217, 0.45);
}

/* x min/mo accent pills: 700-shade text on their own tint */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid .accent-pill {
  background: rgba(var(--accent), 0.12) !important;
  border-color: rgba(var(--a-ink), 0.22) !important;
  color: rgb(var(--a-ink)) !important;
}

/* credits pills */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid .rounded-full.bg-white\/5 {
  background: var(--t-pg-3);
  border-color: var(--t-line);
  color: var(--t-fg-2);
}

/* check icons: accent 400 shades -> ink shade of the tier */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div ul iconify-icon {
  color: rgb(var(--a-ink)) !important;
}

/* secondary "Create Account" buttons: white, hairline, soft shadow */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div > a.bg-white\/5 {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div > a.bg-white\/5:hover {
  background: var(--t-pg-2);
  border-color: var(--t-line-strong);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid > div.group:hover > a.bg-white\/5 {
  border-color: rgba(var(--a-ink), 0.28);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid .accent-btn {
  border-color: rgba(var(--a-ink), 0.24) !important;
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pricing-grid .accent-btn:hover {
  background: rgba(var(--accent), 0.08) !important;
  border-color: rgba(var(--a-ink), 0.4) !important;
}

/* Pro primary: keep violet with white text, softer violet lift */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .pro-pop > a.bg-purple-600 {
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.15), 0 10px 22px -10px rgba(124, 58, 237, 0.55);
}

/* ---------------------------------------------------- ENTERPRISE BANNER */

html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(40% 90% at 0% 100%, rgba(129, 140, 248, 0.06), transparent 70%),
    linear-gradient(100deg, #ffffff 0%, #fbf9ff 45%, #f3eeff 100%) !important;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl > div[aria-hidden="true"] {
  background: rgba(167, 139, 250, 0.28) !important;
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl h3 { color: var(--t-fg); }
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl p.text-neutral-400 { color: var(--t-fg-3); }

/* Enterprise eyebrow pill */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl .inline-flex.rounded-full {
  background: #ffffff;
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}

/* Talk to Sales: ink primary */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl a.bg-white {
  background: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 10px 20px -14px rgba(12, 10, 20, 0.35);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl a.bg-white:hover {
  background: var(--t-fg-2);
}

/* View API Docs: soft secondary */
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl a.border-white\/10 {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"]:where([data-page="home"]) section.content-wait-for-load .mt-12.rounded-3xl a.border-white\/10:hover {
  background: var(--t-pg-2);
  border-color: var(--t-line-strong);
}

/* ---------------------------------------------------------------------------
   g6-globe: globe band and reference section
   --------------------------------------------------------------------------- */
/* g6-globe — Daylight polish for the globe band (.nm-section) and the
   reference section (#who-can-use). Every selector is light-scoped. */

/* ---------------------------------------------------------------- globe band */

/* soft lilac light behind the globe so its edge reads as lit, not grey.
   The first two layers are seam half-washes (px-sized, centred on the shared
   edges so both halves match at the boundary):
     top-left     = lower half of the pricing -> globe wash (g5 paints the upper)
     bottom-right = upper half of the globe -> learnings wash (g7 paints the lower)
   Transparent ground below 1024px: painting white there covered the
   enterprise panel's shadow and pricing's own wash at the seam (body is
   already white). Desktop re-adds white for its screen-blended glows. */
html[data-theme="light"] .nm-section {
  background:
    radial-gradient(760px 300px at 0% 0%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
    radial-gradient(760px 300px at 100% 100%, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0) 100%),
    radial-gradient(ellipse 46% 54% at 80% 52%, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0) 72%),
    transparent;
}
/* desktop: lilac light pooled under the globe so its dissolving lower edge
   passes through violet rather than neutral grey. Every wash reaches zero
   before the section's bottom edge, so nothing is clipped at the seam with
   the section below. */
@media (min-width: 1024px) {
  html[data-theme="light"] .nm-section {
    background:
      radial-gradient(760px 300px at 0% 0%, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0) 100%),
      radial-gradient(760px 300px at 100% 100%, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0) 100%),
      radial-gradient(ellipse 36% 30% at 78% 70%, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0) 78%),
      radial-gradient(ellipse 22% 40% at 56% 56%, rgba(129, 140, 248, 0.1), rgba(129, 140, 248, 0) 75%),
      radial-gradient(ellipse 46% 52% at 80% 52%, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0) 72%),
      var(--t-pg);
  }
  /* desktop keeps an opaque white ground: the section is its own stacking
     context and the rim/bottom glow spans below use screen, which is a no-op
     only over white (over a transparent backdrop they paint solid lilac) */
}

/* the white top seam painted over the dark artwork produced grey; the mask
   below handles the top edge instead */
html[data-theme="light"] .nm-section::before { background: none; }

/* no white paint over the dark image — that was the grey smear */
html[data-theme="light"] .nm-section .nm-fade-left,
html[data-theme="light"] .nm-section .nm-fade-bottom { background: none; }

/* desktop: dissolve the dark plate into the white page with masks, so the
   globe floats with soft edges.
   The radial layer is anchored to the artwork, not to the box. On desktop the
   section is 669px tall and the image is object-fit: cover in a box narrower
   than its aspect, so cover is height-driven: the artwork always renders at
   669/909 = 0.736 scale, centred horizontally. The limb, fitted on the
   source (centre 1013,684), therefore sits at x = 50% + 109px, y = 503px;
   sampled renders put the bright atmosphere ring at r 420-426px at every
   width (verified 1024-1920). The mask stays opaque through the ring and is
   fully clear ~24px outside it, so the lilac atmosphere goes straight to
   white with no black space left to read grey.
   The left layer only engages when the box is narrow enough to crop the
   limb (below ~1440px wide); at 1440+ it collapses to 1px. The bottom layer
   clears the language band with an eased ramp. (Above ~2550px cover turns
   width-driven and the globe would outgrow the circle; not a real width.) */
@media (min-width: 1024px) {
  html[data-theme="light"] .nm-section .nm-globe img {
    -webkit-mask-image:
      radial-gradient(circle at calc(50% + 109px) 503px, #000 0, #000 424px, rgba(0, 0, 0, 0.62) 430px, rgba(0, 0, 0, 0.3) 436px, rgba(0, 0, 0, 0.1) 442px, rgba(0, 0, 0, 0) 448px),
      linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 max(1px, calc((380px - 50%) * 1.8))),
      linear-gradient(to bottom, #000 0, #000 54%, rgba(0, 0, 0, 0.9) 61%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.3) 81%, rgba(0, 0, 0, 0.14) 86%, rgba(0, 0, 0, 0.04) 90%, rgba(0, 0, 0, 0) 92%);
    mask-image:
      radial-gradient(circle at calc(50% + 109px) 503px, #000 0, #000 424px, rgba(0, 0, 0, 0.62) 430px, rgba(0, 0, 0, 0.3) 436px, rgba(0, 0, 0, 0.1) 442px, rgba(0, 0, 0, 0) 448px),
      linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 max(1px, calc((380px - 50%) * 1.8))),
      linear-gradient(to bottom, #000 0, #000 54%, rgba(0, 0, 0, 0.9) 61%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.3) 81%, rgba(0, 0, 0, 0.14) 86%, rgba(0, 0, 0, 0.04) 90%, rgba(0, 0, 0, 0) 92%);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect;
  }
}

/* desktop: light the dissolving edges instead of letting dark-over-white
   read as grey. Both spans sit over the image inside .nm-globe and use
   screen: over white it is a no-op, over the near-black space just outside
   the limb, the thinning left crop and the bottom ramp it turns the mid-tones
   violet, so the globe ends in a lit lilac rim. The rim starts at the bright
   atmosphere ring (r 420px) and the bottom glow only where the mask starts to
   thin (54%), so the globe's opaque face is not lifted. */
@media (min-width: 1024px) {
  html[data-theme="light"] .nm-section .nm-fade-left {
    background:
      radial-gradient(circle at calc(50% + 109px) 503px, rgba(167, 139, 250, 0) 420px, rgba(167, 139, 250, 0.55) 432px, rgba(196, 181, 253, 0.4) 442px, rgba(196, 181, 253, 0) 456px),
      linear-gradient(to right, rgba(167, 139, 250, 0.5) 0, rgba(167, 139, 250, 0) max(1px, calc((380px - 50%) * 1.8)));
    mix-blend-mode: screen;
  }
  html[data-theme="light"] .nm-section .nm-fade-bottom {
    background: linear-gradient(to bottom, rgba(139, 92, 246, 0) 54%, rgba(139, 92, 246, 0.14) 61%, rgba(139, 92, 246, 0.32) 69%, rgba(139, 92, 246, 0.44) 77%, rgba(167, 139, 250, 0.4) 84%, rgba(196, 181, 253, 0.22) 90%, rgba(196, 181, 253, 0) 95%);
    mix-blend-mode: screen;
  }
}

/* mobile/tablet: the globe spans the full width *behind* the copy, so a dark
   render cannot sit there. Re-key it as a light-field map: invert + hue-rotate
   flips the black space to white while keeping the violet network. The city
   lights invert to dark specks, so a slightly shorter hue turn plus saturate
   and a softened contrast make them faint periwinkle instead of charcoal, and
   the mask keeps the texture light behind the
   paragraph and fuller below it, clear of the language band. */
@media (max-width: 1023.98px) {
  /* lifted from .45 so the map reads as the band's image on a phone; the
     mask keeps it at half strength behind the paragraph */
  html[data-theme="light"] .nm-section .nm-globe { opacity: 0.62; }
  html[data-theme="light"] .nm-section .nm-globe img {
    filter: invert(1) hue-rotate(170deg) saturate(1.5) contrast(0.82) brightness(1.06);
    -webkit-mask-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, #000 75%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 50%, #000 56%, #000 74%, rgba(0, 0, 0, 0) 88%);
    mask-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, #000 75%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 50%, #000 56%, #000 74%, rgba(0, 0, 0, 0) 88%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* copy */
html[data-theme="light"] .nm-section .nm-accent { background-image: var(--t-grad-text); }
html[data-theme="light"] .nm-section .nm-sub { color: var(--t-fg-3); }

/* language band: seamless, no grey strip, a hairline that fades at both ends */
html[data-theme="light"] .nm-section .nm-band {
  /* the band only has a 1px top border, so border-image paints just that
     hairline (no geometry change) */
  /* a quiet divider under the copy that is gone before the globe, so it
     never cuts the globe's dissolving base */
  border-image: linear-gradient(90deg, rgba(28, 20, 60, 0) 0%, var(--t-line-soft) 22%, var(--t-line-soft) 48%, rgba(28, 20, 60, 0) 72%) 1;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"] .nm-section .nm-band span { color: var(--t-fg-3); }
html[data-theme="light"] .nm-section .nm-band span:hover { color: var(--t-brand-2); }

/* ------------------------------------------------- who-can-use (reference) */

/* "Live" status chip: emerald-700 text on its emerald tint */
html[data-theme="light"] #who-can-use .text-emerald-400 { color: #047857; }

/* small screens: the reference section's glows sit low in the stack, and its
   overflow-hidden wash layer cut them flat at the section's bottom edge (a
   full-width tinted/white line above the FAQ). Fade the layer out over its
   last 260px instead. */
@media (max-width: 1023.98px) {
  html[data-theme="light"] #who-can-use > div.absolute.overflow-hidden {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), rgba(0, 0, 0, 0) 100%);
  }
}

/* ---------------------------------------------------------------------------
   g7-learnings: recent translations
   --------------------------------------------------------------------------- */
/* ==========================================================================
   g7-learnings — "Recent Translations" video grid, Daylight treatment.
   Every selector is scoped to html[data-theme="light"] #learnings.
   Treatment only: colour, background, border colour, shadow, opacity, filter.
   ========================================================================== */

/* ---------------------------------------------------------------- section */
/* continuous ground with a faint lilac wash that drifts off both edges.
   The first layer is the lower half of the globe -> learnings seam wash
   (g6 paints the upper half at 100% 100% on .nm-section). Transparent
   ground (body is white) so nothing above is painted over. */
html[data-theme="light"] #learnings {
  background:
    radial-gradient(760px 300px at 100% 0%, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0) 100%),
    radial-gradient(50% 30% at 0% 32%, rgba(167, 139, 250, 0.11), transparent 70%),
    radial-gradient(45% 30% at 100% 90%, rgba(129, 140, 248, 0.08), transparent 70%),
    transparent;
}
/* tall phone stack: the lower wash keyed in px so it fades inside the box
   instead of stepping at the learnings -> who-can-use edge */
@media (max-width: 1023.98px) {
  html[data-theme="light"] #learnings {
    background:
      radial-gradient(760px 300px at 100% 0%, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0) 100%),
      radial-gradient(50% 30% at 0% 32%, rgba(167, 139, 250, 0.11), transparent 70%),
      radial-gradient(55% 420px at 100% calc(100% - 520px), rgba(129, 140, 248, 0.08), transparent 70%),
      transparent;
  }
}

/* ------------------------------------------------------------ video cards */
html[data-theme="light"] #learnings .yt-card {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"] #learnings .yt-card:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}

/* card body sits on the card's own white gradient */
html[data-theme="light"] #learnings .yt-card .p-4.bg-neutral-900 { background: transparent; }
html[data-theme="light"] #learnings .yt-card h4 { color: var(--t-fg); }
html[data-theme="light"] #learnings .yt-card p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"] #learnings .yt-card p iconify-icon { color: var(--t-brand); }

/* Thumbnail = dark island. A dark plate behind the image means the hover
   opacity dip darkens (as in Dark) instead of bleaching toward white. */
html[data-theme="light"] #learnings .yt-card .aspect-video { background-color: #0c0a14; }

/* The overlay was a dark-to-transparent scrim that the base theme turned into
   a white wash. Replace it with a short, light dark-scrim along the bottom
   edge only: the picture stays fully vivid and the duration chip gets a seat. */
html[data-theme="light"] #learnings .yt-card .bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(12, 10, 20, 0.30) 0%, rgba(12, 10, 20, 0) 30%);
}

/* Overlay chips and the play disc stay dark smoked glass, as in Dark: the
   thumbnail is a dark island, so white stickers would read as UI pasted
   over the picture. */
html[data-theme="light"] #learnings .yt-card .bg-red-500\/20,
html[data-theme="light"] #learnings .yt-card .bg-purple-500\/20,
html[data-theme="light"] #learnings .yt-card .bg-black\/70 {
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

/* YouTube badge: smoked red glass, red-400 glyph, red-100 text */
html[data-theme="light"] #learnings .yt-card .bg-red-500\/20 {
  background-color: rgba(40, 10, 14, 0.55);
  border-color: rgba(252, 165, 165, 0.30);
  color: #fee2e2;
}
html[data-theme="light"] #learnings .yt-card .bg-red-500\/20 iconify-icon { color: #f87171; }

/* language badge: smoked violet glass, violet-100 text */
html[data-theme="light"] #learnings .yt-card .bg-purple-500\/20 {
  background-color: rgba(30, 16, 60, 0.55);
  border-color: rgba(196, 181, 253, 0.35);
  color: #ede9fe;
}

/* duration chip: dark glass, white numerals */
html[data-theme="light"] #learnings .yt-card .bg-black\/70 {
  background-color: rgba(12, 10, 20, 0.62);
  color: #ffffff;
}

/* play button: dark glass disc, white glyph; on hover it turns solid white
   with a violet glyph, a clear affordance */
html[data-theme="light"] #learnings .yt-card .w-12.h-12 {
  background-color: rgba(12, 10, 20, 0.38);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(12, 10, 20, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
html[data-theme="light"] #learnings .yt-card:hover .w-12.h-12 {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--t-brand);
  box-shadow: 0 2px 6px rgba(12, 10, 20, 0.14), 0 18px 36px -12px rgba(76, 29, 149, 0.55);
}

/* ----------------------------------------- "Go Global in Minutes" promo */
/* featured soft card: a lit white card with the page's standard-strength
   violet corner glow (in step with the other featured cards) */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 {
  background:
    radial-gradient(110% 75% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 58%),
    radial-gradient(90% 60% at 0% 100%, rgba(129, 140, 248, 0.07), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #fcfaff 50%, #f7f3ff 100%);
  border-color: rgba(124, 58, 237, 0.14);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"] #learnings .break-inside-avoid.p-6:hover {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: var(--t-shadow-hover);
}

/* the dark photo + dark scrim belonged to the black card; retire both */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 > .absolute.inset-0 img { opacity: 0; }
html[data-theme="light"] #learnings .break-inside-avoid.p-6 > .absolute.inset-0 > .bg-gradient-to-b {
  background-image: none;
}

/* corner sparkle reads as a soft violet mark */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 > .opacity-20 { opacity: 0.22; }
html[data-theme="light"] #learnings .break-inside-avoid.p-6 > .opacity-20 iconify-icon { color: #8b5cf6; }

/* "Trending Now" eyebrow pill */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 .rounded-full.bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: var(--t-shadow-1);
}

html[data-theme="light"] #learnings .break-inside-avoid.p-6 h3 { color: var(--t-fg); }
html[data-theme="light"] #learnings .break-inside-avoid.p-6 li { color: var(--t-fg-2); }

/* violet check tiles */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 li > .rounded-full {
  background: linear-gradient(rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.12)), #ffffff;
  border-color: rgba(124, 58, 237, 0.24);
  color: var(--t-brand-2);
}

/* stat chips */
html[data-theme="light"] #learnings .break-inside-avoid.p-6 .rounded.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: var(--t-line);
  color: var(--t-fg-3);
  box-shadow: var(--t-shadow-1);
}

/* ---------------------------------------------------------------------------
   g8-footer: FAQ and footer
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Daylight — g8: FAQ (#faq) + footer (.oc-foot)
   Treatment only. Every selector is scoped to html[data-theme="light"].
   ========================================================================== */

/* ------------------------------------------------------------------ FAQ */

/* section ground: white. Two top washes continue the tint that
   #who-can-use carries at its bottom edge (lilac left, fainter right, white
   centre) and fade out within ~250px, so there is no step at the seam; a
   faint wash low down carries into the footer's lilac ground. */
html[data-theme="light"] #faq.bg-black {
  /* transparent over the white body, so the reference card's soft shadow
     above is not cut flat at the seam */
  background-color: transparent;
  background-image:
    radial-gradient(640px 260px at 0% 0%, rgba(167, 139, 250, 0.055), rgba(167, 139, 250, 0.042) 40%, rgba(167, 139, 250, 0) 100%),
    radial-gradient(560px 240px at 87% 0%, rgba(167, 139, 250, 0.036), rgba(167, 139, 250, 0) 100%),
    radial-gradient(60% 45% at 85% 100%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%);
}

/* small screens: #who-can-use ends on its (clipped) indigo glow, a centred,
   near-neutral tint, rather than the desktop lilac-left / white-centre
   profile, so the FAQ top picks up that tint instead */
@media (max-width: 640px) {
  html[data-theme="light"] #faq.bg-black {
    background-image:
      radial-gradient(70% 200px at 50% 0%, rgba(60, 50, 110, 0.012), rgba(60, 50, 110, 0) 100%),
      radial-gradient(60% 45% at 85% 100%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%);
  }
}

/* the container becomes the featured soft card (corner glow, wide shadow) */
html[data-theme="light"] #faq .max-w-3xl.bg-neutral-900\/30 {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(167, 139, 250, 0.14), transparent 55%),
    linear-gradient(180deg, #fdfcff 0%, #f9f7ff 100%);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
/* small screens: the bottom padding is shorter (56px), so the card's wide
   shadow-3 ran into the footer and was cut off at the seam; a tighter shadow
   fades out before it */
@media (max-width: 640px) {
  html[data-theme="light"] #faq .max-w-3xl.bg-neutral-900\/30 { box-shadow: var(--t-shadow-2); }
}

html[data-theme="light"] #faq h2.text-white { color: var(--t-fg); }
html[data-theme="light"] #faq .mb-10 > p.text-neutral-400 { color: var(--t-fg-3); }

/* rows: white, hairline, barely-there lift */
html[data-theme="light"] #faq .faq-item.bg-white\/5 {
  background-color: #ffffff;
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="light"] #faq .faq-item.bg-white\/5:hover {
  border-color: var(--t-brand-line);
}
html[data-theme="light"] #faq .faq-item.bg-white\/5:has(.accordion-content.open) {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}

html[data-theme="light"] #faq .faq-trigger.hover\:bg-white\/5:hover {
  background-color: rgba(124, 58, 237, 0.04);
}
html[data-theme="light"] #faq .faq-trigger .text-white { color: var(--t-fg); }

/* +/- icon in brand violet */
html[data-theme="light"] #faq .accordion-icon.text-neutral-400 { color: var(--t-brand); }

/* open answer: no grey slab, muted ink */
html[data-theme="light"] #faq .accordion-content.bg-black\/20 { background-color: transparent; }
html[data-theme="light"] #faq .accordion-content .text-neutral-400 { color: var(--t-fg-3); }

html[data-theme="light"] #faq .faq-trigger:focus-visible {
  outline: 2px solid var(--t-brand);
  outline-offset: -2px;
}

/* --------------------------------------------------------------- FOOTER */

/* ground: continues from the white page into a faint lilac wash.
   --oc-* tokens are re-pointed so the component's own rules (watermark
   fade, hairlines, dim text) resolve to light values. */
html[data-theme="light"] .oc-foot {
  --oc-bg: #f6f3ff;
  --oc-muted: var(--t-fg-3);
  --oc-dim: var(--t-fg-4);
  --oc-line: var(--t-line-soft);
  --oc-accent: var(--t-brand);
  background-color: #f6f3ff;
  background-image:
    radial-gradient(60% 22% at 85% 0%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
    radial-gradient(40% 24% at 88% 26%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 22%, #f6f3ff 62%, #f6f3ff 100%);
  /* paint the gradients under the (kept, 1px, transparent) top border too,
     and never tile them: otherwise the strip shows the gradient's lilac tail */
  background-origin: border-box;
  background-repeat: no-repeat;
  border-top-color: transparent;
  color: var(--t-fg);
}

/* --- signup pill ------------------------------------------------------- */
html[data-theme="light"] .oc-foot .oc-foot-signup form {
  background: #ffffff;
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"] .oc-foot .oc-foot-signup form:hover,
html[data-theme="light"] .oc-foot .oc-foot-signup form:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"] .oc-foot .oc-foot-signup input {
  background: transparent;
  border: 0;
  color: var(--t-fg);
}
html[data-theme="light"] .oc-foot .oc-foot-signup input::placeholder { color: var(--t-fg-4); opacity: 1; }
html[data-theme="light"] .oc-foot .oc-foot-signup .oc-foot-go {
  background: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] .oc-foot .oc-foot-signup .oc-foot-go:hover {
  background: var(--t-brand);
  color: #ffffff;
}

/* --- brand row --------------------------------------------------------- */
html[data-theme="light"] .oc-foot .oc-foot-wordmark { color: var(--t-fg); }
/* "Dub." speaks in the page's one accent voice (violet -> indigo) */
html[data-theme="light"] .oc-foot .oc-foot-wordmark span {
  color: #6d28d9;
  background-image: var(--t-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .oc-foot .oc-foot-blurb { color: var(--t-fg-3); }

/* social: individual white chips */
html[data-theme="light"] .oc-foot .oc-foot-social { background: transparent; }
html[data-theme="light"] .oc-foot .oc-foot-social a {
  color: var(--t-fg-2);
  background: #ffffff;
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"] .oc-foot .oc-foot-social a:hover {
  color: var(--t-brand);
  background: var(--t-tint-bg);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: var(--t-shadow-hover);
}

/* --- purple CTA card stays purple ------------------------------------- */
/* violet -> indigo like every other accent, with a shadow in step with the
   page's shadow-3 family rather than a saturated violet halo */
html[data-theme="light"] .oc-foot .oc-foot-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b45e0 100%) #6d28d9;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(46, 16, 101, 0.08), 0 30px 60px -32px rgba(91, 33, 182, 0.34);
}
html[data-theme="light"] .oc-foot .oc-foot-card:hover {
  box-shadow: 0 2px 6px rgba(46, 16, 101, 0.08), 0 34px 64px -28px rgba(91, 33, 182, 0.42);
}
html[data-theme="light"] .oc-foot .oc-foot-card h3 { color: #ffffff; }
html[data-theme="light"] .oc-foot .oc-foot-card p { color: rgba(255, 255, 255, 0.97); }
html[data-theme="light"] .oc-foot .oc-foot-card-meta {
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.26);
}
html[data-theme="light"] .oc-foot .oc-foot-card-glyph { color: rgba(255, 255, 255, 0.16); }

/* --- navigation -------------------------------------------------------- */
html[data-theme="light"] .oc-foot .oc-foot-nav { border-top-color: var(--t-line); }
html[data-theme="light"] .oc-foot .oc-foot-col h3 { color: var(--t-fg-3); }
html[data-theme="light"] .oc-foot .oc-foot-col a { color: var(--t-fg-2); }
html[data-theme="light"] .oc-foot .oc-foot-col a:hover { color: var(--t-brand); }

/* --- watermark: soft violet-grey, fading downward, no dark band -------- */
html[data-theme="light"] .oc-foot .oc-foot-mark { color: inherit; }
html[data-theme="light"] .oc-foot .oc-foot-mark span {
  color: rgba(91, 33, 182, 0.10);
  background-image: linear-gradient(180deg,
      rgba(109, 40, 217, 0.17) 0%,
      rgba(109, 40, 217, 0.09) 55%,
      rgba(109, 40, 217, 0.02) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .oc-foot .oc-foot-mark::after {
  background: linear-gradient(to top, #f6f3ff, rgba(246, 243, 255, 0));
}

/* small screens: the component shrinks the mark to 22vw while its 6rem fade
   overlay stays the same height, so the fade covers almost the whole glyph.
   Boost the ink and let the overlay start lighter, keeping the downward fade. */
@media (max-width: 640px) {
  html[data-theme="light"] .oc-foot .oc-foot-mark span {
    background-image: linear-gradient(180deg,
        rgba(109, 40, 217, 0.24) 0%,
        rgba(109, 40, 217, 0.15) 55%,
        rgba(109, 40, 217, 0.05) 100%);
  }
  html[data-theme="light"] .oc-foot .oc-foot-mark::after {
    background: linear-gradient(to top, rgba(246, 243, 255, 0.92), rgba(246, 243, 255, 0) 75%);
  }
}

/* --- bottom bar -------------------------------------------------------- */
html[data-theme="light"] .oc-foot .oc-foot-copy { color: var(--t-fg-3); }
html[data-theme="light"] .oc-foot .oc-foot-legal a { color: var(--t-fg-3); }
html[data-theme="light"] .oc-foot .oc-foot-legal a:hover { color: var(--t-brand); }

html[data-theme="light"] .oc-foot a:focus-visible,
html[data-theme="light"] .oc-foot input:focus-visible {
  outline-color: var(--t-brand);
}

/* ---------------------------------------------------------------------------
   p-audience: page layer: audience
   --------------------------------------------------------------------------- */
/* ==========================================================================
   p-audience — /for/<audience> landing pages and the /for hub (one template),
   Daylight treatment. Every selector is scoped to
   html[data-theme="light"][data-page="audience"]. Treatment only: colour,
   background, border colour, shadow, opacity, filter. Dark is untouched.

   The template (assets/octavia-audience.css) drives most of its colour
   through custom properties on .oc-a, so the light palette starts by
   restating those; the handful of hardcoded greys (#525252, #737373,
   #d4d4d4, #e5e5e5) are then overridden one by one.
   ========================================================================== */

/* ------------------------------------------------------------------ ground */
/* One continuous, softly lit surface: the dark #050505 slab becomes white,
   with lilac / periwinkle washes that drift across section boundaries
   (positioned on the whole template, so no section edge cuts a glow). */
html[data-theme="light"][data-page="audience"] .oc-a {
  --a-bg: #ffffff;
  --a-panel: #ffffff;
  --a-ink: var(--t-fg);
  --a-body: var(--t-fg-3);
  --a-dim: var(--t-fg-3);
  --a-line: var(--t-line-soft);
  --a-line-hover: var(--t-brand-line);
  --a-tile: var(--t-brand-soft);
  --a-violet: var(--t-brand);

  background:
    radial-gradient(820px 620px at 88% 1%, rgba(167, 139, 250, 0.22), transparent 70%),
    radial-gradient(640px 540px at 2% 8%, rgba(129, 140, 248, 0.12), transparent 70%),
    radial-gradient(860px 640px at 100% 27%, rgba(129, 140, 248, 0.12), transparent 70%),
    radial-gradient(800px 660px at 0% 42%, rgba(167, 139, 250, 0.14), transparent 70%),
    radial-gradient(800px 600px at 100% 60%, rgba(167, 139, 250, 0.12), transparent 70%),
    radial-gradient(800px 640px at 0% 78%, rgba(129, 140, 248, 0.11), transparent 70%),
    radial-gradient(1000px 700px at 50% 97%, rgba(167, 139, 250, 0.16), transparent 70%),
    #ffffff;
}

/* --------------------------------------------------------------- seams */
/* no hard full-width dividers between sections: continuous ground */
html[data-theme="light"][data-page="audience"] .oc-a-sec,
html[data-theme="light"][data-page="audience"] .oc-a-close { border-top-color: transparent; }

/* ------------------------------------------------------------------- atoms */
/* eyebrow pill: lilac-white, violet hairline, violet-700 text */
html[data-theme="light"][data-page="audience"] .oc-a-pill {
  background: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), 0 8px 20px -14px rgba(124, 58, 237, 0.35);
}

/* section labels: tracked mono eyebrow in brand violet instead of grey */
html[data-theme="light"][data-page="audience"] .oc-a-label { color: var(--t-brand-2); }

/* ----------------------------------------------------------------- buttons */
html[data-theme="light"][data-page="audience"] .oc-a-btn-primary {
  background: var(--t-fg);
  border-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 14px 28px -16px rgba(46, 16, 101, 0.45);
}
html[data-theme="light"][data-page="audience"] .oc-a-btn-primary:hover {
  background: var(--t-fg-2);
  border-color: var(--t-fg-2);
}
html[data-theme="light"][data-page="audience"] .oc-a-btn-ghost {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="audience"] .oc-a-btn-ghost:hover {
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
}

/* -------------------------------------------------------------------- hero */
/* 16ch split each first clause mid-sentence ("Comprehension is the / product.");
   22ch fits the longest one ("Every employee got the message." ~21.2ch) on a
   single line from tablet up, and balance evens out the lines that still wrap */
html[data-theme="light"][data-page="audience"] .oc-a-hero h1 {
  max-width: 22ch;
  color: var(--t-fg);
  text-wrap: balance;
}

/* the second clause "sat back" in #525252 on black; on white a grey clause
   reads as disabled, so it carries the site's violet-to-indigo accent */
html[data-theme="light"][data-page="audience"] .oc-a-hero h1 em {
  color: var(--t-brand-2);
  background-image: var(--t-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"][data-page="audience"] .oc-a-lede { color: var(--t-fg-3); }
html[data-theme="light"][data-page="audience"] .oc-a-trust li { color: var(--t-fg-3); }
html[data-theme="light"][data-page="audience"] .oc-a-trust iconify-icon { color: var(--t-brand); }

/* stat row: on white the open strip read as a stray rule glued under the
   trust line, its top hairline never meeting the dividers. Here the four
   figures sit on one soft card (reference "Get Octavia Pro"), set off from
   the trust line, with dividers that run into the card's own edge.
   Layout exception to this layer's treatment-only rule (margin, radius,
   cell padding), light-scoped, so dark is untouched. */
html[data-theme="light"][data-page="audience"] .oc-a-stats {
  margin-top: 2.5rem;
  border: 1px solid var(--t-card-border);
  border-radius: 1.25rem;
  background:
    radial-gradient(40% 140% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 62%),
    var(--t-card-bg);
  box-shadow: var(--t-shadow-2);
}
/* 2 x 2 below 900px, one row of four above */
html[data-theme="light"][data-page="audience"] .oc-a-stat { padding: 1.5rem 1.25rem; }
html[data-theme="light"][data-page="audience"] .oc-a-stat:nth-child(even) { border-left: 1px solid var(--t-line-soft); }
html[data-theme="light"][data-page="audience"] .oc-a-stat:nth-child(n+3) { border-top: 1px solid var(--t-line-soft); }
@media (min-width: 900px) {
  html[data-theme="light"][data-page="audience"] .oc-a-stat { padding: 2rem; }
  html[data-theme="light"][data-page="audience"] .oc-a-stat + .oc-a-stat { border-left: 1px solid var(--t-line-soft); }
  html[data-theme="light"][data-page="audience"] .oc-a-stat:nth-child(n+3) { border-top: 0; }
}
html[data-theme="light"][data-page="audience"] .oc-a-stat b { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-stat span { color: var(--t-fg-3); }

/* ---------------------------------------------------------------- sections */
html[data-theme="light"][data-page="audience"] .oc-a-sec h2,
html[data-theme="light"][data-page="audience"] .oc-a-close h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-sec-lede { color: var(--t-fg-3); }

/* --------------------------------------------------------------- obstacles */
html[data-theme="light"][data-page="audience"] .oc-a-pain { border-top-color: var(--t-line-soft); }
html[data-theme="light"][data-page="audience"] .oc-a-pain::before { color: var(--t-brand); }
html[data-theme="light"][data-page="audience"] .oc-a-pain h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-pain p { color: var(--t-fg-3); }

/* ------------------------------------------------------- capability bento */
/* soft cards, each lit by a faint glow of its own icon hue in the top-right
   corner (the reference card's lilac glow, per accent) */
html[data-theme="light"][data-page="audience"] .oc-a-cap {
  --cap-glow: rgba(167, 139, 250, 0.14);
  background:
    radial-gradient(70% 60% at 100% 0%, var(--cap-glow), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="audience"] .oc-a-cap h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-cap p { color: var(--t-fg-3); }

/* tinted icon tiles: hue fill ~9%, border ~18%, glyph at the hue's 600/700 */
html[data-theme="light"][data-page="audience"] .oc-a-cap-icon {
  background: rgba(124, 58, 237, 0.09);
  border-color: rgba(124, 58, 237, 0.18);
  color: #7c3aed;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+1) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+1) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+6) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+6) .oc-a-cap-icon {
  background: rgba(124, 58, 237, 0.09);
  border-color: rgba(124, 58, 237, 0.18);
  color: #7c3aed;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+2) { --cap-glow: rgba(251, 191, 36, 0.13); }
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+2) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+2) .oc-a-cap-icon {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.22);
  color: #b45309;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+3) { --cap-glow: rgba(52, 211, 153, 0.12); }
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+3) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+3) .oc-a-cap-icon {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.20);
  color: #047857;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+4) { --cap-glow: rgba(56, 189, 248, 0.12); }
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+4) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+4) .oc-a-cap-icon {
  background: rgba(14, 165, 233, 0.09);
  border-color: rgba(14, 165, 233, 0.20);
  color: #0369a1;
}
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+5) { --cap-glow: rgba(251, 113, 133, 0.12); }
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+5) .oc-a-cap-icon,
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:nth-child(6n+5) .oc-a-cap-icon {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.18);
  color: #be123c;
}
/* the full-width closing card of the bento is the featured one */
html[data-theme="light"][data-page="audience"] .oc-a-cap:nth-child(6n+6) {
  --cap-glow: rgba(167, 139, 250, 0.16);
  background:
    radial-gradient(40% 90% at 100% 0%, var(--cap-glow), transparent 60%),
    radial-gradient(30% 80% at 0% 100%, rgba(129, 140, 248, 0.07), transparent 60%),
    var(--t-card-bg);
  box-shadow: var(--t-shadow-3);
}

/* ---------------------------------------------------------------- workflow */
/* each step sits under a soft lilac rule (the brand hairline, not grey) */
html[data-theme="light"][data-page="audience"] .oc-a-step { border-top-color: rgba(124, 58, 237, 0.22); }
html[data-theme="light"][data-page="audience"] .oc-a-step b { color: var(--t-brand-2); }
html[data-theme="light"][data-page="audience"] .oc-a-step h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-step p { color: var(--t-fg-3); }

/* ------------------------------------------------------------ deliverables */
html[data-theme="light"][data-page="audience"] .oc-a-output {
  background: #ffffff;
  border-color: var(--t-card-border);
  color: var(--t-fg-2);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="audience"] .oc-a-output:hover { border-color: var(--t-brand-line); }

/* --------------------------------------------------------------------- FAQ */
html[data-theme="light"][data-page="audience"] .oc-a-faq details { border-top-color: var(--t-line); }
html[data-theme="light"][data-page="audience"] .oc-a-faq details:last-of-type { border-bottom-color: var(--t-line); }
html[data-theme="light"][data-page="audience"] .oc-a-faq summary { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-faq summary:hover { color: var(--t-brand-ink); }
html[data-theme="light"][data-page="audience"] .oc-a-faq summary i::before,
html[data-theme="light"][data-page="audience"] .oc-a-faq summary i::after { background: var(--t-brand); }
html[data-theme="light"][data-page="audience"] .oc-a-faq details[open] summary i::before { background: var(--t-brand-2); }
html[data-theme="light"][data-page="audience"] .oc-a-faq p { color: var(--t-fg-3); }

/* ---------------------------------------------------------- related reading */
html[data-theme="light"][data-page="audience"] .oc-a-read {
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-2);
  transition: border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
html[data-theme="light"][data-page="audience"] .oc-a-read:hover {
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="audience"] .oc-a-read iconify-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="audience"] .oc-a-read:hover iconify-icon { color: var(--t-brand-2); }

/* -------------------------------------------------------- sibling audiences */
html[data-theme="light"][data-page="audience"] .oc-a-sibling {
  background: #ffffff;
  border-color: var(--t-card-border);
  color: var(--t-fg-2);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="audience"] .oc-a-sibling:hover {
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
}
html[data-theme="light"][data-page="audience"] .oc-a-sibling[aria-current='page'] {
  background: var(--t-tint-bg);
  border-color: rgba(124, 58, 237, 0.28);
  color: var(--t-brand-ink);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), 0 8px 20px -14px rgba(124, 58, 237, 0.45);
}
/* group labels match the section eyebrows; the hub link is a violet underline */
html[data-theme="light"][data-page="audience"] .oc-a-group-label { color: var(--t-brand-2); }
html[data-theme="light"][data-page="audience"] .oc-a-all {
  color: var(--t-brand-ink);
  border-bottom-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="audience"] .oc-a-all:hover { border-bottom-color: var(--t-brand); }

/* ---------------------------------------------------------- hub directory */
/* same soft card as related reading, icon tiles on the capability hue cycle */
html[data-theme="light"][data-page="audience"] .oc-a-dir-card {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="audience"] .oc-a-dir-card h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="audience"] .oc-a-dir-card p { color: var(--t-fg-3); }
html[data-theme="light"][data-page="audience"] .oc-a-dir-go { color: var(--t-brand); }
html[data-theme="light"][data-page="audience"] .oc-a-dir-card:hover .oc-a-dir-go { color: var(--t-brand-2); }

/* ------------------------------------------------------------ closing panel */
/* the featured card of the page: reference "Get Octavia Pro" treatment */
html[data-theme="light"][data-page="audience"] .oc-a-close-panel {
  background:
    radial-gradient(45% 70% at 100% 0%, rgba(167, 139, 250, 0.20), transparent 62%),
    radial-gradient(40% 70% at 0% 100%, rgba(129, 140, 248, 0.10), transparent 62%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="audience"] .oc-a-close p { color: var(--t-fg-3); }

/* ------------------------------------------------------------------- focus */
html[data-theme="light"][data-page="audience"] .oc-a a:focus-visible,
html[data-theme="light"][data-page="audience"] .oc-a summary:focus-visible {
  outline-color: rgba(124, 58, 237, 0.7);
}

/* ---------------------------------------------------------------------------
   p-blog: page layer: blog
   --------------------------------------------------------------------------- */
/* ==========================================================================
   p-blog — Daylight treatment for the blog (listing + articles)
   data-page: blog-list (blog.html, blog/page/N, blog/category/X)
              blog-article (342 generated articles)
   Source styles: assets/blog/css/blog.css (dark-designed, uses :root vars).
   Every selector is scoped to html[data-theme="light"] + the two page ids.
   ========================================================================== */

/* ---- 1. Re-point the blog's own tokens (they live on :root = <html>) ---- */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) {
  --blog-bg: #ffffff;
  --blog-surface: #ffffff;
  --blog-surface-raised: #fbfaff;
  --blog-line: rgba(91, 33, 182, 0.1);
  --blog-line-strong: rgba(91, 33, 182, 0.1);
  --blog-text: #0c0a14;
  --blog-muted: #555262;
  --blog-faint: #6e6a7c;
  --blog-violet: #7c3aed;
  --blog-violet-strong: #7c3aed;
}

/* ---- 2. Page ground: white with a soft lilac dawn that drifts down -------- */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-shell,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .article-shell {
  background:
    radial-gradient(70% 520px at 50% 0%, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0) 72%),
    radial-gradient(42% 620px at 100% 22%, rgba(129, 140, 248, 0.07), rgba(129, 140, 248, 0) 70%),
    radial-gradient(46% 720px at 0% 58%, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0) 70%),
    radial-gradient(60% 700px at 50% 100%, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0) 72%),
    #ffffff;
}

/* faint lilac blueprint grid under the masthead (was white-on-black lines) */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-shell::before {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
}

/* ---- 3. Pills: eyebrow, filters, categories ------------------------------- */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-kicker,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .article-category,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured .blog-category {
  border-color: rgba(124, 58, 237, 0.16);
  background: #faf8ff;
  color: #6d28d9;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .article-category:hover {
  border-color: rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}

html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-filter {
  border-color: rgba(91, 33, 182, 0.1);
  background: #ffffff;
  color: #3d3a4a;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 6px 18px -12px rgba(28, 20, 60, 0.12);
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-filter:hover {
  border-color: rgba(124, 58, 237, 0.24);
  background: #faf8ff;
  color: #5b21b6;
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-filter[aria-current="page"] {
  border-color: rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.09);
  color: #5b21b6;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 8px 20px -12px rgba(124, 58, 237, 0.35);
}

/* category pill sitting on a card image: white chip, violet ink */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card .blog-category {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.94);
  color: #5b21b6;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.08), 0 8px 20px -10px rgba(28, 20, 60, 0.3);
}

/* ---- 4. Masthead ---------------------------------------------------------- */
html[data-theme="light"][data-page="blog-list"] .blog-heading { color: #0c0a14; }
html[data-theme="light"][data-page="blog-list"] .blog-heading em { color: #6d28d9; }
html[data-theme="light"][data-page="blog-list"] .blog-intro { color: #555262; }
html[data-theme="light"][data-page="blog-list"] .blog-index-count { color: #555262; }

/* ---- 5. Featured story: the one card that matters most -------------------- */
html[data-theme="light"][data-page="blog-list"] .blog-featured {
  border-color: rgba(91, 33, 182, 0.08);
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 40px 80px -40px rgba(46, 16, 101, 0.28);
}
html[data-theme="light"][data-page="blog-list"] .blog-featured:hover {
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 44px 90px -40px rgba(76, 29, 149, 0.34);
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured-media,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-media {
  background: #f6f4fd;
}
/* the dark fade that melted the image into a black copy panel: gone — the
   image now meets the white copy panel on a clean edge */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured-media::after,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-media::after {
  background: none;
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured-media img,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-media img {
  filter: saturate(0.9) contrast(1.04) brightness(0.94);
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured:hover .blog-featured-media img,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card:hover .blog-card-media img {
  filter: saturate(1) contrast(1.04) brightness(1);
}

html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-featured-meta,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-date,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .article-meta {
  color: #6e6a7c;
}
html[data-theme="light"][data-page="blog-list"] .blog-featured-meta { color: #555262; }
html[data-theme="light"][data-page="blog-list"] .blog-featured-title { color: #0c0a14; }
html[data-theme="light"][data-page="blog-list"] .blog-featured-description { color: #555262; }

/* "Read article →" — ink label, tinted violet arrow tile */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-read-link { color: #0c0a14; }
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-read-link span {
  border-color: rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-read-link:hover { color: #5b21b6; }
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-read-link:hover span {
  border-color: rgba(124, 58, 237, 0.34);
  background: rgba(124, 58, 237, 0.14);
}

/* ---- 6. Story cards: image on top, calm white copy panel below ------------ */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card {
  border-color: rgba(91, 33, 182, 0.08);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 24px 48px -28px rgba(46, 16, 101, 0.2);
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card:hover {
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 30px 60px -30px rgba(76, 29, 149, 0.3);
}
/* Light-only geometry (forced): in dark the image fills the whole card and a
   black gradient carries white copy. On white the copy must sit on white, so
   the image is confined to the card's top band ... */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-media {
  bottom: auto;
  height: 50%;
}
/* ... and the copy carries a white panel that bleeds to the card edges
   (border-image outset paints without affecting layout), starting just above
   the title, so text never sits on the image whatever the title length. */
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-copy {
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 6.2rem, #ffffff 6.2rem) fill 0 / 0 / 0 1.6rem 1.6rem;
}
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-title { color: #0c0a14; }
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-description { color: #555262; }
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .blog-card-date::before,
html[data-theme="light"]:is([data-page="blog-list"], [data-page="blog-article"]) .article-meta-dot::before {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
}

/* ---- 7. Pagination --------------------------------------------------------- */
html[data-theme="light"][data-page="blog-list"] .pagination-link {
  border-color: rgba(91, 33, 182, 0.1);
  background: #ffffff;
  color: #3d3a4a;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 6px 18px -12px rgba(28, 20, 60, 0.12);
}
html[data-theme="light"][data-page="blog-list"] .pagination-link:hover {
  border-color: rgba(124, 58, 237, 0.26);
  background: #faf8ff;
  color: #5b21b6;
}
html[data-theme="light"][data-page="blog-list"] .pagination-link[aria-current="page"] {
  border-color: rgba(124, 58, 237, 0.32);
  background: rgba(124, 58, 237, 0.09);
  color: #5b21b6;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 8px 20px -12px rgba(124, 58, 237, 0.35);
}
/* disabled: no fading to illegible grey — calm lilac-white, muted ink */
html[data-theme="light"][data-page="blog-list"] .pagination-link[aria-disabled="true"] {
  opacity: 1;
  border-color: rgba(91, 33, 182, 0.07);
  background: #fbfaff;
  color: #6e6a7c;
  box-shadow: none;
}

/* ---- 8. Article header + hero image --------------------------------------- */
html[data-theme="light"][data-page="blog-article"] .article-progress {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.35);
}
html[data-theme="light"][data-page="blog-article"] .article-title { color: #0c0a14; }
html[data-theme="light"][data-page="blog-article"] .article-deck { color: #555262; }
html[data-theme="light"][data-page="blog-article"] .article-hero-image {
  border-color: rgba(91, 33, 182, 0.08);
  background: #f6f4fd;
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 48px 96px -48px rgba(46, 16, 101, 0.32);
}
html[data-theme="light"][data-page="blog-article"] .article-hero-image::after { background: none; }
html[data-theme="light"][data-page="blog-article"] .article-hero-image img {
  filter: saturate(0.92) contrast(1.04) brightness(0.96);
}

/* ---- 9. TOC + share rail ---------------------------------------------------- */
html[data-theme="light"][data-page="blog-article"] .article-toc-label,
html[data-theme="light"][data-page="blog-article"] .article-share-label { color: #6d28d9; }
html[data-theme="light"][data-page="blog-article"] .article-toc a { color: #555262; }
html[data-theme="light"][data-page="blog-article"] .article-toc a:hover,
html[data-theme="light"][data-page="blog-article"] .article-toc a.is-active { color: #5b21b6; }

html[data-theme="light"][data-page="blog-article"] .article-share-btn {
  border-color: rgba(91, 33, 182, 0.1);
  background: #ffffff;
  color: #555262;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 6px 18px -12px rgba(28, 20, 60, 0.14);
}
html[data-theme="light"][data-page="blog-article"] .article-share-btn:hover {
  border-color: rgba(124, 58, 237, 0.26);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}
html[data-theme="light"][data-page="blog-article"] .article-share-btn.is-copied {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.09);
  color: #047857;
}
html[data-theme="light"][data-page="blog-article"] .article-follow-link { color: #555262; }
html[data-theme="light"][data-page="blog-article"] .article-follow-link iconify-icon { color: #7c3aed; }
html[data-theme="light"][data-page="blog-article"] .article-follow-link:hover,
html[data-theme="light"][data-page="blog-article"] .article-follow-link:hover iconify-icon { color: #5b21b6; }

/* ---- 10. Long-form typography ---------------------------------------------- */
html[data-theme="light"][data-page="blog-article"] .article-body { color: #3d3a4a; }
html[data-theme="light"][data-page="blog-article"] .article-body h2,
html[data-theme="light"][data-page="blog-article"] .article-body h3,
html[data-theme="light"][data-page="blog-article"] .article-body h4 { color: #0c0a14; }
html[data-theme="light"][data-page="blog-article"] .article-body strong { color: #0c0a14; }
html[data-theme="light"][data-page="blog-article"] .article-body em { color: #2a2638; }
html[data-theme="light"][data-page="blog-article"] .article-body li::marker { color: #7c3aed; }
html[data-theme="light"][data-page="blog-article"] .article-body a {
  color: #6d28d9;
  text-decoration-color: rgba(109, 40, 217, 0.32);
}
html[data-theme="light"][data-page="blog-article"] .article-body a:hover {
  color: #5b21b6;
  text-decoration-color: rgba(91, 33, 182, 0.6);
}
html[data-theme="light"][data-page="blog-article"] .article-body blockquote {
  border-color: rgba(124, 58, 237, 0.16);
  border-left-color: #8b5cf6;
  background: #faf8ff;
  color: #2a2638;
}
html[data-theme="light"][data-page="blog-article"] .article-body hr {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0));
}
/* inline code: lilac chip (spread shadow pads it visually without reflow) */
html[data-theme="light"][data-page="blog-article"] .article-body code {
  border-radius: 0.3em;
  background: #f6f4fd;
  box-shadow: 0 0 0 0.16em #f6f4fd, 0 0 0 calc(0.16em + 1px) rgba(124, 58, 237, 0.14);
  color: #5b21b6;
}
html[data-theme="light"][data-page="blog-article"] .article-body table { border-color: rgba(91, 33, 182, 0.1); }
html[data-theme="light"][data-page="blog-article"] .article-body th {
  background: #faf8ff;
  color: #0c0a14;
}
html[data-theme="light"][data-page="blog-article"] .article-body td { border-color: rgba(91, 33, 182, 0.08); }

/* ---- 11. Article end + related -------------------------------------------- */
html[data-theme="light"][data-page="blog-article"] .article-end {
  border-top-color: rgba(91, 33, 182, 0.1);
}
html[data-theme="light"][data-page="blog-article"] .article-author-copy strong { color: #0c0a14; }
html[data-theme="light"][data-page="blog-article"] .article-author-copy span { color: #6e6a7c; }
html[data-theme="light"][data-page="blog-article"] .related-heading h2 { color: #0c0a14; }

/* ---------------------------------------------------------------------------
   p-docs: page layer: docs
   --------------------------------------------------------------------------- */
/* ==========================================================================
   p-docs — Daylight treatment for docs.html  (data-page="docs")
   The docs page styles itself with an inline <style> block full of hardcoded
   dark colours (#0A0A0A panels, #a3a3a3/#b8b8b8 copy, pastel-on-black syntax
   tokens). Every rule here is scoped to html[data-theme="light"][data-page="docs"]
   so the Dark theme is untouched. Treatment only: colour, background, border
   colour, shadow. No geometry changes.
   ========================================================================== */

/* ---------- page ground: one continuous, softly lit lilac-white surface ---------- */
html[data-theme="light"][data-page="docs"] {
  background-color: #ffffff;
}
html[data-theme="light"][data-page="docs"] ::-webkit-scrollbar-track { background: #faf8ff; }
html[data-theme="light"][data-page="docs"] ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.18); }
html[data-theme="light"][data-page="docs"] ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.3); }

html[data-theme="light"][data-page="docs"] .docs-page-top {
  background:
    radial-gradient(900px 560px at 8% 0%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.04) 45%, transparent 75%),
    radial-gradient(820px 560px at 96% 4%, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.03) 45%, transparent 75%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #fcfbff 100%);
}

/* ---------- sub-header: search + tabs ---------- */
html[data-theme="light"][data-page="docs"] .docs-subheader {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(124, 58, 237, 0.08);
  box-shadow: 0 14px 34px -30px rgba(46, 16, 101, 0.28);
}
html[data-theme="light"][data-page="docs"] .docs-subheader a[data-jump="overview"] > span:first-child {
  color: var(--t-fg);
}
/* "Docs" badge → eyebrow pill */
html[data-theme="light"][data-page="docs"] .docs-subheader a[data-jump="overview"] > span.rounded-full {
  color: var(--t-brand-2);
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
}

html[data-theme="light"][data-page="docs"] .docs-search {
  background: #fbfaff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), inset 0 1px 0 #ffffff;
}
html[data-theme="light"][data-page="docs"] .docs-search:focus-within {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
html[data-theme="light"][data-page="docs"] .docs-search iconify-icon { color: #7a7299; }
html[data-theme="light"][data-page="docs"] .docs-search input { color: var(--t-fg); }
html[data-theme="light"][data-page="docs"] .docs-search input::placeholder { color: #6e6a7c; opacity: 1; }

html[data-theme="light"][data-page="docs"] #doc-tabs {
  background-color: #f6f4fd;
  border-color: rgba(124, 58, 237, 0.10);
}
html[data-theme="light"][data-page="docs"] .doc-tab-btn { color: var(--t-fg-3); }
html[data-theme="light"][data-page="docs"] .doc-tab-btn:hover { color: var(--t-fg); }
html[data-theme="light"][data-page="docs"] .doc-tab-btn.is-active {
  color: var(--t-brand-ink);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.05), 0 6px 16px -10px rgba(76, 29, 149, 0.28);
}

html[data-theme="light"][data-page="docs"] .docs-subheader a[href="/faq"] { color: var(--t-fg-3); }
html[data-theme="light"][data-page="docs"] .docs-subheader a[href="/faq"]:hover { color: var(--t-brand-2); }
html[data-theme="light"][data-page="docs"] .docs-subheader a[href="/contact"] {
  background-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="docs"] .docs-subheader a[href="/contact"]:hover {
  background-color: #2a2540;
  color: #ffffff;
}

/* ---------- left sidebar: soft lilac-white panel ---------- */
html[data-theme="light"][data-page="docs"] .docs-sidebar {
  background: #faf8ff;
  /* small radius: this element is an overflow:auto scroller, so a large radius
     would clip the first label's glyphs; the 12px spread ring below gives the
     visible panel its soft ~15px outer corner without touching layout */
  border-radius: 3px;
  box-shadow:
    0 0 0 12px #faf8ff,
    0 0 0 13px rgba(124, 58, 237, 0.07),
    0 30px 60px -36px rgba(46, 16, 101, 0.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.22) transparent;
}
html[data-theme="light"][data-page="docs"] .docs-sidebar-label { color: #6e6a7c; }
html[data-theme="light"][data-page="docs"] .docs-sidebar-link { color: var(--t-fg-3); }
html[data-theme="light"][data-page="docs"] .docs-sidebar-link:hover {
  color: var(--t-fg);
  background: rgba(124, 58, 237, 0.05);
}
html[data-theme="light"][data-page="docs"] .docs-sidebar-link.is-active {
  color: var(--t-brand-ink);
  background: #ffffff;
  border-left-color: var(--t-brand);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 8px 18px -12px rgba(76, 29, 149, 0.28);
}

/* ---------- right "on this page" TOC ---------- */
html[data-theme="light"][data-page="docs"] .docs-toc-label { color: #6e6a7c; }
html[data-theme="light"][data-page="docs"] .docs-toc-link {
  color: var(--t-fg-3);
  border-left-color: rgba(124, 58, 237, 0.12);
}
html[data-theme="light"][data-page="docs"] .docs-toc-link:hover { color: var(--t-fg); }
html[data-theme="light"][data-page="docs"] .docs-toc-link.is-active {
  color: var(--t-brand-ink);
  border-left-color: var(--t-brand);
}

/* ---------- content ---------- */
html[data-theme="light"][data-page="docs"] .doc-section + .doc-section {
  border-top-color: rgba(124, 58, 237, 0.08);
}
html[data-theme="light"][data-page="docs"] .doc-section h1,
html[data-theme="light"][data-page="docs"] .doc-section h2,
html[data-theme="light"][data-page="docs"] .doc-section h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="docs"] .doc-eyebrow { color: var(--t-brand-2); }
html[data-theme="light"][data-page="docs"] .doc-section p.text-neutral-500 { color: #6e6a7c; }

html[data-theme="light"][data-page="docs"] .doc-body p,
html[data-theme="light"][data-page="docs"] .doc-body ul,
html[data-theme="light"][data-page="docs"] .doc-body ol { color: var(--t-fg-2); }
html[data-theme="light"][data-page="docs"] .doc-body strong { color: var(--t-fg); }
html[data-theme="light"][data-page="docs"] .doc-body li::marker { color: var(--t-brand); }

html[data-theme="light"][data-page="docs"] .doc-body code:not(pre code) {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.16);
  color: var(--t-brand-ink);
}
html[data-theme="light"][data-page="docs"] .doc-body a.doc-inline-link {
  color: var(--t-brand-2);
  text-decoration-color: rgba(109, 40, 217, 0.35);
}
html[data-theme="light"][data-page="docs"] .doc-body a.doc-inline-link:hover {
  color: var(--t-brand-ink);
  text-decoration-color: rgba(91, 33, 182, 0.6);
}

/* ---------- code / example panels: soft lilac-white blocks ---------- */
html[data-theme="light"][data-page="docs"] .doc-panel {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(167, 139, 250, 0.08), transparent 55%),
    linear-gradient(180deg, #fcfbff 0%, #f9f7ff 100%);
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), 0 20px 40px -30px rgba(46, 16, 101, 0.22);
}
html[data-theme="light"][data-page="docs"] .doc-panel-head {
  background: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(124, 58, 237, 0.09);
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="docs"] .doc-panel pre { color: #2a2540; }
html[data-theme="light"][data-page="docs"] .doc-panel pre .tok-key { color: #1d4ed8; }
html[data-theme="light"][data-page="docs"] .doc-panel pre .tok-str { color: #6d28d9; }
html[data-theme="light"][data-page="docs"] .doc-panel pre .tok-com { color: #5f5a72; }
html[data-theme="light"][data-page="docs"] .doc-panel pre .tok-mut { color: #be185d; }
html[data-theme="light"][data-page="docs"] .doc-panel pre::-webkit-scrollbar-track { background: transparent; }

/* ---------- tables: white card, lilac hairlines ---------- */
html[data-theme="light"][data-page="docs"] .doc-table-wrap {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), 0 20px 40px -30px rgba(46, 16, 101, 0.20);
}
html[data-theme="light"][data-page="docs"] table.doc-table caption {
  background: #faf8ff;
  border-bottom-color: rgba(124, 58, 237, 0.09);
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="docs"] table.doc-table th {
  background: #fcfbff;
  color: var(--t-fg-3);
  border-bottom-color: rgba(124, 58, 237, 0.12);
}
html[data-theme="light"][data-page="docs"] table.doc-table td {
  color: var(--t-fg-2);
  border-bottom-color: rgba(124, 58, 237, 0.07);
}
html[data-theme="light"][data-page="docs"] table.doc-table td code,
html[data-theme="light"][data-page="docs"] table.doc-table th code {
  color: var(--t-brand-ink);
  background: rgba(124, 58, 237, 0.07);
}

/* ---------- callouts: tinted cards ---------- */
html[data-theme="light"][data-page="docs"] .doc-callout-note {
  border-color: #8b5cf6;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
  color: #3b2470;
  box-shadow: 0 16px 32px -28px rgba(76, 29, 149, 0.35);
}
html[data-theme="light"][data-page="docs"] .doc-callout-note strong { color: var(--t-brand-ink); }
html[data-theme="light"][data-page="docs"] .doc-callout-warn {
  border-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.05) 100%);
  color: #6b3a0c;
  box-shadow: 0 16px 32px -28px rgba(180, 83, 9, 0.35);
}
html[data-theme="light"][data-page="docs"] .doc-callout-warn strong { color: #78350f; }
html[data-theme="light"][data-page="docs"] .doc-callout p { color: inherit; }

/* ---------- HTTP method badges + endpoint paths ---------- */
html[data-theme="light"][data-page="docs"] .doc-method-get {
  background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.24);
}
html[data-theme="light"][data-page="docs"] .doc-method-post {
  background: rgba(124, 58, 237, 0.08); color: var(--t-brand-2); border-color: rgba(124, 58, 237, 0.20);
}
html[data-theme="light"][data-page="docs"] .doc-method-patch {
  background: rgba(245, 158, 11, 0.12); color: #92400e; border-color: rgba(245, 158, 11, 0.30);
}
html[data-theme="light"][data-page="docs"] .doc-method-delete {
  background: rgba(244, 63, 94, 0.08); color: #be123c; border-color: rgba(244, 63, 94, 0.22);
}
html[data-theme="light"][data-page="docs"] .doc-endpoint-path { color: var(--t-fg); }

/* ---------- status pill ---------- */
html[data-theme="light"][data-page="docs"] .doc-status-pill {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.16);
  color: var(--t-brand-ink);
}

/* ---------- mobile section jump ---------- */
html[data-theme="light"][data-page="docs"] #docs-mobile-jump {
  background-color: #fbfaff;
  border-color: rgba(124, 58, 237, 0.14);
  color: var(--t-fg);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03), 0 10px 24px -18px rgba(46, 16, 101, 0.22);
}
html[data-theme="light"][data-page="docs"] #docs-mobile-jump option {
  background-color: #ffffff;
  color: var(--t-fg);
}

/* ---------------------------------------------------------------------------
   p-feature-detail: page layer: feature-detail
   --------------------------------------------------------------------------- */
/* ===========================================================================
   Daylight — p-feature-detail: features/*.html (6 pages, one template)
   Scope: html[data-theme="light"][data-page="feature-detail"]
   Hero mock cards become soft white cards (ink text, lilac hairline, soft
   shadow) accented in each page's own hue; bento icon tiles tinted per hue;
   pipeline / languages / CTA sections share the homepage card language and
   flow into each other without hard seams.
   =========================================================================== */

/* ------------------------------------------------------------ page hue vars
   Each page's hero mock uses one capability hue (purple, blue, cyan, green,
   orange, pink). --fd-h = rgb triplet of the 500 shade, --fd-ink = text-safe
   700 shade on white/tint, --fd-solid = fill that carries white text >= 4.5 */
html[data-theme="light"][data-page="feature-detail"] main {
  --fd-h: 124 58 237;
  --fd-ink: #6d28d9;
  --fd-solid: #7c3aed;
}
html[data-theme="light"][data-page="feature-detail"] main:has(.floating-card .bg-blue-500) {
  --fd-h: 59 130 246;
  --fd-ink: #1d4ed8;
  --fd-solid: #2563eb;
}
html[data-theme="light"][data-page="feature-detail"] main:has(.floating-card .bg-cyan-500) {
  --fd-h: 6 182 212;
  --fd-ink: #155e75;
  --fd-solid: #0e7490;
}
html[data-theme="light"][data-page="feature-detail"] main:has(.floating-card .bg-green-500) {
  --fd-h: 34 197 94;
  --fd-ink: #166534;
  --fd-solid: #15803d;
}
html[data-theme="light"][data-page="feature-detail"] main:has(.floating-card .bg-orange-500) {
  --fd-h: 249 115 22;
  --fd-ink: #9a3412;
  --fd-solid: #c2410c;
}
html[data-theme="light"][data-page="feature-detail"] main:has(.floating-card .bg-pink-500) {
  --fd-h: 236 72 153;
  --fd-ink: #be185d;
  --fd-solid: #be185d;
}

/* -------------------------------------------------------------------- HERO */

/* ambient lilac wash behind the mock column, fading out before any edge */
html[data-theme="light"][data-page="feature-detail"] main {
  background:
    radial-gradient(38% 46% at 58% 46%, rgba(167, 139, 250, 0.13), transparent 72%),
    radial-gradient(26% 36% at 88% 30%, rgba(129, 140, 248, 0.08), transparent 72%),
    radial-gradient(30% 40% at 6% 70%, rgba(167, 139, 250, 0.06), transparent 72%);
}

/* the blueprint grid: white lines vanish on white; a whisper of lilac,
   masked so it fades out softly instead of ending in a hard box */
html[data-theme="light"][data-page="feature-detail"] main > .grid-bg {
  background-image:
    linear-gradient(to right, rgba(124, 58, 237, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 58, 237, 0.10) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(60% 60% at 55% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(60% 60% at 55% 45%, #000 0%, transparent 78%);
}

/* the ghosted second headline line ("Reach", "Studio", "Captions"...):
   neutral-700 is a deliberate ghost in Dark; on white it becomes the
   homepage's violet-to-indigo accent */
html[data-theme="light"][data-page="feature-detail"] main h1 > span.text-neutral-700 {
  background-image: var(--t-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* eyebrow ("Video Translation"...) in the page hue, text-safe shade */
html[data-theme="light"][data-page="feature-detail"] main .inline-flex > span.font-mono {
  color: var(--fd-ink);
}

/* "Start translating" outline CTA -> soft secondary button */
html[data-theme="light"][data-page="feature-detail"] main a.group.border-neutral-800 {
  background-color: #ffffff;
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="feature-detail"] main a.group.border-neutral-800:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}

/* ---- floating mock cards: soft white cards */
html[data-theme="light"][data-page="feature-detail"] main .floating-card {
  background-color: #ffffff;
  background-image: radial-gradient(120% 80% at 100% 0%, rgb(var(--fd-h) / 0.07), transparent 58%);
  border-color: rgba(124, 58, 237, 0.11);
  box-shadow:
    0 1px 2px rgba(28, 20, 60, 0.04),
    0 28px 56px -30px rgba(46, 16, 101, 0.24);
}
/* the centrepiece card carries the strongest lift, like a featured card */
html[data-theme="light"][data-page="feature-detail"] main .floating-card.w-72 {
  background-color: #ffffff;
  background-image: radial-gradient(110% 70% at 100% 0%, rgb(var(--fd-h) / 0.10), rgb(var(--fd-h) / 0.03) 45%, transparent 70%);
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 40px 80px -40px rgba(46, 16, 101, 0.32);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .text-white {
  color: var(--t-fg);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .border-b {
  border-color: rgba(124, 58, 237, 0.10);
}

/* hue icons inside the cards */
html[data-theme="light"][data-page="feature-detail"] main .floating-card iconify-icon:not(.text-black) {
  color: var(--fd-solid);
}

/* selected option / file chip */
html[data-theme="light"][data-page="feature-detail"] main .floating-card .space-y-2 > div:first-child {
  background-color: rgb(var(--fd-h) / 0.07);
  border-color: rgb(var(--fd-h) / 0.22);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .space-y-2 > div:first-child span,
html[data-theme="light"][data-page="feature-detail"] main .floating-card .space-y-2 > div:first-child iconify-icon {
  color: var(--fd-ink);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .text-neutral-400 {
  color: var(--t-fg-3);
}

/* cursor label ("Lip-Sync", "Voice Clone"...): saturated hue, white text */
html[data-theme="light"][data-page="feature-detail"] main .animate-bounce-slow > div {
  background-color: var(--fd-solid);
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgb(var(--fd-h) / 0.55);
}
html[data-theme="light"][data-page="feature-detail"] main .animate-bounce-slow svg {
  fill: var(--fd-solid);
  stroke: #ffffff;
}

/* the big icon circle: a soft tinted ring instead of a heavy dark border */
html[data-theme="light"][data-page="feature-detail"] main .floating-card .w-24.h-24.rounded-full {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, rgb(var(--fd-h) / 0.07) 100%);
  border-color: rgb(var(--fd-h) / 0.18);
  box-shadow:
    0 0 0 6px rgb(var(--fd-h) / 0.045),
    0 12px 26px -16px rgb(var(--fd-h) / 0.5);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card.group:hover .w-24.h-24.rounded-full {
  border-color: rgb(var(--fd-h) / 0.34);
}

/* progress tracks + fills */
html[data-theme="light"][data-page="feature-detail"] main .floating-card .bg-neutral-800 {
  background-color: rgb(var(--fd-h) / 0.12);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .h-full[class*="bg-"] {
  background: linear-gradient(90deg, rgb(var(--fd-h) / 0.6), var(--fd-solid));
}

/* assistant avatar: soft tinted disc, hue icon */
html[data-theme="light"][data-page="feature-detail"] main .floating-card .w-8.h-8.rounded-full {
  background-color: rgb(var(--fd-h) / 0.10);
  box-shadow: inset 0 0 0 1px rgb(var(--fd-h) / 0.22);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .w-8.h-8.rounded-full iconify-icon {
  color: var(--fd-ink);
}

/* speech bubble */
html[data-theme="light"][data-page="feature-detail"] main .floating-card .bg-neutral-900 {
  background-color: #faf8ff;
  border-color: rgba(124, 58, 237, 0.10);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .text-neutral-300 {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="feature-detail"] main .floating-card .text-neutral-500 {
  color: var(--t-fg-3);
}

/* ---- right stats column */
html[data-theme="light"][data-page="feature-detail"] main > .lg\:col-span-2 {
  border-color: rgba(124, 58, 237, 0.10);
}
html[data-theme="light"][data-page="feature-detail"] main > .lg\:col-span-2 span.text-5xl {
  color: #8478c4;
}
html[data-theme="light"][data-page="feature-detail"] main > .lg\:col-span-2 .group:hover span.text-5xl {
  color: var(--fd-ink);
}
html[data-theme="light"][data-page="feature-detail"] main > .lg\:col-span-2 .group:hover span.text-\[10px\] {
  border-color: var(--fd-solid);
}

/* ------------------------------------------------- BENTO (#features grid) */

/* here #features is a centred container, not full-bleed: the homepage wash
   would stop at its side edges and draw a seam. Washes that fade out well
   inside the box keep the ground continuous. */
html[data-theme="light"][data-page="feature-detail"] #features {
  background:
    radial-gradient(34% 22% at 62% 46%, rgba(167, 139, 250, 0.075), transparent 100%),
    radial-gradient(30% 18% at 30% 80%, rgba(129, 140, 248, 0.055), transparent 100%);
}

/* the wide cards are the featured pair: corner glow + deeper lift */
html[data-theme="light"][data-page="feature-detail"] #features .grid > div.md\:col-span-2 {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.05) 45%, transparent 70%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.10);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="feature-detail"] #features .grid > div.md\:col-span-2:hover {
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 40px 80px -38px rgba(76, 29, 149, 0.34);
}

/* icon tiles: tinted with their capability hue (fill ~9%, border ~20%) */
html[data-theme="light"][data-page="feature-detail"] #features .grid .h-12.rounded-2xl,
html[data-theme="light"][data-page="feature-detail"] #features .grid .h-14.rounded-2xl {
  --fd-t: 124 58 237;
  --fd-ti: #7c3aed;
  background-color: rgb(var(--fd-t) / 0.09);
  border-color: rgb(var(--fd-t) / 0.20);
  color: var(--fd-ti);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="feature-detail"] #features .grid .group:hover .h-12.rounded-2xl,
html[data-theme="light"][data-page="feature-detail"] #features .grid .group:hover .h-14.rounded-2xl {
  background-color: rgb(var(--fd-t) / 0.14);
  border-color: rgb(var(--fd-t) / 0.28);
}
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-purple-300  { --fd-t: 124 58 237; --fd-ti: #7c3aed; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-violet-300  { --fd-t: 139 92 246; --fd-ti: #7c3aed; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-indigo-300  { --fd-t: 99 102 241;  --fd-ti: #4f46e5; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-blue-300    { --fd-t: 59 130 246;  --fd-ti: #2563eb; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-cyan-300    { --fd-t: 6 182 212;   --fd-ti: #0891b2; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-teal-300    { --fd-t: 20 184 166;  --fd-ti: #0d9488; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-emerald-300 { --fd-t: 16 185 129;  --fd-ti: #059669; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-green-300   { --fd-t: 34 197 94;   --fd-ti: #16a34a; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-lime-300    { --fd-t: 132 204 22;  --fd-ti: #65a30d; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-yellow-300  { --fd-t: 234 179 8;   --fd-ti: #ca8a04; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-amber-300   { --fd-t: 245 158 11;  --fd-ti: #d97706; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-orange-300  { --fd-t: 249 115 22;  --fd-ti: #ea580c; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-red-300     { --fd-t: 239 68 68;   --fd-ti: #dc2626; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-rose-300    { --fd-t: 244 63 94;   --fd-ti: #e11d48; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-pink-300    { --fd-t: 236 72 153;  --fd-ti: #db2777; }
html[data-theme="light"][data-page="feature-detail"] #features .grid .rounded-2xl.text-fuchsia-300 { --fd-t: 217 70 239;  --fd-ti: #c026d3; }

/* ------------------------------------------- PIPELINE (section.py-24 grid) */

html[data-theme="light"][data-page="feature-detail"] section.py-24 {
  border-top-color: transparent;
  background:
    radial-gradient(45% 30% at 12% 20%, rgba(167, 139, 250, 0.07), transparent 70%),
    radial-gradient(40% 30% at 90% 85%, rgba(129, 140, 248, 0.06), transparent 70%);
}
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid > div.rounded-2xl {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid > div.rounded-2xl:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
/* mini mocks inside the cards: lilac-white wells */
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid .bg-black {
  background-color: #faf8ff;
  border-color: rgba(124, 58, 237, 0.08);
}
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid .bg-black .bg-neutral-900 {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
}
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid .bg-black .text-neutral-300 {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="feature-detail"] section.py-24 .grid .bg-black .bg-neutral-800 {
  background-color: rgba(124, 58, 237, 0.10);
}
/* skeleton text bars, kept in their hue but visible on lilac-white */
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-violet-900\/50  { background-color: rgb(139 92 246 / 0.24); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-indigo-900\/30  { background-color: rgb(99 102 241 / 0.18); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-blue-900\/50    { background-color: rgb(59 130 246 / 0.22); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-cyan-900\/30    { background-color: rgb(6 182 212 / 0.18); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-emerald-900\/50 { background-color: rgb(16 185 129 / 0.22); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-emerald-900\/30 { background-color: rgb(16 185 129 / 0.18); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-green-900\/50   { background-color: rgb(34 197 94 / 0.22); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-amber-900\/50   { background-color: rgb(245 158 11 / 0.24); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-amber-900\/30   { background-color: rgb(245 158 11 / 0.18); }
html[data-theme="light"][data-page="feature-detail"] section.py-24 .bg-rose-900\/30    { background-color: rgb(244 63 94 / 0.16); }

/* --------------------------------------- LANGUAGES (section.py-32, first) */

html[data-theme="light"][data-page="feature-detail"] section.py-32 {
  border-top-color: transparent;
}
html[data-theme="light"][data-page="feature-detail"] section.py-32.bg-\[\#050505\] {
  background-color: transparent;
}
/* eyebrow pill */
html[data-theme="light"][data-page="feature-detail"] section.py-32 .inline-flex.rounded-full.bg-white\/5 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
/* language tiles: small soft cards */
html[data-theme="light"][data-page="feature-detail"] section.py-32 .grid > div.group {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="feature-detail"] section.py-32 .grid > div.group:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}

/* ------------------------------------------------------------- CTA input */

html[data-theme="light"][data-page="feature-detail"] section.py-32 .relative.flex.items-center.rounded-xl {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 30px 60px -30px rgba(46, 16, 101, 0.28);
}
html[data-theme="light"][data-page="feature-detail"] section.py-32 button.bg-white.text-black {
  background-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="feature-detail"] section.py-32 button.bg-white.text-black:hover {
  background-color: var(--t-brand-2);
}

/* ---------------------------------------------------------------------------
   p-features: page layer: features
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Daylight — features.html  (data-page="features")
   Soft, calm, connected: white cards, big soft shadows, lilac corner glows,
   icon tiles tinted with their own hue. No grey panels, no dark leftovers.
   Every selector: html[data-theme="light"][data-page="features"].
   Treatment only (colour / background / border-colour / shadow / filter).
   ========================================================================== */

/* -------------------------------------------------------------- PAGE GROUND */
/* one continuous lilac-lit surface: washes straddle the section seams */
html[data-theme="light"][data-page="features"] body {
  background:
    radial-gradient(900px 700px at 78% 340px, rgba(167, 139, 250, 0.12), transparent 70%),
    radial-gradient(800px 600px at 6% 1500px, rgba(129, 140, 248, 0.07), transparent 70%),
    radial-gradient(900px 700px at 96% 2900px, rgba(167, 139, 250, 0.08), transparent 70%),
    radial-gradient(900px 700px at 4% 4700px, rgba(167, 139, 250, 0.07), transparent 70%),
    radial-gradient(1000px 800px at 90% 7000px, rgba(129, 140, 248, 0.07), transparent 70%),
    radial-gradient(900px 700px at 50% 8800px, rgba(167, 139, 250, 0.09), transparent 70%),
    #ffffff;
}

/* no hard full-width hairlines between sections */
html[data-theme="light"][data-page="features"] body > section.border-t {
  border-top-color: transparent;
}

/* ===================================================================== HERO */
/* faint lilac grid instead of white-on-white lines */
html[data-theme="light"][data-page="features"] main > .grid-bg {
  background-image:
    linear-gradient(to right, rgba(124, 58, 237, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 58, 237, 0.09) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 80%);
}

/* eyebrow dot glow */
html[data-theme="light"][data-page="features"] main .shadow-\[0_0_10px_rgba\(139\2c 92\2c 246\2c 0\.5\)\] {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* "DUBB" — the muted half of the headline: soft lilac, still >= 3:1 */
html[data-theme="light"][data-page="features"] main h1 .text-neutral-700 {
  color: #9479e8;
}

/* Start Free Trial: secondary button (white fill, soft line, soft shadow) */
html[data-theme="light"][data-page="features"] main a.border-neutral-800 {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="features"] main a.border-neutral-800:hover {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="features"] main a.border-neutral-800 button {
  color: var(--t-fg);
}

/* ---- floating UI cards: soft white cards with ink text ---- */
html[data-theme="light"][data-page="features"] main .floating-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 30px 60px -28px rgba(46, 16, 101, 0.26);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"][data-page="features"] main .floating-card.z-20 {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 58%),
    radial-gradient(90% 60% at 0% 100%, rgba(129, 140, 248, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.05),
    0 40px 80px -36px rgba(46, 16, 101, 0.32);
}

/* centrepiece: mic disc, status dot, progress track */
html[data-theme="light"][data-page="features"] main .floating-card .w-24.h-24 {
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f3effe 100%);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 10px 24px -14px rgba(76, 29, 149, 0.35);
}
html[data-theme="light"][data-page="features"] main .floating-card.group:hover .w-24.h-24 {
  border-color: rgba(124, 58, 237, 0.4);
}
html[data-theme="light"][data-page="features"] main .floating-card .w-24.h-24 iconify-icon {
  color: #7c3aed;
}
html[data-theme="light"][data-page="features"] main .floating-card .bg-green-500.border-\[\#0A0A0A\] {
  background-color: #10b981;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
html[data-theme="light"][data-page="features"] main .floating-card h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] main .floating-card p.text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] main .floating-card .h-1.bg-neutral-800 {
  background-color: rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="features"] main .floating-card .h-1 > .bg-purple-500 {
  background-image: linear-gradient(90deg, #8b5cf6, #6d28d9);
}

/* cursor + "AI Dubbing" label: saturated violet keeps white text */
html[data-theme="light"][data-page="features"] main .bg-purple-500.text-black {
  background-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.55);
}
html[data-theme="light"][data-page="features"] main svg.fill-purple-500 {
  fill: #7c3aed;
  stroke: #ffffff;
}

/* Audio Separation #802 */
html[data-theme="light"][data-page="features"] main .floating-card .border-b.border-white\/5 {
  border-bottom-color: rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="features"] main .floating-card .text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] main .floating-card .text-neutral-500.font-mono { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] main .floating-card span.text-neutral-400 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="features"] main .floating-card span.bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.14);
}
html[data-theme="light"][data-page="features"] main .floating-card button.bg-white\/5 {
  background-color: #faf8ff;
  border-color: rgba(124, 58, 237, 0.16);
  color: #5b21b6;
}
html[data-theme="light"][data-page="features"] main .floating-card button.bg-white\/5:hover {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

/* chat bubble card */
html[data-theme="light"][data-page="features"] main .floating-card .w-8.h-8.bg-purple-500 {
  background-color: #7c3aed;
  box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.5);
}
html[data-theme="light"][data-page="features"] main .floating-card .w-8.h-8.bg-purple-500 iconify-icon {
  color: #ffffff;
}
html[data-theme="light"][data-page="features"] main .floating-card .bg-neutral-900.rounded-lg {
  background-color: #f6f4fd;
  border-color: rgba(124, 58, 237, 0.12);
}
html[data-theme="light"][data-page="features"] main .floating-card .bg-neutral-900.rounded-lg p {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="features"] main .floating-card .bg-white\/20 {
  background-color: rgba(124, 58, 237, 0.3);
}

/* right stats column */
html[data-theme="light"][data-page="features"] main .lg\:border-l.lg\:border-white\/5 {
  border-left-color: rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="features"] main .beam-border-v {
  background: linear-gradient(to bottom, transparent, rgba(124, 58, 237, 0.4), transparent);
}
html[data-theme="light"][data-page="features"] main span.text-5xl.text-neutral-700 {
  color: #9479e8;
}
html[data-theme="light"][data-page="features"] main .group:hover span.text-5xl.text-neutral-700 {
  color: #6d28d9;
}
html[data-theme="light"][data-page="features"] main .lg\:col-span-2 .text-\[10px\].text-neutral-500 {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="features"] main .lg\:col-span-2 .w-8.h-8.rounded-full {
  background-color: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="features"] main .lg\:col-span-2 .w-8.h-8.rounded-full iconify-icon {
  color: #6d28d9;
}
html[data-theme="light"][data-page="features"] main .lg\:col-span-2 .group:hover .w-8.h-8.rounded-full {
  border-color: rgba(124, 58, 237, 0.4);
}

/* ======================================================= THE DUBBING ENGINE */
/* section ground: transparent so the page washes carry through */
html[data-theme="light"][data-page="features"] #features {
  background: transparent;
}
html[data-theme="light"][data-page="features"] #features h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] #features .mb-24 > p { color: var(--t-fg-3); }

html[data-theme="light"][data-page="features"] #features .grid > div {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"][data-page="features"] #features .grid > div:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
/* featured: Intelligent Audio Processing (violet) + Parallel Processing (pink) */
html[data-theme="light"][data-page="features"] #features .grid > div:nth-child(1) {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(167, 139, 250, 0.17), rgba(167, 139, 250, 0.05) 45%, transparent 70%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="features"] #features .grid > div:nth-child(4) {
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(244, 114, 182, 0.13), rgba(244, 114, 182, 0.04) 45%, transparent 70%),
    var(--t-card-bg);
  border-color: rgba(219, 39, 119, 0.09);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="features"] #features .grid > div:nth-child(1):hover {
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 40px 80px -38px rgba(76, 29, 149, 0.34);
}
html[data-theme="light"][data-page="features"] #features .grid > div:nth-child(4):hover {
  border-color: rgba(219, 39, 119, 0.22);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 40px 80px -38px rgba(157, 23, 77, 0.28);
}
/* the in-card blur blobs are already soft; keep them faint */
html[data-theme="light"][data-page="features"] #features .grid > div > .bg-purple-500\/5 {
  background-color: rgba(167, 139, 250, 0.1);
}
html[data-theme="light"][data-page="features"] #features .grid > div > .bg-pink-500\/5 {
  background-color: rgba(244, 114, 182, 0.08);
}

/* card text */
html[data-theme="light"][data-page="features"] #features .grid h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] #features .grid p { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] #features .grid span.text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] #features .grid .text-purple-400  { color: #6d28d9; }
html[data-theme="light"][data-page="features"] #features .grid .text-blue-400    { color: #1d4ed8; }
html[data-theme="light"][data-page="features"] #features .grid .text-emerald-400 { color: #047857; }
html[data-theme="light"][data-page="features"] #features .grid .text-pink-400    { color: #be185d; }

/* icon tiles: tinted with each card's hue (fill ~9%, border ~20%, icon 600/700) */
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80 {
  --pf-hue: 124 58 237;
  --pf-ink: #6d28d9;
  background-color: rgb(var(--pf-hue) / 0.09);
  border-color: rgb(var(--pf-hue) / 0.2);
  color: var(--pf-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 18px -12px rgb(var(--pf-hue) / 0.45);
}
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-purple-300  { --pf-hue: 124 58 237; --pf-ink: #6d28d9; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-blue-300    { --pf-hue: 59 130 246;  --pf-ink: #1d4ed8; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-emerald-300 { --pf-hue: 16 185 129;  --pf-ink: #047857; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-pink-300    { --pf-hue: 236 72 153;  --pf-ink: #be185d; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-amber-300   { --pf-hue: 245 158 11;  --pf-ink: #b45309; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-cyan-300    { --pf-hue: 6 182 212;   --pf-ink: #0e7490; }
html[data-theme="light"][data-page="features"] #features .grid .rounded-2xl.bg-neutral-800\/80.text-rose-300    { --pf-hue: 244 63 94;   --pf-ink: #be123c; }
html[data-theme="light"][data-page="features"] #features .grid .group:hover .rounded-2xl.bg-neutral-800\/80,
html[data-theme="light"][data-page="features"] #features .grid .group:hover.group .rounded-2xl.bg-neutral-800\/80 {
  background-color: rgb(var(--pf-hue) / 0.14);
  border-color: rgb(var(--pf-hue) / 0.3);
}

/* Parallel Processing waveform */
html[data-theme="light"][data-page="features"] #features .bg-pink-400\/80 {
  background-color: rgba(219, 39, 119, 0.7);
}

/* ============================================ DEEP SYNTHESIS CAPABILITIES */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .rounded-2xl.bg-neutral-900 {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(167, 139, 250, 0.09), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .rounded-2xl.bg-neutral-900:hover {
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-purple-500\/30:hover { border-color: rgba(124, 58, 237, 0.26); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-blue-500\/30:hover   { border-color: rgba(59, 130, 246, 0.28); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-green-500\/30:hover  { border-color: rgba(34, 197, 94, 0.3); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-pink-500\/30:hover   { border-color: rgba(236, 72, 153, 0.28); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-orange-500\/30:hover { border-color: rgba(249, 115, 22, 0.3); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 > .hover\:border-cyan-500\/30:hover   { border-color: rgba(6, 182, 212, 0.3); }

/* round hue tiles: fill 9%, border 20%, icon 700 */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.rounded-full {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -10px rgba(46, 16, 101, 0.3);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.09); border-color: rgba(124, 58, 237, 0.2); color: #6d28d9; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-blue-500\/10   { background-color: rgba(59, 130, 246, 0.09); border-color: rgba(59, 130, 246, 0.2); color: #1d4ed8; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-green-500\/10  { background-color: rgba(34, 197, 94, 0.1);  border-color: rgba(34, 197, 94, 0.22); color: #15803d; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-pink-500\/10   { background-color: rgba(236, 72, 153, 0.09); border-color: rgba(236, 72, 153, 0.2); color: #be185d; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1);  border-color: rgba(249, 115, 22, 0.22); color: #c2410c; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .w-10.h-10.bg-cyan-500\/10   { background-color: rgba(6, 182, 212, 0.1);   border-color: rgba(6, 182, 212, 0.22); color: #0e7490; }

html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 span.text-neutral-500 { color: var(--t-fg-3); }

/* inner mock panels: lilac-white wells, no grey */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black {
  background: linear-gradient(180deg, #faf8ff 0%, #f7f4fe 100%);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* chips / rows inside the wells: white with a lilac hairline */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-neutral-900,
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-neutral-900\/50 {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .text-neutral-300 {
  color: var(--t-fg-2);
}
/* skeleton tiles (Video to Video) */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .h-8.bg-neutral-800 {
  background: linear-gradient(180deg, #ffffff 0%, #f3effe 100%);
  border-color: rgba(124, 58, 237, 0.12);
}
/* progress track + skeleton lines */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .h-1.bg-neutral-800 {
  background-color: rgba(59, 130, 246, 0.12);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .h-1\.5.bg-neutral-800,
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .h-1\.5.bg-neutral-700 {
  background-color: #e4dcfb;
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-3.h-3.border-white\/10 {
  border-color: rgba(124, 58, 237, 0.22);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.28); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-red-500\/20   { background-color: rgba(239, 68, 68, 0.24); }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-blue-500\/20  { background-color: rgba(59, 130, 246, 0.26); }
/* Voice Preservation chat bubbles */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-neutral-800.rounded-lg {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.14);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-neutral-600 {
  background-color: #d6cbf8;
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-pink-900\/30 {
  background-color: rgba(236, 72, 153, 0.08);
  border-color: rgba(236, 72, 153, 0.22);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .bg-pink-400\/50 {
  background-color: rgba(219, 39, 119, 0.4);
}
/* waveform bars */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-1.bg-purple-400 {
  background-color: #8b5cf6;
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-0\.5.bg-cyan-500 {
  background-color: #06b6d4;
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-0\.5.bg-neutral-800 {
  background-color: #ddd3fa;
}
/* speaker avatar */
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-8.h-8.bg-neutral-800 {
  background-color: rgba(6, 182, 212, 0.09);
  border-color: rgba(6, 182, 212, 0.22);
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .w-8.h-8.bg-neutral-800 iconify-icon {
  color: #0e7490;
}
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .text-blue-400 { color: #1d4ed8; }
html[data-theme="light"][data-page="features"] .md\:grid-cols-2.lg\:grid-cols-3 .rounded-xl.bg-black .text-neutral-500 { color: var(--t-fg-3); }

/* ================================================== PIPELINE SECTIONS 1–4 */
html[data-theme="light"][data-page="features"] section[id$="-translation"] h2,
html[data-theme="light"][data-page="features"] section#subtitle-generation h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] section[id$="-translation"] .mb-12 > p,
html[data-theme="light"][data-page="features"] section#subtitle-generation .mb-12 > p { color: var(--t-fg-3); }

html[data-theme="light"][data-page="features"] section[id$="-translation"] .grid > div,
html[data-theme="light"][data-page="features"] section#subtitle-generation .grid > div {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"][data-page="features"] section[id$="-translation"] .grid > div:hover,
html[data-theme="light"][data-page="features"] section#subtitle-generation .grid > div:hover {
  box-shadow: var(--t-shadow-hover);
}
/* hover glow overlay: a lilac corner glow instead of a white sheen */
html[data-theme="light"][data-page="features"] section[id$="-translation"] .grid > div > .bg-gradient-to-br,
html[data-theme="light"][data-page="features"] section#subtitle-generation .grid > div > .bg-gradient-to-br {
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(167, 139, 250, 0.14), transparent 60%);
}
html[data-theme="light"][data-page="features"] section[id$="-translation"] .grid h3,
html[data-theme="light"][data-page="features"] section#subtitle-generation .grid h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] section[id$="-translation"] .grid p,
html[data-theme="light"][data-page="features"] section#subtitle-generation .grid p { color: var(--t-fg-3); }

/* hue tiles (header + card tiles) and pipeline eyebrows */
html[data-theme="light"][data-page="features"] .rounded-2xl.bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.09); border-color: rgba(124, 58, 237, 0.2); color: #6d28d9; }
html[data-theme="light"][data-page="features"] .rounded-2xl.bg-blue-500\/10   { background-color: rgba(59, 130, 246, 0.09); border-color: rgba(59, 130, 246, 0.2); color: #1d4ed8; }
html[data-theme="light"][data-page="features"] .rounded-2xl.bg-green-500\/10  { background-color: rgba(34, 197, 94, 0.1);  border-color: rgba(34, 197, 94, 0.22); color: #15803d; }
html[data-theme="light"][data-page="features"] .rounded-2xl.bg-pink-500\/10   { background-color: rgba(236, 72, 153, 0.09); border-color: rgba(236, 72, 153, 0.2); color: #be185d; }
html[data-theme="light"][data-page="features"] section[id$="-translation"] .rounded-2xl[class*="-500/10"],
html[data-theme="light"][data-page="features"] section#subtitle-generation .rounded-2xl[class*="-500/10"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px -12px rgba(46, 16, 101, 0.3);
}
html[data-theme="light"][data-page="features"] span.font-mono.text-purple-400 { color: #6d28d9; }
html[data-theme="light"][data-page="features"] span.font-mono.text-blue-400   { color: #1d4ed8; }
html[data-theme="light"][data-page="features"] span.font-mono.text-green-400  { color: #15803d; }
html[data-theme="light"][data-page="features"] span.font-mono.text-pink-400   { color: #be185d; }
html[data-theme="light"][data-page="features"] .blur-\[100px\].bg-blue-500\/10  { background-color: rgba(96, 165, 250, 0.14); }
html[data-theme="light"][data-page="features"] .blur-\[100px\].bg-green-500\/10 { background-color: rgba(74, 222, 128, 0.12); }
html[data-theme="light"][data-page="features"] .blur-\[100px\].bg-pink-500\/10  { background-color: rgba(244, 114, 182, 0.12); }
html[data-theme="light"][data-page="features"] .blur-\[100px\].bg-purple-500\/10 { background-color: rgba(167, 139, 250, 0.16); }

/* ===================================================== YOUR CONTENT, SECURED */
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50.rounded-2xl {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(167, 139, 250, 0.1), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50.rounded-2xl:hover {
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50.hover\:border-purple-500\/30:hover { border-color: rgba(124, 58, 237, 0.26); }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50.hover\:border-blue-500\/30:hover   { border-color: rgba(59, 130, 246, 0.28); }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50.hover\:border-green-500\/30:hover  { border-color: rgba(34, 197, 94, 0.3); }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50 h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50 p  { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50 > iconify-icon.text-purple-400 { color: #6d28d9; }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50 > iconify-icon.text-blue-400   { color: #1d4ed8; }
html[data-theme="light"][data-page="features"] .gap-8 > .bg-neutral-900\/50 > iconify-icon.text-green-400  { color: #15803d; }

/* ========================================================== BUILD ON OCTAVIA */
/* no flat band: a soft lilac wash that fades out at both edges */
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 {
  background:
    radial-gradient(60% 70% at 78% 50%, rgba(167, 139, 250, 0.12), transparent 70%),
    radial-gradient(40% 60% at 12% 40%, rgba(129, 140, 248, 0.06), transparent 70%);
}
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 li { color: var(--t-fg-2); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 li > .bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.09);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
  color: #6d28d9;
}
/* code window: soft white card with a lilac corner glow */
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 .font-mono.rounded-xl {
  background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  border-color: rgba(124, 58, 237, 0.12);
  color: var(--t-fg-2);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 .font-mono.rounded-xl:hover {
  border-color: rgba(124, 58, 237, 0.26);
}
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 pre .text-purple-400 { color: #6d28d9; }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 pre .text-green-400  { color: #047857; }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 pre .text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 .bg-red-500\/20    { background-color: rgba(244, 63, 94, 0.3); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 .bg-yellow-500\/20 { background-color: rgba(234, 179, 8, 0.32); }
html[data-theme="light"][data-page="features"] body > section.bg-neutral-900\/20 .bg-green-500\/20  { background-color: rgba(34, 197, 94, 0.3); }

/* ===================================================== LOW LATENCY, EVERYWHERE */
html[data-theme="light"][data-page="features"] body > section.text-center h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] body > section.text-center > .container > p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="features"] .aspect-\[2\/1\].bg-neutral-900\/30 {
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.16) 0%, rgba(167, 139, 250, 0.05) 35%, transparent 65%),
    radial-gradient(120% 90% at 100% 0%, rgba(129, 140, 248, 0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="features"] .aspect-\[2\/1\].bg-neutral-900\/30 > .bg-\[radial-gradient\(circle_at_center\2c _var\(--tw-gradient-stops\)\)\] {
  --tw-gradient-from: rgba(167, 139, 250, 0.1) var(--tw-gradient-from-position);
  --tw-gradient-via: rgba(167, 139, 250, 0) var(--tw-gradient-via-position);
  --tw-gradient-to: rgba(167, 139, 250, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
/* abstract map dots: violet, not grey */
html[data-theme="light"][data-page="features"] .aspect-\[2\/1\] .grid-cols-12 > .bg-white {
  background-color: #7c3aed;
}
html[data-theme="light"][data-page="features"] .aspect-\[2\/1\] p.text-neutral-500 {
  color: #5b21b6;
}

/* ==================================================================== CTA */
html[data-theme="light"][data-page="features"] section.py-32 h2 { color: var(--t-fg); }
html[data-theme="light"][data-page="features"] section.py-32 .bg-gradient-to-r.from-purple-600 {
  --tw-gradient-from: #a78bfa var(--tw-gradient-from-position);
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="features"] section.py-32 .relative.flex.bg-\[\#0A0A0A\] {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.14);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="features"] section.py-32 .relative.flex iconify-icon { color: #6d28d9; }
html[data-theme="light"][data-page="features"] section.py-32 input {
  color: var(--t-fg);
}
html[data-theme="light"][data-page="features"] section.py-32 input::placeholder {
  color: var(--t-fg-4);
}
/* Start: primary button — ink fill, white text */
html[data-theme="light"][data-page="features"] section.py-32 button.bg-white.text-black {
  background-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="features"] section.py-32 button.bg-white.text-black:hover {
  background-color: #6d28d9;
  color: #ffffff;
}
html[data-theme="light"][data-page="features"] section.py-32 p.text-neutral-500 { color: var(--t-fg-3); }

/* ---------------------------------------------------------------------------
   p-inspiration: page layer: inspiration
   --------------------------------------------------------------------------- */
/* p-inspiration — Daylight treatment for inspiration.html ("Why We Build")
   Every selector is scoped to html[data-theme="light"][data-page="inspiration"].
   Sections (body > section, in order):
     1 hero · 2 Language Divide · 3 Old Way · 4 Imagine This · 5 Manual Process
     6 Total Damage · 7 6 AI Agents · 8 12-Hour Video · 9 Numbers table
     10 Built for Every Mission · 11 Bottom Line · 12 CTA                        */

/* ------------------------------------------------------------------------
   0. One continuous, softly lit ground
   - no hairline seams between sections, no alternating band fills
   - soft lilac / periwinkle washes that straddle section edges (decorative
     ::before layers; sections become relative + isolated so the wash sits
     behind their content — no geometry change)
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section {
  border-top-color: transparent;
  background-color: transparent;
  position: relative;
  isolation: isolate;
}
html[data-theme="light"][data-page="inspiration"] body > section::before {
  content: none;
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(1)::before,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4)::before,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6)::before,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8)::before,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(10)::before,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12)::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -180px;
  bottom: -180px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}
/* Washes are deliberately large, centred and faint so they read as light, not
   as shapes; multi-stop eased falloff avoids a visible rim on pure white. */
/* hero: violet glow behind the headline drifting into the stats below */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(1)::before {
  top: -120px;
  bottom: -240px;
  background:
    radial-gradient(52% 48% at 50% 42%, rgba(167, 139, 250, 0.13) 0%, rgba(167, 139, 250, 0.094) 21%, rgba(167, 139, 250, 0.052) 39%, rgba(167, 139, 250, 0.018) 56%, transparent 70%),
    radial-gradient(44% 40% at 72% 78%, rgba(129, 140, 248, 0.07) 0%, rgba(129, 140, 248, 0.05) 21%, rgba(129, 140, 248, 0.028) 39%, rgba(129, 140, 248, 0.01) 56%, transparent 70%);
}
/* Imagine This: lilac light behind the story card */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4)::before {
  background:
    radial-gradient(56% 46% at 50% 56%, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.072) 21%, rgba(167, 139, 250, 0.04) 39%, rgba(167, 139, 250, 0.014) 56%, transparent 70%);
}
/* Total Damage: violet light gathering at the arrow / Octavia card */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6)::before {
  background:
    radial-gradient(56% 40% at 50% 70%, rgba(167, 139, 250, 0.11) 0%, rgba(167, 139, 250, 0.079) 21%, rgba(167, 139, 250, 0.044) 39%, rgba(167, 139, 250, 0.015) 56%, transparent 70%);
}
/* 12-Hour Video: periwinkle then lilac along the long deployment block */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8)::before {
  background:
    radial-gradient(60% 24% at 50% 26%, rgba(129, 140, 248, 0.08) 0%, rgba(129, 140, 248, 0.058) 21%, rgba(129, 140, 248, 0.032) 39%, rgba(129, 140, 248, 0.011) 56%, transparent 70%),
    radial-gradient(60% 26% at 50% 78%, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.072) 21%, rgba(167, 139, 250, 0.04) 39%, rgba(167, 139, 250, 0.014) 56%, transparent 70%);
}
/* Built for Every Mission */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(10)::before {
  background:
    radial-gradient(60% 44% at 50% 56%, rgba(167, 139, 250, 0.09) 0%, rgba(167, 139, 250, 0.065) 21%, rgba(167, 139, 250, 0.036) 39%, rgba(167, 139, 250, 0.013) 56%, transparent 70%);
}
/* CTA: halo around the panel that carries into the footer */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12)::before {
  bottom: -80px;
  background:
    radial-gradient(56% 56% at 50% 50%, rgba(167, 139, 250, 0.15) 0%, rgba(167, 139, 250, 0.108) 21%, rgba(167, 139, 250, 0.06) 39%, rgba(167, 139, 250, 0.021) 56%, transparent 70%);
}

/* ------------------------------------------------------------------------
   1. Shared card language (reference: #who-can-use / "Get Octavia Pro")
   ------------------------------------------------------------------------ */
/* plain neutral cards → soft near-white cards with a big soft shadow */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .space-y-6 > .bg-neutral-900\/40,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(7) .bg-neutral-900\/40,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(10) .bg-neutral-900\/40 {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(7) .bg-neutral-900\/40:hover,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(10) .bg-neutral-900\/40:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .space-y-6 > .bg-neutral-900\/40:hover {
  border-color: rgba(225, 29, 72, 0.16);
  box-shadow: var(--t-shadow-hover);
}

/* ------------------------------------------------------------------------
   2. The Language Divide — stat cards + note
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(2) .glow-pulse {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(2) .glow-pulse p {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(2) .from-purple-900\/20 {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.120) 0%, rgba(167, 139, 250, 0.086) 18%, rgba(167, 139, 250, 0.048) 33%, rgba(167, 139, 250, 0.017) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}

/* ------------------------------------------------------------------------
   3. The Old Way Was Broken — blush vs lilac comparison cards
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .bg-red-950\/20 {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(251, 113, 133, 0.100) 0%, rgba(251, 113, 133, 0.072) 17%, rgba(251, 113, 133, 0.040) 32%, rgba(251, 113, 133, 0.014) 46%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fff8f9 100%);
  border-color: rgba(225, 29, 72, 0.12);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .bg-purple-950\/20 {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(167, 139, 250, 0.160) 0%, rgba(167, 139, 250, 0.115) 17%, rgba(167, 139, 250, 0.064) 32%, rgba(167, 139, 250, 0.022) 46%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-3);
}
/* the big corner glyphs were a 20% whisper in dark — keep them a whisper */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .text-red-400\/20 {
  color: rgba(225, 29, 72, 0.22);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .text-purple-400\/20 {
  color: rgba(124, 58, 237, 0.24);
}
/* icon tiles: hue at ~9% fill + ~18% border */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .bg-red-500\/10 {
  background-color: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.14);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(3) .bg-purple-500\/10 {
  background-color: var(--t-brand-soft);
  border: 1px solid var(--t-brand-line);
}

/* ------------------------------------------------------------------------
   4. Imagine This — featured story card (lilac corner glow, soft shadow)
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4) .bg-amber-500\/10 {
  background-color: rgba(251, 191, 36, 0.10);
  border-color: rgba(217, 119, 6, 0.22);
  color: #92400e;
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4) .bg-neutral-900\/60 {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(167, 139, 250, 0.160) 0%, rgba(167, 139, 250, 0.115) 18%, rgba(167, 139, 250, 0.064) 33%, rgba(167, 139, 250, 0.022) 48%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(251, 191, 36, 0.060) 0%, rgba(251, 191, 36, 0.043) 18%, rgba(251, 191, 36, 0.024) 33%, rgba(251, 191, 36, 0.008) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4) .bg-neutral-900\/60 > .h-1 {
  --tw-gradient-from: rgba(245, 158, 11, 0.45) var(--tw-gradient-from-position);
  --tw-gradient-via: rgba(139, 92, 246, 0.55) var(--tw-gradient-via-position);
  --tw-gradient-to: rgba(245, 158, 11, 0.45) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4) .bg-neutral-900\/60 p {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(4) .bg-neutral-900\/60 p.text-neutral-400 {
  color: var(--t-fg-3);
}

/* ------------------------------------------------------------------------
   5. The Manual Process — step cards (base handled in §1)
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .bg-white\/\[0\.02\] {
  background: linear-gradient(180deg, #fbfaff 0%, #f7f4ff 100%);
  border-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .bg-white\/\[0\.02\] p.text-\[11px\] {
  color: var(--t-fg-3);
}
/* step number discs: rose hue, soft */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .rounded-full.bg-red-500\/10.w-10 {
  background-color: rgba(244, 63, 94, 0.08);
  border-color: rgba(225, 29, 72, 0.18);
}
/* "x5" card: a faint blush so the repeat step reads as the warning it is */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(5) .space-y-6 > :last-child {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(251, 113, 133, 0.080) 0%, rgba(251, 113, 133, 0.058) 18%, rgba(251, 113, 133, 0.032) 33%, rgba(251, 113, 133, 0.011) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff9fa 100%);
  border-color: rgba(225, 29, 72, 0.12);
  box-shadow: var(--t-shadow-2);
}

/* ------------------------------------------------------------------------
   6. The Total Damage — blush total card, lilac Octavia card
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-red-950\/30 {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(251, 113, 133, 0.100) 0%, rgba(251, 113, 133, 0.072) 18%, rgba(251, 113, 133, 0.040) 33%, rgba(251, 113, 133, 0.014) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
  border-color: rgba(225, 29, 72, 0.14);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-red-950\/30 .border-red-500\/10 {
  border-color: rgba(225, 29, 72, 0.10);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-purple-950\/30 {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(167, 139, 250, 0.180) 0%, rgba(167, 139, 250, 0.130) 18%, rgba(167, 139, 250, 0.072) 33%, rgba(167, 139, 250, 0.025) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9f6ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-purple-950\/30 .border-purple-500\/10 {
  border-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-red-950\/30 p.text-sm.text-neutral-500,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-purple-950\/30 p.text-sm.text-neutral-500 {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(6) .bg-purple-600 {
  box-shadow: 0 10px 26px -8px rgba(124, 58, 237, 0.45), 0 0 0 6px rgba(124, 58, 237, 0.08);
}

/* ------------------------------------------------------------------------
   7. 6 AI Agents — numbered cards (base in §1); hue icon tiles
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(7) .absolute.bg-purple-600 {
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.45), 0 0 0 3px #ffffff;
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(7) .mt-8 p.text-neutral-600 {
  color: var(--t-fg-3);
}

/* hue tiles used on this page (agents, deployment rows, mission cards) */
html[data-theme="light"][data-page="inspiration"] .bg-blue-500\/10.border-blue-500\/10 {
  background-color: rgba(59, 130, 246, 0.09);
  border-color: rgba(59, 130, 246, 0.18);
}
html[data-theme="light"][data-page="inspiration"] .bg-amber-500\/10.border-amber-500\/10 {
  background-color: rgba(245, 158, 11, 0.10);
  border-color: rgba(217, 119, 6, 0.18);
}
html[data-theme="light"][data-page="inspiration"] .bg-emerald-500\/10.border-emerald-500\/10 {
  background-color: rgba(16, 185, 129, 0.09);
  border-color: rgba(5, 150, 105, 0.18);
}
html[data-theme="light"][data-page="inspiration"] .bg-purple-500\/10.border-purple-500\/10 {
  background-color: var(--t-brand-soft);
  border-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="inspiration"] .bg-rose-500\/10.border-rose-500\/10 {
  background-color: rgba(244, 63, 94, 0.08);
  border-color: rgba(225, 29, 72, 0.18);
}
html[data-theme="light"][data-page="inspiration"] .bg-cyan-500\/10.border-cyan-500\/10 {
  background-color: rgba(6, 182, 212, 0.09);
  border-color: rgba(8, 145, 178, 0.18);
}

/* ------------------------------------------------------------------------
   8. 12-Hour Video. 30 Minutes. Done.
   ------------------------------------------------------------------------ */
/* the four input stat cards → soft tinted stat cards */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .grid.mb-10 > .bg-neutral-900\/60 {
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(167, 139, 250, 0.140) 0%, rgba(167, 139, 250, 0.101) 19%, rgba(167, 139, 250, 0.056) 34%, rgba(167, 139, 250, 0.020) 50%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .grid.mb-10 > .bg-neutral-900\/60:hover {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .grid.mb-10 > .bg-neutral-900\/60 p.text-\[11px\] {
  color: var(--t-fg-3);
}

/* agent deployment table */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 .border-b,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 .divide-y > * {
  border-color: var(--t-line-soft);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 p.text-\[11px\].text-neutral-600,
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 p.text-\[10px\] {
  color: var(--t-fg-4);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 p.text-sm.text-neutral-400 {
  color: var(--t-fg-3);
}
/* total bar: a light lilac strip, readable labels */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-purple-600\/10 {
  background: linear-gradient(90deg, #faf8ff 0%, #f4effe 100%);
  border-top-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-neutral-900\/40.rounded-3xl.mb-8 .bg-purple-600\/10 p.text-neutral-500 {
  color: var(--t-fg-3);
}

/* Scale to 5 Languages */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 {
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(167, 139, 250, 0.160) 0%, rgba(167, 139, 250, 0.115) 18%, rgba(167, 139, 250, 0.064) 33%, rgba(167, 139, 250, 0.022) 48%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 .bg-white\/\[0\.03\] {
  background: #ffffff;
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 .bg-white\/\[0\.03\] p.text-\[10px\] {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 .bg-white\/\[0\.03\] .text-neutral-700 {
  color: var(--t-fg-4);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 .border-purple-500\/10 {
  border-color: var(--t-brand-line);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .from-purple-900\/20 p.text-xs.text-neutral-500 {
  color: var(--t-fg-3);
}

/* Human Equivalent card + 1,000,000x panel */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .reveal-on-scroll > .bg-neutral-900\/40.rounded-3xl.relative {
  background:
    radial-gradient(60% 80% at 100% 50%, rgba(167, 139, 250, 0.120) 0%, rgba(167, 139, 250, 0.086) 19%, rgba(167, 139, 250, 0.048) 34%, rgba(167, 139, 250, 0.017) 50%, transparent 62%),
    var(--t-card-bg);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .reveal-on-scroll > .bg-neutral-900\/40.rounded-3xl.relative > .h-1 {
  --tw-gradient-from: rgba(244, 63, 94, 0.35) var(--tw-gradient-from-position);
  --tw-gradient-via: rgba(139, 92, 246, 0.55) var(--tw-gradient-via-position);
  --tw-gradient-to: rgba(244, 63, 94, 0.35) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-red-500\/10.rounded-full {
  background-color: rgba(244, 63, 94, 0.08);
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.14);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-purple-600\/10.inline-block {
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(167, 139, 250, 0.200) 0%, rgba(167, 139, 250, 0.144) 19%, rgba(167, 139, 250, 0.080) 34%, rgba(167, 139, 250, 0.028) 50%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7f3ff 100%);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-purple-600\/10.inline-block p.text-sm {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(8) .bg-purple-600\/10.inline-block p.text-\[11px\] {
  color: var(--t-fg-3);
}

/* ------------------------------------------------------------------------
   9. The Numbers Speak — table rows hairlines kept faint
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(9) tr {
  border-color: var(--t-line-soft);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(9) thead tr {
  border-color: var(--t-line);
}

/* ------------------------------------------------------------------------
   10. Built for Every Mission — cards in §1; quote line readable
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(10) .bg-neutral-900\/40 p.text-xs.text-neutral-600 {
  color: var(--t-fg-4);
}

/* ------------------------------------------------------------------------
   12. CTA — soft lilac featured panel + homepage primary button
   ------------------------------------------------------------------------ */
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] {
  background:
    radial-gradient(75% 90% at 100% 0%, rgba(167, 139, 250, 0.20) 0%, rgba(167, 139, 250, 0.144) 21%, rgba(167, 139, 250, 0.08) 39%, rgba(167, 139, 250, 0.028) 56%, transparent 70%),
    radial-gradient(65% 80% at 0% 100%, rgba(129, 140, 248, 0.11) 0%, rgba(129, 140, 248, 0.079) 21%, rgba(129, 140, 248, 0.044) 39%, rgba(129, 140, 248, 0.015) 56%, transparent 70%),
    linear-gradient(180deg, #fcfbff 0%, #f5f1fe 100%);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: var(--t-shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > p {
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > a {
  background-color: var(--t-fg);
  border-color: var(--t-fg);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.10), 0 14px 30px -14px rgba(46, 16, 101, 0.55);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > a:hover {
  background-color: #1d1830;
  border-color: #1d1830;
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.12), 0 20px 40px -16px rgba(76, 29, 149, 0.6);
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > a span {
  color: #ffffff;
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > a iconify-icon {
  color: #c4b5fd;
}
html[data-theme="light"][data-page="inspiration"] body > section:nth-of-type(12) .rounded-\[2\.5rem\] > a > .absolute {
  background-image: linear-gradient(90deg, rgba(167, 139, 250, 0.22), transparent, rgba(129, 140, 248, 0.20));
}

/* ---------------------------------------------------------------------------
   p-pricing: page layer: pricing
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Daylight — pricing.html  (data-page="pricing")
   The user: "For the pricing, leave the hero page dark... and switch the other
   sections with flow to white."
   Every selector: html[data-theme="light"][data-page="pricing"].

   !important note: the page's inline style="" gradient-text spans and the
   plan grid's own inline <style> (border-color / check-icon colour with
   !important) cannot be beaten by specificity, so those few overrides carry
   !important. All are light-scoped, so Dark is untouched.
   ========================================================================== */

/* ------------------------------------------------------------ 1. grounds */

/* The hero stays on the original dark ground: body keeps the dark design's
   #050505 (the hero header has no background of its own — it sits on body).
   Everything after the hero lives in <main>, which carries the white page. */
html[data-theme="light"][data-page="pricing"] body {
  background: #050505;
  background-color: #050505;
}
html[data-theme="light"][data-page="pricing"] main {
  background-color: #ffffff;
}

/* ------------------------------------------------ 2. the hero stays dark */
/* Restore every light override that reaches into the hero, back to the exact
   dark-design values (verified with styles-diff: 0 differing properties). */

html[data-theme="light"][data-page="pricing"] body > header { color: #ffffff; }
html[data-theme="light"][data-page="pricing"] body > header .text-white { color: #ffffff; }
html[data-theme="light"][data-page="pricing"] body > header .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
html[data-theme="light"][data-page="pricing"] body > header .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
html[data-theme="light"][data-page="pricing"] body > header .text-purple-200 { color: #e9d5ff; }
html[data-theme="light"][data-page="pricing"] body > header .text-purple-300 { color: #d8b4fe; }
html[data-theme="light"][data-page="pricing"] body > header .text-purple-400 { color: #a78bfa; }
html[data-theme="light"][data-page="pricing"] body > header .bg-purple-500\/10 { background-color: rgba(139, 92, 246, 0.1); }
html[data-theme="light"][data-page="pricing"] body > header .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme="light"][data-page="pricing"] body > header .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="light"][data-page="pricing"] body > header .backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* the outputs tiles' own hover states (outranked by the restores above) */
html[data-theme="light"][data-page="pricing"] body > header .hover\:border-purple-500\/40:hover { border-color: rgba(139, 92, 246, 0.4); }
html[data-theme="light"][data-page="pricing"] body > header .group:hover .group-hover\:bg-purple-500\/15 { background-color: rgba(139, 92, 246, 0.15); }

/* ---------------------------------------------- 3. flow from dark to white */
/* The user asked for more of the hero's artwork and more black before the
   page turns white, so the hero keeps its full dark-design fade (no veil) and
   the logo band stays black with the dark design's white logos. The band then
   grows a tall ramp under the logos: black, held, then lifted through deep
   violet and lilac into the white page. One continuous ramp, no seam. */
html[data-theme="light"][data-page="pricing"] main > section:first-of-type {
  --oc-ramp: 200px;
  padding-bottom: calc(2rem + var(--oc-ramp));
  background:
    linear-gradient(180deg,
      #000000 0,
      #000000 calc(100% - var(--oc-ramp)),
      #07050d calc(100% - var(--oc-ramp) * 0.86),
      #130d26 calc(100% - var(--oc-ramp) * 0.72),
      #2a1f50 calc(100% - var(--oc-ramp) * 0.58),
      #51428f calc(100% - var(--oc-ramp) * 0.45),
      #8b7dcb calc(100% - var(--oc-ramp) * 0.33),
      #c3b9ef calc(100% - var(--oc-ramp) * 0.21),
      #e9e4fc calc(100% - var(--oc-ramp) * 0.1),
      #ffffff 100%);
  background-origin: border-box;
  border-top-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: transparent;
}
@media (max-width: 767px) {
  html[data-theme="light"][data-page="pricing"] main > section:first-of-type { --oc-ramp: 140px; }
}
html[data-theme="light"][data-page="pricing"] main > section:first-of-type .animate-marquee {
  color: #ffffff;
  opacity: 0.4;
}

/* ------------------------------------------- 4. navbar over the dark hero */
/* At the top of the page (#navbar-bg still .bg-transparent) the bar sits on
   the dark hero, so it takes the dark design's treatment. Once scrolled, or
   with the mobile menu open, it is the normal frosted-white Daylight bar. */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent {
  color: #ffffff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: none;
}
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-row { border-bottom-color: rgba(255, 255, 255, 0.05); }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-label { color: #a3a3a3; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-sep { background: rgba(255, 255, 255, 0.12); }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-link { color: #d4d4d4; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-link iconify-icon { color: #8b5cf6; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-link:hover { color: #c4b5fd; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .fu-link:hover iconify-icon { color: #a78bfa; }

/* the dropdown panels stay light cards: their text does not inherit the
   bar's white */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .bg-\[\#0A0A0A\] { color: var(--t-fg); }

/* white wordmark */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent img[alt="LUNARTECH"] { filter: none; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .group:hover img[alt="LUNARTECH"] {
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.5));
}
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-main-row > .group > .bg-purple-500\/20 {
  background-color: rgba(139, 92, 246, 0.2);
}

/* centre links */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent nav.hidden > a,
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent nav.hidden > .group > button { color: #a3a3a3; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent nav.hidden > a:hover,
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent nav.hidden > .group:hover > button { color: #ffffff; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent nav.hidden > a.text-white {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* secondary CTA: translucent dark pill */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-login {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 20px -10px rgba(168, 85, 247, 0.3);
}
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-login:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 25px -5px rgba(168, 85, 247, 0.5);
}
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-login iconify-icon { color: #d8b4fe; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-login:hover iconify-icon { color: #e9d5ff; }
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-login .from-purple-500\/10 {
  --tw-gradient-from: rgb(139 92 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* primary CTA: white pill, black text */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-signup {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
  box-shadow: none;
}
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-cta-signup:hover {
  background-color: #e5e5e5;
  border-color: #ffffff;
}

/* burger (phones / tablets) */
html[data-theme="light"][data-page="pricing"] body:not(.mnav-open) > nav #navbar-bg.bg-transparent .nav-burger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: none;
}

/* ------------------------------------------------------ 5. shared pieces */

/* accent words: the inline lilac ramp (#a855f7 -> #c084fc) is too pale on
   white; use the site's readable violet-to-indigo accent */
html[data-theme="light"][data-page="pricing"] main span.text-transparent.bg-clip-text[style] {
  background-image: var(--t-grad-text) !important;
}

/* section seams: no hairlines, no tinted band boxes — one continuous ground */
html[data-theme="light"][data-page="pricing"] main > section.border-t { border-top-color: transparent; }
html[data-theme="light"][data-page="pricing"] main > section.bg-neutral-900\/20,
html[data-theme="light"][data-page="pricing"] main > section.bg-\[\#060606\] { background-color: transparent; }
/* the washes below are painted under the (kept, 1px, transparent) top border
   too, and never tiled: otherwise the border row shows the wash's tail from
   the opposite edge as a faint lilac hairline. :is(#features) lifts this
   above the id-scoped background shorthands further down. */
html[data-theme="light"][data-page="pricing"] main > section:is(:nth-of-type(n), #features, #credit-math) {
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* tracked divider eyebrows + their hairlines */
html[data-theme="light"][data-page="pricing"] main span.text-purple-300.uppercase { color: var(--t-brand-2); }
html[data-theme="light"][data-page="pricing"] main span.h-px.from-transparent {
  --tw-gradient-from: rgba(124, 58, 237, 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(124, 58, 237, 0.32) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* ink primary buttons (white-on-dark in Dark): ink fill, white label */
html[data-theme="light"][data-page="pricing"] main a.bg-white {
  background-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 10px 22px -14px rgba(46, 16, 101, 0.4);
}
html[data-theme="light"][data-page="pricing"] main a.bg-white:hover { background-color: #1f1a2e; }
html[data-theme="light"][data-page="pricing"] main a.bg-white iconify-icon { color: inherit; }

/* ---------------------------------------------------- 6. plan cards (S2) */

html[data-theme="light"][data-page="pricing"] main > section.content-wait-for-load {
  background:
    radial-gradient(45% 30% at 72% 28%, rgba(167, 139, 250, 0.10), transparent 70%),
    radial-gradient(50% 20% at 12% 76%, rgba(129, 140, 248, 0.07), transparent 70%),
    transparent;
}
html[data-theme="light"][data-page="pricing"] .pricing-grid > div:nth-child(1) { --a-ink: 51, 65, 85; }
html[data-theme="light"][data-page="pricing"] .pricing-grid > div:nth-child(2) { --a-ink: 3, 105, 161; }
html[data-theme="light"][data-page="pricing"] .pricing-grid > div:nth-child(3) { --a-ink: 4, 120, 87; }
html[data-theme="light"][data-page="pricing"] .pricing-grid > div:nth-child(4) { --a-ink: 109, 40, 217; }
html[data-theme="light"][data-page="pricing"] .pricing-grid > div:nth-child(5) { --a-ink: 185, 28, 28; }

html[data-theme="light"][data-page="pricing"] main .pricing-grid > div {
  background: var(--t-card-bg);
  border-color: rgba(var(--accent), 0.24) !important;
  box-shadow: var(--t-shadow-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div:nth-child(1) { border-color: var(--t-card-border) !important; }
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div:hover {
  border-color: rgba(var(--accent), 0.45) !important;
  box-shadow: var(--t-shadow-hover), 0 0 60px -26px rgba(var(--accent), 0.45);
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div:nth-child(1):hover { border-color: var(--t-line-strong) !important; }

html[data-theme="light"][data-page="pricing"] main .pricing-grid > div.pro-pop {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 55%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.34) !important;
  box-shadow: var(--t-shadow-3), 0 0 0 4px rgba(124, 58, 237, 0.04);
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div.pro-pop:hover {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: var(--t-shadow-3), 0 36px 80px -36px rgba(124, 58, 237, 0.38), 0 0 0 4px rgba(124, 58, 237, 0.06);
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid .pro-pop .text-neutral-500,
html[data-theme="light"][data-page="pricing"] main .pricing-grid .pro-pop p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main .pricing-grid .pro-pop > .absolute.from-purple-600 {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 16px -6px rgba(109, 40, 217, 0.45);
}

/* credits pills: lilac-white, never grey */
html[data-theme="light"][data-page="pricing"] main .pricing-grid .rounded-full.bg-white\/5 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-line);
  color: var(--t-fg-2);
}
/* minutes pills: tinted with their tier hue, 700-shade text */
html[data-theme="light"][data-page="pricing"] main .pricing-grid .mt-3 > .rounded-full:not(.bg-white\/5) {
  background-color: rgba(var(--accent), 0.12);
  border-color: rgba(var(--a-ink), 0.22);
  color: rgb(var(--a-ink));
}

/* Free tier's slate accent would read grey: its minutes pill goes lilac */
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div:nth-child(1) .mt-3 > .rounded-full:not(.bg-white\/5) {
  background-color: var(--t-brand-soft);
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
}

/* check icons: the tier's ink shade */
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div ul iconify-icon { color: rgb(var(--a-ink)) !important; }

/* secondary "Create Account" buttons */
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div > a.bg-white\/5 {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div > a.bg-white\/5:hover {
  background: var(--t-tint-bg);
  border-color: rgba(var(--a-ink), 0.3);
}
html[data-theme="light"][data-page="pricing"] main .pricing-grid > div.group:hover > a.bg-white\/5 { border-color: rgba(var(--a-ink), 0.28); }
html[data-theme="light"][data-page="pricing"] main .pricing-grid .pro-pop > a.bg-purple-600 {
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.15), 0 10px 22px -10px rgba(124, 58, 237, 0.55);
}

/* enterprise banner */
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(40% 90% at 0% 100%, rgba(129, 140, 248, 0.06), transparent 70%),
    linear-gradient(100deg, #ffffff 0%, #fbf9ff 45%, #f3eeff 100%);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl > .absolute.bg-purple-500\/10 {
  background-color: rgba(167, 139, 250, 0.28);
}
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl .inline-flex.rounded-full {
  background: #ffffff;
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl a.border-white\/10 {
  background: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="pricing"] main section.content-wait-for-load .mt-12.rounded-3xl a.border-white\/10:hover {
  background: var(--t-tint-bg);
  border-color: var(--t-brand-line);
}

/* ---------------------------------------------- 7. compare plans (S3) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) {
  background:
    radial-gradient(50% 10% at 50% 9%, rgba(167, 139, 250, 0.08), transparent 75%),
    radial-gradient(40% 22% at 100% 60%, rgba(129, 140, 248, 0.06), transparent 75%),
    transparent;
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table tr.border-t { border-top-color: var(--t-line-soft); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table tbody tr:hover { background-color: rgba(124, 58, 237, 0.035); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table td.text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table th.text-purple-400 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table th.text-sky-300 { color: #0369a1; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table th.text-emerald-300 { color: #047857; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table th.text-red-400 { color: #b91c1c; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table .text-emerald-400 { color: #059669; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(3) table .text-rose-500\/70 { color: rgba(225, 29, 72, 0.72); }

/* ---------------------------------------------- 8. how credits work (S4) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(4) .rounded-2xl.border-purple-500\/20 {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(4) thead tr {
  background-image: linear-gradient(90deg, rgba(124, 58, 237, 0.09), rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.09));
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(4) .text-purple-300 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(4) .border-white\/10 { border-color: var(--t-line-soft); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(4) tbody tr:hover { background-color: rgba(124, 58, 237, 0.045); }

/* ------------------------------------------------ 9. credit math (S5) */

html[data-theme="light"][data-page="pricing"] #credit-math {
  background:
    radial-gradient(45% 30% at 50% 38%, rgba(167, 139, 250, 0.10), transparent 72%),
    transparent;
}
html[data-theme="light"][data-page="pricing"] #credit-math::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(167, 139, 250, 0.14), transparent 60%);
}
html[data-theme="light"][data-page="pricing"] #credit-math .rounded-2xl.bg-white\/\[0\.02\] {
  background: var(--t-card-bg);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="pricing"] #credit-math .rounded-2xl.bg-white\/\[0\.02\] .text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="pricing"] #credit-math .text-purple-400 { color: var(--t-brand); }
html[data-theme="light"][data-page="pricing"] #credit-math .text-purple-400\/60 { color: var(--t-brand); }
html[data-theme="light"][data-page="pricing"] #credit-math p.text-purple-400 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="pricing"] #credit-math .text-purple-400\/70 { color: var(--t-brand); }

/* soft cards shared by credit math and premium controls */
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\] {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\]:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\] > .bg-gradient-to-br {
  --tw-gradient-from: rgba(167, 139, 250, 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(129, 140, 248, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\]:hover > .bg-gradient-to-br {
  --tw-gradient-from: rgba(167, 139, 250, 0.10) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(129, 140, 248, 0.08) var(--tw-gradient-to-position);
}
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\] h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\] p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl.from-white\/\[0\.04\] p.text-neutral-500 { color: var(--t-fg-4); }
/* example icon tiles */
html[data-theme="light"][data-page="pricing"] main .group.rounded-2xl .w-14.h-14.bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.18);
  color: #7c3aed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------- 10. premium controls (S6) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(6) {
  background:
    radial-gradient(50% 30% at 0% 40%, rgba(167, 139, 250, 0.09), transparent 72%),
    radial-gradient(45% 30% at 100% 72%, rgba(129, 140, 248, 0.07), transparent 72%),
    transparent;
}

/* ------------------------------------------ 11. total control workflow (S7) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) .w-16.h-16.rounded-full {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.24);
  color: var(--t-brand-ink);
  box-shadow: inset 0 0 12px rgba(167, 139, 250, 0.16), var(--t-shadow-1);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) .group:hover .w-16.h-16.rounded-full {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: inset 0 0 16px rgba(167, 139, 250, 0.24), 0 10px 24px -12px rgba(124, 58, 237, 0.45);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) .bg-purple-500\/20 { background-color: rgba(167, 139, 250, 0.16); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) .bg-purple-500\/25 { background-color: rgba(167, 139, 250, 0.2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) p.text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(7) .group:hover p.text-neutral-300 { color: var(--t-fg); }

/* ---------------------------------------------- 12. after payment (S8) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) .rounded-3xl.bg-\[\#0A0A0A\] {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(167, 139, 250, 0.13), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(129, 140, 248, 0.06), transparent 65%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
/* white payment marks -> ink marks */
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) img[alt="Stripe"],
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) img[alt="PayPal"] {
  filter: brightness(0) invert(0.12) sepia(0.4) hue-rotate(220deg) saturate(2);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) .w-14.h-14.bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.18);
  color: #7c3aed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) .group:hover .w-14.h-14.bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.13);
  border-color: rgba(124, 58, 237, 0.28);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(8) p.text-neutral-400 { color: var(--t-fg-3); }

/* ---------------------------------------------- 13. credit usage (S9) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .rounded-2xl.bg-\[\#0A0A0A\] {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10 { border: 1px solid transparent; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10.text-purple-300 { background-color: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.18); color: #7c3aed; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10.text-blue-300 { background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18); color: #2563eb; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10.text-emerald-300 { background-color: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.18); color: #059669; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10.text-rose-300 { background-color: rgba(225, 29, 72, 0.08); border-color: rgba(225, 29, 72, 0.18); color: #e11d48; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) .w-10.h-10.text-cyan-300 { background-color: rgba(8, 145, 178, 0.08); border-color: rgba(8, 145, 178, 0.18); color: #0891b2; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(9) p.text-neutral-500 { color: var(--t-fg-3); }

/* ------------------------------------------- 14. need more credits (S10) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) {
  background:
    radial-gradient(40% 60% at 78% 50%, rgba(167, 139, 250, 0.16), transparent 72%),
    transparent;
}
/* no white paint over the dark artwork (that was the grey smear) */
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) > .pointer-events-none > .bg-gradient-to-r {
  background-image: none;
}
@media (min-width: 1024px) {
  /* desktop: the globe floats on the white page with soft, lit edges */
  html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) > .pointer-events-none img {
    -webkit-mask-image:
      radial-gradient(circle closest-side at 52% 48%, #000 0%, #000 74%, rgba(0, 0, 0, 0.62) 84%, rgba(0, 0, 0, 0.24) 92%, rgba(0, 0, 0, 0) 100%);
    mask-image:
      radial-gradient(circle closest-side at 52% 48%, #000 0%, #000 74%, rgba(0, 0, 0, 0.62) 84%, rgba(0, 0, 0, 0.24) 92%, rgba(0, 0, 0, 0) 100%);
  }
  /* screen-blended violet over the dissolving rim: a no-op over white, it
     turns the thinning dark space violet, so the globe ends in lit lilac
     rather than grey */
  html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) > .pointer-events-none > .bg-gradient-to-r {
    background: radial-gradient(circle closest-side at 52% 48%, rgba(167, 139, 250, 0) 66%, rgba(167, 139, 250, 0.42) 80%, rgba(196, 181, 253, 0.5) 90%, rgba(221, 214, 254, 0.3) 97%, rgba(221, 214, 254, 0) 100%);
    mix-blend-mode: screen;
  }
}
@media (max-width: 1023.98px) {
  /* phones/tablets: the artwork sits behind the copy, so re-key it as a
     light-field image (as the homepage globe band does) */
  html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) > .pointer-events-none { opacity: 0.4; }
  html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) > .pointer-events-none img {
    filter: invert(1) hue-rotate(170deg) saturate(1.5) contrast(0.82) brightness(1.06);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 22%, #000 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 22%, #000 70%, rgba(0, 0, 0, 0) 100%);
  }
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) .rounded-2xl.bg-\[\#0A0A0A\]\/80 {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) .divide-white\/5 > * { border-color: var(--t-line-soft); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) iconify-icon.text-purple-300 { color: #7c3aed; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) p.text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(10) .text-neutral-500 { color: var(--t-fg-3); }

/* ------------------------------------------------- 15. why go pro (S11) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .rounded-full.bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.18); color: #7c3aed; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .rounded-full.bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18); color: #2563eb; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) p.text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .from-purple-500\/20 {
  --tw-gradient-from: rgba(167, 139, 250, 0.26) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(129, 140, 248, 0.2) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .rounded-2xl.bg-\[\#0A0A0A\] {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .rounded-2xl .text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .rounded-lg.bg-purple-600 {
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.6);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .w-1.bg-purple-500 { background-color: #7c3aed; }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(11) .bg-neutral-800.flex-1 { background-color: rgba(124, 58, 237, 0.10); }

/* ------------------------------------------------------ 16. #features (S12) */

html[data-theme="light"][data-page="pricing"] #features {
  background:
    radial-gradient(55% 30% at 88% 42%, rgba(167, 139, 250, 0.08), transparent 70%),
    radial-gradient(50% 26% at 8% 78%, rgba(129, 140, 248, 0.06), transparent 70%),
    radial-gradient(40% 12% at 0% 14%, rgba(167, 139, 250, 0.08), transparent 72%),
    transparent;
  border-top-color: transparent;
}
html[data-theme="light"][data-page="pricing"] #features .grid .w-10.h-10.text-sky-400 {
  --g3-hue: 2 132 199;
  --g3-ink: #0284c7;
  background-color: rgb(var(--g3-hue) / 0.09);
  border-color: rgb(var(--g3-hue) / 0.2);
}
html[data-theme="light"][data-page="pricing"] #features .grid .group:hover .w-10.h-10.text-sky-400 {
  background-color: rgb(var(--g3-hue) / 0.14);
  border-color: rgb(var(--g3-hue) / 0.28);
}
html[data-theme="light"][data-page="pricing"] #features > div > .mb-24 > .rounded-full.bg-purple-500\/10 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
}

/* ----------------------------------------------------------- 17. FAQ (S13) */

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(13) {
  background:
    radial-gradient(40% 30% at 100% 72%, rgba(129, 140, 248, 0.06), transparent 72%),
    transparent;
}
html[data-theme="light"][data-page="pricing"] main .faq-item {
  background: #ffffff;
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="pricing"] main .faq-item:hover {
  border-color: var(--t-brand-line);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 14px 30px -18px rgba(76, 29, 149, 0.26);
}
html[data-theme="light"][data-page="pricing"] main .faq-item .accordion-content { background-color: transparent; }
html[data-theme="light"][data-page="pricing"] main .faq-item .accordion-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="pricing"] main .faq-item .text-neutral-400 { color: var(--t-fg-3); }

/* ------------------------------------------------ 18. creator program (S14) */

/* the footer below opens with a lilac wash at its top-right (60% wide,
   centred at 85%); the same profile here, reaching the shared edge at the
   same strength, makes the seam disappear */
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) {
  background:
    radial-gradient(60% 46% at 85% 100%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 100%),
    transparent;
}

html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) .rounded-3xl.bg-\[\#0A0A0A\] {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 58%),
    radial-gradient(45% 70% at 0% 100%, rgba(129, 140, 248, 0.06), transparent 70%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) .rounded-3xl > .absolute.bg-purple-500\/10 { background-color: rgba(167, 139, 250, 0.22); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) .inline-flex.rounded-full {
  background: #ffffff;
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) .bg-black\/40 {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="pricing"] main > section:nth-of-type(14) .bg-black\/40 .text-neutral-500 { color: var(--t-fg-3); }

/* ---------------------------------------------------------------------------
   p-simple: page layer: simple
   --------------------------------------------------------------------------- */
/* ==========================================================================
   Daylight — p-simple: FAQ (faq.html), Contact (contact.html),
   Legal (privacy.html + terms.html)
   Treatment only. Every selector is scoped to
   html[data-theme="light"][data-page="faq|contact|legal"].
   ========================================================================== */

/* ------------------------------------------------------------ shared ground
   One continuous, softly lit page: the body carries two large washes that
   straddle the hero / content seam (lilac left-top, periwinkle lower right),
   so there is no band or step between sections; lower down the page settles
   to white and the footer's own lilac ground takes over. Pixel positions keep
   the washes in the upper part of the page whatever its height. The page's own
   hero wash divs sit at z-index:-10 behind the body box (in both themes) and
   are cleared so they can never surface as a grey slab. */
html[data-theme="light"][data-page="faq"] body,
html[data-theme="light"][data-page="contact"] body,
html[data-theme="light"][data-page="legal"] body {
  background-color: var(--t-pg);
  /* eased falloff (no hard 70% stop) keeps the 8-bit banding from reading
     as rings or edges on the white ground */
  background-image:
    radial-gradient(1100px 680px at 8% 150px,
      rgba(167, 139, 250, 0.115) 0%, rgba(167, 139, 250, 0.09) 20%, rgba(167, 139, 250, 0.055) 40%,
      rgba(167, 139, 250, 0.026) 60%, rgba(167, 139, 250, 0.008) 80%, rgba(167, 139, 250, 0) 100%),
    radial-gradient(1000px 720px at 96% 620px,
      rgba(129, 140, 248, 0.09) 0%, rgba(129, 140, 248, 0.07) 20%, rgba(129, 140, 248, 0.043) 40%,
      rgba(129, 140, 248, 0.02) 60%, rgba(129, 140, 248, 0.006) 80%, rgba(129, 140, 248, 0) 100%);
  background-repeat: no-repeat;
}

/* phones: the desktop washes would tint the whole narrow viewport; smaller,
   lighter washes keep the page reading as white with a lilac breath */
@media (max-width: 640px) {
  html[data-theme="light"][data-page="faq"] body,
  html[data-theme="light"][data-page="contact"] body,
  html[data-theme="light"][data-page="legal"] body {
    background-image:
      radial-gradient(560px 520px at 0% 170px,
        rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.078) 20%, rgba(167, 139, 250, 0.048) 40%,
        rgba(167, 139, 250, 0.022) 60%, rgba(167, 139, 250, 0.007) 80%, rgba(167, 139, 250, 0) 100%),
      radial-gradient(520px 560px at 100% 760px,
        rgba(129, 140, 248, 0.08) 0%, rgba(129, 140, 248, 0.062) 20%, rgba(129, 140, 248, 0.038) 40%,
        rgba(129, 140, 248, 0.018) 60%, rgba(129, 140, 248, 0.005) 80%, rgba(129, 140, 248, 0) 100%);
  }
}

html[data-theme="light"][data-page="faq"] section > .absolute.inset-0.-z-10,
html[data-theme="light"][data-page="contact"] section > .absolute.inset-0.-z-10 {
  background-image: none;
  background-color: transparent;
}

/* headings in ink, leads in soft ink */
html[data-theme="light"][data-page="faq"] section h1.text-white,
html[data-theme="light"][data-page="contact"] section h1.text-white,
html[data-theme="light"][data-page="legal"] section h1.text-white { color: var(--t-fg); }

html[data-theme="light"][data-page="faq"] section h1 + p.text-neutral-400,
html[data-theme="light"][data-page="contact"] section h1 + p.text-neutral-400 { color: var(--t-fg-3); }

/* ===================================================================== FAQ */

/* rows: white soft cards, lilac hairline, barely-there lift */
html[data-theme="light"][data-page="faq"] .accordion-item.bg-neutral-900\/30 {
  background: var(--t-card-bg);
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
html[data-theme="light"][data-page="faq"] .accordion-item.bg-neutral-900\/30:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-2);
}
/* open row: featured — corner glow, violet hairline, wider soft shadow */
html[data-theme="light"][data-page="faq"] .accordion-item.bg-neutral-900\/30.active {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0) 60%),
    var(--t-card-bg);
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}

html[data-theme="light"][data-page="faq"] .accordion-item > button.hover\:bg-white\/5:hover {
  background-color: rgba(124, 58, 237, 0.035);
}
html[data-theme="light"][data-page="faq"] .accordion-item.active > button.hover\:bg-white\/5:hover {
  background-color: transparent;
}
html[data-theme="light"][data-page="faq"] .accordion-item > button:focus-visible {
  outline: 2px solid var(--t-brand);
  outline-offset: -2px;
}

/* question in ink, chevron in brand violet */
html[data-theme="light"][data-page="faq"] .accordion-item > button .text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="faq"] .accordion-item .accordion-icon.text-neutral-500 { color: var(--t-brand); }
html[data-theme="light"][data-page="faq"] .accordion-item.active .accordion-icon.text-neutral-500 { color: var(--t-brand-2); }

/* answer: no slab, readable soft ink */
html[data-theme="light"][data-page="faq"] .accordion-item .accordion-content.bg-black\/20 { background-color: transparent; }
html[data-theme="light"][data-page="faq"] .accordion-item .accordion-content .text-neutral-400 { color: var(--t-fg-2); }

/* ================================================================= CONTACT */

/* contact rows: tinted icon tiles, ink labels, soft-ink values */
html[data-theme="light"][data-page="contact"] .rounded-full.bg-white\/5.border-white\/10 {
  background-color: var(--t-brand-soft);
  border-color: var(--t-brand-line);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03);
}
html[data-theme="light"][data-page="contact"] .rounded-full.bg-white\/5 iconify-icon.text-neutral-400 { color: var(--t-brand); }
html[data-theme="light"][data-page="contact"] .space-y-12 h3.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="contact"] .space-y-12 p.text-neutral-500 { color: var(--t-fg-3); }

/* follow-us block: lilac hairline, violet social marks */
html[data-theme="light"][data-page="contact"] .space-y-12 > .border-t.border-white\/5 { border-top-color: var(--t-line); }
html[data-theme="light"][data-page="contact"] .space-y-12 a.text-neutral-400 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="contact"] .space-y-12 a.text-neutral-400:hover { color: var(--t-brand-ink); }

/* form card: the featured soft card (corner glow, wide soft shadow) */
html[data-theme="light"][data-page="contact"] .bg-neutral-900\/30.rounded-3xl {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="contact"] .bg-neutral-900\/30.rounded-3xl > .bg-purple-500\/10 {
  background-color: rgba(167, 139, 250, 0.16);
}

/* labels */
html[data-theme="light"][data-page="contact"] form label.text-neutral-400 { color: var(--t-fg-2); }

/* fields: soft white, lilac hairline, violet focus ring */
html[data-theme="light"][data-page="contact"] form :is(input, select, textarea).bg-black\/50 {
  background-color: #ffffff;
  border-color: rgba(91, 33, 182, 0.13);
  color: var(--t-fg);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.03);
  caret-color: var(--t-brand);
}
html[data-theme="light"][data-page="contact"] form :is(input, select, textarea).bg-black\/50:hover {
  border-color: rgba(124, 58, 237, 0.24);
}
html[data-theme="light"][data-page="contact"] form :is(input, select, textarea).bg-black\/50:focus {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14), 0 1px 2px rgba(28, 20, 60, 0.03);
}
html[data-theme="light"][data-page="contact"] form :is(input, textarea).bg-black\/50::placeholder {
  color: var(--t-fg-4);
  opacity: 1;
}
html[data-theme="light"][data-page="contact"] form select.bg-black\/50 option {
  background-color: #ffffff;
  color: var(--t-fg);
}

/* primary button: ink fill, white text, soft lift */
html[data-theme="light"][data-page="contact"] form button.bg-white.text-black {
  background-color: var(--t-fg);
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 10px 24px -14px rgba(46, 16, 101, 0.45);
}
html[data-theme="light"][data-page="contact"] form button.bg-white.text-black:hover {
  background-color: #241d38;
}
html[data-theme="light"][data-page="contact"] form button.bg-white.text-black:focus-visible {
  outline: 2px solid var(--t-brand);
  outline-offset: 2px;
}

/* =================================================================== LEGAL */

/* calm reading column: ink headings, soft-ink body, violet links */
html[data-theme="light"][data-page="legal"] .prose h3.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="legal"] .prose p.text-neutral-400,
html[data-theme="light"][data-page="legal"] .prose ul.text-neutral-400 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="legal"] .prose > p.text-neutral-400:first-child { color: var(--t-fg-3); }
html[data-theme="light"][data-page="legal"] .prose strong { color: var(--t-fg); }
html[data-theme="light"][data-page="legal"] .prose ul li::marker { color: var(--t-brand); }
html[data-theme="light"][data-page="legal"] .prose a.text-purple-400 {
  color: var(--t-brand-2);
  text-decoration-color: rgba(109, 40, 217, 0.35);
}
html[data-theme="light"][data-page="legal"] .prose a.text-purple-400:hover { color: var(--t-brand-ink); }

/* ---------------------------------------------------------------------------
   p-solutions: page layer: solutions
   --------------------------------------------------------------------------- */
/* =====================================================================
   Daylight — solutions.html  (data-page="solutions")
   Soft, connected white treatment in the style of the homepage
   #who-can-use reference. Treatment only: colour, background, border
   colour, shadow, opacity, filter, blend. Dark is untouched — every
   selector is scoped to html[data-theme="light"][data-page="solutions"].
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. One continuous, softly lit ground
   Sections lose their alternating white / lilac band fills and their
   border-t / border-y hairlines; a few large ambient washes on <body>
   drift across the section edges instead.
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] body {
  background:
    radial-gradient(900px 620px at 92% 2.5%, rgba(167, 139, 250, 0.12), transparent 70%),
    radial-gradient(760px 560px at 4% 9%, rgba(129, 140, 248, 0.08), transparent 70%),
    radial-gradient(900px 700px at 96% 19%, rgba(167, 139, 250, 0.09), transparent 70%),
    radial-gradient(820px 640px at 2% 29%, rgba(129, 140, 248, 0.08), transparent 70%),
    radial-gradient(1000px 700px at 50% 35%, rgba(167, 139, 250, 0.08), transparent 70%),
    radial-gradient(820px 620px at 98% 45%, rgba(129, 140, 248, 0.07), transparent 70%),
    radial-gradient(900px 700px at 3% 60%, rgba(167, 139, 250, 0.07), transparent 70%),
    radial-gradient(900px 700px at 97% 76%, rgba(110, 231, 183, 0.06), transparent 70%),
    radial-gradient(900px 700px at 4% 88%, rgba(167, 139, 250, 0.07), transparent 70%),
    #ffffff;
}

html[data-theme="light"][data-page="solutions"] body > section,
html[data-theme="light"][data-page="solutions"] body > section#features {
  background: transparent;
  border-color: transparent;
}

/* ---------------------------------------------------------------------
   1. Hero — "Built for Every Audience."
   --------------------------------------------------------------------- */

/* Primary CTA "Start Dubbing": ink pill with white text, like the
   homepage's "Get Started" primary. The violet border beam keeps turning
   around the ink edge. */
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate {
  box-shadow:
    0 1px 2px rgba(28, 20, 60, 0.06),
    0 14px 30px -14px rgba(46, 16, 101, 0.42),
    0 0 0 1px rgba(124, 58, 237, 0.08);
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate:hover {
  box-shadow:
    0 2px 6px rgba(28, 20, 60, 0.08),
    0 22px 44px -18px rgba(76, 29, 149, 0.5),
    0 0 0 1px rgba(124, 58, 237, 0.14);
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .bg-neutral-950\/90 {
  background-color: #0c0a14;
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .text-white,
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .text-white\/95,
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .text-white\/80 {
  color: #ffffff;
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate .ring-white\/20 {
  --tw-ring-color: rgba(255, 255, 255, 0.22);
}
html[data-theme="light"][data-page="solutions"] .content-wait-for-load .text-neutral-500 {
  color: var(--t-fg-3);
}

/* Upload card stack: three soft white cards (decoration, not imagery) */
html[data-theme="light"][data-page="solutions"] .content-wait-for-load .bg-purple-500\/20.blur-3xl {
  background-color: rgba(167, 139, 250, 0.32);
}
html[data-theme="light"][data-page="solutions"] .card-stack-item {
  background: var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow:
    0 1px 2px rgba(28, 20, 60, 0.05),
    0 24px 48px -26px rgba(46, 16, 101, 0.28);
}
html[data-theme="light"][data-page="solutions"] .card-stack-item > .bg-neutral-800 {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(167, 139, 250, 0.2), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(129, 140, 248, 0.1), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
}
html[data-theme="light"][data-page="solutions"] .card-stack-item .bg-purple-500\/10 {
  background-color: rgba(167, 139, 250, 0.1);
}
html[data-theme="light"][data-page="solutions"] .card-stack-item iconify-icon.text-white\/20 { color: rgba(124, 58, 237, 0.28); }
html[data-theme="light"][data-page="solutions"] .card-stack-item iconify-icon.text-white\/40 { color: rgba(124, 58, 237, 0.42); }
html[data-theme="light"][data-page="solutions"] .card-stack-item iconify-icon.text-white\/60 { color: rgba(124, 58, 237, 0.3); }
/* the "+" upload button: frosted white disc, violet hairline, ink glyph */
html[data-theme="light"][data-page="solutions"] #card-1 .rounded-full.backdrop-blur-md {
  background-image: linear-gradient(180deg, #ffffff 0%, #f6f3ff 100%);
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px -10px rgba(76, 29, 149, 0.35);
}
html[data-theme="light"][data-page="solutions"] #card-1 .rounded-full.backdrop-blur-md iconify-icon {
  color: var(--t-brand-2);
}
/* "Export" badge: saturated violet chip keeps white text */
html[data-theme="light"][data-page="solutions"] #card-3 .bg-purple-500 {
  background-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 4px 10px -4px rgba(109, 40, 217, 0.5);
}
/* "Cloning voice..." caption */
html[data-theme="light"][data-page="solutions"] #card-2 .text-white\/80 {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="solutions"] #card-2 .bg-green-400 {
  background-color: #10b981;
}

/* Step list — same language as the homepage: active row a soft white card
   with a violet badge (white numeral) and ink label; idle rows muted ink */
html[data-theme="light"][data-page="solutions"] .step-item.active {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow:
    0 1px 2px rgba(28, 20, 60, 0.05),
    0 16px 32px -20px rgba(46, 16, 101, 0.3);
}
html[data-theme="light"][data-page="solutions"] .step-item.active .step-badge {
  background-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 4px 12px -2px rgba(109, 40, 217, 0.4);
}
html[data-theme="light"][data-page="solutions"] .step-item.active .step-text {
  color: var(--t-fg);
}
html[data-theme="light"][data-page="solutions"] .step-item.active .step-icon {
  color: var(--t-brand);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active) .step-badge {
  background-color: transparent;
  color: var(--t-fg-3);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active) .step-text {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active) .step-icon {
  color: var(--t-fg-4);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active):hover {
  background-color: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active):hover .step-badge,
html[data-theme="light"][data-page="solutions"] .step-item:not(.active):hover .step-icon {
  color: var(--t-brand-2);
}
html[data-theme="light"][data-page="solutions"] .step-item:not(.active):hover .step-text {
  color: var(--t-fg);
}

/* ---------------------------------------------------------------------
   2. Logo marquee — soft lavender marks instead of grey
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] body > section.border-b .animate-marquee {
  filter: none;
  color: #4c3d7a;
  opacity: 0.42;
}

/* ---------------------------------------------------------------------
   3. Persona switcher — "Tailored for your content type."
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .persona-toggle {
  background-color: #ffffff;
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="solutions"] #persona-indicator {
  background-color: var(--t-brand-soft);
  box-shadow: inset 0 0 0 1px var(--t-brand-line);
}
html[data-theme="light"][data-page="solutions"] .persona-toggle button.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="solutions"] .persona-toggle button.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="solutions"] .persona-toggle button:hover { color: var(--t-fg); }
html[data-theme="light"][data-page="solutions"] .tab-content li.text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="solutions"] .tab-content .h-64.bg-neutral-900 {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 58%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="solutions"] #content-educators .h-64.bg-neutral-900 {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(96, 165, 250, 0.18), transparent 58%),
    var(--t-card-bg);
}
html[data-theme="light"][data-page="solutions"] #content-enterprises .h-64.bg-neutral-900 {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(244, 114, 182, 0.16), transparent 58%),
    var(--t-card-bg);
}
html[data-theme="light"][data-page="solutions"] .tab-content .h-64 > .absolute.inset-0 {
  background-color: transparent;
}
html[data-theme="light"][data-page="solutions"] .tab-content .text-purple-500\/30 { color: rgba(124, 58, 237, 0.55); }
html[data-theme="light"][data-page="solutions"] .tab-content .text-blue-500\/30   { color: rgba(37, 99, 235, 0.5); }
html[data-theme="light"][data-page="solutions"] .tab-content .text-pink-500\/30   { color: rgba(219, 39, 119, 0.5); }

/* ---------------------------------------------------------------------
   4. "Everything you need to scale." — soft white bento
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] > .rounded-3xl {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] > .rounded-3xl:first-child {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
    var(--t-card-bg);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] > .rounded-3xl:hover {
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] p.text-neutral-400 { color: var(--t-fg-3); }
/* hue glows inside the cards stay as faint corner light */
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-purple-500\/20.blur-3xl { background-color: rgba(167, 139, 250, 0.4); }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-blue-500\/10.blur-3xl   { background-color: rgba(96, 165, 250, 0.16); }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-amber-500\/10.blur-3xl  { background-color: rgba(251, 191, 36, 0.14); }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-rose-500\/10.blur-3xl   { background-color: rgba(251, 113, 133, 0.14); }
/* feature glyphs at their hue's 600 shade */
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-purple-400  { color: #7c3aed; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-blue-400    { color: #2563eb; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-pink-400    { color: #db2777; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-emerald-400 { color: #059669; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-amber-400   { color: #d97706; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] iconify-icon.text-rose-400    { color: #e11d48; }
/* the language-track mock: a floating white window */
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-\[\#0A0A0A\] {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow:
    0 1px 2px rgba(28, 20, 60, 0.05),
    0 28px 56px -30px rgba(46, 16, 101, 0.32);
}
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-\[\#0A0A0A\] .bg-white\/5 {
  background-color: #f8f6ff;
  border-color: rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-\[\#0A0A0A\] .text-neutral-400 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-\[\#0A0A0A\] .text-purple-300 { color: #6d28d9; }
html[data-theme="light"][data-page="solutions"] .auto-rows-\[280px\] .bg-\[\#0A0A0A\] .text-blue-300 { color: #1d4ed8; }

/* ---------------------------------------------------------------------
   5. ROI calculator
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 > .bg-gradient-to-r.blur {
  --tw-gradient-from: #a78bfa var(--tw-gradient-from-position);
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  opacity: 0.16;
}
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7:hover > .bg-gradient-to-r.blur {
  opacity: 0.26;
}
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 > .bg-neutral-900\/80 {
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(129, 140, 248, 0.08), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 hr { border-color: var(--t-line); }
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 span.text-neutral-500 { color: var(--t-fg-4); }
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 p.text-neutral-600 { color: var(--t-fg-4); }
/* big numbers: the site's violet→indigo accent; the money figure's inner
   <span> carries its own clip so the number paints (and is measurable) */
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 h3.bg-clip-text,
html[data-theme="light"][data-page="solutions"] #out-money {
  background-image: linear-gradient(90deg, #7c3aed 0%, #6d28d9 45%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* range tracks: the page script writes a dark (#262626) gradient into the
   inline style on every input, so only !important can replace it — a soft
   tinted track in each slider's hue, the thumb still shows the value */
html[data-theme="light"][data-page="solutions"] #slider-minutes {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.12)) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.1);
}
html[data-theme="light"][data-page="solutions"] #slider-languages {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

/* ---------------------------------------------------------------------
   6. "Experience the magic." before / after split
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] body > section > .bg-purple-900\/10 {
  background-color: rgba(167, 139, 250, 0.12);
}
html[data-theme="light"][data-page="solutions"] #split-container {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="solutions"] #split-container > .bg-\[\#111\] {
  background-color: #ffffff;
}
/* after: the abstract image under a lilac frost */
html[data-theme="light"][data-page="solutions"] #split-container .bg-black\/60 {
  background-color: rgba(250, 248, 255, 0.74);
}
html[data-theme="light"][data-page="solutions"] #split-container h3 {
  color: var(--t-fg);
  filter: none;
}
html[data-theme="light"][data-page="solutions"] #split-container .text-purple-300 { color: #5b21b6; }
html[data-theme="light"][data-page="solutions"] #split-container span.text-purple-400 { color: #5b21b6; }
html[data-theme="light"][data-page="solutions"] #split-container .bg-purple-500\/20 {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.45);
}
html[data-theme="light"][data-page="solutions"] #split-container iconify-icon.text-purple-400 { color: #7c3aed; }
html[data-theme="light"][data-page="solutions"] #split-container .bg-purple-500\/30 { background-color: rgba(124, 58, 237, 0.16); }
html[data-theme="light"][data-page="solutions"] #split-container .bg-purple-500 { background-color: #7c3aed; }
/* before: a pale, faded lilac-white panel over the grayscale photo */
html[data-theme="light"][data-page="solutions"] #split-foreground {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.28);
}
html[data-theme="light"][data-page="solutions"] #split-foreground > div {
  opacity: 1;
}
html[data-theme="light"][data-page="solutions"] #split-foreground .bg-neutral-900\/80 {
  background-color: rgba(251, 250, 255, 0.86);
  mix-blend-mode: normal;
}
html[data-theme="light"][data-page="solutions"] #split-foreground h3 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="solutions"] #split-foreground p.text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="solutions"] #split-foreground .bg-neutral-800.rounded-full {
  background-color: rgba(245, 158, 11, 0.09);
  border-color: rgba(245, 158, 11, 0.24);
}
html[data-theme="light"][data-page="solutions"] #split-foreground iconify-icon.text-neutral-400 { color: #b45309; }
html[data-theme="light"][data-page="solutions"] #split-foreground .h-2.bg-neutral-700 { background-color: rgba(124, 58, 237, 0.2); }
html[data-theme="light"][data-page="solutions"] #split-foreground .h-2.bg-neutral-800 { background-color: rgba(124, 58, 237, 0.11); }
/* the drag handle: violet hairline + white knob */
html[data-theme="light"][data-page="solutions"] #split-slider {
  background-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.25);
}
html[data-theme="light"][data-page="solutions"] #split-container:hover #split-slider {
  background-color: #8b5cf6;
}
html[data-theme="light"][data-page="solutions"] #split-slider > div {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--t-brand-2);
  box-shadow: 0 8px 20px -8px rgba(76, 29, 149, 0.45);
}
html[data-theme="light"][data-page="solutions"] #split-container:hover #split-slider > div {
  border-color: rgba(124, 58, 237, 0.55);
  color: var(--t-brand);
}
html[data-theme="light"][data-page="solutions"] #split-container + .flex .text-neutral-500,
html[data-theme="light"][data-page="solutions"] #split-container + .flex { color: var(--t-fg-4); }
html[data-theme="light"][data-page="solutions"] #split-container + .flex .text-purple-400 { color: #6d28d9; }

/* ---------------------------------------------------------------------
   7. "Real results." — photos at full strength, a soft white scrim only
   where the copy sits
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 {
  background-color: #f6f4fd;
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 > img,
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800:hover > img {
  opacity: 1;
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 > .bg-gradient-to-t {
  background-image: linear-gradient(to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.9) 34%,
    rgba(255, 255, 255, 0.55) 56%,
    rgba(255, 255, 255, 0) 80%);
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 > .mix-blend-multiply {
  background-color: rgba(167, 139, 250, 0.1);
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 > .mix-blend-multiply.bg-blue-900\/40 {
  background-color: rgba(96, 165, 250, 0.1);
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 h3 {
  color: var(--t-fg);
  filter: none;
}
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800:hover h3.group-hover\:text-purple-300 { color: #5b21b6; }
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800:hover h3.group-hover\:text-blue-300 { color: #1d4ed8; }
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 .drop-shadow-md { filter: none; }
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 .text-purple-400 { color: #6d28d9; }
html[data-theme="light"][data-page="solutions"] .group.aspect-video.bg-neutral-800 .text-blue-400 { color: #1d4ed8; }

/* ---------------------------------------------------------------------
   8. "3 steps to global reach."
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .max-w-4xl > .relative > .absolute.w-px {
  --tw-gradient-from: rgba(124, 58, 237, 0.38) var(--tw-gradient-from-position);
  --tw-gradient-via: rgba(124, 58, 237, 0.14) var(--tw-gradient-via-position);
  --tw-gradient-to: rgba(124, 58, 237, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
html[data-theme="light"][data-page="solutions"] .max-w-4xl .w-16.h-16.rounded-full.bg-neutral-900 {
  background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
  border-color: rgba(124, 58, 237, 0.16);
  color: var(--t-fg);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.05), 0 12px 26px -14px rgba(46, 16, 101, 0.3);
}
html[data-theme="light"][data-page="solutions"] .max-w-4xl .group:hover .w-16.h-16.rounded-full.bg-neutral-900 {
  border-color: rgba(124, 58, 237, 0.45);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.05), 0 14px 30px -12px rgba(124, 58, 237, 0.42);
}
html[data-theme="light"][data-page="solutions"] .max-w-4xl .w-16.h-16.rounded-full.bg-purple-600 {
  background-color: #6d28d9;
  border-color: #7c3aed;
  box-shadow: 0 14px 30px -12px rgba(109, 40, 217, 0.55);
}
html[data-theme="light"][data-page="solutions"] .max-w-4xl .group hr { border-color: rgba(124, 58, 237, 0.16); }
html[data-theme="light"][data-page="solutions"] .max-w-4xl .group:hover h3 { color: #5b21b6; }
html[data-theme="light"][data-page="solutions"] .max-w-4xl .group p.text-neutral-400 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="solutions"] .max-w-4xl .group:hover p.text-neutral-400 { color: var(--t-fg-2); }

/* ---------------------------------------------------------------------
   9. "Ready to go global?" input
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] .max-w-xl.group > .bg-gradient-to-r.blur {
  --tw-gradient-from: #a78bfa var(--tw-gradient-from-position);
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  opacity: 0.22;
}
html[data-theme="light"][data-page="solutions"] .max-w-xl.group:hover > .bg-gradient-to-r.blur { opacity: 0.4; }
html[data-theme="light"][data-page="solutions"] .max-w-xl.group > .bg-\[\#0A0A0A\] {
  background-color: #ffffff;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="solutions"] .max-w-xl.group:hover > .bg-\[\#0A0A0A\] {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="solutions"] .max-w-xl.group input { color: var(--t-fg); }
html[data-theme="light"][data-page="solutions"] .max-w-xl.group input::placeholder { color: var(--t-fg-4); }
html[data-theme="light"][data-page="solutions"] .max-w-xl.group iconify-icon { color: #7c3aed; }
/* "Start": ink primary, white text */
html[data-theme="light"][data-page="solutions"] .max-w-xl.group button.bg-white {
  background-color: #0c0a14;
  color: #ffffff;
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="solutions"] .max-w-xl.group button.bg-white:hover {
  background-color: #2a2140;
  box-shadow: 0 10px 22px -10px rgba(46, 16, 101, 0.5);
}
html[data-theme="light"][data-page="solutions"] body > section.py-32 p.text-neutral-500 { color: var(--t-fg-3); }

/* ---------------------------------------------------------------------
   10. #features bento (shared homepage layer) — page-only fixes
   On this page the Tailwind CDN compiles text-sky-400, so the
   "60+ Languages" tile gets its sky hue instead of the homepage's ink
   tile; the neutral "Diarization" chip becomes a brand pill.
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] #features .grid .w-10.h-10.text-sky-400 {
  --g3-hue: 14 165 233;
  --g3-ink: #0284c7;
  background-color: rgb(14 165 233 / 0.09);
  border-color: rgb(14 165 233 / 0.2);
  color: #0284c7;
}
html[data-theme="light"][data-page="solutions"] #features .grid .group:hover .w-10.h-10.text-sky-400 {
  background-color: rgb(14 165 233 / 0.14);
  border-color: rgb(14 165 233 / 0.28);
}
html[data-theme="light"][data-page="solutions"] #features .grid span.rounded-full.uppercase.bg-white\/5 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-2);
}

/* ---------------------------------------------------------------------
   11–12. "Everything you need to reach the entire world" and
   "The Cost of Single-Language" — soft card shadows, ink primaries
   --------------------------------------------------------------------- */
html[data-theme="light"][data-page="solutions"] body > section .rounded-2xl.bg-\[\#0A0A0A\] {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-1), 0 18px 40px -30px rgba(46, 16, 101, 0.22);
}
html[data-theme="light"][data-page="solutions"] body > section .rounded-2xl.bg-\[\#0A0A0A\] span.text-neutral-500 {
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="solutions"] body > section a.bg-white.text-black {
  background-color: #0c0a14;
  color: #ffffff;
  box-shadow: var(--t-shadow-1), 0 12px 26px -14px rgba(46, 16, 101, 0.45);
}
html[data-theme="light"][data-page="solutions"] body > section a.bg-white.text-black:hover {
  background-color: #2a2140;
  color: #ffffff;
}
html[data-theme="light"][data-page="solutions"] body > section a.bg-white.text-black iconify-icon {
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   Round-2 refinements
   --------------------------------------------------------------------- */

/* The CTA's own box is ink too (the translated from-white/20 gradient
   would otherwise sit under the label) */
html[data-theme="light"][data-page="solutions"] .content-wait-for-load a.group.isolate {
  background-image: none;
  background-color: #0c0a14;
}

/* Back cards of the stack: they sit under the opaque top card, faded to
   0.6 / 0.4 by the page script. Their tiny captions are fully covered,
   but at that opacity they cannot reach a legible contrast, so in
   Daylight they only show while their card is on top. */
html[data-theme="light"][data-page="solutions"] .card-stack-item:not([style*="opacity: 1"]) > .absolute.top-3,
html[data-theme="light"][data-page="solutions"] .card-stack-item:not([style*="opacity: 1"]) > .absolute.bottom-3 {
  visibility: hidden;
}

/* ROI card muted copy sits on corner glows: one step darker */
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 span.text-neutral-500,
html[data-theme="light"][data-page="solutions"] .lg\:col-span-7 p.text-neutral-600 {
  color: var(--t-fg-3);
}

/* Split: the "old way" panel is a pale lilac-white frost over the photo */
html[data-theme="light"][data-page="solutions"] #split-foreground .bg-neutral-900\/80 {
  background-color: rgba(250, 248, 255, 0.95);
}
/* In both themes the "after" caption (z-10 inside a non-stacking layer)
   paints over the "before" panel, so the two headings overprint at the
   divider. In Daylight the dark ink makes that read as an error: lift the
   before panel above the after caption, and the handle above both. */
html[data-theme="light"][data-page="solutions"] #split-foreground { z-index: 15; }
html[data-theme="light"][data-page="solutions"] #split-slider { z-index: 20; }

/* "Everything you need to reach the entire world": keep the section's
   emerald accent (Dark uses emerald→teal) at legible 700 shades */
html[data-theme="light"][data-page="solutions"] body > section h2 .bg-clip-text.from-emerald-400 {
  background-image: linear-gradient(90deg, #047857 0%, #0f766e 50%, #15803d 100%);
}
/* the panel's grayscale filter also greys its frost, bars and icon;
   the 93% frost already mutes the photo, so drop the filter */
html[data-theme="light"][data-page="solutions"] #split-foreground > div.grayscale {
  filter: none;
}
/* phones: the step rail sits at left-8 and runs through the copy
   (also in Dark, where it is near-invisible) — keep it a whisper */
@media (max-width: 767px) {
  html[data-theme="light"][data-page="solutions"] .max-w-4xl > .relative > .absolute.w-px {
    --tw-gradient-from: rgba(124, 58, 237, 0.12) var(--tw-gradient-from-position);
    --tw-gradient-via: rgba(124, 58, 237, 0.05) var(--tw-gradient-via-position);
  }
}

/* ---------------------------------------------------------------------------
   p-team-translations: page layer: team-translations
   --------------------------------------------------------------------------- */
/* ==========================================================================
   p-team-translations — Daylight treatment for team.html and translations.html
   Every selector is scoped to html[data-theme="light"][data-page="team"|"translations"].
   Treatment only: colour, background, border colour, shadow, filter, opacity.
   ========================================================================== */

/* ==========================================================================
   TEAM
   ========================================================================== */

/* ---------------------------------------------------------- ambient ground */
/* one continuous, softly lit surface: lilac / periwinkle washes that drift
   across the section edges instead of bands and hairlines */
html[data-theme="light"][data-page="team"] body {
  background:
    radial-gradient(900px 620px at 8% 1700px, rgba(167, 139, 250, 0.10), transparent 70%),
    radial-gradient(820px 560px at 96% 2500px, rgba(129, 140, 248, 0.08), transparent 70%),
    radial-gradient(900px 600px at 4% 3350px, rgba(167, 139, 250, 0.09), transparent 70%),
    radial-gradient(860px 560px at 94% 4150px, rgba(129, 140, 248, 0.08), transparent 70%),
    var(--t-pg);
  background-repeat: no-repeat;
}

/* section seams: no hard border-y / border-t hairlines, no band fills */
html[data-theme="light"][data-page="team"] body > section {
  border-color: transparent;
}
html[data-theme="light"][data-page="team"] body > section.bg-neutral-900\/20 {
  background: transparent;
}

/* ------------------------------------------------------------- hero card */
html[data-theme="light"][data-page="team"] .hero-section-container {
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
    radial-gradient(55% 45% at 0% 100%, rgba(129, 140, 248, 0.07), transparent 65%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.04), 0 40px 90px -50px rgba(76, 29, 149, 0.26);
}
html[data-theme="light"][data-page="team"] .hero-section-container:hover {
  border-color: var(--t-brand-line);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.05), 0 48px 90px -40px rgba(76, 29, 149, 0.32);
}
/* inner top wash: lilac, not a grey film */
html[data-theme="light"][data-page="team"] .hero-section-container > .absolute.inset-0 > .bg-gradient-to-b {
  background-image: linear-gradient(180deg, rgba(167, 139, 250, 0.07) 0%, rgba(167, 139, 250, 0) 45%);
}

/* sidebar facts */
html[data-theme="light"][data-page="team"] .hero-sidebar-item.text-neutral-400 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="team"] .hero-sidebar-item.text-neutral-400 iconify-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="team"] .hero-sidebar-item.text-neutral-400:hover { color: var(--t-brand-2); }
html[data-theme="light"][data-page="team"] .hero-sidebar-item.border-t { border-top-color: var(--t-brand-line); }
html[data-theme="light"][data-page="team"] .hero-sidebar-item .text-neutral-500 { color: var(--t-fg-3); }

/* info strip */
html[data-theme="light"][data-page="team"] .hero-info-card { border-top-color: var(--t-brand-line); }
html[data-theme="light"][data-page="team"] .hero-info-card:hover { background-color: rgba(124, 58, 237, 0.04); }
html[data-theme="light"][data-page="team"] .hero-info-card iconify-icon.text-neutral-600 { color: var(--t-brand); }
html[data-theme="light"][data-page="team"] .hero-info-card:hover iconify-icon.text-neutral-600 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="team"] .hero-info-card .text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="team"] .hero-info-card:hover .text-white { color: var(--t-brand-2); }

/* hero video: a real-image island (DESIGN-SITE rule 7). The picture keeps
   its own dark ink scrim from the bottom so the wave stays vivid; the copy
   and stat chips stay white on the picture, as in the photo-led original.
   The card around it remains the light card. */
html[data-theme="light"][data-page="team"] .hero-section-container .bg-neutral-900\/60.rounded-2xl {
  /* dark plate behind the video so white copy never lands on white while
     the video is loading */
  background-color: #15121f;
  background-clip: padding-box;
  border-color: rgba(124, 58, 237, 0.14);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.05), 0 30px 60px -36px rgba(46, 16, 101, 0.32);
}
html[data-theme="light"][data-page="team"] .hero-section-container .bg-gradient-to-t.from-black\/80 {
  background-image: linear-gradient(0deg,
    rgba(12, 10, 20, 0.74) 0%,
    rgba(12, 10, 20, 0.36) 40%,
    rgba(12, 10, 20, 0) 70%);
}
/* phone: the copy block covers most of the frame, so the scrim reaches
   higher but thins out toward the top so the wave still reads */
@media (max-width: 639px) {
  html[data-theme="light"][data-page="team"] .hero-section-container .bg-gradient-to-t.from-black\/80 {
    background-image: linear-gradient(0deg,
      rgba(12, 10, 20, 0.70) 0%,
      rgba(12, 10, 20, 0.46) 45%,
      rgba(12, 10, 20, 0.30) 75%,
      rgba(12, 10, 20, 0.14) 100%);
  }
}
/* corner brackets: white hairlines on the picture */
html[data-theme="light"][data-page="team"] .hero-section-container .border-white\/20.pointer-events-none {
  border-color: rgba(255, 255, 255, 0.32);
}
html[data-theme="light"][data-page="team"] .hero-headline {
  color: #ffffff;
  filter: drop-shadow(0 2px 10px rgba(12, 10, 20, 0.35));
}
html[data-theme="light"][data-page="team"] .hero-headline .bg-clip-text {
  background-image: linear-gradient(90deg, #c4b5fd 0%, #ede9fe 50%, #a5b4fc 100%);
}
html[data-theme="light"][data-page="team"] .hero-description {
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 6px rgba(12, 10, 20, 0.35));
}

/* stat chips: frosted glass on the picture, white numerals, a soft lift
   shadow (no mauve smear) */
html[data-theme="light"][data-page="team"] .hero-stat-card {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.12), 0 12px 28px -18px rgba(12, 10, 20, 0.45);
}
html[data-theme="light"][data-page="team"] .hero-stat-card:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(196, 181, 253, 0.55);
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.12), 0 16px 34px -18px rgba(76, 29, 149, 0.55);
}
html[data-theme="light"][data-page="team"] .hero-stat-card .text-2xl { color: #ffffff; filter: none; }
html[data-theme="light"][data-page="team"] .hero-stat-card p { color: rgba(255, 255, 255, 0.84); }

/* ------------------------------------------------------------ logo band */
/* a soft lilac breath instead of a ruled band; logos in faint violet ink,
   never grey */
html[data-theme="light"][data-page="team"] body > section.border-y {
  background: radial-gradient(48% 120% at 50% 50%, #f4f0fe 0%, rgba(246, 242, 254, 0.75) 45%, rgba(250, 248, 255, 0) 100%);
  border-color: transparent;
}
html[data-theme="light"][data-page="team"] .marquee-team {
  color: var(--t-brand-ink);
  opacity: 0.5;
  filter: none;
}
html[data-theme="light"][data-page="team"] .marquee-team:hover { opacity: 0.8; }

/* ------------------------------------------------------- section headings */
html[data-theme="light"][data-page="team"] body > section h2 + p.text-neutral-500,
html[data-theme="light"][data-page="team"] body > section .text-lg.text-neutral-500 { color: var(--t-fg-3); }

/* ------------------------------------------------------------ leader cards */
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 > .bg-neutral-900\/40 {
  background:
    radial-gradient(90% 40% at 100% 100%, rgba(167, 139, 250, 0.08), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 > .bg-neutral-900\/40:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
/* portrait sits on its own black studio ground: give the frame a hairline
   so it reads as a photo set into the card, not a hole */
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 > .bg-neutral-900\/40 > .aspect-\[4\/5\] {
  box-shadow: inset 0 -1px 0 rgba(124, 58, 237, 0.10);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 h3.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 p.text-purple-400 { color: var(--t-brand-2); }
/* chips: lilac tints, ink-violet text */
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 span.rounded-full.bg-white\/5 {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-fg-2);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 span.rounded-full.bg-white\/5.border {
  background-color: var(--t-brand-soft);
  border-color: rgba(124, 58, 237, 0.22);
  color: var(--t-brand-ink);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 .text-neutral-500.space-y-3 { color: var(--t-fg-3); }
/* LinkedIn: secondary button recipe */
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 a.rounded-xl.bg-white\/5 {
  background-color: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 a.rounded-xl.bg-white\/5:hover {
  background-color: var(--t-tint-bg);
  border-color: var(--t-brand-line);
  color: var(--t-brand-ink);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 12px 26px -12px rgba(124, 58, 237, 0.35);
}
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 a.rounded-xl.bg-white\/5 svg:first-of-type { color: #0a66c2; }
html[data-theme="light"][data-page="team"] .grid.md\:grid-cols-2 a.rounded-xl.bg-white\/5 .via-white\/10 {
  background-image: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.16), transparent);
}

/* ---------------------------------------------------------------- culture */
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2 {
  background:
    radial-gradient(110% 75% at 100% 0%, rgba(167, 139, 250, 0.26), transparent 58%),
    radial-gradient(90% 60% at 0% 100%, rgba(129, 140, 248, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border-color: var(--t-brand-line);
  color: var(--t-fg);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2:hover {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2 .w-14.h-14 {
  background-color: var(--t-brand-soft);
  border: 1px solid var(--t-brand-line);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2 iconify-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2 h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .col-span-2 p { color: var(--t-fg-2); }

html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .bg-neutral-900\/40,
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40 {
  background: var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-2);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .bg-neutral-900\/40:hover,
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .bg-neutral-900\/40 h3,
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40 h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 > .bg-neutral-900\/40 p.text-neutral-500,
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40 p.text-neutral-500 { color: var(--t-fg-3); }
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40 p.text-neutral-400 { color: var(--t-fg-2); }

/* culture icon tiles keep their capability hue (violet, blue, emerald, amber):
   ~9% fill, ~18% border, icon in the hue's 600 shade */
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-purple-500\/20 {
  background-color: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.18);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-purple-500\/20 iconify-icon { color: #7c3aed; }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .group:hover .w-12.h-12.group-hover\:bg-purple-500\/20 {
  background-color: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.28);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-blue-500\/20 {
  background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-blue-500\/20 iconify-icon { color: #2563eb; }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .group:hover .w-12.h-12.group-hover\:bg-blue-500\/20 {
  background-color: rgba(37, 99, 235, 0.14); border-color: rgba(37, 99, 235, 0.28);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-emerald-500\/20 {
  background-color: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.18);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-emerald-500\/20 iconify-icon { color: #059669; }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .group:hover .w-12.h-12.group-hover\:bg-emerald-500\/20 {
  background-color: rgba(5, 150, 105, 0.14); border-color: rgba(5, 150, 105, 0.28);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-amber-500\/20 {
  background-color: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.18);
}
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .w-12.h-12.group-hover\:bg-amber-500\/20 iconify-icon { color: #d97706; }
html[data-theme="light"][data-page="team"] .md\:grid-cols-4 .group:hover .w-12.h-12.group-hover\:bg-amber-500\/20 {
  background-color: rgba(217, 119, 6, 0.14); border-color: rgba(217, 119, 6, 0.28);
}

/* ------------------------------------------------------- global expertise */
html[data-theme="light"][data-page="team"] .avatar-stack > div {
  /* opaque soft-white discs: the -space-x-4 overlap is original geometry (it
     clips the same way in dark); a translucent fill was tried and stacked
     ghost labels on top of each other at 390, which read worse */
  background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14), 0 14px 30px -18px rgba(76, 29, 149, 0.22);
}
html[data-theme="light"][data-page="team"] .avatar-stack > div:hover {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.30), 0 18px 36px -16px rgba(76, 29, 149, 0.40);
}
html[data-theme="light"][data-page="team"] .avatar-stack span { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .float-badge {
  background-color: var(--t-tint-bg);
  border-color: rgba(124, 58, 237, 0.22);
  color: var(--t-brand-2);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.04), 0 14px 30px -16px rgba(124, 58, 237, 0.40);
}
html[data-theme="light"][data-page="team"] blockquote.text-neutral-500 { color: var(--t-fg-3); }

/* ------------------------------------------------------------ where we work */
html[data-theme="light"][data-page="team"] .md\:grid-cols-3 > .bg-neutral-900\/40 .w-12.h-px {
  background-color: var(--t-brand-line);
}

/* ------------------------------------------------------------ join mission */
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\].bg-neutral-900\/40 {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
    var(--t-card-bg);
  border-color: var(--t-card-border);
  box-shadow: var(--t-shadow-3);
}
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\].bg-neutral-900\/40:hover {
  border-color: var(--t-brand-line);
  box-shadow: var(--t-shadow-hover);
}
/* the right-edge darkening scrim is a dark-theme seam; on white the picture
   simply meets the card */
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] .bg-gradient-to-r.pointer-events-none {
  background-image: none;
}
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] p.text-neutral-400 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] li .bg-purple-500\/20 {
  background-color: var(--t-brand-soft);
  box-shadow: inset 0 0 0 1px var(--t-brand-line);
}
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] li iconify-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] li .text-neutral-300 { color: var(--t-fg-2); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] a.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] a.text-white:hover { color: var(--t-brand-2); }
html[data-theme="light"][data-page="team"] .rounded-\[2\.5rem\] a.text-white iconify-icon { color: var(--t-brand); }

/* ==========================================================================
   TRANSLATIONS
   ========================================================================== */

/* ambient ground: the hero's lilac light drifts down the list */
html[data-theme="light"][data-page="translations"] body {
  background:
    radial-gradient(1000px 640px at 50% 60px, rgba(167, 139, 250, 0.13), transparent 70%),
    radial-gradient(820px 600px at 4% 1300px, rgba(129, 140, 248, 0.08), transparent 70%),
    radial-gradient(860px 600px at 98% 2500px, rgba(167, 139, 250, 0.09), transparent 70%),
    radial-gradient(820px 600px at 2% 3700px, rgba(129, 140, 248, 0.08), transparent 70%),
    radial-gradient(860px 600px at 98% 4900px, rgba(167, 139, 250, 0.09), transparent 70%),
    radial-gradient(820px 600px at 2% 6100px, rgba(129, 140, 248, 0.08), transparent 70%),
    var(--t-pg);
  background-repeat: no-repeat;
}
html[data-theme="light"][data-page="translations"] body > header > .absolute.inset-0.-z-10 {
  background-image: radial-gradient(60% 70% at 50% 0%, rgba(167, 139, 250, 0.10), rgba(255, 255, 255, 0) 70%);
}
html[data-theme="light"][data-page="translations"] body > header p.text-neutral-400 { color: var(--t-fg-3); }

/* thumbnail frame: soft lifted photo with a dark plate behind the image so
   the hover opacity dip deepens instead of bleaching */
html[data-theme="light"][data-page="translations"] .yt-card > .aspect-video {
  background-color: #0c0a14;
  background-clip: padding-box;
  border-color: rgba(124, 58, 237, 0.12);
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.05), 0 30px 60px -32px rgba(46, 16, 101, 0.38);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
html[data-theme="light"][data-page="translations"] .yt-card:hover > .aspect-video {
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow: 0 2px 6px rgba(28, 20, 60, 0.06), 0 40px 70px -32px rgba(76, 29, 149, 0.45);
}
html[data-theme="light"][data-page="translations"] .yt-card > .aspect-video > img { opacity: 1; }
/* short dark scrim along the bottom edge only: picture stays vivid */
html[data-theme="light"][data-page="translations"] .yt-card .bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(12, 10, 20, 0.30) 0%, rgba(12, 10, 20, 0) 30%);
}
/* overlay chips: crisp near-white chip + soft lifted shadow */
html[data-theme="light"][data-page="translations"] .yt-card .bg-red-500\/20,
html[data-theme="light"][data-page="translations"] .yt-card .bg-black\/70 {
  box-shadow: 0 1px 2px rgba(12, 10, 20, 0.14), 0 6px 14px -6px rgba(12, 10, 20, 0.35);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
html[data-theme="light"][data-page="translations"] .yt-card .bg-red-500\/20 {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(220, 38, 38, 0.20);
  color: #b91c1c;
}
html[data-theme="light"][data-page="translations"] .yt-card .bg-red-500\/20 iconify-icon { color: #dc2626; }
html[data-theme="light"][data-page="translations"] .yt-card .bg-black\/70 {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--t-fg);
}
/* play: frosted white disc, ink glyph; lifts to solid white + violet */
html[data-theme="light"][data-page="translations"] .yt-card .w-16.h-16 {
  background-color: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.95);
  color: var(--t-fg);
  box-shadow: 0 2px 6px rgba(12, 10, 20, 0.14), 0 14px 30px -10px rgba(12, 10, 20, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
html[data-theme="light"][data-page="translations"] .yt-card:hover .w-16.h-16 {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--t-brand);
  box-shadow: 0 2px 6px rgba(12, 10, 20, 0.14), 0 18px 36px -12px rgba(76, 29, 149, 0.55);
}

/* text column */
html[data-theme="light"][data-page="translations"] .yt-card .font-mono.text-purple-400 { color: var(--t-brand-2); }
html[data-theme="light"][data-page="translations"] .yt-card h3 { color: var(--t-fg); }
html[data-theme="light"][data-page="translations"] .yt-card span.rounded-full.bg-purple-500\/10 {
  background-color: var(--t-brand-soft);
  border-color: rgba(124, 58, 237, 0.22);
  color: var(--t-brand-2);
}
html[data-theme="light"][data-page="translations"] .yt-card span.rounded-full.bg-white\/5 {
  background-color: #ffffff;
  border-color: var(--t-line);
  color: var(--t-fg-2);
  box-shadow: var(--t-shadow-1);
}
html[data-theme="light"][data-page="translations"] .yt-card span.rounded-full.bg-white\/5 iconify-icon { color: var(--t-brand); }
html[data-theme="light"][data-page="translations"] .yt-card span.text-sm.text-white { color: var(--t-fg); }
html[data-theme="light"][data-page="translations"] .yt-card:hover span.text-sm.text-white { color: var(--t-brand-2); }
html[data-theme="light"][data-page="translations"] .yt-card span.text-sm.text-white iconify-icon { color: var(--t-brand); }

/* ---------------------------------------------------------------------------
   zz-integration: page-wide integration
   --------------------------------------------------------------------------- */
/* zz-integration — page-wide (foundation) layer, appended last.
   Every page-wide fix from the whole-page critique was owned by a section
   and lives in that group file (seam half-washes, transparent grounds,
   phone wash keying), so this layer is intentionally empty. */

/* The app mock keeps its dark palette, but its smallest labels sat just under
   WCAG AA: neutral-500 at 4.35:1, and the status line (neutral-400 inside an
   opacity-60 row) at 3.4:1. Lift them a step in Daylight only; Dark keeps its
   original greys. */
html[data-theme="light"] .hero-mock .text-neutral-500 { color: #85838e; }
html[data-theme="light"] .hero-mock .hm-status .text-neutral-400 { color: #e4e2ea; }