/* ============================================
   Aurora — Global Stylesheet
   Premium SaaS / Webflow-grade
   ============================================ */

/* --- System Fonts (SF Pro stack + self-hosted Inter fallback) ---
   Inter v20 is a variable font; a single 47 KB woff2 covers every weight
   between 300 and 800. Self-hosting eliminates the third-party DNS hop
   to fonts.googleapis.com + fonts.gstatic.com (~80 ms LCP saving on
   first visit, and cached forever via the service worker after). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;                 /* variable axis */
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Scroll & Selection --- */
::selection { background: rgba(52,211,153,0.2); color: var(--text-primary); }

/* --- Initial Website Loader ---
   The early inline theme script applies .site-loading before body content
   paints, then shared JS releases it once late-loading assets are ready. */
html.site-loading,
html.site-loading body {
  min-height: 100%;
  background-color: #06090f;
  cursor: progress;
}

html.site-loading::before {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  will-change: opacity;
  transition:
    opacity 360ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 360ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

html.site-loading::before {
  content: "";
  inset: 0;
  background-image:
    var(--aurora-loader-logo, url('/assets/logo-loader.svg?v=20260524a')),
    radial-gradient(circle at 50% 42%, rgba(52, 211, 153, 0.18), transparent 28%),
    radial-gradient(circle at 62% 58%, rgba(56, 189, 248, 0.12), transparent 24%),
    linear-gradient(180deg, #06090f 0%, #08121a 58%, #05070d 100%);
  background-repeat: no-repeat;
  background-position: center, center, center, center;
  background-size: 118px 68px, auto, auto, auto;
}

html.site-loader-done::before {
  opacity: 0;
  visibility: hidden;
}

html.site-loader-done,
html.site-loader-done body {
  cursor: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.site-loading::before {
    transition-duration: 1ms;
  }
}

/* --- Custom cursor: desktop-only progressive enhancement --- */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor summary,
  html.has-custom-cursor label,
  html.has-custom-cursor [role="button"],
  html.has-custom-cursor [tabindex]:not([tabindex="-1"]) {
    cursor: none;
  }

  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor [contenteditable="true"] {
    cursor: text;
  }

  .aurora-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 72%, white 28%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%) scale(var(--cursor-scale, 1));
    transition:
      opacity 160ms var(--ease-standard),
      width 180ms var(--ease-standard),
      height 180ms var(--ease-standard),
      border-color 180ms var(--ease-standard),
      background-color 180ms var(--ease-standard);
    will-change: transform, opacity;
    mix-blend-mode: difference;
  }

  .aurora-cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    color: var(--accent-green);
    transform: translate(-50%, -50%);
    transition:
      width 180ms var(--ease-standard),
      height 180ms var(--ease-standard),
      background-color 180ms var(--ease-standard);
  }

  .aurora-cursor.is-visible { opacity: 0.92; }

  .aurora-cursor.is-hovering {
    width: 42px;
    height: 42px;
    border-color: color-mix(in srgb, var(--accent-cyan) 72%, white 28%);
    background: rgba(255,255,255,0.045);
    --cursor-scale: 1;
  }

  .aurora-cursor.is-hovering::after {
    width: 7px;
    height: 7px;
    background: var(--accent-cyan);
  }

  .aurora-cursor.is-pressed {
    --cursor-scale: 0.78;
  }

  .aurora-cursor.is-hidden {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .aurora-cursor { display: none; }
}

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--page-exit-x, 50%) var(--page-exit-y, 50%), rgba(52, 211, 153, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.72), rgba(6, 9, 15, 0.92));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 160ms var(--ease-standard),
    visibility 160ms var(--ease-standard);
}

.page-transition-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay { transition-duration: 1ms; }
}

:root {
  /* Backgrounds — Dark (deep navy/slate) */
  --bg-0: #06090f;
  --bg-1: #0a0f1a;
  --bg-2: #0e1726;
  --bg-3: #132234;
  --bg-4: #1a3048;
  --bg-5: #1e3b55;
  --bg-6: #265068;

  /* Accents */
  --accent-green: #34d399;
  --accent-green-hover: #5eead4;
  --accent-cyan: #38bdf8;
  --accent-warm: #f59e0b;

  /* Text — Dark mode */
  --text-primary: rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted: rgba(255,255,255,0.42);

  /* Borders */
  --border-soft: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  /* Fills */
  --fill-glass: rgba(255,255,255,0.04);
  --fill-glass-strong: rgba(255,255,255,0.07);

  /* Surfaces */
  --surface-dark: rgba(4, 18, 42, 0.55);
  --surface-deep: rgba(3, 8, 22, 0.7);
  --surface-card: rgba(255,255,255,0.03);
  --surface-elevated: rgba(10, 48, 70, 0.18);

  /* Typography — SF Pro fallback stack */
  --font-heading: -apple-system, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  --font-rounded: "SF Pro Rounded", -apple-system, "Inter", sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;

  --text-hero-desktop: 68px;
  --text-hero-tablet: 48px;
  --text-hero-mobile: 34px;

  --text-hero-body-desktop: 19px;
  --text-hero-body-tablet: 17px;
  --text-hero-body-mobile: 15px;

  --text-section-desktop: 40px;
  --text-section-tablet: 32px;
  --text-section-mobile: 26px;

  --text-subsection: 26px;
  --text-card-title: 18px;
  --text-body: 15px;
  --text-small: 13px;
  --text-label: 11px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-hero: 28px;
  --radius-panel: 24px;
  --radius-card: 20px;
  --radius-card-sm: 14px;
  --radius-button: 14px;
  --radius-button-sm: 10px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.2);
  --shadow-elevated: 0 24px 64px rgba(0,0,0,0.28);
  --shadow-panel: 0 32px 100px rgba(0,0,0,0.36);
  --glow-green: 0 0 0 1px rgba(52,211,153,0.14), 0 16px 40px rgba(52,211,153,0.12);
  --glow-cyan: 0 0 0 1px rgba(26,108,162,0.14), 0 20px 50px rgba(26,108,162,0.12);

  /* Glass */
  --glass-fill: rgba(255,255,255,0.04);
  --glass-fill-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-strong: rgba(255,255,255,0.14);
  --inner-highlight: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Buttons */
  --button-height: 48px;
  --button-height-sm: 38px;
  --focus-ring: 0 0 0 3px rgba(52,211,153,0.25);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 500ms;
  /* Reveal transition — tightened from 700ms to 500ms so content arrives
     sooner after the IntersectionObserver fires. Combined with the 250px
     pre-fire rootMargin in main.js, the fade-in now completes before the
     element fully enters the viewport on typical scroll speeds. */
  --dur-reveal: 500ms;

  /* --- Cross-stylesheet aliases ---
     Older/peripheral stylesheets (faq, support, docs, screenshots, 404)
     reference these longer-form names. Keep them as aliases so there's
     a single source of truth and no undefined-token fallbacks. */
  --duration-fast: var(--dur-fast);
  --duration-medium: var(--dur-med);
  --duration-slow: var(--dur-slow);
  --ease-standard: var(--ease);

  /* Extra accents / surfaces / text scales referenced elsewhere */
  --accent-purple: #a78bfa;
  --surface-glass: var(--glass-fill);
  --surface-muted: rgba(255,255,255,0.025);
  --text-body-lg: 17px;
  --text-tertiary: var(--text-muted);
}

/* --- Light Mode (cool porcelain — refined) --- */
[data-theme="light"] {
  --bg-0: #f7fafc;
  --bg-1: #eef6f8;
  --bg-2: #e8f0f4;
  --bg-3: #dde8ee;
  --bg-4: #d1dde7;
  --bg-5: #c4d1dd;
  --bg-6: #b6c4d2;

  --accent-green: #2bb685;
  --accent-green-hover: #23a076;

  --text-primary: rgba(13,20,28,0.92);
  /* Bumped from 0.62 → 0.72 to clear WCAG AA on the
     light background — paragraphs and FAQ answers
     were borderline before. */
  --text-secondary: rgba(22,32,44,0.72);
  /* Bumped from 0.40 → 0.56 — captions/hints now
     read clearly without dropping the visual hierarchy. */
  --text-muted: rgba(32,45,58,0.56);

  /* Slightly stronger borders so cards and dividers
     are visible against the pale surface. */
  --border-soft: rgba(18,33,48,0.10);
  --border-strong: rgba(18,33,48,0.18);

  --fill-glass: rgba(255,255,255,0.4);
  --fill-glass-strong: rgba(255,255,255,0.55);

  --surface-dark: rgba(250,253,255,0.74);
  --surface-deep: rgba(255,255,255,0.88);
  --surface-card: rgba(255,255,255,0.64);
  --surface-elevated: rgba(246,251,255,0.62);

  --glass-fill: rgba(255,255,255,0.5);
  --glass-fill-strong: rgba(255,255,255,0.65);
  --glass-border: rgba(18,33,48,0.07);
  --glass-border-strong: rgba(18,33,48,0.13);
  --inner-highlight: inset 0 1px 0 rgba(255,255,255,0.8);

  --shadow-sm: 0 2px 8px rgba(18,33,48,0.06);
  --shadow-soft: 0 12px 40px rgba(18,33,48,0.08);
  --shadow-elevated: 0 24px 64px rgba(18,33,48,0.1);
  --shadow-panel: 0 32px 100px rgba(18,33,48,0.12);
  --glow-green: 0 0 0 1px rgba(43,182,133,0.22), 0 16px 40px rgba(43,182,133,0.1);

  /* Light-mode overrides for the cross-stylesheet aliases */
  --surface-muted: rgba(18,33,48,0.035);
  --accent-purple: #8b5cf6;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Offset anchor jumps for the fixed nav so #target sections
     don't land underneath the blurred top bar. Nav is ~64px
     plus a comfy 16px breathing space. */
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Inter + SF Pro stylistic sets:
     - ss01: single-story 'a', closer to SF Pro
     - cv11: single-story 'g' (less bookish)
     - tnum: tabular numerals — stops digits jittering in prices/counters
     - kern: enable kerning pairs
     - ss03: round quotes + punctuation
     Combined, these give Inter the "crafted" feel of a licensed font. */
  font-feature-settings: "ss01", "cv11", "tnum", "kern", "ss03";
  -moz-font-feature-settings: "ss01", "cv11", "tnum", "kern", "ss03";
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background-color: var(--bg-0);
  line-height: 1.6;
  /* `overflow-x: clip` (NOT hidden) — both prevent
     horizontal scroll, but `hidden` implicitly turns
     overflow-y into a scroll container, which breaks
     `position: sticky` for descendants. `clip` clips
     without creating a scroll context. */
  overflow-x: clip;
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

/* ============================================================
   GLOBAL AMBIENT LAYER
   A single fixed-position layer containing all the aurora color.
   Because it's position: fixed (not attachment-fixed), it renders
   identically at every scroll position — there is no geometric way
   for a band to appear between sections. This fully replaces all
   per-section halos/gradients.
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
  transform: translateZ(0);
  /* Dense, evenly-covered aurora field — overlapping ellipses at every
     band (top/upper-mid/center/lower-mid/bottom) so no matter what
     scroll position the user is at, the viewport always has ambient
     luminance. Prevents the "black void" gap between sections. */
  background:
    /* Top band */
    radial-gradient(ellipse 95% 55% at 15%  8%,  rgba(56,189,248,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 85% 50% at 85% 12%,  rgba(52,211,153,0.18) 0%, transparent 70%),
    /* Upper-mid band */
    radial-gradient(ellipse 90% 50% at 25% 35%,  rgba(52,211,153,0.12) 0%, transparent 72%),
    radial-gradient(ellipse 80% 50% at 80% 40%,  rgba(56,189,248,0.13) 0%, transparent 72%),
    /* Center */
    radial-gradient(ellipse 95% 50% at 50% 55%,  rgba(52,211,153,0.10) 0%, transparent 75%),
    radial-gradient(ellipse 70% 45% at 20% 60%,  rgba(245,158,11,0.07) 0%, transparent 72%),
    /* Lower-mid band */
    radial-gradient(ellipse 85% 50% at 75% 70%,  rgba(56,189,248,0.11) 0%, transparent 72%),
    radial-gradient(ellipse 80% 50% at 25% 85%,  rgba(245,158,11,0.09) 0%, transparent 72%),
    /* Bottom band */
    radial-gradient(ellipse 90% 55% at 85% 92%,  rgba(52,211,153,0.12) 0%, transparent 72%);
  transition: background var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}

body.is-aurora-revealing::before {
  opacity: 0;
  transition: none;
}

body.is-aurora-revealing .scroll-progress {
  display: none;
}

[data-theme="light"] body::before {
  background:
    /* Top band */
    radial-gradient(ellipse 95% 55% at 15%  8%,  rgba(56,189,248,0.20) 0%, transparent 72%),
    radial-gradient(ellipse 85% 50% at 85% 12%,  rgba(52,211,153,0.18) 0%, transparent 72%),
    /* Upper-mid band */
    radial-gradient(ellipse 90% 50% at 25% 35%,  rgba(167,139,250,0.12) 0%, transparent 72%),
    radial-gradient(ellipse 80% 50% at 80% 40%,  rgba(43,182,133,0.16) 0%, transparent 72%),
    /* Center */
    radial-gradient(ellipse 95% 50% at 50% 55%,  rgba(255,255,255,0.42) 0%, transparent 75%),
    radial-gradient(ellipse 70% 45% at 20% 60%,  rgba(245,158,11,0.10) 0%, transparent 72%),
    /* Lower-mid band */
    radial-gradient(ellipse 85% 50% at 75% 70%,  rgba(56,189,248,0.15) 0%, transparent 72%),
    radial-gradient(ellipse 80% 50% at 25% 85%,  rgba(167,139,250,0.10) 0%, transparent 72%),
    /* Bottom band */
    radial-gradient(ellipse 90% 55% at 85% 92%,  rgba(43,182,133,0.16) 0%, transparent 72%);
}

/* All page content sits above the ambient layer */
.site-shell { position: relative; z-index: 1; }

a {
  color: var(--accent-green);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-green-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text-primary);
  /* Display-size headings want tighter tracking; the body-level -0.02em
     looks loose once you get above ~32px. Large sizes override this
     to -0.035em / -0.04em. */
  letter-spacing: 0;
  /* Disable tabular numerals in headings — proportional numbers look
     better in titles than the mono-wide tnum that the body uses. */
  font-feature-settings: "ss01", "cv11", "kern", "ss03";
  font-variant-numeric: proportional-nums;
}

h1 { letter-spacing: 0; }
h2 { letter-spacing: 0; }
h3 { letter-spacing: 0; }

p { max-width: 640px; }

/* --- Keyframes --- */
@keyframes aurora-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(25px,-15px) scale(1.03); }
  66% { transform: translate(-15px,20px) scale(0.98); }
}
@keyframes aurora-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 30px rgba(52,211,153,0.06), 0 0 60px rgba(26,108,162,0.04); }
  50% { box-shadow: 0 0 50px rgba(52,211,153,0.12), 0 0 100px rgba(26,108,162,0.08); }
}

/* --- Layout --- */
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }

.section { padding: var(--space-24) 0; position: relative; }
.section-tight { padding: var(--space-16) 0; position: relative; }
.section-hero { padding: calc(var(--space-24) + 88px) 0 var(--space-24); position: relative; overflow: hidden; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }
.site-frame { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Glass & Surface --- */
.glass-panel {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--inner-highlight), var(--shadow-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.surface-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* --- Eyebrow --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent-green);
  opacity: 0.4;
}

/* --- Pill --- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 500;
  background: var(--fill-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease),
    color var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease);
  white-space: nowrap;
}
.pill:hover { background: var(--fill-glass-strong); border-color: var(--border-strong); color: var(--text-primary); }
.pill--active { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.25); color: var(--accent-green); }
.pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--button-height);
  padding: 0 24px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease),
    color var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease),
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-med) var(--ease);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.button,
.button:hover,
.button:active,
.button:focus-visible {
  border-radius: var(--radius-button);
}
.button { overflow: hidden; }
.button > :not(.button-ripple) {
  position: relative;
  z-index: 1;
}
.button-ripple {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple-out 0.6s ease-out;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple-out {
  to { transform: scale(80); opacity: 0; }
}

.button-primary {
  background: var(--accent-green);
  color: #06090f;
  box-shadow: var(--glow-green), inset 0 1px 0 rgba(255,255,255,0.22);
}
.button-primary:hover {
  background: var(--accent-green-hover);
  color: #06090f;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(52,211,153,0.25), 0 20px 50px rgba(52,211,153,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
}
/* Pressed state — the button physically "sinks". Inner shadow darkens
   the top edge, sheen disappears, translate returns to 0. Feels tactile. */
.button-primary:active {
  transform: translateY(0);
  transition-duration: 80ms;
  box-shadow:
    0 0 0 1px rgba(52,211,153,0.22),
    0 4px 12px rgba(52,211,153,0.18),
    inset 0 2px 4px rgba(0,0,0,0.18);
}

.button-secondary {
  background: var(--fill-glass-strong);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.button-secondary:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.2);
}
.button-secondary:active {
  transform: translateY(0);
  transition-duration: 80ms;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
}

[data-theme="light"] .button-secondary {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .button-secondary:hover {
  background: rgba(0,0,0,0.07);
}

.button-tertiary {
  background: transparent;
  color: var(--accent-green);
  height: var(--button-height);
  padding: 0 24px;
}
.button-tertiary:hover { background: var(--fill-glass); }

.button-sm {
  height: var(--button-height-sm);
  padding: 0 18px;
  font-size: var(--text-label);
  border-radius: var(--radius-button-sm);
}

/* ============================================================
   APP STORE REMINDER MODAL
   Shared by every "App Store reminder" CTA. The page behind it
   gets blurred while the centered form stays crisp and focused.
   ============================================================ */
body.app-store-reminder-open {
  overflow: hidden;
}

body.app-store-reminder-open > :not(.app-store-reminder-modal):not(script):not(style) {
  filter: blur(8px);
  transition: filter var(--dur-med) var(--ease);
}

.app-store-reminder-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 32px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-med) var(--ease),
    visibility var(--dur-med) var(--ease);
}

.app-store-reminder-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-store-reminder-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(52,211,153,0.16), transparent 32%),
    rgba(5, 8, 13, 0.56);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.app-store-reminder-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: min(88vh, 680px);
  overflow: auto;
  padding: clamp(22px, 5vw, 32px);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045)),
    rgba(12, 16, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 34px 100px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.10);
  color: #f4f7fb;
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    opacity var(--dur-med) var(--ease);
}

.app-store-reminder-modal.is-open .app-store-reminder-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.app-store-reminder-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-button-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(244,247,251,0.82);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.app-store-reminder-modal__close:hover {
  background: rgba(255,255,255,0.11);
  color: #ffffff;
  transform: translateY(-1px);
}

.app-store-reminder-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.34);
}

.app-store-reminder-modal__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -10px 0 var(--space-5) -10px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(52,211,153,0.92), rgba(56,189,248,0.78));
  color: #061017;
  box-shadow: 0 18px 44px rgba(52,211,153,0.22);
}

.app-store-reminder-modal__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(125, 211, 252, 0.86);
}

.app-store-reminder-modal__title {
  margin: 0;
  max-width: 390px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: 0;
  color: #ffffff;
}

.app-store-reminder-modal__copy {
  margin: var(--space-4) 0 0;
  max-width: 390px;
  color: rgba(244,247,251,0.72);
  font-size: 15px;
  line-height: 1.6;
}

.app-store-reminder-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.app-store-reminder-form__field {
  display: grid;
  gap: var(--space-2);
}

.app-store-reminder-form__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(244,247,251,0.84);
}

.app-store-reminder-form__input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border-radius: var(--radius-input);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.app-store-reminder-form__input::placeholder {
  color: rgba(244,247,251,0.38);
}

.app-store-reminder-form__input:focus {
  outline: none;
  border-color: rgba(52,211,153,0.58);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
}

.app-store-reminder-form__field.is-valid .app-store-reminder-form__input {
  border-color: rgba(52,211,153,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(52,211,153,0.12);
}

.app-store-reminder-form__field.is-invalid .app-store-reminder-form__input {
  border-color: rgba(255, 99, 99, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 99, 99, 0.12);
}

.app-store-reminder-form__submit {
  width: 100%;
  margin-top: var(--space-1);
}

.app-store-reminder-form__submit:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.app-store-reminder-form__legal {
  margin: 0;
  color: rgba(244,247,251,0.54);
  font-size: 12.5px;
  line-height: 1.5;
}

.app-store-reminder-form__legal a {
  color: rgba(125, 211, 252, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, 0.28);
}

.app-store-reminder-form__status {
  min-height: 20px;
  color: rgba(244,247,251,0.72);
  font-size: 13px;
}

.app-store-reminder-form__status.is-error {
  color: #fca5a5;
}

.app-store-reminder-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.app-store-reminder-modal__success {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-card-sm);
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.18);
}

.app-store-reminder-modal__success-title {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.app-store-reminder-modal__success-copy {
  margin: 0;
  color: rgba(244,247,251,0.72);
  font-size: 13.5px;
  line-height: 1.55;
}

.app-store-reminder-modal[data-state="success"] .app-store-reminder-form {
  display: none;
}

.app-store-reminder-modal[data-state="success"] .app-store-reminder-modal__success {
  display: block;
}

[data-theme="light"] .app-store-reminder-modal__dialog {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,250,248,0.86)),
    rgba(255,255,255,0.92);
  border-color: rgba(15, 23, 42, 0.10);
  color: #111827;
  box-shadow:
    0 34px 100px rgba(15,23,42,0.24),
    inset 0 1px 0 rgba(255,255,255,0.84);
}

[data-theme="light"] .app-store-reminder-modal__title,
[data-theme="light"] .app-store-reminder-modal__success-title {
  color: #111827;
}

[data-theme="light"] .app-store-reminder-modal__copy,
[data-theme="light"] .app-store-reminder-form__legal,
[data-theme="light"] .app-store-reminder-form__status,
[data-theme="light"] .app-store-reminder-modal__success-copy {
  color: rgba(17,24,39,0.66);
}

[data-theme="light"] .app-store-reminder-form__label {
  color: rgba(17,24,39,0.74);
}

[data-theme="light"] .app-store-reminder-form__input {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.12);
  color: #111827;
}

[data-theme="light"] .app-store-reminder-form__input::placeholder {
  color: rgba(17,24,39,0.36);
}

[data-theme="light"] .app-store-reminder-modal__close {
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.10);
  color: rgba(17,24,39,0.70);
}

[data-theme="light"] .app-store-reminder-modal__success {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.22);
}

@media (max-width: 540px) {
  .app-store-reminder-modal {
    padding: 12px;
  }
  .app-store-reminder-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-card);
    padding: 22px;
  }
  .app-store-reminder-modal__title {
    font-size: 30px;
  }
}

/* --- Navigation --- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(6,9,15,0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  transition:
    background-color var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease);
}
.site-nav.is-scrolled { background: rgba(6,9,15,0.88); }

[data-theme="light"] .site-nav { background: rgba(247,250,252,0.62); }
[data-theme="light"] .site-nav.is-scrolled { background: rgba(247,250,252,0.9); }

body.is-aurora-revealing .site-nav,
body.is-aurora-revealing .site-nav.is-scrolled {
  z-index: 1200;
  background: var(--bg-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

body.is-aurora-revealing .site-nav__mobile-overlay {
  z-index: 1199;
}

body.is-aurora-revealing .site-nav__mobile-sheet {
  z-index: 1201;
}

body.is-aurora-revealing .site-nav *,
body.is-aurora-revealing .site-nav *::before,
body.is-aurora-revealing .site-nav *::after {
  animation: none !important;
}

.site-nav__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6);
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}

.site-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text-primary);
  transition: opacity var(--dur-fast) var(--ease);
}
.site-nav__brand:hover { color: var(--text-primary); opacity: 0.8; }
.site-nav__logo {
  width: 42px;
  height: 24px;
  border-radius: 0;
  object-fit: contain;
  transition: filter var(--dur-med) var(--ease);
}
[data-theme="light"] .site-nav__logo,
[data-theme="light"] .site-nav__mobile-logo,
[data-theme="light"] .site-footer__logo {
  filter: brightness(0) saturate(100%) invert(10%);
}
.site-nav__wordmark {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.site-nav__right { display: flex; align-items: center; gap: 4px; }

.site-nav__links { display: flex; align-items: center; gap: 1px; }

.site-nav__link {
  padding: 6px 14px;
  border-radius: var(--radius-button-sm);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.site-nav__link:hover { color: var(--text-primary); background: var(--fill-glass); }
.site-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__link:active { transform: translateY(1px); transition-duration: 80ms; }
.site-nav__link--active { color: var(--text-primary); background: var(--fill-glass-strong); }

[data-theme="light"] .site-nav__link--active {
  color: #065f46;
  background: rgba(16,185,129,0.16);
  box-shadow:
    inset 0 0 0 1px rgba(5,150,105,0.24),
    0 6px 18px rgba(15,118,110,0.08);
}

[data-theme="light"] .site-nav__link--active:hover {
  color: #064e3b;
  background: rgba(16,185,129,0.22);
}

.site-nav__actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; }

.site-nav__link--cta {
  background: var(--accent-green);
  color: #06090f;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--radius-button);
  margin-left: 0;
}
.site-nav__link--cta:hover { background: var(--accent-green-hover); color: #06090f; }

/* AI nav link variant — subtle highlight without sacrificing contrast */
.site-nav__link--new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f8fbff;
  -webkit-text-fill-color: currentColor;
  font-weight: 600;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.site-nav__link--new:hover {
  color: #ffffff;
  -webkit-text-fill-color: currentColor;
  background:
    linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) padding-box,
    linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF) border-box;
}
.site-nav__link--new:hover,
.site-nav__link--new:focus-visible,
.site-nav__link--new.site-nav__link--active,
.site-nav__link--new.site-nav__link--active:hover {
  color: #ffffff;
  -webkit-text-fill-color: currentColor;
}

[data-theme="light"] .site-nav__link--new {
  color: #122130;
  background:
    linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)) padding-box,
    linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF) border-box;
}

[data-theme="light"] .site-nav__link--new:hover,
[data-theme="light"] .site-nav__link--new:focus-visible,
[data-theme="light"] .site-nav__link--new.site-nav__link--active {
  color: #0b1220;
  background:
    linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)) padding-box,
    linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF) border-box;
}
.site-nav__new-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5EA8, #5A9CFF);
  box-shadow: 0 0 6px rgba(255,140,200,0.7);
  animation: nav-new-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
  -webkit-text-fill-color: initial;
}
@keyframes nav-new-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__link--new, .site-nav__new-dot { animation: none; }
}

/* Mobile variant — show "Writing help · New" tag */
.site-nav__mobile-link--new {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.site-nav__new-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #FF5EA8, #5A9CFF);
  color: #FFFFFF;
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Theme toggle.
   38px keeps the visual weight light in the nav; a matching min-width/height
   pushes the hit area closer to the 44px WCAG target on touch tablets without
   the icon looking bulky on desktop. */
.theme-toggle {
  width: 38px; height: 38px;
  min-width: 38px; min-height: 38px;
  border-radius: 50%;
  background: var(--fill-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-med) var(--ease);
}
.theme-toggle:hover { color: var(--text-primary); background: var(--fill-glass-strong); }
.theme-toggle:active { transform: translateY(1px) scale(0.98); transition-duration: 80ms; }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.site-nav__toggle {
  display: none; background: none; border: none;
  width: 40px; height: 40px; cursor: pointer; padding: 8px;
  border-radius: var(--radius-button-sm); color: var(--text-primary);
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease);
}
.site-nav__toggle:hover { background: var(--fill-glass); }
.site-nav__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* Mobile nav */
.site-nav__mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.site-nav__mobile-overlay.is-active { opacity: 1; pointer-events: auto; }

.site-nav__mobile-sheet {
  display: none; position: fixed; top: 0; right: 0; bottom: 0;
  /* Full-width take-over on mobile so the brand bar mirrors the main
     nav. On wider (tablet) widths it's still a side sheet, capped so
     it doesn't stretch across an iPad. */
  width: 100vw;
  max-width: 420px;
  z-index: 1001;
  background: var(--bg-1); border-left: 1px solid var(--border-soft);
  padding: 0 var(--space-5) var(--space-6);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
  overflow-y: auto;
}
.site-nav__mobile-sheet.is-active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear 0s;
}

@media (max-width: 560px) {
  /* Phones: the sheet becomes a proper full-viewport take-over so the
     brand bar can sit flush-left with the same rhythm as the top nav. */
  .site-nav__mobile-sheet { max-width: 100vw; border-left: none; }
}

[data-theme="light"] .site-nav__mobile-sheet { background: var(--bg-0); }

/* Top bar inside the sheet — brand on the left (mirrors main nav),
   close button on the right. Sticky so it stays reachable as the user
   scrolls a long menu. */
.site-nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}

.site-nav__mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
}
.site-nav__mobile-brand:hover { color: var(--accent-green); }
.site-nav__mobile-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-button-sm); }
.site-nav__mobile-logo {
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 0;
  object-fit: contain;
  transition: filter var(--dur-med) var(--ease);
}
.site-nav__mobile-wordmark { line-height: 1; }

.site-nav__mobile-close {
  background: none; border: none; width: 40px; height: 40px;
  cursor: pointer; color: var(--text-secondary);
  touch-action: manipulation;
  border-radius: var(--radius-button-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.site-nav__mobile-close:hover { background: var(--fill-glass); }
.site-nav__mobile-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__mobile-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

.site-nav__mobile-links { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }

.site-nav__mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-button-sm);
  font-size: var(--text-body); font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  touch-action: manipulation;
  transition: all var(--dur-fast) var(--ease);
}
.site-nav__mobile-link:hover, .site-nav__mobile-link--active { color: var(--text-primary); background: var(--fill-glass); }
.site-nav__mobile-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__mobile-link:active { transform: translateY(1px); transition-duration: 80ms; }
.site-nav__mobile-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--fill-glass) 76%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.site-nav__mobile-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-nav__mobile-link:hover .site-nav__mobile-icon,
.site-nav__mobile-link--active .site-nav__mobile-icon {
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 24%, transparent);
}
.site-nav__mobile-link--new .site-nav__mobile-icon {
  color: #a78bfa;
  background: rgba(167,139,250,0.12);
  box-shadow: inset 0 0 0 1px rgba(167,139,250,0.24);
}
[data-theme="light"] .site-nav__mobile-link--active {
  color: #065f46;
  background: rgba(16,185,129,0.16);
  box-shadow: inset 0 0 0 1px rgba(5,150,105,0.22);
}
.site-nav__mobile-link--cta {
  background: var(--accent-green); color: #06090f;
  font-weight: 600;
  justify-content: center;
  margin-top: var(--space-4); border-radius: var(--radius-button);
}
.site-nav__mobile-link--cta:hover { background: var(--accent-green-hover); color: #06090f; }
.site-nav__mobile-link--cta .site-nav__mobile-icon {
  color: #06090f;
  background: rgba(6,9,15,0.08);
  box-shadow: inset 0 0 0 1px rgba(6,9,15,0.12);
}

/* Appearance toggle, parked at the bottom of the mobile sheet */
.site-nav__mobile-foot {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.site-nav__mobile-theme {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: var(--fill-glass);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-button-sm);
  color: var(--text-primary);
  font-size: var(--text-body); font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--dur-fast) var(--ease);
}
.site-nav__mobile-theme:hover { background: var(--fill-glass-strong); border-color: var(--border-strong); }
.site-nav__mobile-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__mobile-theme-label { color: var(--text-secondary); font-weight: 500; }
.site-nav__mobile-theme-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: var(--text-primary);
}
.site-nav__mobile-theme-swatch svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
/* Mirror the header toggle: the icon shows the MODE you'd switch to.
   Dark theme → sun (tap for light). Light theme → moon (tap for dark). */
.site-nav__mobile-theme-swatch .icon-moon { display: none; }
.site-nav__mobile-theme-swatch .icon-sun { display: inline; }
[data-theme="light"] .site-nav__mobile-theme-swatch .icon-sun { display: none; }
[data-theme="light"] .site-nav__mobile-theme-swatch .icon-moon { display: inline; }

/* --- Back to Top ---
   Explicit z-index so the bottom-fixed stack is deterministic:
     scroll-progress(1001) > nav(1000) > cookie-banner(990)
     > sw-update-toast(980) > back-to-top(970).
   When body[data-cookie-open] is set, BTT lifts above the banner so
   it stays reachable during the first-visit consent flow. */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 970;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-dark);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  will-change: opacity, transform;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { color: var(--text-primary); background: var(--fill-glass-strong); border-color: var(--border-strong); }
.back-to-top:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.back-to-top svg { width: 18px; height: 18px; }

[data-theme="light"] .back-to-top { background: rgba(255,248,235,0.85); border-color: rgba(60,40,10,0.08); }

/* --- Footer --- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border-soft);
  /* Transparent — ambient layer shows through so footer blends with page */
  background: transparent;
  padding: var(--space-20) 0 var(--space-8);
  overflow: hidden;
}

.site-footer__glow {
  position: absolute;
  top: -100px; left: 0;
  width: 100%; height: 300px;
  background: radial-gradient(ellipse, rgba(52,211,153,0.04) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); position: relative; z-index: 1; }

.site-footer__top {
  display: flex; justify-content: space-between;
  gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-12);
}
.site-footer__brand { max-width: 300px; min-width: 0; }
.site-footer__brand-name {
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: 10px;
}
.site-footer__logo {
  width: 36px;
  height: 21px;
  border-radius: 0;
  object-fit: contain;
  transition: filter var(--dur-med) var(--ease);
}
.site-footer__brand-desc { font-size: var(--text-small); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--space-5); }

/* Newsletter mini-form in the footer brand block.
   Single email input + arrow button. Privacy-first
   copy explicitly underneath. */
.site-footer__newsletter {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 360px;
}
.site-footer__newsletter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.site-footer__newsletter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fill-glass-strong) 86%, transparent), color-mix(in srgb, var(--fill-glass) 72%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 34px rgba(0,0,0,0.10);
  transition:
    border-color 0.18s var(--ease-standard),
    box-shadow 0.18s var(--ease-standard),
    background-color 0.18s var(--ease-standard);
}
.site-footer__newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  outline: none;
}
.site-footer__newsletter input[type="email"]::placeholder {
  color: var(--text-muted);
}
.site-footer__newsletter-row:focus-within {
  border-color: color-mix(in srgb, var(--accent-green) 42%, var(--border-soft));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-green) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 16px 42px rgba(0,0,0,0.14);
}
.site-footer__newsletter button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font: inherit;
  background: var(--accent-green);
  color: #0a0e14;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 26px rgba(43,182,133,0.18),
    inset 0 1px 0 rgba(255,255,255,0.26);
  transition:
    background-color 0.18s var(--ease-standard),
    box-shadow 0.18s var(--ease-standard),
    transform 0.15s var(--ease-standard);
}
.site-footer__newsletter button:hover {
  background: var(--accent-green-hover, #2bb685);
  transform: translateX(1px);
  box-shadow:
    0 14px 34px rgba(43,182,133,0.24),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.site-footer__newsletter button:active {
  transform: translateX(0) scale(0.98);
  transition-duration: 80ms;
}
.site-footer__newsletter button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35);
}
.site-footer__newsletter-note {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  letter-spacing: 0.01em;
  transition: color 0.25s var(--ease);
}
/* Brief acknowledgement shown after the form is submitted —
   restores after a few seconds (see js/components.js). */
.site-footer__newsletter-note.is-success {
  color: var(--accent-green);
}
.site-footer__newsletter input[type="email"]:read-only {
  opacity: 0.7;
  cursor: default;
}
.site-footer__newsletter button:disabled {
  opacity: 0.6;
  cursor: default;
}

[data-theme="light"] .site-footer__newsletter-row {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
  border-color: rgba(18,33,48,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 12px 32px rgba(18,33,48,0.08);
}

[data-theme="light"] .site-footer__newsletter-row:focus-within {
  border-color: rgba(5,150,105,0.34);
  box-shadow:
    0 0 0 3px rgba(16,185,129,0.16),
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 16px 38px rgba(18,33,48,0.10);
}

.site-footer__social { display: flex; gap: var(--space-3); }
.site-footer__social-link {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fill-glass); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all var(--dur-med) var(--ease);
}
.site-footer__social-link:hover {
  color: var(--accent-green); background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.2); transform: translateY(-2px);
}
.site-footer__social-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-footer__social-link:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }

.site-footer__columns { display: flex; gap: var(--space-16); flex-wrap: wrap; min-width: 0; }
.site-footer__column { min-width: 0; }
.site-footer__column-title {
  font-family: var(--font-body); font-size: var(--text-label);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: var(--space-4);
}
.site-footer__column ul { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__column a {
  font-size: var(--text-small); color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}
.site-footer__column a:hover { color: var(--accent-green); }
.site-footer__column a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-8); border-top: 1px solid var(--border-soft);
  font-size: var(--text-small); color: var(--text-secondary);
  flex-wrap: wrap; gap: var(--space-4);
}

/* --- Section Titles --- */
.section-title {
  font-size: var(--text-section-desktop);
  font-weight: 700;
  margin-bottom: var(--space-4);
  letter-spacing: 0;
  line-height: 1.1;
  text-wrap: balance;
}

.section-subtitle {
  font-size: var(--text-hero-body-desktop);
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Reveal on Scroll --- */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:target,
.reveal-scale:target,
.reveal-stagger:target {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:400ms; }

.reveal-scale {
  opacity: 0; transform: scale(0.94);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  /* Honor the OS-level "reduce motion" setting: skip the smooth-scroll
     glide on hash navigation and back-to-top. CSS smooth scrolling
     is the one thing that ignores prefers-reduced-motion by default. */
  html { scroll-behavior: auto; }
}

/* --- Trust Notes --- */
.trust-notes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.trust-note { display: flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--text-muted); }
.trust-note::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent-green); opacity:0.5; }

/* --- Legal --- */
.legal-layout { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }
.legal-layout h1 { font-size: var(--text-section-desktop); margin-bottom: var(--space-8); }
.legal-layout h2 { font-size: var(--text-subsection); margin-top: var(--space-12); margin-bottom: var(--space-4); }
.legal-layout h3 { font-size: var(--text-card-title); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.legal-layout p { color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.7; max-width: 100%; }
.legal-layout ul { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.legal-layout ul li { color: var(--text-secondary); margin-bottom: var(--space-2); line-height: 1.6; list-style: disc; }

.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-soft); }
.legal-nav a { font-size: var(--text-small); color: var(--text-muted); padding: 6px 10px; border-radius: var(--radius-button-sm); transition: all var(--dur-fast); }
.legal-nav a:hover { color: var(--text-primary); background: var(--fill-glass); }

/* --- Comparison Table --- */
.comparison-table-wrap { overflow-x: auto; margin: var(--space-8) 0; border-radius: var(--radius-card); border: 1px solid var(--border-soft); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.comparison-table thead th { background: var(--bg-2); padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
[data-theme="light"] .comparison-table thead th { background: rgba(0,0,0,0.03); }
.comparison-table thead th:first-child { min-width: 180px; }
.comparison-table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table .check { color: var(--accent-green); font-weight: 600; }
.comparison-table .cross { color: var(--text-muted); opacity: 0.4; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .section-title { font-size: var(--text-section-tablet); }
  .section-subtitle { font-size: var(--text-hero-body-tablet); }
}

@media (max-width: 768px) {
  .site-nav__links { display: none; }
  .site-nav__toggle { display: flex; align-items: center; justify-content: center; }
  .site-nav__mobile-overlay, .site-nav__mobile-sheet { display: block; }
  /* On mobile, hide the header theme toggle — it lives inside the menu sheet instead. */
  .site-nav__actions .theme-toggle { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-16) 0; }
  .section-hero { padding: calc(var(--space-16) + 80px) 0 var(--space-16); }
  .section-title { font-size: var(--text-section-mobile); }
  .section-subtitle { font-size: var(--text-hero-body-mobile); }

  .site-footer__top { flex-direction: column; gap: var(--space-8); min-width: 0; }
  .site-footer__inner,
  .site-footer__brand,
  .site-footer__newsletter,
  .site-footer__newsletter-row,
  .site-footer__bottom {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Mobile: 2-column grid for the link sections instead of stacking
     into a tall single column — cuts footer height roughly in half. */
  .site-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .site-footer__column { min-width: 0; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container, .container-wide, .container-narrow, .site-frame { padding: 0 var(--space-4); }
}

@media (max-width: 560px) {
  .site-nav__link--cta { display: none; }
}

/* =============================================
   MOBILE — keep pages full width, never floating
   Content fills the viewport (with safe inner
   padding) and nothing reads as a centered
   narrow column adrift in empty space.
   ============================================= */
@media (max-width: 768px) {
  /* Remove any accidental horizontal scroll. Use `clip`
     instead of `hidden` so `position: sticky` keeps
     working for the aurora-reveal beat on mobile too. */
  html, body { overflow-x: clip; }
  body { width: 100%; max-width: 100vw; }

  /* Containers span edge-to-edge (minus 16px gutter) */
  .container,
  .container-wide,
  .container-narrow,
  .site-frame {
    width: 100%;
    max-width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Any legacy max-width:560/600/700/760/820px wrappers get
     relaxed to 100% on mobile so they don't float in the middle */
  .section-subtitle,
  .hero__body,
  .hero__lede,
  .section-lede,
  .legal-layout,
  .auth-layout {
    max-width: 100%;
  }

  /* Glass / card surfaces: stretch full width with a tiny margin
     so they still feel like distinct panels but aren't floating */
  .glass-panel,
  .feature-card,
  .pricing-card,
  .testimonial-card,
  .faq-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* Images that previously had constrained widths fill the column */
  .hero__media,
  .screenshot-card,
  .screenshot-card img {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Tighten gutter further on small phones so things don't feel caged */
  .container,
  .container-wide,
  .container-narrow {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =============================================
   MOBILE POLISH — tap targets, nav, spacing
   iOS Human Interface Guidelines call for 44pt
   minimum hit area. Aurora's default button is
   48px, but small icon buttons and pills need
   an explicit bump on touch devices.
   ============================================= */
@media (max-width: 768px) {
  /* Nav gets tighter horizontal padding on phones */
  .site-nav__inner { padding: 0 var(--space-4); height: 60px; }
  .site-nav__logo { width: 38px; height: 22px; }
  .site-nav__wordmark { font-size: 17px; }

  /* Ensure every interactive control is ≥44px tall */
  .site-nav__toggle,
  .site-nav__mobile-close,
  .theme-toggle,
  .back-to-top,
  .sticky-cta__close,
  .whats-new-toast__close,
  .cookie-banner__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Pills & small buttons get a forgiving tap zone */
  .pill { min-height: 40px; padding: 8px 14px; }
  .button { min-height: 48px; }
  .button-tertiary { min-height: 44px; }

  /* Section rhythm — slightly tighter on phones so
     the page feels dense without being cramped */
  .section { padding: var(--space-12) 0; }
  .section-hero { padding: calc(var(--space-12) + 72px) 0 var(--space-12); }

  /* Cards with a lot of inner padding feel oversized on phones */
  .feature-card,
  .testimonial,
  .ai-feature,
  .plan-card {
    padding: var(--space-5);
  }

  /* CTA buttons feel better going full-width inside hero stacks */
  .hero__cta .button,
  .page-header .button {
    width: 100%;
    justify-content: center;
  }
  .hero__cta,
  .page-header .button-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
}

/* Touch-capable tablets/iPads (>768px but no hover precision) still get
   the 44px hit targets — width-only media queries miss these. */
@media (pointer: coarse) and (min-width: 769px) {
  .theme-toggle,
  .back-to-top,
  .site-nav__toggle,
  .site-nav__mobile-close,
  .cookie-banner__btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  /* Dial section padding back a touch more on small phones */
  .section { padding: var(--space-10) 0; }
  .section-hero { padding: calc(var(--space-10) + 64px) 0 var(--space-10); }

  /* Keep hero title readable without overflow */
  .section-title,
  .page-header__title { word-wrap: break-word; hyphens: auto; }
}

/* =============================================
   REDUCED TRANSPARENCY — swap glass for opaque
   Some users disable blur/transparency at the OS
   level (macOS: Reduce Transparency). Honor that
   by stripping backdrop-filters and raising fill
   opacity on the surfaces that rely on them.
   ============================================= */
@media (prefers-reduced-transparency: reduce) {
  .site-nav,
  .site-nav.is-scrolled,
  .glass-panel,
  .feature-card,
  .testimonial,
  .plan-card,
  .ai-demo,
  .ai-feature,
  .ai-promises,
  .ai-demo__io,
  .sticky-cta,
  .whats-new-toast,
  .site-nav__mobile-sheet,
  .compare-table-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .site-nav { background: var(--bg-0) !important; }
  [data-theme="light"] .site-nav { background: var(--bg-0) !important; }
  .ai-demo { background: rgba(10,14,22,0.98) !important; }
  [data-theme="light"] .ai-demo { background: rgba(255,255,255,0.98) !important; }
  .site-nav__mobile-sheet { background: var(--bg-0) !important; }
}

/* =============================================
   DUAL CTA — shared Download-for-Mac + App-Store pair
   Used in hero, features CTA, final CTA, and the
   download-page hero. Row-of-two on desktop,
   stacked full-width on phones.
   ============================================= */
.dual-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.dual-cta--center { justify-content: center; }
.dual-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Apple logo / download icon inherits button text color */
.dual-cta .button svg { flex-shrink: 0; }

@media (max-width: 560px) {
  .dual-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
  }
  .dual-cta .button {
    width: 100%;
    justify-content: center;
  }
}

/* Consistent focus treatment for bespoke interactive surfaces. */
.menu-preview__mini-button:focus-visible,
.menu-preview__wide-button:focus-visible,
.ai-demo__tab:focus-visible,
.ai-demo__trigger:focus-visible,
.pillars-dots__dot:focus-visible,
.plans-dots__dot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Utility --- */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* --- Parallax Layer (driven by JS) --- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Section Divider --- */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft) 20%, var(--border-soft) 80%, transparent);
  margin: 0;
}

/* --- Section Fade Edges (smooth transitions between sections) ---
   Long, soft gradient tails so sections blend into each other instead
   of ending with a visible hard line. */
.section-fade-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(180deg,
    var(--bg-0) 0%,
    rgba(6,9,15,0.7) 30%,
    rgba(6,9,15,0.3) 65%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(0deg,
    var(--bg-0) 0%,
    rgba(6,9,15,0.7) 30%,
    rgba(6,9,15,0.3) 65%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .section-fade-top::before {
  background: linear-gradient(180deg,
    var(--bg-0) 0%,
    rgba(247,250,252,0.72) 30%,
    rgba(247,250,252,0.32) 65%,
    transparent 100%);
}
[data-theme="light"] .section-fade-bottom::after {
  background: linear-gradient(0deg,
    var(--bg-0) 0%,
    rgba(247,250,252,0.72) 30%,
    rgba(247,250,252,0.32) 65%,
    transparent 100%);
}

/* Sections sit above the fade edges */
.section, .section-tight, .section-hero { z-index: 1; }

/* Wide overlap glow — meant to sit between two sections and
   visually bridge them with a soft color wash. */
.section-bridge {
  position: relative;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.section-bridge::before {
  content: '';
  position: absolute;
  left: 50%; top: -200px;
  width: 120%; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 100% at 50% 50%,
    rgba(52,211,153,0.05) 0%,
    rgba(56,189,248,0.03) 40%,
    transparent 75%);
  filter: blur(50px);
}

/* --- Page Header (shared subpage hero) --- */
.page-header {
  padding: calc(var(--space-24) + 88px) 0 var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.page-header__bg {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden;
  overflow: clip;
}
.page-header__glow {
  position: absolute;
  width: calc(100% - 80px); height: 400px;
  top: 30%; left: 40px; transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(26,108,162,0.08) 0%, transparent 70%);
  filter: blur(80px);
  animation: aurora-drift 22s ease-in-out infinite;
}
.page-header__title {
  font-size: var(--text-hero-desktop);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  margin-bottom: var(--space-5);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.page-header__desc {
  font-size: var(--text-hero-body-desktop);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .page-header__title { font-size: var(--text-hero-tablet); }
  .page-header__desc { font-size: var(--text-hero-body-tablet); }
}
@media (max-width: 768px) {
  .page-header { padding: calc(var(--space-16) + 80px) 0 var(--space-8); }
  .page-header__title { font-size: var(--text-hero-mobile); }
  .page-header__desc { font-size: var(--text-hero-body-mobile); }
}

/* --- Soft Section Background ---
   Semi-transparent glass panel that lets the ambient layer show through. */
.section--surface {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .section--surface {
  background: rgba(255,255,255,0.18);
}

/* --- Step Flow (horizontal numbered steps) --- */
.step-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  counter-reset: step;
}
.step-flow__item {
  text-align: center;
  position: relative;
}
.step-flow__number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-3);
  font-family: var(--font-rounded), var(--font-heading);
  font-weight: 700; font-size: var(--text-body);
  color: var(--accent-green);
}
.step-flow__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.step-flow__desc {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Shared Nav Block (reusable across pages) --- */
.nav-standard .site-nav__links a[href="screenshots.html"] { display: none; }

/* ============================================================
   SCROLL-STABLE SECTIONS
   These sections used to opt into content-visibility:auto. That saved
   paint work, but the estimated heights shifted as skipped sections
   materialised, which made sticky scroll effects and hash navigation
   jump. Keep the class as a no-op compatibility hook so markup across
   pages does not need to change.
   ============================================================ */
.cv-auto {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.cv-auto.is-visible {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* ============================================================
   TRUST STRIP — subtle press/social proof below hero
   ============================================================ */
.trust-strip {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  animation: fade-up 0.8s var(--ease-out) 0.7s forwards;
}
.trust-strip__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.7;
}
.trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity var(--dur-med) var(--ease), filter var(--dur-med) var(--ease);
}
.trust-strip:hover .trust-strip__logos {
  opacity: 1;
  filter: grayscale(0);
}
.trust-strip__logo {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
/* Each product fact picks up a different Aurora accent on hover. */
.trust-strip__logo:hover {
  transform: translateY(-1px);
}
.trust-strip__logo:nth-child(1):hover { color: #7DD3FC; }
.trust-strip__logo:nth-child(3):hover { color: #34D399; }
.trust-strip__logo:nth-child(5):hover { color: #A78BFA; }
.trust-strip__logo:nth-child(7):hover { color: #FACC15; }
.trust-strip__sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 10px;
}

/* ============================================================
   STICKY MINI PRICING CTA
   Appears after user scrolls past pricing without clicking.
   ============================================================ */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  z-index: 950;
  background: var(--surface-deep);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-panel);
  padding: 6px 8px 6px 20px;
  opacity: 0;
  pointer-events: none;
  transition: transform 600ms var(--ease-spring), opacity 400ms var(--ease-out);
  max-width: calc(100vw - 32px);
}
.sticky-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sticky-cta__label {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.sticky-cta__suffix {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
}
.sticky-cta__close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fill-glass);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.sticky-cta__close:hover { background: var(--fill-glass-strong); color: var(--text-primary); }
.sticky-cta__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 768px) {
  .sticky-cta {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 48px);
    padding: 5px 6px 5px 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.26);
  }
  .sticky-cta__inner { gap: 8px; }
  .sticky-cta__label {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta .button {
    min-height: 42px;
    padding: 0 15px;
    font-size: 12px;
  }
  .sticky-cta__close {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .sticky-cta {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 48px);
    padding: 5px 6px 5px 14px;
    font-size: var(--text-label);
    box-shadow: 0 18px 48px rgba(0,0,0,0.26);
  }
  .sticky-cta__inner { gap: 7px; }
  .sticky-cta__label {
    max-width: 13ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta__suffix { display: none; }
  .sticky-cta .button {
    min-height: 42px;
    padding: 0 14px;
    font-size: 12px;
  }
  .sticky-cta__close {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 640px) {
  body.has-sticky-cta .back-to-top {
    bottom: 88px;
  }
}

/* When the what's-new toast is visible on phones, push the sticky CTA
   up above it — both pin to the bottom-center on mobile and otherwise
   stack on top of each other. Toast height ~64-72px including padding. */
@media (max-width: 640px) {
  body.has-whats-new-toast .sticky-cta { bottom: 96px; }
}

/* ============================================================
   WHAT'S NEW TOAST
   A bottom-right pill that announces the most recent
   Aurora release. Appears once per visitor per version
   (gated by localStorage), auto-dismisses, or can be
   closed / clicked through to the changelog.
   ============================================================ */
.whats-new-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  max-width: 360px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(14, 17, 23, 0.96) 0%,
    rgba(10, 14, 20, 0.96) 100%
  );
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 32px rgba(52, 211, 153, 0.18);
  color: var(--text-primary, #fff);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.4s var(--ease, cubic-bezier(.22,.8,.3,1)),
    transform 0.45s cubic-bezier(.22,.8,.3,1);
}

[data-theme="light"] .whats-new-toast {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 248, 250, 0.98) 100%
  );
  border-color: rgba(27, 200, 156, 0.45);
  color: var(--text-primary);
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.03),
    0 0 28px rgba(27, 200, 156, 0.12);
}

.whats-new-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.whats-new-toast__pulse {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-green, #34d399), var(--accent-cyan, #38bdf8));
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
}

.whats-new-toast__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.6);
  animation: whats-new-pulse 2s ease-out infinite;
}

@keyframes whats-new-pulse {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

.whats-new-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.whats-new-toast__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-green, #34d399);
}

.whats-new-toast__title {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-new-toast__title:hover {
  text-decoration: underline;
  text-decoration-color: rgba(52, 211, 153, 0.55);
  text-underline-offset: 3px;
}

.whats-new-toast__title:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--accent-green));
  border-radius: 4px;
}

.whats-new-toast__close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fill-glass, rgba(255,255,255,0.04));
  border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
  color: var(--text-secondary, rgba(255,255,255,0.65));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  padding: 0;
}

.whats-new-toast__close:hover {
  background: var(--fill-glass-strong, rgba(255,255,255,0.08));
  color: var(--text-primary, #fff);
}

.whats-new-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--accent-green));
}

@media (max-width: 640px) {
  .whats-new-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whats-new-toast {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .whats-new-toast.is-visible {
    transform: none;
  }
  .whats-new-toast__pulse::after {
    animation: none;
  }
}

/* ============================================================
   VIEW TRANSITIONS — radial wipe theme toggle
   When supported, the new theme's snapshot clips in as a growing
   circle from the toggle button's center, creating an iOS 18
   wallpaper-switcher-style reveal. JS publishes --vt-x, --vt-y,
   and --vt-r so the keyframes can read them.
   ============================================================ */
@supports (view-transition-name: root) {
  /* The old theme snapshot stays put; the new one animates in. */
  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
    z-index: 1;
  }
  ::view-transition-new(root) {
    animation: theme-wipe-in 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    mix-blend-mode: normal;
    z-index: 2;
  }

  /* When wiping to dark, the old (light) snapshot should shrink
     away underneath instead — feels more natural than expanding. */
  html[data-vt-direction="to-dark"]::view-transition-new(root) {
    animation: theme-wipe-in 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  html[data-vt-direction="to-dark"]::view-transition-old(root) {
    animation: theme-wipe-out 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 3;
  }

  html.theme-transitioning {
    view-transition-name: root;
  }
}

@keyframes theme-wipe-in {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%));
  }
  to {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%));
  }
}
@keyframes theme-wipe-out {
  from {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%));
  }
  to {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%));
  }
}

/* Reduced motion — fall back to an instant crossfade, no wipe. */
@media (prefers-reduced-motion: reduce) {
  @supports (view-transition-name: root) {
    ::view-transition-new(root),
    html[data-vt-direction="to-dark"]::view-transition-old(root) {
      animation: none !important;
      clip-path: none !important;
    }
  }
}

/* ============================================================
   CASCADING ROW-BY-ROW REVEAL
   Each row animates only after the previous row has finished.
   Controlled by .reveal-row-cascade with row children.
   ============================================================ */
/* Features grid — stacked rows, each row is a grid-2 */
.features-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.reveal-row--grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .reveal-row--grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE FEATURE CAROUSEL — at ≤480px the features grid flattens
   into a horizontal scroll-snap strip. Reveal-rows collapse via
   display:contents so every card becomes a direct child of the
   scroller, and each card snaps center with generous peek edges.
   Desktop + tablet layout is untouched.
   ============================================================ */
@media (max-width: 480px) {
  .features-grid {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    padding: 4px 16px 28px 16px;
    margin-inline: -14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .features-grid::-webkit-scrollbar { display: none; }
  /* Reveal-rows become passthrough containers so their two cards
     flow into the single horizontal row of the grid. The reveal
     animation still targets the row, it just has no box now. */
  .features-grid > .reveal-row {
    display: contents;
  }
  .features-grid .feature-card {
    flex: 0 0 82%;
    max-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Subtle fade cue at the leading/trailing edges */
  .features-grid {
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

@media (max-width: 480px) {
  .testimonial-row {
    margin-inline: -14px;
  }
}

.reveal-row-cascade > .reveal-row {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 500ms var(--ease-out);
}
.reveal-row-cascade > .reveal-row.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Within a row, children animate in sequence after the row arrives */
.reveal-row > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 550ms var(--ease-out),
    transform 550ms var(--ease-out);
}
.reveal-row.is-visible > *:nth-child(1) { transition-delay: 80ms; opacity:1; transform:none; }
.reveal-row.is-visible > *:nth-child(2) { transition-delay: 180ms; opacity:1; transform:none; }
.reveal-row.is-visible > *:nth-child(3) { transition-delay: 280ms; opacity:1; transform:none; }
.reveal-row.is-visible > *:nth-child(4) { transition-delay: 380ms; opacity:1; transform:none; }
.reveal-row.is-visible > *:nth-child(5) { transition-delay: 480ms; opacity:1; transform:none; }
.reveal-row.is-visible > *:nth-child(6) { transition-delay: 580ms; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-row-cascade > .reveal-row,
  .reveal-row > * {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* ============================================================
   MAGNETIC BUTTONS — JS drives --tx/--ty; CSS composes transform
   ============================================================ */
.button[data-magnetic] {
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform 200ms var(--ease-spring),
              background var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.button[data-magnetic]:hover { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 2px)); }

/* ============================================================
   SKIP-TO-CONTENT — hidden until keyboard-focused
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-green);
  color: #052014;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 9999;
  transition: top 200ms var(--ease-out);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.skip-link:focus-visible,
.skip-link:focus {
  top: 16px;
  outline: none;
}

/* ============================================================
   SCROLL PROGRESS BAR — thin rainbow gradient at the viewport top.
   Width is driven by JS (transform: scaleX) tied to scroll ratio.
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  /* Must sit ABOVE .site-nav (z:1000) — the nav's blurred bg is opaque
     enough to hide a 2px bar sitting at z:99 behind it. */
  z-index: 1001;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF);
  background-size: 200% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: scroll-progress-shimmer 6s linear infinite;
  box-shadow: 0 0 10px rgba(84,211,154,0.35), 0 0 16px rgba(255,94,168,0.25);
  will-change: transform;
}
body.is-aurora-revealing .scroll-progress__bar {
  animation-play-state: paused;
  box-shadow: none;
}
@keyframes scroll-progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar { animation: none; transition: none; }
}

/* ============================================================
   3D TILT CARDS
   JS writes --tilt-rx, --tilt-ry, --tilt-mx, --tilt-my on
   pointermove. CSS applies rotation + a soft light highlight
   that follows the cursor. Gracefully no-ops if JS is off.
   ============================================================ */
.has-tilt {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-mx: 50%;
  --tilt-my: 50%;
  --tilt-lift: 0px;
  transform: perspective(900px) translateY(var(--tilt-lift)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transition: transform 0.25s cubic-bezier(.22,.8,.3,1), box-shadow 0.3s var(--ease);
  will-change: transform;
  position: relative;
}
.has-tilt:hover { --tilt-lift: -4px; }
/* Prevent existing :hover transform rules from overriding the tilt.
   Higher specificity + !important only on the transform to preserve
   each card's own box-shadow/border-color hover treatment. */
.feature-card.has-tilt:hover,
.plan-card.has-tilt:hover,
.ai-feature.has-tilt:hover,
.testimonial.has-tilt:hover,
.compare-table-wrap.has-tilt:hover {
  transform: perspective(900px) translateY(var(--tilt-lift)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) !important;
}
/* Cursor-following sheen — only visible when the card is tilted */
.has-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--tilt-mx) var(--tilt-my), rgba(255,255,255,0.07), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: 1;
}
.has-tilt:hover::after { opacity: 1; }
/* Keep any existing ::before decorations on top of the sheen */
.has-tilt > * { position: relative; z-index: 2; }

@media (hover: none) {
  .has-tilt { transform: none !important; }
  .has-tilt::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .has-tilt { transform: none !important; transition: none; }
  .has-tilt::after { display: none; }
}

/* ============================================================
   PRICE ANCHOR — strikethrough "original" price
   ============================================================ */
.plan-card__price-anchor {
  position: relative;
  margin-right: var(--space-3);
  font-size: 0.65em;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(245,158,11,0.7);
  font-weight: 500;
  vertical-align: 0.1em;
  opacity: 0.75;
}
.plan-card__savings {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
  border: 1px solid rgba(52,211,153,0.3);
}
[data-theme="light"] .plan-card__savings {
  background: rgba(43,182,133,0.12);
  color: #22795a;
  border-color: rgba(43,182,133,0.35);
}

/* ============================================================
   SECTION TITLE — word-by-word reveal animation
   JS wraps each word in <span class="word"><span class="word-inner">...
   The inner span slides up from below and fades in.
   ============================================================ */
.section-title--reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em;
}
.section-title--reveal-words .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 600ms ease-out;
}
.section-title--reveal-words.is-visible .word-inner {
  transform: translateY(0);
  opacity: 1;
}
.section-title--reveal-words.is-visible .word:nth-child(1) .word-inner { transition-delay: 40ms; }
.section-title--reveal-words.is-visible .word:nth-child(2) .word-inner { transition-delay: 120ms; }
.section-title--reveal-words.is-visible .word:nth-child(3) .word-inner { transition-delay: 200ms; }
.section-title--reveal-words.is-visible .word:nth-child(4) .word-inner { transition-delay: 280ms; }
.section-title--reveal-words.is-visible .word:nth-child(5) .word-inner { transition-delay: 360ms; }
.section-title--reveal-words.is-visible .word:nth-child(6) .word-inner { transition-delay: 440ms; }
.section-title--reveal-words.is-visible .word:nth-child(7) .word-inner { transition-delay: 520ms; }
.section-title--reveal-words.is-visible .word:nth-child(8) .word-inner { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .section-title--reveal-words .word-inner { transform: none; opacity: 1; transition: none; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid { max-width: 1200px; margin: 0 auto; }
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) and (min-width: 769px) {
  .testimonial-row { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}

/* Mobile: horizontal scroll-snap carousel, matching the pricing treatment */
@media (max-width: 768px) {
  .testimonial-row {
    display: flex;
    grid-template-columns: unset;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 50%;
    padding: 12px max(8vw, 24px) 32px;
    margin-inline: calc(-1 * var(--space-4));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testimonial-row::-webkit-scrollbar { display: none; }
  .testimonial-row > .testimonial {
    flex: 0 0 82%;
    max-width: 340px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: 0.6;
    transform: scale(0.94);
    transition: transform 0.4s var(--ease-out), opacity 0.35s var(--ease);
  }
  .testimonial-row > .testimonial.is-centered {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 480px) {
  .testimonial-row {
    margin-inline: -14px;
  }
}

.testimonial {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    var(--fill-glass);
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 14px;
  padding: var(--space-6);
  margin: 0;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  transition:
    transform 400ms var(--ease-out),
    border-color 400ms var(--ease),
    box-shadow 400ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial:hover {
  transform: translateY(-3px);
  border-color: rgba(52,211,153,0.3);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
[data-theme="light"] .testimonial:hover {
  border-color: rgba(43,182,133,0.4);
  box-shadow: 0 16px 40px rgba(18,33,48,0.08);
}

[data-theme="light"] .testimonial {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74)),
    rgba(255,255,255,0.82);
  border-color: rgba(18,33,48,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(18,33,48,0.025);
}
.testimonial__stars {
  color: var(--accent-warm);
  font-size: 14px;
  letter-spacing: 2px;
}
.testimonial__quote {
  margin: 0;
  font-size: var(--text-body-lg, 17px);
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 400;
  font-style: normal;
  quotes: none;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.testimonial__author--anon {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.testimonial__author--anon .testimonial__role {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.testimonial-disclaimer {
  margin-top: var(--space-8);
  font-size: 13px;
  color: var(--text-tertiary, var(--text-secondary));
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.72;
  line-height: 1.6;
}
.testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52,211,153,0.3), rgba(56,189,248,0.3));
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.5px;
  border: 1px solid var(--border-soft);
}
.testimonial__name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}
.testimonial__role {
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================================
   FAQ ACCORDION — native <details>/<summary> with animation
   ============================================================ */
.faq-accordion {
  max-width: 820px;
  margin: 0 auto;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--fill-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Instant-filter search input above the FAQ accordion. */
.faq-search {
  position: relative;
  max-width: 820px;
  margin: 0 auto var(--space-4);
}
.faq-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.faq-search__input {
  width: 100%;
  padding: 12px 44px 12px 44px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--fill-glass);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.faq-search__input::placeholder { color: var(--text-secondary); }
.faq-search__input:focus {
  border-color: var(--accent-green);
  background: var(--fill-glass-strong, rgba(255,255,255,0.04));
}
/* Hide native clear button — we render our own. */
.faq-search__input::-webkit-search-decoration,
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-results-button,
.faq-search__input::-webkit-search-results-decoration { -webkit-appearance: none; }
.faq-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--fill-glass);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.faq-search__clear:hover { background: var(--fill-glass-strong, rgba(255,255,255,0.08)); color: var(--text-primary); }
.faq-search__clear:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

/* Empty-state message. */
.faq-empty {
  max-width: 820px;
  margin: 0 auto var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-panel);
  border: 1px dashed var(--border-soft);
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Hidden via filter — shrink + fade so the accordion compacts cleanly
   instead of leaving gaps between matches. */
.faq-item.is-filtered-out {
  display: none;
}
.faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.faq-item:last-child { border-bottom: none; }

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 17px;
  transition: background 300ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.faq-item__trigger::-webkit-details-marker { display: none; }
.faq-item__trigger:hover { background: var(--fill-glass-strong, rgba(255,255,255,0.04)); }
.faq-item__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-green); }

.faq-item__q { flex: 1; }

.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fill-glass);
  color: var(--text-secondary);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), background 300ms var(--ease);
  flex-shrink: 0;
}
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  background: rgba(52,211,153,0.18);
  color: var(--accent-green);
}

.faq-item__body {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 15.5px;
  animation: faq-open 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (max-width: 1024px) {
  .faq-item__body {
    padding: var(--space-5) var(--space-6) var(--space-5);
  }
}

.faq-item__body p { margin: 0; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item__body { animation: none; }
  .faq-item__icon { transition: none; }
}

/* ============================================================
   REDUCED-DATA MODE
   Disable purely decorative animations and heavy gradients when
   the user has asked the browser to save data. Functionality
   (reveal, snap, focus rings) is preserved; only the ambient
   eye-candy is skipped. Complements the reduced-motion block.
   ============================================================ */
@media (prefers-reduced-data: reduce) {
  .scroll-progress__bar { animation: none !important; }

  .has-tilt::after,
  .has-tilt::before {
    display: none !important;
  }

  .whats-new-toast__pulse::after,
  .changelog-entry__dot::after {
    animation: none !important;
  }

  /* Hero ambient gradient layers — keep one solid layer for colour
     identity, hide the others to save GPU compositing. */
  .hero__bg-layer--2,
  .hero__bg-layer--3,
  .hero__bg-layer--4 { display: none !important; }

  /* Aurora reveal section: keep the brand image but skip the
     image-set webp/png download chain — collapse the section to
     a solid bg + title card. */
  .aurora-reveal__bg { display: none !important; }

  /* Blanket-off decorative infinite keyframes */
  *,
  *::before,
  *::after {
    animation-iteration-count: 1 !important;
    animation-duration: 0.001s !important;
  }

  /* Keep hover/state transitions snappy instead of zeroing them out. */
  .whats-new-toast { transition: opacity 0.2s ease; }
}

/* ============================================================
   Heading anchor-link reveal (H2 / H3)
   ============================================================ */
.has-anchor {
  position: relative;
  scroll-margin-top: 80px;
}
.heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.has-anchor:hover .heading-anchor,
.has-anchor:focus-within .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
.heading-anchor:hover {
  color: var(--accent-green);
  background: var(--fill-glass);
  border-color: var(--border-soft);
}
.heading-anchor:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.heading-anchor.is-copied {
  color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
  opacity: 1;
}
.heading-anchor.is-copied::after {
  content: "Link copied";
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  animation: anchorToast 1.4s ease forwards;
}
@keyframes anchorToast {
  0% { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  15%, 80% { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .heading-anchor { transition: none; }
  .heading-anchor.is-copied::after { animation: none; opacity: 1; }
}

/* ============================================================
   Mailto copy-to-clipboard button
   ============================================================ */
.mailto-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mailto-copy:hover {
  color: var(--accent-green);
  background: var(--fill-glass);
  border-color: var(--border-soft);
}
.mailto-copy:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.mailto-copy__check { display: none; }
.mailto-copy.is-copied { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.1); }
.mailto-copy.is-copied .mailto-copy__icon { display: none; }
.mailto-copy.is-copied .mailto-copy__check { display: inline-block; }
.mailto-copy__flash {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mailto-copy.is-copied .mailto-copy__flash {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mailto-copy, .mailto-copy__flash { transition: none; }
}

/* ============================================================
   SHARED PREMIUM CARD — "POPULAR PLAN" styling
   Lives in styles.css (not home.css) so BOTH the landing page and
   the license page inherit the same animated conic ring + scale
   boost on the "Most Popular" pricing card.

   Hook is either:
     .plan-card.is-popular            ← explicit class (license page)
     .plan-card[data-plan="pro-monthly"]  ← automatic (home page)
   ============================================================ */
.plan-card.is-popular,
.plan-card[data-plan="pro-monthly"] {
  transform: scale(1.03);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--fill-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.28),
    0 0 0 1px rgba(52,211,153,0.25) inset,
    0 0 40px rgba(52,211,153,0.08);
  z-index: 2;
}
.plan-card.is-popular::before,
.plan-card[data-plan="pro-monthly"]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg,
    rgba(52,211,153,0.9),
    rgba(56,189,248,0.9),
    rgba(245,158,11,0.6),
    rgba(52,211,153,0.9));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: plan-ring-spin 8s linear infinite;
  pointer-events: none;
  opacity: 0.55;
}
@keyframes plan-ring-spin {
  to { transform: rotate(360deg); }
}
[data-theme="light"] .plan-card.is-popular,
[data-theme="light"] .plan-card[data-plan="pro-monthly"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)),
    var(--fill-glass);
  box-shadow:
    0 18px 48px rgba(18,33,48,0.14),
    0 0 0 1px rgba(43,182,133,0.35) inset,
    0 0 40px rgba(43,182,133,0.08);
}
/* Below tablet, drop the scale so the card doesn't collide with siblings */
@media (max-width: 768px) {
  .plan-card.is-popular,
  .plan-card[data-plan="pro-monthly"] { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card.is-popular::before,
  .plan-card[data-plan="pro-monthly"]::before { animation: none; }
}

/* ============================================================
   SOCIAL PROOF TICKER — rotating trust items under hero CTA.
   Three <li>s stacked absolutely; JS toggles .is-active to fade
   between them. Reduced-motion users see the first item pinned.
   ============================================================ */
.proof-ticker {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: fade-up 0.8s var(--ease-out) 0.55s forwards;
}
.proof-ticker__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 16px;
  min-height: 36px;
  min-width: 260px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-glass, rgba(255,255,255,0.04)) 80%, transparent);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
[data-theme="light"] .proof-ticker__list {
  background: rgba(255,255,255,0.7);
  border-color: rgba(10,14,20,0.08);
  box-shadow: 0 1px 0 rgba(10,14,20,0.03), 0 6px 18px rgba(10,14,20,0.04);
}
.proof-ticker__item {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  white-space: nowrap;
  pointer-events: none;
}
.proof-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.proof-ticker__item strong {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.proof-ticker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--accent-green, #34D399);
  background: color-mix(in srgb, var(--accent-green, #34D399) 16%, transparent);
  flex-shrink: 0;
}
.proof-ticker__item:nth-child(1) .proof-ticker__icon {
  color: #FACC15;
  background: rgba(250, 204, 21, 0.14);
}
.proof-ticker__item:nth-child(2) .proof-ticker__icon {
  color: #34D399;
  background: rgba(52, 211, 153, 0.14);
}
.proof-ticker__item:nth-child(3) .proof-ticker__icon {
  color: #8B5CF6;
  background: rgba(139, 92, 246, 0.14);
}
@media (max-width: 480px) {
  .proof-ticker__list { min-width: 0; width: 100%; max-width: 320px; }
  .proof-ticker__item { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-ticker { animation: none; opacity: 1; }
  .proof-ticker__item { transition: none; }
  .proof-ticker__item:not(.is-active) { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .proof-ticker__list { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   First-visit only. Slides up from the bottom, sits above the
   back-to-top button. Dismissal is persisted via localStorage,
   so it never re-appears for that user (until CONSENT_VERSION
   is bumped). Equal-prominence Accept / Reject for GDPR parity.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 990;                 /* above BTT (980), below SW toast */
  max-width: 680px;
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  padding: 0;
  /* Dark glass. Semi-transparent so the page content reads through,
     with heavy blur + saturation so the backdrop stays legible. Same
     treatment in both themes — the banner is a floating overlay and
     reads cleaner when it's not matching the page chrome. */
  background: rgba(10, 12, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  box-shadow:
    0 20px 60px -20px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(36px) saturate(1.6);
  -webkit-backdrop-filter: blur(36px) saturate(1.6);
  /* Enter animation: start just below the viewport, fade in */
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms var(--ease-out);
  will-change: transform, opacity;
  color: #f3f4f6;               /* force light text regardless of theme */
  overflow: clip;
}
[data-theme="light"] .cookie-banner {
  /* Light mode: blurring rgba(10,12,18,0.55) over a white page turns muddy
     olive/gray because saturate(1.6) amplifies warm hues bleeding through.
     Use a near-opaque dark surface (no backdrop filtering through) so the
     pill reads as a clean dark overlay against the bright page. */
  background: rgba(14, 17, 24, 0.94);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 24px 70px -20px rgba(10, 14, 20, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #f3f4f6;
}

/* Force light-on-dark text for all banner children regardless of theme,
   since the dark glass is now consistent across dark/light pages. */
.cookie-banner .cookie-banner__title { color: #f3f4f6; }
.cookie-banner .cookie-banner__text,
.cookie-banner .cookie-banner__row-desc,
.cookie-banner .cookie-banner__btn-text { color: rgba(243, 244, 246, 0.72); }
.cookie-banner .cookie-banner__row-title { color: #f3f4f6; }
.cookie-banner .cookie-banner__btn-text:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.cookie-banner .cookie-banner__details { border-top-color: rgba(255, 255, 255, 0.08); }

/* Reject button lives inside a dark banner but uses .button-secondary,
   which in light mode is dark-on-light — reads as a dark chip on dark.
   Scope a banner-specific ghost style so it stays legible in BOTH themes. */
.cookie-banner .cookie-banner__btn.button-secondary,
[data-theme="light"] .cookie-banner .cookie-banner__btn.button-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f3f4f6;
  box-shadow: none;
}
.cookie-banner .cookie-banner__btn.button-secondary:hover,
[data-theme="light"] .cookie-banner .cookie-banner__btn.button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.cookie-banner .cookie-banner__btn.button-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.55);
}

/* Opaque fallback for devices/browsers that can't render backdrop-filter
   (older Firefox without layout.css.backdrop-filter.enabled, etc.) so the
   text stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-banner,
  [data-theme="light"] .cookie-banner {
    background: rgba(10, 12, 18, 0.94);
  }
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner.is-expanded {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 16px;
}
.cookie-banner__copy {
  flex: 1;
  min-width: 0;
}
.cookie-banner__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  letter-spacing: 0;
  color: var(--text-primary);
}
.cookie-banner__text {
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--text-secondary);
  margin: 0;
}
.cookie-banner__link {
  color: var(--accent-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(52,211,153,0.3);
  transition: border-color var(--dur-fast) var(--ease);
}
.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  border-bottom-color: var(--accent-green);
}
.cookie-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Compact buttons — consent banner shouldn't shout.
   Keep ≥44px on mobile for thumb-friendly taps (WCAG 2.5.5). */
.cookie-banner__btn {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--radius-button-sm);
  white-space: nowrap;
}

/* Customize — a borderless text button that doesn't fight for attention
   against the two primary CTAs. Underlined on hover so it reads as a link-
   button hybrid rather than a tertiary action. */
.cookie-banner__btn-text {
  appearance: none;
  background: transparent;
  border: 0;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-button-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cookie-banner__btn-text:hover {
  color: var(--text-primary);
  background: var(--fill-glass);
}
.cookie-banner__btn-text:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Details panel — expands between copy and actions when user clicks
   "Customize". When expanded, the banner grows tall, so the inner layout
   switches to column stacking (see .is-expanded rule below). */
.cookie-banner__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-soft);
  /* Fade in smoothly when the `hidden` attribute is removed */
  animation: cookie-details-in 260ms var(--ease-out) both;
}
@keyframes cookie-details-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner__details[hidden] { display: none !important; }

.cookie-banner__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  /* Make the whole row interactive when wrapped in <label> */
  cursor: pointer;
}
/* The "Essential" row is div-wrapped (no label) — stop the pointer */
.cookie-banner__row:not(label) { cursor: default; }
.cookie-banner__row-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cookie-banner__row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
}
.cookie-banner__row-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* When customize is open, let the banner breathe — copy + details + actions
   stack in a column so the row doesn't squeeze unreadably. */
.cookie-banner.is-expanded .cookie-banner__inner {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.cookie-banner.is-expanded .cookie-banner__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ==========================================================
   AURORA SWITCH — reusable toggle. Designed so the wrapping
   <label> captures all clicks and the native checkbox provides
   the a11y semantics while being visually hidden. Works with
   keyboard (tab to label → space toggles input).
   ========================================================== */
.aurora-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
}
.aurora-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.aurora-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border-soft);
  border: 1px solid var(--border-strong);
  transition:
    background var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease);
}
.aurora-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform var(--dur-med) var(--ease-spring), background var(--dur-med) var(--ease);
}
/* Checked: thumb slides right + green track. Also handle the .is-on
   modifier for the non-interactive "Essential / Required" row. */
.aurora-switch__input:checked + .aurora-switch__track,
.aurora-switch__track.is-on {
  background: var(--accent-green);
  border-color: rgba(52,211,153,0.4);
}
.aurora-switch__input:checked + .aurora-switch__track .aurora-switch__thumb,
.aurora-switch__track.is-on .aurora-switch__thumb {
  transform: translateX(18px);
  background: #06090f;
}
[data-theme="light"] .aurora-switch__input:checked + .aurora-switch__track .aurora-switch__thumb,
[data-theme="light"] .aurora-switch__track.is-on .aurora-switch__thumb {
  background: #0f1a14;
}
.aurora-switch__input:focus-visible + .aurora-switch__track {
  box-shadow: var(--focus-ring);
}

/* "Required" — the Essential row is non-interactive. Rework the layout
   so the track can sit inline next to a "Required" caption instead of
   absolute-filling the whole component. */
.aurora-switch--locked {
  width: auto;
  height: 26px;
  gap: var(--space-2);
}
.aurora-switch--locked .aurora-switch__track {
  position: relative;
  inset: auto;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  /* Slight visual signal this toggle isn't clickable */
  opacity: 0.85;
}
.aurora-switch--locked .aurora-switch__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ── Lift other bottom-fixed chrome while banner is visible ────────────
   When body[data-cookie-open] is set (JS toggles this in components.js),
   the back-to-top button and SW update toast rise above the banner so
   they remain reachable during the first-visit consent flow. Estimated
   banner heights: ~82px desktop, ~170px tablet-stacked, ~190px mobile. */
body[data-cookie-open] .back-to-top {
  bottom: calc(24px + 76px);
}
body[data-cookie-open] .sw-update-toast {
  bottom: calc(20px + 76px);
}
body[data-cookie-expanded] .back-to-top {
  opacity: 0;
  pointer-events: none;
}

/* Tablet: allow text to reflow, keep buttons on the right */
@media (max-width: 720px) {
  .cookie-banner {
    max-width: 520px;
  }
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: 14px;
  }
  .cookie-banner__actions {
    justify-content: stretch;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .cookie-banner__btn {
    flex: 1;
    /* Stacked layout increases banner height — bump touch target too */
    height: 42px;
    font-size: 13.5px;
  }
  /* Customize reads as text-first on mobile — full-width first row so it
     doesn't get squeezed between the two button-shaped siblings. */
  .cookie-banner__btn-text {
    flex-basis: 100%;
    text-align: center;
    height: 30px;
    order: -1;   /* put it above Reject / Accept on small screens */
  }
  /* Details panel spacing — tighter on mobile */
  .cookie-banner__row {
    gap: var(--space-3);
  }
  /* Taller banner → lift more */
  body[data-cookie-open] .back-to-top { bottom: calc(24px + 160px); }
  body[data-cookie-open] .sw-update-toast { bottom: calc(20px + 160px); }
}

/* Mobile: full-width flush to bottom edge for thumb-reach */
@media (max-width: 480px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: calc(100dvh - 16px);
    border-radius: var(--radius-card-sm);
  }
  .cookie-banner__inner {
    padding: 12px;
    position: relative;
    gap: 10px;
  }
  .cookie-banner__title {
    font-size: 14px;
    margin-bottom: 2px;
    padding-right: 86px;
  }
  .cookie-banner__text {
    font-size: 12px;
    line-height: 1.35;
  }
  .cookie-banner__btn {
    height: 40px;
    padding-inline: 12px;
  }
  .cookie-banner__btn-text {
    position: absolute;
    top: 12px;
    right: 14px;
    flex-basis: auto;
    height: 24px;
    padding: 0;
    font-size: 12.5px;
  }
  .cookie-banner__actions { gap: 6px; }
  body[data-cookie-open] .back-to-top { bottom: calc(24px + 154px); }
  body[data-cookie-open] .sw-update-toast { bottom: calc(20px + 154px); }
}

@media (max-width: 360px) {
  .cookie-banner__btn {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 200ms linear;
    transform: none;
  }
  body[data-cookie-open] .back-to-top,
  body[data-cookie-open] .sw-update-toast {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cookie-banner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-1);
  }
}

/* ============================================================
   SERVICE WORKER UPDATE TOAST
   Appears bottom-left when a new SW is waiting to activate.
   Offers a one-click refresh so users always see the latest code.
   ============================================================ */
.sw-update-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 980;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  background: var(--surface-deep, rgba(3,8,22,0.88));
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
  max-width: calc(100vw - 40px);
}
.sw-update-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
[data-theme="light"] .sw-update-toast {
  background: rgba(255,255,255,0.95);
  border-color: rgba(10,14,20,0.08);
  box-shadow: 0 12px 40px rgba(10,14,20,0.12);
}
.sw-update-toast__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(52,211,153,0.14);
  color: var(--accent-green);
  flex-shrink: 0;
}
.sw-update-toast__text {
  white-space: nowrap;
  color: var(--text-primary);
}
.sw-update-toast__refresh {
  appearance: none;
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  color: #0a0f1a;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: transform 160ms ease;
}
.sw-update-toast__refresh:hover { transform: translateY(-1px); }
.sw-update-toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 160ms ease, background 160ms ease;
}
.sw-update-toast__close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
[data-theme="light"] .sw-update-toast__close:hover {
  background: rgba(10,14,20,0.06);
}
@media (max-width: 480px) {
  .sw-update-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
  .sw-update-toast__text { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-update-toast { transition: opacity 200ms linear; }
  .sw-update-toast.is-visible { transform: none; }
}