/* ============================================================
   Saturn Landing Page — Stylesheet
   ============================================================ */

  /* ---------- Stable first render ---------- */
  /* html.preload is set in <head> and removed after the first paint: nothing transitions into place on load */
  html.preload *, html.preload *::before, html.preload *::after { transition: none !important; }

  /* ---------- Self-hosted fonts (assets/fonts) ---------- */
  /* Inter — SIL Open Font License, see assets/fonts/Inter-OFL.txt */
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/inter-400.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/inter-500.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/inter-600.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/inter-700.woff2') format('woff2'); }

  /* Metric-matched fallbacks: system fonts scaled to Inter's / Space Grotesk's proportions, so if a
     web font isn't used for a page view the text occupies the same space (no reflow, no CLS). */
  @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
               size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
  @font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
               size-adjust: 104%; ascent-override: 94.6%; descent-override: 28%; line-gap-override: 0%; }

  /* Space Grotesk — uncomment once space-grotesk-{400,500,600,700}.woff2 are in assets/fonts,
     then remove the temporary Google Fonts <link> in index.html.
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/space-grotesk-400.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/space-grotesk-600.woff2') format('woff2'); }
  @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); }
  */

  :root {
    --font-heading: 'Space Grotesk', 'Space Grotesk Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  #saas-app {
    /* Light edition palette — cool mist page, white surfaces, near-black ink.
       Lime (--signal) is used for fills and glows only; text and icons that were lime on the dark
       theme use --accent, a deep green with AA contrast on white. */
    --ink: #fcfdfa;              /* page background (keep in sync with BG in assets/js/hero-glass.js) */
    --ink-raised: #ffffff;       /* cards and panels */
    --ink-card: #fefefd;
    --ink-border: rgba(13, 20, 14, 0.09);
    --ink-border-strong: rgba(13, 20, 14, 0.15);

    --paper: #ffffff;
    --paper-muted: #e9ede6;

    --text-hi: #0d140e;
    --text-mid: #46514a;
    --text-low: #66726a;

    --signal: #c9ff4f;
    --signal-dim: rgba(120, 190, 20, 0.18);
    --signal-line: rgba(70, 120, 10, 0.45);
    --accent: #3a650a;

    --ink-text: #14181d;
    --ink-text-mid: #565f6a;
    --ink-text-low: #8b93a0;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 999px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* html/body sit outside #saas-app, where the palette variables are defined, so the
     page background is set with the literal ink value (also covers overscroll areas) */
  html { background: #fcfdfa; color-scheme: light; }
  body { background: #fcfdfa; color: #0d140e; font-family: var(--font-body); overflow-x: hidden; line-height: 1.5; }

  #saas-app { position: relative; width: 100%; min-height: 100vh; background: var(--ink); }

  /* ---------- Ambient backdrop: fine signal grid, not a soft gradient blob ---------- */
  .hero-bg-wrapper { position: absolute; inset: 0; height: 980px; overflow: hidden; pointer-events: none; z-index: 0; }

  .bg-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); /* halved: quieter pattern */
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(60% 55% at 62% 18%, #000 0%, transparent 75%);
            mask-image: radial-gradient(60% 55% at 62% 18%, #000 0%, transparent 75%);
    opacity: 0.9;
  }

  .bg-glow {
    position: absolute; top: -240px; left: 45%; width: 1100px; height: 780px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(201,255,79,0.10) 0%, rgba(201,255,79,0.04) 40%, transparent 72%);
    filter: blur(10px);
  }

  .hero-bg-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 260px;
    background: linear-gradient(to bottom, rgba(10,14,18,0) 0%, var(--ink) 100%);
  }

  /* ---------- Nav ---------- */
  /* nav sits in the normal document flow and scrolls away with the page (no fixed/sticky) */
  .nav-wrapper {
    position: relative; z-index: 10;
    display: flex; justify-content: center; padding: 20px 24px;
  }

  .navbar {
    width: 100%; max-width: 1240px; height: 62px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 26px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid transparent;
  }


  .brand-logo-text {
    font-family: var(--font-heading); font-size: 19px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--text-hi); text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px; user-select: none;
  }
  .brand-logo-text .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px 1px var(--signal-line); }

  .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
  .nav-link-item a {
    font-size: 13.5px; font-weight: 500; color: var(--text-mid);
    text-decoration: none; transition: color 0.15s var(--ease);
  }
  .nav-link-item a:hover { color: var(--text-hi); }

  .nav-cta-group { display: flex; align-items: center; gap: 8px; }

  .btn-nav-ghost {
    font-size: 13.5px; font-weight: 600; color: var(--text-hi); text-decoration: none;
    padding: 8px 16px; border-radius: var(--radius-full);
    transition: background-color 0.15s var(--ease);
  }
  .btn-nav-ghost:hover { background-color: rgba(255,255,255,0.06); }

  .btn-nav-primary {
    font-size: 13px; font-weight: 700; color: #0a0e12; background: var(--signal);
    text-decoration: none; padding: 9px 18px; border-radius: var(--radius-full);
    transition: all 0.15s var(--ease); display: inline-flex; align-items: center; white-space: nowrap;
  }
  .btn-nav-primary:hover { background: #d7ff77; transform: translateY(-1px); }

  .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-hi); }

  .mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(10, 14, 18, 0.97);
    backdrop-filter: blur(20px); z-index: 999;
    display: flex; flex-direction: column; padding: 100px 32px 40px;
    opacity: 0; pointer-events: none; transform: translateY(-10px);
    transition: all 0.4s var(--ease);
  }
  .mobile-menu-overlay.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .mobile-nav-links a { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--text-hi); text-decoration: none; }

  /* ---------- Hero: asymmetric, left copy / right signature graphic ---------- */
  .hero-section {
    position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
    padding: 66px 24px 0; /* 168px before, minus the 102px nav that is now in flow */
  }

  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 0.85fr; gap: 40px; align-items: center;
  }

  .announcement-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 6px; background: var(--ink-raised);
    border: 1px solid var(--ink-border-strong); border-radius: var(--radius-full);
    text-decoration: none; margin-bottom: 26px; transition: all 0.15s var(--ease);
    max-width: 100%; white-space: nowrap;
  }
  .announcement-badge:hover { border-color: var(--signal-line); }

  .badge-pill {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink); background: var(--signal); padding: 3px 9px; border-radius: var(--radius-full);
  }
  .badge-text {
    font-size: 13px; font-weight: 500; color: var(--text-mid);
    display: flex; align-items: center; gap: 6px; min-width: 0;
  }
  .badge-text span {
    overflow: hidden; white-space: nowrap;
  }
  .badge-arrow { flex-shrink: 0; color: var(--text-low); transition: transform 0.15s var(--ease); }
  .announcement-badge:hover .badge-arrow { transform: translateX(3px); color: var(--signal); }

  .hero-title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--text-hi); text-wrap: balance; margin-bottom: 22px;
  }
  .hero-title em { font-style: normal; color: var(--signal); }

  .hero-subtitle {
    font-size: clamp(16px, 1.3vw, 17.5px); font-weight: 400; line-height: 1.65;
    color: var(--text-mid); max-width: 460px; margin-bottom: 34px; text-wrap: balance;
  }

  .cta-group { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; flex-wrap: wrap; }

  .btn-primary-hero {
    position: relative; font-size: 14.5px; font-weight: 700; color: var(--ink);
    background: var(--signal); padding: 14px 24px; border-radius: var(--radius-full);
    text-decoration: none; transition: all 0.2s var(--ease);
    display: inline-flex; align-items: center; gap: 8px; height: 50px;
    box-shadow: 0 0 0 0 rgba(201,255,79,0.5);
  }
  .btn-primary-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(201,255,79,0.4); background: #d7ff77; }

  .btn-secondary-hero {
    font-size: 14.5px; font-weight: 600; color: var(--text-hi); background: transparent;
    border: 1px solid var(--ink-border-strong); padding: 14px 22px; border-radius: var(--radius-full);
    text-decoration: none; transition: all 0.2s var(--ease);
    display: inline-flex; align-items: center; gap: 8px; height: 50px;
  }
  .btn-secondary-hero:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.03); }
  button.btn-secondary-hero { font-family: inherit; line-height: 1; cursor: pointer; }
  .btn-secondary-hero:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  /* video trigger: play badge inside the pill + duration */
  .btn-video { padding: 0 18px 0 7px; gap: 11px; }
  .btn-video-play {
    position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--signal); color: var(--ink); box-shadow: 0 0 0 0 rgba(201, 255, 79, 0.35);
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
  }
  .btn-video-play svg { width: 18px; height: 18px; display: block; } /* centred by the triangle's centroid in the SVG itself */
  .btn-video:hover .btn-video-play, .btn-video:focus-visible .btn-video-play { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(201, 255, 79, 0.14); }
  .btn-video-time {
    padding-left: 11px; border-left: 1px solid var(--ink-border-strong);
    font-size: 13px; font-weight: 500; color: var(--text-low); font-variant-numeric: tabular-nums;
  }

  .trust-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .avatar-group { display: flex; align-items: center; }
  .avatar-img {
    width: 30px; height: 30px; border-radius: var(--radius-full);
    border: 2px solid var(--ink); margin-left: -10px; object-fit: cover;
    background: var(--ink-card); color: var(--signal);
    font-family: var(--font-heading); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .avatar-img:first-child { margin-left: 0; }
  .trust-text { font-size: 13px; font-weight: 500; color: var(--text-low); display: flex; align-items: center; gap: 6px; }
  .trust-text b { color: var(--text-mid); }
  .trust-stars { color: var(--signal); display: inline-flex; }

  /* ---------- Signature element: live synaptic signal graphic ---------- */
  .signal-graphic {
    position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto;
  }
  .signal-graphic svg { width: 100%; height: 100%; overflow: visible; }
  /* WebGL glass cube: slightly larger than the box so light and dispersion can breathe;
     the SVG signal graphic is shown until the first WebGL frame renders (fallback) */
  .glass-canvas {
    position: absolute; top: -14%; left: -14%; width: 128%; height: 160%; display: block; /* extra height below holds the floor shadow */
    cursor: grab; touch-action: pan-y; /* drag to spin */
  }
  .glass-canvas:active { cursor: grabbing; }
  /* decided before first paint (html.webgl, set in <head>): the SVG fallback is never shown and then swapped */
  html.webgl .signal-graphic svg { display: none; }
  html:not(.webgl) .glass-canvas { display: none; }
  .signal-node { fill: var(--ink-card); stroke: var(--ink-border-strong); stroke-width: 1; }
  .signal-node.is-hot { fill: var(--signal); stroke: none; }
  .signal-edge { stroke: rgba(255,255,255,0.10); stroke-width: 1; fill: none; }
  .signal-pulse { stroke: var(--signal); stroke-width: 1.6; fill: none; stroke-linecap: round; opacity: 0.9; }
  .pulse-dot { fill: var(--signal); filter: drop-shadow(0 0 6px rgba(201,255,79,0.8)); }

  @keyframes travel { to { stroke-dashoffset: 0; } }
  @keyframes nodeglow {
    0%, 100% { r: 4.5; opacity: 0.85; }
    50% { r: 6; opacity: 1; }
  }

  /* ---------- Product preview (layout referenced from the Aurora template, Saturn palette) ---------- */
  .dashboard-preview-wrapper {
    /* spans the full hero content width: left edge lines up with the CTA buttons */
    width: 100%; max-width: none; margin: 76px 0 0; position: relative; z-index: 2;
    --dp-ink: var(--text-hi); --dp-soft: var(--text-mid); --dp-faint: var(--text-low);
    --dp-line: rgba(255, 255, 255, 0.06); --dp-card: #151b22; --dp-ring: rgba(255, 255, 255, 0.07);
    font-family: var(--font-body);
  }
  .dp-frame {
    padding: clamp(6px, 1vw, 9px); border-radius: clamp(16px, 2.2vw, 20px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--ink);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(201, 255, 79, 0.08);
  }
  .dp-bar { display: flex; align-items: center; gap: 12px; padding: 6px 7px 12px; }
  .dp-dots { display: flex; gap: 6px; flex: none; }
  .dp-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
  .dp-url {
    flex: 1 1 auto; height: 28px; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; background: rgba(255, 255, 255, 0.04);
    font-size: 11.5px; color: var(--dp-faint);
  }
  .dp-url svg { width: 10px; height: 10px; opacity: 0.6; }
  .dp-winbtns { display: flex; gap: 5px; flex: none; }
  .dp-winbtns i { display: block; width: 13px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }

  .dp-app {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); border-radius: 13px; background: var(--ink-raised); overflow: hidden;
    box-shadow: 0 0 0 1px var(--dp-ring); text-align: left; color: var(--dp-ink);
  }
  .dp-side { padding: 18px 15px; border-right: 1px solid var(--dp-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent), var(--ink); }
  .dp-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.006em; color: var(--dp-ink); }
  .dp-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--ink-card); position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .dp-mark::after { content: ''; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px 1px rgba(201, 255, 79, 0.6); }
  .dp-label { margin: 0 0 9px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dp-faint); }
  .dp-nav { list-style: none; display: grid; gap: 2px; margin: 0 0 20px; }
  .dp-nav li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: var(--dp-soft); }
  .dp-nav li.dp-on { background: var(--dp-card); color: var(--dp-ink); font-weight: 500; box-shadow: 0 0 0 1px var(--dp-ring); }
  .dp-nav i { display: block; width: 5px; height: 5px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
  .dp-nav li.dp-on i { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }

  .dp-main { padding: clamp(16px, 2.2vw, 20px) clamp(16px, 2.4vw, 22px) 22px; min-width: 0; }
  .dp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .dp-head h3 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -0.014em; color: var(--dp-ink); }
  .dp-head p { margin: 4px 0 0; font-size: 11px; color: var(--dp-faint); }
  .dp-chip {
    flex: none; padding: 7px 12px; border: 1px solid var(--ink-border-strong); border-radius: 999px; background: var(--dp-card);
    font-size: 11px; font-weight: 500; color: var(--dp-soft); white-space: nowrap;
  }
  .dp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .dp-stat { padding: 13px 14px; border-radius: 12px; background: var(--dp-card); box-shadow: 0 0 0 1px var(--dp-ring); }
  .dp-stat span { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dp-faint); }
  .dp-stat strong { display: block; margin: 7px 0 4px; font-size: clamp(18px, 2.5vw, 22px); font-weight: 600; letter-spacing: -0.022em; color: var(--dp-ink); font-variant-numeric: tabular-nums; }
  .dp-stat small { display: inline-flex; font-size: 10.5px; font-weight: 500; color: var(--signal); }

  .dp-chart { padding: 15px 15px 13px; margin-bottom: 15px; border-radius: 12px; background: var(--dp-card); box-shadow: 0 0 0 1px var(--dp-ring); }
  .dp-ctop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .dp-ctop b { font-size: 12px; font-weight: 600; letter-spacing: -0.006em; color: var(--dp-ink); }
  .dp-ctop span { font-size: 10.5px; color: var(--dp-faint); white-space: nowrap; }
  .dp-bars {
    display: flex; align-items: flex-end; gap: clamp(3px, 0.7vw, 6px); height: clamp(66px, 11vw, 100px);
    background-image: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 25%);
  }
  .dp-bars i {
    display: block; flex: 1 1 0; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom center;
    background: linear-gradient(to top, rgba(163, 230, 53, 0.08), rgba(163, 230, 53, 0.6));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .dp-bars i:nth-child(3n+1) { background: linear-gradient(to top, rgba(45, 212, 191, 0.08), rgba(45, 212, 191, 0.55)); }
  .dp-bars i:nth-child(3n+2) { background: linear-gradient(to top, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0.55)); }
  .dp-bars i:last-child { background: linear-gradient(to top, rgba(201, 255, 79, 0.2), var(--signal)); box-shadow: 0 0 18px -4px rgba(201, 255, 79, 0.6); }

  .dp-rows { display: grid; gap: 1px; border-radius: 12px; background: var(--dp-line); box-shadow: 0 0 0 1px var(--dp-ring); overflow: hidden; }
  .dp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px; background: var(--dp-card); }
  .dp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .dp-av { display: block; width: 25px; height: 25px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #84cc16, #2dd4bf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .dp-row:nth-child(2) .dp-av { background: linear-gradient(140deg, #fb7185, #fbbf24); }
  .dp-row:nth-child(3) .dp-av { background: linear-gradient(140deg, #2dd4bf, #38bdf8); }
  .dp-row:nth-child(4) .dp-av { background: linear-gradient(140deg, #a3e635, #38bdf8); }
  .dp-who b { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: -0.004em; color: var(--dp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dp-who em { display: block; margin-top: 1px; font-style: normal; font-size: 10.5px; color: var(--dp-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dp-score { font-size: 11px; color: var(--dp-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dp-tag { min-width: 72px; text-align: center; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; background: rgba(201, 255, 79, 0.1); color: var(--signal); box-shadow: inset 0 0 0 1px rgba(201, 255, 79, 0.2); }
  .dp-tag.dp-risk { background: rgba(251, 146, 60, 0.12); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.25); }
  .dp-tag.dp-new { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25); }

  @media (max-width: 1080px) { .dp-app { grid-template-columns: 172px minmax(0, 1fr); } }
  @media (max-width: 960px)  { .dp-side { display: none; } .dp-app { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px)  { .dp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-score { display: none; } .dp-row { grid-template-columns: minmax(0, 1fr) auto; } }
  @media (max-width: 560px)  { .dp-stats { grid-template-columns: minmax(0, 1fr); } .dp-winbtns, .dp-chip { display: none; } }

  .hero-tail-space { height: 90px; }

  /* ================= Shared section scaffolding ================= */
  .section { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 120px 24px; }
  .section-on-ink { background: var(--ink); }
  .section-on-paper { background: var(--paper); }
  .section-full { position: relative; z-index: 1; }
  .section-full-inner { max-width: 1240px; margin: 0 auto; padding: 120px 24px; }

  /* block-level flex (not inline-flex): the eyebrow's height no longer depends on the font's
     internal metrics, so it is identical whichever font renders it (no cross-load differences) */
  .eyebrow {
    display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 18px;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--signal);
    margin: 8.5px 0 16px; /* reproduces the original inline layout (measured with Inter) exactly */
  }
  .eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--signal); }
  .eyebrow.on-paper { color: #4d7a3a; }

  .section-head { max-width: 620px; margin-bottom: 64px; }
  .section-title {
    font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em;
    font-size: clamp(28px, 3vw, 40px); line-height: 1.12; color: var(--text-hi); text-wrap: balance;
  }
  .section-title.on-paper { color: var(--ink-text); }
  .section-sub { font-size: 16px; line-height: 1.6; color: var(--text-mid); margin-top: 16px; max-width: 480px; }
  .section-sub.on-paper { color: var(--ink-text-mid); }

  /* ================= Logo strip ================= */
  .logo-strip-wrapper { padding: 44px 24px; border-top: 1px solid var(--ink-border); border-bottom: 1px solid var(--ink-border); }
  .logo-strip-inner { max-width: 1192px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
  .logo-strip-label {
    flex: 0 0 auto; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--text-low);
    letter-spacing: 0.01em; padding-right: 40px; border-right: 1px solid var(--ink-border); white-space: nowrap;
  }

  /* marquee: two identical lists side by side, the track slides by exactly one list
     width (-50%), so the loop restarts on a pixel-identical frame */
  .logo-marquee {
    --marquee-duration: 38s; --marquee-gap: 64px;
    flex: 1; min-width: 0; overflow: hidden;
    padding-block: 8px; margin-block: -8px; /* room for the blur so it isn't clipped */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  .logo-marquee-track { display: flex; width: max-content; animation: logo-marquee var(--marquee-duration) linear infinite; will-change: transform; }
  .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
  .logo-strip {
    display: flex; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap);
    margin: 0; list-style: none; flex-shrink: 0;
  }
  @keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Hover timing follows the common motion guidelines (Material motion, Apple HIG, NN/g):
     - hover intent: effects wait ~120ms so a cursor just passing over the strip
       (e.g. while scrolling the page) doesn't make it flicker
     - enter: short, decelerating (ease-out)
     - exit: faster than enter, no delay, accelerating (ease-in) */
  .logo-marquee {
    --hover-intent: 120ms;
    --enter-duration: 200ms; --enter-ease: cubic-bezier(0, 0, 0.2, 1);
    --exit-duration: 120ms;  --exit-ease: cubic-bezier(0.4, 0, 1, 1);
  }

  .logo-item {
    font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-low);
    letter-spacing: -0.01em; opacity: 0.7;
    /* exit: unblur quickly, no delay */
    transition: opacity var(--exit-duration) var(--exit-ease), filter var(--exit-duration) var(--exit-ease);
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
  }

  /* hover: one fixed caption centred over the strip; every logo softens behind it */
  .logo-marquee { position: relative; }
  .logo-marquee-caption {
    position: absolute; inset: 0; margin: 0; padding: 0 12%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--text-low); letter-spacing: -0.005em; /* same as .logo-strip-label */
    opacity: 0; pointer-events: none;
    /* exit: caption goes first and fastest, no delay */
    transition: opacity 90ms var(--exit-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    /* enter: after the intent delay, logos blur (leads) ... */
    .logo-marquee:hover .logo-item {
      filter: blur(3px); opacity: 0.3;
      transition: opacity var(--enter-duration) var(--enter-ease) var(--hover-intent),
                  filter var(--enter-duration) var(--enter-ease) var(--hover-intent);
    }
    /* ... and the caption follows a beat later: opacity only, no movement */
    .logo-marquee:hover .logo-marquee-caption {
      opacity: 1;
      transition: opacity 160ms var(--enter-ease) calc(var(--hover-intent) + 60ms);
    }
  }
  .logo-item .logo-mark { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }

  @media (max-width: 768px) {
    .logo-strip-inner { flex-direction: column; align-items: stretch; gap: 20px; }
    .logo-strip-label { flex: none; padding: 0; border: 0; text-align: center; }
    .logo-marquee { --marquee-duration: 30s; --marquee-gap: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation: none; width: auto; }
    .logo-marquee { -webkit-mask-image: none; mask-image: none; }
    .logo-marquee-track { width: 100%; }
    .logo-strip { flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 20px 36px; padding: 0; }
    .logo-strip[aria-hidden="true"] { display: none; }
  }

  /* ================= Features ================= */
  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-border); border: 1px solid var(--ink-border); border-radius: var(--radius-lg); overflow: hidden; }
  .feature-card { background: var(--ink); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; }
  .feature-icon-wrap {
    width: 44px; height: 44px; border-radius: 12px; background: var(--ink-raised);
    border: 1px solid var(--ink-border-strong); display: flex; align-items: center; justify-content: center;
    color: var(--signal); flex-shrink: 0;
  }
  .feature-icon-wrap svg { width: 20px; height: 20px; }
  .feature-title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-hi); letter-spacing: -0.01em; }
  .feature-desc { font-size: 14px; line-height: 1.65; color: var(--text-mid); }

  /* ================= How it works (numbered — real sequence) ================= */
  .steps-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
  .step-item { position: relative; }
  .step-num-row { display: flex; align-items: center; margin-bottom: 22px; }
  .step-num {
    width: 54px; height: 54px; border-radius: 50%; background: var(--ink-raised); border: 1px solid var(--ink-border-strong);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px;
    font-weight: 700; color: var(--signal); position: relative; z-index: 1; flex-shrink: 0;
  }
  /* connector runs edge-to-edge between this circle and the next one, so both gaps
     start their dash pattern fresh and line up symmetrically instead of one line
     cutting across the whole row */
  .step-item .step-num-row::after {
    content: ''; flex: 1; height: 1px; margin: 0 10px;
    background-image: linear-gradient(to right, var(--ink-border-strong) 50%, transparent 50%);
    background-size: 12px 1px; background-repeat: repeat-x;
  }
  .step-title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-hi); margin-bottom: 10px; letter-spacing: -0.01em; }
  .step-desc { font-size: 14.5px; line-height: 1.65; color: var(--text-mid); max-width: 320px; }

  /* ================= Testimonials ================= */
  /* --peek = free space between the content edge and the viewport edge (max 88px).
     The carousel bleeds out by that amount so the active card lines up exactly with
     the section heading, while the blurred neighbours sit in the page margin. */
  .testimonial-carousel {
    --peek: clamp(20px, calc((100vw - 1192px) / 2), 88px); --autoplay: 5s;
    position: relative; margin-inline: calc(var(--peek) * -1);
  }

  /* --- track & slides --- */
  .testimonial-viewport { position: relative; }
  .testimonial-track {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-inline: var(--peek); scroll-padding-inline: var(--peek); padding-block: 4px;
    overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab; outline: none; touch-action: pan-x pan-y;
    position: relative; /* offsetParent for the slides, so offsetLeft is track-relative */
  }
  .testimonial-track::-webkit-scrollbar { display: none; }
  .testimonial-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .testimonial-track.is-jumping, .testimonial-track.is-animating { scroll-behavior: auto; scroll-snap-type: none; }
  .testimonial-track.is-jumping .testimonial-panel { transition: none; }

  .testimonial-panel {
    position: relative; isolation: isolate; overflow: hidden;
    flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); align-items: stretch;
    background: var(--ink-raised); border: 1px solid var(--ink-border-strong); border-radius: var(--radius-lg);
    filter: blur(5px); opacity: 0.7; transform: scale(0.94); cursor: pointer;
    transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s var(--ease);
    will-change: transform, opacity, filter; /* own compositor layer: no repaint of the page while scrolling */
    backface-visibility: hidden;
  }
  /* soft signal glow in the corner gives the card depth without competing with the quote */
  .testimonial-panel::before {
    content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; right: -150px; top: -210px;
    background: radial-gradient(closest-side, rgba(201, 255, 79, 0.07), transparent);
    pointer-events: none;
  }
  /* neighbours shrink toward the active card, so their full peek stays visible and clickable */
  .testimonial-panel.is-prev { transform-origin: right center; }
  .testimonial-panel.is-next { transform-origin: left center; }
  .testimonial-panel.is-active { filter: none; opacity: 1; transform: none; cursor: inherit; }
  .testimonial-panel:not(.is-active):hover { opacity: 0.85; }
  .testimonial-track:focus-visible .testimonial-panel.is-active { border-color: var(--signal-line); box-shadow: 0 0 0 3px var(--signal-dim); }

  /* --- left: quote + author --- */
  .t-main { display: flex; flex-direction: column; gap: 20px; padding: 40px 44px 38px 48px; min-width: 0; }
  .t-quote-icon { width: 24px; height: 18px; color: var(--signal); flex-shrink: 0; }
  .testimonial-quote { margin: 0; }
  .testimonial-quote p {
    font-family: var(--font-heading); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 500;
    color: var(--text-hi); letter-spacing: -0.012em; text-wrap: pretty; max-width: 44ch; margin: 0;
  }
  .testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .testimonial-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: var(--ink); color: var(--signal); box-shadow: inset 0 0 0 1px var(--ink-border-strong);
    font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  }
  .t-author-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .testimonial-name { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
  .testimonial-role { font-size: 12.5px; color: var(--text-mid); }

  /* --- right: company + measurable outcome --- */
  .t-outcome {
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    padding: 40px 36px 38px; border-left: 1px solid var(--ink-border);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.015), transparent);
  }
  .t-company {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading);
    font-size: 15px; font-weight: 600; color: var(--text-hi); letter-spacing: -0.01em;
  }
  .t-company-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-dim); }
  .t-stat { display: flex; flex-direction: column; gap: 8px; margin: 0; }
  .t-stat-value {
    font-family: var(--font-heading); font-size: clamp(26px, 2.3vw, 34px); line-height: 1; font-weight: 600;
    color: var(--signal); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .t-stat-label { font-size: 12.5px; line-height: 1.5; color: var(--text-mid); max-width: 22ch; }

  /* --- edge fade over the blurred neighbours --- */
  .testimonial-edge {
    position: absolute; top: -48px; bottom: -48px; width: calc(var(--peek) + 12px);
    pointer-events: none; z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
  .testimonial-edge.is-left { left: 0; }
  .testimonial-edge.is-right { right: 0; transform: scaleX(-1); }
  .testimonial-edge::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right,
      rgba(10,14,18,.8) 0%, rgba(10,14,18,.64) 20%, rgba(10,14,18,.45) 40%,
      rgba(10,14,18,.26) 60%, rgba(10,14,18,.1) 80%, rgba(10,14,18,0) 100%);
  }

  /* --- controls: dots (24px hit area) --- */
  .testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
  .testimonial-dots { display: flex; align-items: center; }
  .testimonial-dot {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none;
    cursor: pointer; border-radius: 12px; transition: width 0.4s var(--ease);
  }
  .testimonial-dot.is-active { width: 44px; }
  .testimonial-dot-bar {
    position: relative; overflow: hidden; display: block; width: 8px; height: 8px; border-radius: 999px;
    background: var(--ink-border-strong); transition: width 0.4s var(--ease), background 0.3s var(--ease);
  }
  .testimonial-dot:hover .testimonial-dot-bar { background: var(--text-low); }
  .testimonial-dot.is-active .testimonial-dot-bar { width: 32px; background: var(--signal); }
  .testimonial-dot:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

  /* the active dot doubles as the autoplay progress bar; the JS advances the slide when
     this animation ends, so timer and visual can never drift apart */
  .testimonial-carousel.is-playing .testimonial-dot.is-active .testimonial-dot-bar { background: var(--signal-dim); }
  .testimonial-carousel.is-playing .testimonial-dot.is-active .testimonial-dot-bar::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--signal);
    transform-origin: left center; animation: testimonial-progress var(--autoplay) linear forwards;
  }
  .testimonial-carousel.is-playing.is-paused .testimonial-dot.is-active .testimonial-dot-bar::after { animation-play-state: paused; }
  @keyframes testimonial-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }


  @media (max-width: 1024px) {
    .testimonial-track { gap: 12px; }
    .testimonial-panel { grid-template-columns: 1fr; }
    .t-main { padding: 34px 32px 24px; }
    .t-outcome {
      flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
      padding: 22px 32px 30px; border-left: 0; border-top: 1px solid var(--ink-border); background: none;
    }
    .t-stat { align-items: flex-end; text-align: right; }
    .testimonial-quote p { max-width: none; }
  }
  @media (max-width: 640px) {
    .t-company { display: none; }
    .t-main { padding: 26px 22px 20px; gap: 16px; }
    .t-outcome { flex-direction: column; align-items: flex-start; padding: 20px 22px 24px; }
    .t-stat { align-items: flex-start; text-align: left; }
    .testimonial-quote p { font-size: 17px; }
    .testimonial-controls { gap: 12px; }
  }

  /* ================= Pricing ================= */
  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  /* one card style for all plans (dark, like the rest of the page); Growth is highlighted
     with a lime border and a soft glow instead of a different background */
  .price-card {
    position: relative; isolation: isolate;
    background: var(--ink-raised); border: 1px solid var(--ink-border-strong); border-radius: var(--radius-lg);
    padding: 32px 28px; display: flex; flex-direction: column;
  }
  .price-card.is-featured {
    border-color: var(--signal-line);
    background: linear-gradient(180deg, rgba(201, 255, 79, 0.07), rgba(201, 255, 79, 0) 55%), var(--ink-raised);
    box-shadow: 0 0 0 1px rgba(201, 255, 79, 0.12), 0 24px 60px -30px rgba(201, 255, 79, 0.35);
  }
  .price-card-tag {
    position: absolute; top: -13px; left: 28px; background: var(--signal); color: var(--ink);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 4px 11px; border-radius: var(--radius-full);
  }
  .price-plan-name { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--text-hi); margin-bottom: 6px; }
  .price-plan-desc { font-size: 13px; color: var(--text-low); margin-bottom: 24px; }
  .price-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 26px; }
  .price-figure { font-family: var(--font-heading); font-size: 40px; font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; }
  .price-period { font-size: 13px; color: var(--text-low); }
  .price-feature-list {
    list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; flex-grow: 1;
    padding-top: 24px; border-top: 1px solid var(--ink-border);
  }
  .price-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-mid); line-height: 1.4; }
  .price-feature-list svg { width: 15px; height: 15px; color: var(--signal); flex-shrink: 0; margin-top: 1px; }
  .btn-price {
    text-align: center; font-size: 14px; font-weight: 700; padding: 12px; border-radius: var(--radius-full);
    text-decoration: none; transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    border: 1px solid var(--ink-border-strong); color: var(--text-hi);
  }
  .btn-price:hover { border-color: var(--text-low); background: rgba(255, 255, 255, 0.03); }
  .btn-price:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .btn-price.is-solid { background: var(--signal); color: var(--ink); border-color: var(--signal); }
  .btn-price.is-solid:hover { background: #d7ff77; border-color: #d7ff77; }

  /* ================= Final CTA ================= */
  .final-cta-panel {
    background: linear-gradient(135deg, var(--ink-raised) 0%, var(--ink) 100%); border: 1px solid var(--ink-border-strong);
    border-radius: var(--radius-lg); padding: 80px 40px; text-align: center; position: relative; overflow: hidden;
  }
  .final-cta-title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; margin-bottom: 18px; text-wrap: balance; }
  .final-cta-sub { font-size: 16px; color: var(--text-mid); max-width: 460px; margin: 0 auto 34px; }
  .final-cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .final-cta-note { font-size: 12.5px; color: var(--text-low); margin-top: 22px; }

  /* ================= Demo video modal ================= */
  html.modal-open { overflow: hidden; }            /* page doesn't scroll behind the modal */
  html.modal-open body { padding-right: var(--scrollbar-comp, 0px); }  /* no shift when the scrollbar disappears */
  .video-modal {
    width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; border: 0; background: transparent; color: var(--text-hi); overflow: visible;
  }
  .video-modal::backdrop { background: rgba(5, 7, 10, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .video-modal[open] { animation: videoIn 0.22s cubic-bezier(0, 0, 0.2, 1); }
  .video-modal[open]::backdrop { animation: backdropIn 0.22s ease-out; }
  @keyframes videoIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
  .video-modal-inner {
    background: var(--ink-raised); border: 1px solid var(--ink-border-strong); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  }
  .video-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--ink-border); }
  .video-modal-title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
  .video-modal-close {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--ink-border-strong); color: var(--text-mid);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  }
  .video-modal-close:hover { color: var(--text-hi); border-color: var(--text-low); }
  .video-modal-close:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .video-modal-close svg { width: 16px; height: 16px; }
  .video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }  /* space reserved: no reflow when the video loads */
  .video-player { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
  .video-error { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 14px; color: var(--text-mid); background: #000; }
  .video-error[hidden] { display: none; }
  @media (max-width: 640px) {
    .video-modal { width: calc(100vw - 16px); }
    .video-modal-bar { padding: 8px 8px 8px 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .video-modal[open], .video-modal[open]::backdrop { animation: none; }
  }

  /* ================= FAQ: sticky intro on the left, accordion on the right ================= */
  .faq-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .faq-intro { position: sticky; top: 40px; }
  .faq-intro .section-head { margin-bottom: 32px; }

  .faq-support {
    padding: 22px 24px; border: 1px solid var(--ink-border); border-radius: var(--radius-md); background: var(--ink-raised);
    max-width: 380px;
  }
  .faq-support-title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text-hi); }
  .faq-support-text { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-low); }
  .faq-support-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    font-size: 13.5px; font-weight: 600; color: var(--signal); text-decoration: none;
  }
  .faq-support-link svg { width: 14px; height: 14px; transition: transform 0.18s var(--ease); }
  .faq-support-link:hover svg { transform: translateX(3px); }
  .faq-support-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

  /* hairline rows */
  /* dividers only between questions: no line above the first or below the last */
  .faq-item + .faq-item { border-top: 1px solid var(--ink-border); }
  .faq-item summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 4px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text-mid);
    transition: color 0.18s var(--ease);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover, .faq-item[open] summary { color: var(--text-hi); }
  .faq-item summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px; }

  /* bold + icon, rotates into a lime × when open */
  .faq-icon {
    flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--text-hi);
    transition: color 0.2s var(--ease);
  }
  /* SVG on whole-pixel coordinates: both arms identical and crisp at any zoom */
  .faq-icon svg { display: block; width: 16px; height: 16px; overflow: visible; }
  .faq-icon path { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease); }
  .faq-item summary:hover .faq-icon { color: var(--signal); }
  .faq-item[open] .faq-icon { color: var(--signal); }
  /* a + rotated into an × looks ~30% smaller (its arms become diagonal), so it is scaled up
     slightly to match optically; non-scaling-stroke keeps the line weight identical */
  .faq-item[open] .faq-icon path { transform: rotate(45deg) scale(1.15); }

  .faq-answer p { margin: 0; padding: 0 56px 24px 4px; font-size: 14.5px; line-height: 1.7; color: var(--text-mid); }

  /* smooth open/close where supported (Chrome 131+); elsewhere it simply toggles */
  @supports selector(::details-content) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 0.28s var(--ease), content-visibility 0.28s allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-item::details-content, .faq-icon, .faq-icon path { transition: none; }
  }

  @media (max-width: 1024px) {
    .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .faq-intro { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
    .faq-intro .section-head { margin-bottom: 0; }
  }
  @media (max-width: 640px) {
    .faq-intro { display: block; }
    .faq-intro .section-head { margin-bottom: 24px; }
    .faq-support { max-width: none; }
    .faq-item summary { padding: 18px 2px; font-size: 15px; gap: 16px; }
    .faq-answer p { padding: 0 8px 20px 2px; }
  }

  /* ================= Footer (structure referenced from the Apex template) ================= */
  .site-footer {
    position: relative; overflow: hidden;
    /* glow rising from the bottom edge, in the Saturn signal colour */
    background: radial-gradient(125% 125% at 50% 10%, var(--ink) 42%, rgba(201, 255, 79, 0.30) 100%);
  }
  .site-footer::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--ink-border); z-index: 2; pointer-events: none;
  }
  .footer-inner { max-width: 1192px; margin: 0 auto; padding: clamp(60px, 6.5vw, 76px) 24px 24px; }
  .site-footer a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

  .footer-grid {
    display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: start;
  }
  .footer-brand { min-width: 0; padding-right: clamp(8px, 2vw, 28px); }
  .footer-brand .brand-logo-text { margin: 0; }
  .footer-blurb { margin-top: 16px; max-width: 31ch; font-size: 13.5px; line-height: 1.65; color: var(--text-low); }

  .footer-social { list-style: none; display: flex; gap: 8px; margin-top: 22px; }
  .footer-social a {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--ink-border); border-radius: 8px; color: var(--text-low);
    transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
  }
  .footer-social a:hover { color: var(--text-hi); border-color: var(--ink-border-strong); background: var(--ink-raised); }
  .footer-social svg { width: 17px; height: 17px; }

  .footer-col { min-width: 0; }
  .footer-col-title { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-hi); letter-spacing: 0.01em; text-transform: uppercase; }
  .footer-links { list-style: none; margin-top: 17px; display: grid; gap: 11px; }
  .footer-links a {
    display: flex; width: fit-content; align-items: center; gap: 7px; min-height: 24px; /* block-level: font-independent row height */
    margin-top: 1.78px; /* keeps the original 36.78px row pitch */
    font-size: 13.5px; line-height: 1.45; color: var(--text-low); text-decoration: none; transition: color 0.16s var(--ease);
  }
  .footer-links a:hover { color: var(--text-hi); }
  .footer-new {
    display: inline-flex; align-items: center; height: 18px; padding: 2px 5px; border-radius: 3px;
    border: 1px solid rgba(201, 255, 79, 0.34); background: rgba(201, 255, 79, 0.08); color: var(--signal);
    font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.045em; text-transform: uppercase;
  }

  /* letter-spread signature: first letter starts at the left edge, last ends at the right */
  /* line-height 1 gives the capitals their full height (0.76 clipped their tops);
     the -0.12em margins cancel the extra 0.24em so the footer keeps its exact spacing */
  .footer-signature {
    margin-top: calc(clamp(44px, 5.5vw, 68px) - 0.12em); margin-bottom: -0.12em; width: 100%;
    /* one column per letter; size scales with the letter count (tuned so 7 letters = the original look) */
    --sig-count: 7;
    display: grid; grid-template-columns: repeat(var(--sig-count), minmax(0, 1fr)); align-items: end;
    font-family: var(--font-heading); font-weight: 700; line-height: 1; text-transform: uppercase;
    /* capped at 200px so short words don't overpower the footer */
    font-size: clamp(calc(308px / var(--sig-count)), calc(87.5vw / var(--sig-count)), min(calc(1232px / var(--sig-count)), 200px));
    color: var(--text-hi); opacity: 0.055; white-space: nowrap; user-select: none; pointer-events: none;
  }
  .footer-signature[hidden] { display: none; }
  .footer-signature span { justify-self: center; }
  .footer-signature span:first-child { justify-self: start; }
  .footer-signature span:last-child { justify-self: end; }

  .footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    margin-top: clamp(40px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--ink-border);
    font-size: 12.5px; color: var(--text-mid);
  }
  .footer-copy { margin: 0; }
  .footer-live { display: inline-flex; align-items: center; gap: 7px; color: var(--text-mid); text-decoration: none; transition: color 0.16s var(--ease); }
  .footer-live:hover { color: var(--text-hi); }
  .footer-live-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-dim); animation: footerLivePulse 2.4s var(--ease) infinite;
  }
  @keyframes footerLivePulse { 0%, 100% { box-shadow: 0 0 0 3px var(--signal-dim); } 50% { box-shadow: 0 0 0 6px rgba(201, 255, 79, 0); } }

  @media (max-width: 1040px) {
    .footer-grid { grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr)); column-gap: clamp(28px, 6vw, 54px); row-gap: 34px; }
    .footer-brand { grid-row: span 2; }
  }
  @media (max-width: 720px) {
    .footer-inner { padding-top: 50px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
    .footer-brand { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
    .footer-blurb { max-width: 42ch; }
    .footer-bottom { margin-top: 34px; gap: 12px 18px; }
  }
  @media (max-width: 480px) {
    .footer-links { margin-top: 12px; gap: 8px; }
    .footer-links a { min-height: 28px; font-size: 14px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 34px; }
  }
  @media (prefers-reduced-motion: reduce) { .footer-live-dot { animation: none; } }

  @media (max-width: 1024px) {
    .feature-grid { grid-template-columns: 1fr; }
    .steps-wrap { grid-template-columns: 1fr; gap: 36px; }
    .step-item .step-num-row::after { display: none; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  }

  @media (max-width: 768px) {
    .section { padding: 80px 20px; }
    .section-full-inner { padding: 80px 20px; }
    .section-head { margin-bottom: 40px; }
    .final-cta-panel { padding: 56px 24px; }
    .final-cta-actions { flex-direction: column; align-items: stretch; }
  }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .signal-graphic { display: none; }
  }

  @media (max-width: 768px) {
    .nav-links, .nav-cta-group { display: none; }
    .mobile-menu-btn { display: block; }
    .hero-section { padding: 18px 20px 0; }
    .hero-title { font-size: 34px; }
    .cta-group { flex-direction: column; align-items: stretch; }
    .btn-primary-hero, .btn-secondary-hero { width: 100%; justify-content: center; }
    .dashboard-preview-wrapper { margin-top: 44px; }
    .hero-tail-space { height: 50px; }
    .announcement-badge { max-width: calc(100vw - 48px); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
  }


  /* ============================================================
     Light edition — component refinements
     Everything above is driven by the palette tokens; the rules below cover what the tokens
     can't: hard-coded white-on-dark values, and lime used as text (now --accent).
     ============================================================ */

  /* ---------- Backdrop ---------- */
  .bg-grid {
    background-image:
      linear-gradient(rgba(13,20,14,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13,20,14,0.05) 1px, transparent 1px);
  }
  .bg-glow {
    top: -40px; left: 40%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(201,255,79,0.50) 0%, rgba(201,255,79,0.16) 42%, transparent 72%);
  }
  .hero-bg-fade { background: linear-gradient(to bottom, rgba(252,253,250,0) 0%, var(--ink) 100%); }

  /* ---------- Nav ---------- */
  .brand-logo-text .dot { box-shadow: 0 0 0 3px rgba(120,190,20,0.25), inset 0 0 0 1px rgba(58,101,10,0.45); }
  .btn-nav-ghost:hover { background-color: rgba(13,20,14,0.06); }
  .btn-nav-primary { color: #fff; background: var(--text-hi); }
  .btn-nav-primary:hover { background: #24331f; }
  .mobile-menu-overlay { background: rgba(252,253,250,0.97); }

  /* ---------- Hero ---------- */
  .announcement-badge { background: #fff; }
  .badge-pill { color: #0d140e; }
  .announcement-badge:hover .badge-arrow { color: var(--accent); }
  .hero-title em { color: inherit; }
  .btn-primary-hero { color: #fff; background: var(--text-hi); box-shadow: none; }
  .btn-primary-hero:hover { background: #24331f; box-shadow: 0 12px 26px -10px rgba(13,20,14,0.5); }
  .btn-secondary-hero:hover { border-color: rgba(13,20,14,0.35); background: rgba(13,20,14,0.03); }
  .btn-video-play { color: #0d140e; box-shadow: 0 0 0 0 rgba(120,190,20,0.35); }
  .btn-video:hover .btn-video-play, .btn-video:focus-visible .btn-video-play { box-shadow: 0 0 0 6px rgba(120,190,20,0.18); }
  .avatar-img { background: #eef4e6; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(13,20,14,0.10); }
  .trust-stars { color: var(--accent); }

  /* the glass cube is the one big moment on the page: a little larger, with a soft floor shadow */
  .signal-graphic { max-width: 500px; }
  /* room under the cube for its floor shadow (desktop; the mobile layout has its own spacing) */
  @media (min-width: 1025px) { .dashboard-preview-wrapper { margin-top: 118px; } }

  /* SVG fallback (no WebGL) */
  .signal-edge { stroke: rgba(13,20,14,0.16); }
  .signal-node { fill: #fff; }
  .signal-node.is-hot { stroke: rgba(58,101,10,0.5); stroke-width: 1; }
  .signal-pulse { stroke: #5c9a05; }

  /* ---------- Product preview (light) ---------- */
  .dashboard-preview-wrapper {
    --dp-line: rgba(13,20,14,0.07); --dp-card: #ffffff; --dp-ring: rgba(13,20,14,0.09);
  }
  .dp-frame {
    border-color: rgba(13,20,14,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)), var(--ink);
    box-shadow: 0 40px 80px -40px rgba(13,20,14,0.35), 0 1px 0 rgba(255,255,255,0.9) inset;
  }
  .dp-dots i { background: rgba(13,20,14,0.16); }
  .dp-url { border-color: rgba(13,20,14,0.08); background: rgba(255,255,255,0.75); }
  .dp-winbtns i { background: rgba(13,20,14,0.14); }
  .dp-app { background: #fff; }
  .dp-side { background: #f4f7f0; }
  .dp-mark { background: #fff; box-shadow: inset 0 0 0 1px rgba(13,20,14,0.12); }
  .dp-mark::after { box-shadow: 0 0 6px 1px rgba(120,190,20,0.55); }
  .dp-nav i { background: rgba(13,20,14,0.22); }
  .dp-nav li.dp-on { background: #fff; }
  .dp-stat small { color: var(--accent); }
  .dp-bars { background-image: repeating-linear-gradient(to top, rgba(13,20,14,0.06) 0 1px, transparent 1px 25%); }
  .dp-bars i {
    background: linear-gradient(to top, rgba(132,204,22,0.12), rgba(132,204,22,0.75));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .dp-bars i:nth-child(3n+1) { background: linear-gradient(to top, rgba(20,184,166,0.12), rgba(20,184,166,0.7)); }
  .dp-bars i:nth-child(3n+2) { background: linear-gradient(to top, rgba(14,165,233,0.12), rgba(14,165,233,0.7)); }
  .dp-bars i:last-child { background: linear-gradient(to top, rgba(160,230,40,0.3), #b2ee2a); box-shadow: 0 0 18px -4px rgba(120,190,20,0.7); }
  .dp-tag { background: rgba(132,204,22,0.16); color: #3f6a08; box-shadow: inset 0 0 0 1px rgba(100,160,10,0.28); }
  .dp-tag.dp-risk { background: rgba(251,146,60,0.14); color: #b45309; box-shadow: inset 0 0 0 1px rgba(234,88,12,0.26); }
  .dp-tag.dp-new { background: rgba(56,189,248,0.14); color: #0369a1; box-shadow: inset 0 0 0 1px rgba(2,132,199,0.26); }

  /* ---------- Sections ---------- */
  .eyebrow { color: var(--accent); }
  .eyebrow::before { background: var(--accent); }

  .feature-card { background: var(--ink-raised); }
  .feature-icon-wrap { color: var(--accent); background: #f4f7f0; }
  .step-num { color: var(--accent); background: #fff; }

  /* no large drop shadow here: the track scrolls (overflow clips), so it would show up as a hard grey band under the cards */
  .testimonial-panel { box-shadow: 0 1px 2px rgba(13,20,14,0.04); }
  .testimonial-panel::before { background: radial-gradient(closest-side, rgba(201,255,79,0.30), transparent); }
  .t-quote-icon, .testimonial-avatar, .t-stat-value { color: var(--accent); }
  .t-company-mark { box-shadow: 0 0 0 4px rgba(120,190,20,0.22); }
  .t-outcome { background: linear-gradient(to bottom, rgba(13,20,14,0.02), transparent); }
  .testimonial-edge::after {
    background: linear-gradient(to right,
      rgba(252,253,250,.85) 0%, rgba(252,253,250,.68) 20%, rgba(252,253,250,.48) 40%,
      rgba(252,253,250,.28) 60%, rgba(252,253,250,.10) 80%, rgba(252,253,250,0) 100%);
  }
  .testimonial-dot.is-active .testimonial-dot-bar { background: var(--accent); }
  .testimonial-carousel.is-playing .testimonial-dot.is-active .testimonial-dot-bar { background: rgba(58,101,10,0.2); }
  .testimonial-carousel.is-playing .testimonial-dot.is-active .testimonial-dot-bar::after { background: var(--accent); }

  .price-card { box-shadow: 0 24px 50px -40px rgba(13,20,14,0.35); }
  .price-card.is-featured {
    border-color: rgba(80,130,10,0.55);
    background: linear-gradient(180deg, rgba(201,255,79,0.30), rgba(201,255,79,0) 55%), var(--ink-raised);
    box-shadow: 0 0 0 1px rgba(100,160,10,0.14), 0 28px 60px -30px rgba(100,160,10,0.5);
  }
  .price-card-tag { color: #0d140e; }
  .price-feature-list svg { color: var(--accent); }
  .btn-price:hover { background: rgba(13,20,14,0.03); }
  .btn-price.is-solid { background: var(--text-hi); color: #fff; border-color: var(--text-hi); }
  .btn-price.is-solid:hover { background: #24331f; border-color: #24331f; }

  .final-cta-panel {
    background:
      radial-gradient(60% 95% at 88% 125%, rgba(201,255,79,0.60), transparent 70%),
      linear-gradient(135deg, #ffffff 0%, var(--ink) 100%);
    box-shadow: 0 30px 60px -44px rgba(13,20,14,0.3);
  }

  .faq-support { background: #fff; }
  .faq-support-link, .faq-item summary:hover .faq-icon, .faq-item[open] .faq-icon { color: var(--accent); }

  /* ---------- Footer ---------- */
  .site-footer { background: radial-gradient(125% 125% at 50% 10%, var(--ink) 42%, rgba(201, 255, 79, 0.45) 100%); }
  .footer-social a:hover { background: #fff; }
  .footer-new { color: var(--accent); border-color: rgba(58,101,10,0.35); background: rgba(201,255,79,0.28); }
  .footer-signature { opacity: 0.07; }
  .footer-live-dot { background: #6cc20a; box-shadow: 0 0 0 3px rgba(108,194,10,0.22); }

  /* ---------- Demo video modal stays dark (it frames a video) ---------- */
  .video-modal {
    --ink-raised: #12171d; --ink-border: rgba(255,255,255,0.08); --ink-border-strong: rgba(255,255,255,0.14);
    --text-hi: #f4f2ea; --text-mid: #a7b0ba; --text-low: #8a949e; --signal: #c9ff4f;
    color: #f4f2ea;
  }

  /* ---------- Small screens: keep the cube (it was hidden below 1024px) ---------- */
  @media (max-width: 1024px) {
    .signal-graphic { display: block; max-width: 300px; margin: 4px auto 0; }
    .dashboard-preview-wrapper { margin-top: 108px; } /* room for the cube's floor shadow */
    /* the canvas is deliberately larger than its box; keep that spare room from widening the page */
    .hero-section { overflow-x: clip; }
  }