/* ─── Tokens ─── */
  :root {
    --bg:        #0A0B0F;
    --bg-2:      #111318;
    --bg-3:      #161820;
    --border:    #1E2028;
    --border-2:  #2A2D38;
    --accent:    #00C8FF;
    --accent-dim:#005F78;
    --text-1:    #F0F2F5;
    --text-2:    #9AA3B2;
    --text-3:    #7D8596;
    --green:     #23C97A;
    --radius:    8px;
    --font-ui: 'Segoe UI Variable Text', -apple-system, 'Segoe UI', Roboto, Inter, system-ui, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  }

  /* Single-theme dark page */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-inline: 0;
    padding-block: 0;
    overflow-x: hidden;
  }

  /* ─── Nav ─── */
  /* The logo and the "Get Klid" button stay pinned to the top while the page scrolls. Over the
     hero there is no bar behind them (transparent, so the scene is unobstructed); once the hero
     has scrolled out from under the nav it gets a solid dark background (nav.solid, set by
     site.js). Solid rather than blurred on purpose: an earlier blurred bar put a backdrop-filter
     over live, repainting content, which re-blurs every frame.
     While transparent, the nav box takes no clicks, so only the logo and the links are hit targets
     and the hero scene underneath stays playable right up to them. */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10,11,15,0);
    border-bottom: 1px solid transparent;
    /* The safe-area inset is padding, not an offset, so the bar's background reaches the very top
       of a notched screen instead of leaving a gap above it. */
    padding: env(safe-area-inset-top, 0px) 24px 0;
    pointer-events: none;
    transition: background-color 0.25s, border-color 0.25s;
  }
  nav .nav-logo, nav .nav-links { pointer-events: auto; }
  nav .nav-logo svg { filter: drop-shadow(0 1px 8px rgba(2,3,10,0.9)); }
  nav .nav-links a:not(.nav-cta) { text-shadow: 0 1px 14px rgba(2,3,10,0.85); }

  /* Once the page has scrolled, the three text links fade away and only the logo and the button
     remain: with no bar behind them the links would sit on top of page content and collide with
     it. (Set by site.js.) */
  nav .nav-links li:not(:last-child) { transition: opacity 0.25s; }
  nav.scrolled .nav-links li:not(:last-child) { opacity: 0; pointer-events: none; }

  /* Past the hero: a solid dark bar. It is a real surface now, so it takes clicks instead of
     letting them fall through to the content behind it. */
  nav.solid {
    background: rgba(10,11,15,0.96);
    border-bottom-color: var(--border);
    pointer-events: auto;
  }

  .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 16px;
  }

  .nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .nav-logo svg {
    height: 22px;
    width: auto;
    display: block;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
  }

  .nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 0.15s;
  }

  .nav-links a:hover { color: var(--text-1); }

  .nav-cta {
    background: var(--accent);
    color: #000 !important;
    font-weight: 600 !important;
    /* Measured from rendered pixels at 100%, 125%, 150% and 200% display scaling (text is snapped to whole screen
       pixels, so one scaling is not enough): with 6px / 6px the text's centre of mass sat 1.0-1.5px LOW at every
       scaling; 5.25 / 6.75 still left 1.5px at 125%. 4.75px / 7.25px keeps it within 0.3px of centre at all four. */
    padding: 4.75px 16px 7.25px;
    border-radius: var(--radius);
    font-size: 13px !important;
    transition: opacity 0.15s !important;
  }

  .nav-cta:hover { opacity: 0.85 !important; }

  /* ─── Section wrapper ─── */
  .section {
    padding: 96px 24px;
  }

  .section-inner {
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ─── Hero — full-bleed app aesthetic ─── */
  #hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    /* Height: tall enough for the piano to show at bottom */
    min-height: min(92vh, 780px);
    min-height: min(92svh, 780px);
    display: flex;
    flex-direction: column;
  }

  /* The live scene fills the entire hero; the poster is a frame of the same renderer
     and shows until the scene has settled (or if WebGL is unavailable). */
  .scene-poster,
  .scene-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .scene-poster { z-index: 0; }
  .scene-poster img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center bottom; }
  .scene-canvas { z-index: 0; opacity: 0; }
  [data-state="live"] > .scene-canvas { opacity: 1; }
  /* Instant swap, no fade: a fade would show the scene half-settled underneath. */
  [data-state="live"] .scene-poster,
  [data-state="poster"] .scene-canvas { display: none; }

  /* Subtle vignette so copy reads cleanly */
  #hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      /* a soft pool of shade behind the copy: where a bright patch of the picture sat behind the small
         eyebrow and the sub-headline, their contrast measured as low as 2.4:1 and 3.3:1 against the
         brightest pixels (WCAG wants 4.5:1). Measured over the real hero frame, not guessed. */
      radial-gradient(ellipse 58% 46% at 50% 40%, rgba(5,7,16,0.42) 0%, transparent 100%),
      /* left edge darkening */
      linear-gradient(to right, rgba(5,7,16,0.4) 0%, transparent 40%),
      /* right edge */
      linear-gradient(to left, rgba(5,7,16,0.25) 0%, transparent 40%),
      /* bottom — just enough to ground the copy block; the piano keys
         below it stay fully visible rather than getting crushed by the
         scrim (this used to fade in over 45% of the hero, dark enough to
         wash out the keyboard entirely) */
      linear-gradient(to top, rgba(5,7,16,0.35) 0%, transparent 16%);
  }

  /* Copy block — centered in the upper portion */
  .hero-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px 160px; /* bottom pad keeps copy above the piano */
    /* This block covers the whole hero, and the piano is underneath it: let clicks and
       touches fall through to the canvas, and give them back only to the real controls. */
    pointer-events: none;
  }
  .hero-inner a, .hero-inner button, .hero-inner input, .hero-inner form { pointer-events: auto; }

  /* The keys are playable. pan-y keeps vertical page scrolling working when a finger starts
     on the scene; a horizontal drag across the keys is a glissando. */
  .scene-canvas { touch-action: pan-y; cursor: pointer; }

  .play-hint {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    /* The keyboard is as wide as the frame, so its height scales with the frame's width. */
    /* The floor covers portrait, where the framing lifts the keyboard further off the edge. */
    bottom: max(76px, calc(min(6vw, 112px) + 44px));
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200,215,235,0.75);
    background: rgba(8,10,18,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 6px 14px;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.4s;
  }
  .play-hint.gone { opacity: 0; }
  [data-state="loading"] .play-hint, [data-state="poster"] .play-hint { display: none; }

  .hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
  }

  .hero-eyebrow::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent);
  }
  .hero-eyebrow::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent);
  }

  h1 {
    font-size: clamp(36px, 5.5vw, 62px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 18px;
    text-wrap: balance;
    text-shadow: 0 2px 32px rgba(0,0,0,0.6);
  }

  .hero-sub {
    font-size: 16px;
    color: rgba(200,210,225,0.85);
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 36px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  }

  /* Email capture */
  .email-form {
    display: flex;
    gap: 8px;
    max-width: 420px;
    width: 100%;
  }

  .email-form input {
    flex: 1;
    /* No backdrop-filter: it sat over the live canvas and re-blurred every frame. A slightly
       more opaque fill gives the same read. */
    background: rgba(10,12,22,0.88);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: 14px;
    padding: 11px 14px;
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
  }

  .email-form input::placeholder { color: rgba(150,160,180,0.7); }
  /* The border alone (1px, from 15% white to cyan) was a faint cue; the ring makes the focused box unmistakable. */
  .email-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,200,255,0.30); }

  .btn-primary {
    background: var(--accent);
    color: #000;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    /* Optical centring, measured from rendered pixels (screenshot each button, find the ink, compare the gap
       above with the gap below). Segoe UI Variable's lowercase sits low against its capitals, so centring the
       capitals leaves the words looking low, and centring the lowercase leaves the capitals looking high.
       10px above and 12px below splits it: caps 0.8px high, lowercase body 0.5px high, whole word with its
       descenders (the y in "free", the g in "suggestion") 0.9px low. Equal 11px/11px was capitals centred but
       the descender words about 2px low; 9px/13px (an earlier guess) put the capitals 1.8px high. */
    padding: 10px 22px 12px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
  }

  .btn-primary:hover { opacity: 0.85; }
  a.btn-primary { display: inline-block; text-decoration: none; line-height: 1.4; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* About */
  .about-inner { max-width: 640px; }
  .about-text { font-size: 16px; line-height: 1.75; color: var(--text-2); margin: 0 0 16px; max-width: 60ch; }
  .about-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; }
  .about-links a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--accent); text-decoration: none; }
  .about-links a:hover { text-decoration: underline; }

  /* Hero: the main action opens the app; the e-mail box under it is for updates. */
  .hero-or { margin: 22px 0 12px; font-size: 13px; color: rgba(190,198,212,0.85); text-shadow: 0 1px 12px rgba(2,3,10,0.85); }
  .btn-quiet {
    background: rgba(255,255,255,0.06);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px 12px; /* same optical split as .btn-primary, see there */
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .btn-quiet:hover { background: rgba(255,255,255,0.12); }
  .btn-quiet:disabled { opacity: 0.6; cursor: default; }

  .form-note {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(150,160,180,0.65);
  }

  /* Scroll hint at bottom */
  .hero-scroll-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(150,170,190,0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .panel-tab {
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    border-right: 1px solid var(--border);
    cursor: default;
    white-space: nowrap;
    letter-spacing: 0.05em;
  }

  .panel-tab.active {
    color: var(--accent);
    background: rgba(0,200,255,0.06);
  }

  /* ─── Proof strip ─── */
  #proof {
    padding: 28px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
  }

  .proof-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 13px;
  }

  .proof-item svg {
    color: var(--accent);
    flex-shrink: 0;
  }

  .proof-sep {
    width: 1px;
    height: 16px;
    background: var(--border-2);
  }

  /* ─── Feature section ─── */
  .section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }

  .section-heading {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .section-body {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 48px;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }

  .feature-card {
    background: var(--bg-2);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.15s;
  }

  .feature-card:hover { background: var(--bg-3); }

  .feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0,200,255,0.08);
    border: 1px solid rgba(0,200,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  .feature-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
  }

  .feature-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
  }

  /* ─── Live demo / preview section ─── */
  #demo {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
  }

  .demo-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 96px 24px;
  }

  .demo-screen {
    border: 1px solid var(--border-2);
    border-radius: 12px;
    overflow: hidden;
    background: #060810;
  }

  .demo-screen-bar {
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .demo-screen-bar span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--border-2);
    display: block;
  }

  .demo-screen { justify-self: center; width: 100%; max-width: 360px; }
  .demo-screen-canvas-wrap {
    position: relative;
    aspect-ratio: 9 / 16;
    width: 100%;
    background: #060810;
    overflow: hidden;
  }
  /* The wrap is exactly 9:16 and so is the video, so cover crops nothing and stretches
     nothing. */
  .demo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #060810;
  }
  .demo-screen-label { z-index: 2; }

  .sound-btn {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    font: 500 12px/1 var(--font-ui);
    color: var(--text-1);
    background: rgba(8,10,18,0.72);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .sound-btn:hover { background: rgba(8,10,18,0.9); border-color: rgba(255,255,255,0.3); }
  /* Muted: show the slashed speaker. Sound on: show the waves. */
  .sound-btn[aria-pressed="false"] .sound-waves,
  .sound-btn[aria-pressed="true"] .sound-mute { display: none; }
  .sound-btn[hidden] { display: none; }

  .demo-screen-label {
    position: absolute;
    top: 8px;
    font: 10px var(--font-mono);
    color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.55);
    padding: 4px 8px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
    letter-spacing: 0.02em;
  }
  .demo-screen-label-left { left: 8px; }
  .demo-screen-label-right { right: 8px; color: #00C8FF; }

  .demo-content { }

  .demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(35,201,122,0.1);
    border: 1px solid rgba(35,201,122,0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--green);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }

  .demo-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-green 2s infinite;
  }

  @keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .demo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
  }

  .demo-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-2);
  }

  .demo-list li svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

  /* ─── Unique features ─── */
  #unique {
    border-bottom: 1px solid var(--border);
  }

  .unique-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }

  .unique-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    background: var(--bg-2);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .unique-card:hover { border-color: var(--border-2); }

  .unique-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .unique-card:hover::before { opacity: 1; }

  .unique-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
  }

  .unique-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 8px;
  }

  .unique-desc {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.65;
  }

  .unique-tag {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(0,200,255,0.07);
    border: 1px solid rgba(0,200,255,0.15);
    padding: 3px 9px;
    border-radius: 4px;
  }

  /* ─── Comparison table ─── */
  .compare-wrap {
    overflow-x: auto;
    margin-top: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .table-note {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
  }
  .table-note a { color: var(--accent); }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 740px;
  }

  thead tr th {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
  }

  thead tr th.highlight {
    color: var(--accent);
    background: rgba(0,200,255,0.05);
  }

  tbody tr td {
    padding: 13px 16px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }

  tbody tr:last-child td { border-bottom: none; }

  tbody tr td:first-child { color: var(--text-1); font-weight: 500; }

  tbody tr td.highlight {
    background: rgba(0,200,255,0.03);
    color: var(--text-1);
    font-weight: 500;
  }

  .check { color: var(--accent); }
  .cross { color: var(--text-3); }

  tbody tr:hover td { background: rgba(255,255,255,0.015); }
  tbody tr:hover td.highlight { background: rgba(0,200,255,0.06); }

  /* ─── Pricing ─── */
  #pricing {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 48px auto 0;
  }

  .plan-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    background: var(--bg-3);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    transition: border-color 0.2s;
  }

  .plan-card.pro {
    border-color: var(--accent);
    background: rgba(0,200,255,0.04);
  }

  .plan-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
  }

  .plan-name {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
  }

  .plan-price {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-1);
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
    gap: 2px;
  }

  .plan-price sup {
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
  }

  .plan-price-note {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 24px;
    font-family: var(--font-mono);
  }

  .plan-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 20px;
  }

  .plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    flex: 1;
  }

  .plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-2);
  }

  .plan-features li svg { flex-shrink: 0; }

  .plan-features li.dim { color: var(--text-3); }

  .btn-plan {
    display: block;
    line-height: normal;
    text-decoration: none;
    width: 100%;
    /* Same optical split as .btn-primary (see there): 1px of the 22 moved from below to above. */
    padding: 10px 11px 12px;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    text-align: center;
  }

  .btn-plan-free {
    background: transparent;
    border: 1px solid var(--border-2) !important;
    color: var(--text-1);
  }

  .btn-plan-free:hover { border-color: var(--text-2) !important; }

  .btn-plan-pro {
    background: var(--accent);
    color: #000;
  }

  .btn-plan-pro:hover { opacity: 0.88; }

  /* ─── Footer ─── */
  footer {
    padding: 40px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }

  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .footer-copy {
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--font-mono);
  }

  .footer-links {
    display: flex;
    gap: 20px;
    list-style: none;
  }

  .footer-links a {
    font-size: 12px;
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.15s;
  }

  .footer-links a:hover { color: var(--text-2); }

  /* ─── Toast ─── */
  #toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--text-1);
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.2s;
    pointer-events: none;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #toast.show {
    transform: translateY(0);
    opacity: 1;
  }

  #toast .toast-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
  }

  /* ─── Responsive ─── */
  @media (max-width: 860px) {
    .features-grid { grid-template-columns: 1fr 1fr; }
    .demo-inner { grid-template-columns: 1fr; gap: 40px; }
    .unique-grid { grid-template-columns: 1fr 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  }

  @media (max-width: 580px) {
    .features-grid { grid-template-columns: 1fr; }
    .unique-grid { grid-template-columns: 1fr; }
    /* Phones drop the text links but keep the button: it is one of the two pinned things. */
    .nav-links li:not(:last-child) { display: none; }
    .email-form { flex-direction: column; }
    .proof-inner { gap: 16px; }
    .proof-sep { display: none; }
  }

  /* ─── Reduced motion ─── */
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }


/* ─── Accessibility ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 100;
  padding: 10px 16px;
  font: 600 14px/1 var(--font-ui);
  color: #0A0B0F;
  background: #F0F2F5;
  border-radius: 6px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pause controls for the looping picture: the hero, and the example video. */
.motion-btn {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 12px;
  padding: 7px 12px;
  font: 500 12px/1 var(--font-ui);
  color: var(--text-1);
  background: rgba(8,10,18,0.72);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.motion-btn:hover { background: rgba(8,10,18,0.9); border-color: rgba(255,255,255,0.3); }
.motion-btn[hidden],
[data-state="loading"] .motion-btn,
[data-state="poster"] .motion-btn { display: none; }
.sound-btn.pause-btn { right: auto; left: 10px; }

/* ─── Made with Klid: real exports, played on request ─── */
/* ── Gallery: a card coverflow ──
   Without JavaScript the cards simply wrap in a row. With it (.has-fan) they stack in the middle of the stage and
   data-pos (0 = in view, -1 and 1 = either side, 2 = waiting behind) decides where each one sits. */
.gallery { --card-w: min(300px, 66vw); --step: min(calc(var(--card-w) * 0.68), 24vw); max-width: 1000px; margin: 40px auto 0; }
.gallery-stage { position: relative; }
.showcase-grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; padding: 0; }
.showcase-card {
  width: min(300px, 90vw);
  padding: 10px 10px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.has-fan .showcase-grid { display: block; position: relative; height: calc(var(--card-w) * 16 / 9 + 112px); }
.has-fan .showcase-card {
  position: absolute; left: 50%; top: 10px;
  width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.4s ease, filter 0.4s ease;
  will-change: transform;
}
.has-fan .showcase-card[data-pos="0"] { z-index: 10; transform: none; opacity: 1; filter: none; }
.has-fan .showcase-card[data-pos="-1"] { z-index: 5; transform: translateX(calc(var(--step) * -1)) scale(0.86); opacity: 0.85; filter: brightness(0.55); cursor: pointer; }
.has-fan .showcase-card[data-pos="1"] { z-index: 5; transform: translateX(var(--step)) scale(0.86); opacity: 0.85; filter: brightness(0.55); cursor: pointer; }
.has-fan .showcase-card[data-pos="2"] { z-index: 2; transform: translateX(calc(var(--step) * 1.55)) scale(0.74); opacity: 0.7; filter: brightness(0.4); cursor: pointer; }
.has-fan .showcase-card[data-pos="-2"] { z-index: 2; transform: translateX(calc(var(--step) * -1.55)) scale(0.74); opacity: 0.7; filter: brightness(0.4); cursor: pointer; }
/* With more than five cards the rest wait out of sight. */
.has-fan .showcase-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]):not([data-pos="2"]):not([data-pos="-2"]) { z-index: 0; transform: scale(0.6); opacity: 0; pointer-events: none; }
.showcase-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: var(--bg-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
/* The exports are exactly 9:16, so cover never has anything to crop; it only guards the box. */
.showcase-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
}
.showcase-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--text-1);
  background: rgba(8, 10, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, background 0.15s, transform 0.15s;
}
.showcase-play:hover { background: rgba(8, 10, 18, 0.82); transform: translate(-50%, -50%) scale(1.06); }
.showcase-play .ico-pause,
.showcase-play[aria-pressed="true"] .ico-play { display: none; }
.showcase-play[aria-pressed="true"] .ico-pause { display: inline; }
/* While a clip plays the button steps back so the picture is clear; hover or focus brings it back. */
.showcase-frame.is-playing .showcase-play { opacity: 0; }
.showcase-frame.is-playing:hover .showcase-play,
.showcase-frame.is-playing .showcase-play:focus-visible { opacity: 1; }
.showcase-title {
  margin-top: 12px;
  text-align: center;
  font: 500 14px/1.3 var(--font-ui);
  color: var(--text-1);
}
.showcase-by { margin-top: 3px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--text-3); }
.showcase-links { display: flex; justify-content: center; gap: 4px; margin-top: 6px; min-height: 36px; }
.icon-link {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  color: var(--text-3); border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.icon-link:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.06); }
.gallery-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.gallery-nav {
  position: absolute; z-index: 20; top: calc(var(--card-w) * 16 / 18 + 10px); margin-top: -22px;
  display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--text-1); background: rgba(20, 22, 30, 0.78); border: 1px solid var(--border-2); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: background 0.15s, border-color 0.15s;
}
.has-fan .gallery-nav { display: grid; }
#galleryPrev { left: 4px; }
#galleryNext { right: 4px; }
.gallery-nav:hover { background: rgba(40, 44, 58, 0.92); border-color: rgba(255, 255, 255, 0.3); }
.gallery-dots { display: none; align-items: center; justify-content: center; }
.has-fan .gallery-dots { display: flex; }
.gallery-dot { display: grid; place-items: center; width: 24px; height: 24px; background: none; border: 0; cursor: pointer; padding: 0; }
.gallery-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.2s, transform 0.2s; }
.gallery-dot[aria-current="true"]::before { background: var(--accent); transform: scale(1.3); }
/* Said aloud ("2 of 4") but not shown: the dots show it. */
.gallery-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gallery-follow { margin: 18px 0 0; text-align: center; font-size: 13px; }
.gallery-follow a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-2); text-decoration: none; border-radius: 8px; }
.gallery-follow a:hover { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) { .has-fan .showcase-card, .gallery-nav, .icon-link, .gallery-dot::before { transition: none; } }

/* The spam-trap field in the signup forms: off-screen, not display:none, because bots skip the latter. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* The side cards reach past a phone's edge: clip them (clip, unlike hidden, adds no scroll box and keeps shadows below). */
.has-fan .gallery-stage { overflow-x: clip; }