/* ==========================================================================
     sa.adapt — stylesheet
     Structure: fonts/vars -> reset -> hero -> shared diagram components
     -> page sections (how it works / use cases / proof / waitlist)
     -> top nav -> responsive rules are kept inline near what they affect
     ========================================================================== */

  /* ==========================================================================
     Fonts & theme variables
     ========================================================================== */
  @font-face {
    font-family: "Space Grotesk";
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    src: url("../assets/fonts/space-grotesk.woff2") format("woff2");
  }
  @font-face {
    font-family: "Archivo";
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    src: url("../assets/fonts/archivo.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Mono";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Mono";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  }

  :root {
    --bg-1: #f1f2ec;
    --bg-2: #e7e8e0;
    --card: #ffffff;
    --card-border: rgba(13, 23, 21, 0.1);
    --ink: #0d1715;
    --ink-soft: #4b5850;
    --ink-faint: #8b9389;
    --accent: #8aa67a;
    --accent-soft: #dde5d2;
    --pill-bg: #dde5d2;
    --pill-ink: #0d1715;
    --shadow: 0 30px 60px -20px rgba(13, 23, 21, 0.18), 0 8px 20px -8px rgba(13, 23, 21, 0.1);
    --gold: #d79b3b;
    --blue: #3d8cec;
    --blue-soft: #cfe4ff;
    --glow: #5fa8ff;
    --dark: #0b1016;
    --dark-2: #17222c;
    --mono: 'IBM Plex Mono', monospace;
    --tint-works: #ffffff;
    --tint-cases: #f1f2ec;
    --tint-cta: #ffffff;
    --grid-line: rgba(13, 23, 21, 0.05);
  }

  /* The page authors its own light/dark rhythm (dark hero + footer
     bookending light content sections) via the scoped overrides below —
     it deliberately does not also re-theme itself for the visitor's OS/
     browser color-scheme preference, which would fight that design and
     silently swap in an entirely different, unmaintained palette. */

  /* ==========================================================================
     Global reset & base
     ========================================================================== */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  body {
    background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
    font-family: -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
  }

  /* ==========================================================================
     Hero
     ========================================================================== */

  /* the page opens dark — one deliberate panel before it settles into
     white/off-white for the body, then closes dark again at the footer.
     Local variable overrides so hero text, the hero-word box and the
     cable/hardware figure all flip without touching markup. */
  .hero {
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 88px 24px 24px;
    position: relative;
    background-color: #0d1715;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    --bg-1: #0d1715;
    --bg-2: #142320;
    --ink: #f1f2ec;
    --ink-soft: #c3d0b7;
    --ink-faint: #7e8f79;
    --card: #17231f;
    --card-border: rgba(241, 242, 236, 0.14);
    --accent-soft: rgba(138, 166, 122, 0.18);
    --grid-line: rgba(241, 242, 236, 0.06);
  }

  /* absolutely positioned and bottom-pinned so every section's "next page"
     cue sits at the exact same spot regardless of how tall that section's
     own content is — the whole point is a consistent rhythm scrolling
     from section to section */
  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ink-faint);
    text-decoration: none;
    font-size: 0.81rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 10px;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  /* a visible, deliberate hover state — this is a button in disguise as a
     scroll cue, so it should say so once someone's cursor finds it */
  .scroll-cue:hover,
  .scroll-cue:focus-visible {
    color: var(--ink);
    transform: translateX(-50%) scale(1.08);
  }
  .scroll-cue:hover svg,
  .scroll-cue:focus-visible svg {
    animation-duration: 0.9s;
  }

  .scroll-cue svg {
    width: 21px;
    height: 21px;
    animation: bob 2s ease-in-out infinite;
    transition: animation-duration 0.2s ease;
  }

  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }

  .hero-grid {
    position: relative;
    z-index: 1;          /* the copy reads over the figure, which is full-bleed behind it */
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

  .hero-copy { text-align: left; max-width: 560px; }

  .tagline {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 20px;
  }

  .hero-title {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 2.9rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
  }

  .rotator {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
    cursor: default;
  }
  /* fully invisible during the swap — js/main.js holds this class for
     WORD_FADE_MS (1s) before swapping the text back in, so there's a
     real beat with no word showing, not just a dip */
  .rotator.is-changing { opacity: 0; transform: translateY(4px); }
  .rotator:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .rotator { transition: none; }
  }

  .hero-word {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--accent);
    /* opaque: the hero cable runs behind this box, and the box is the thing
       that has to occlude it. Without a fill the cable shows straight
       through the word and across the border — and how badly depends on the
       word's length, since a shorter word (DYNAMIC.) ends where the cable is
       still well inside the box. */
    background: var(--bg-1);
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    padding: 4px 10px;
    margin-top: 4px;
  }

  .hero-subline {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ink-soft);
    margin: 12px 0 28px;
  }

  .hero-subtitle {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 550px;
    margin: 0 0 34px;
  }

  .hero-ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--card);
    border-radius: 999px;
    padding: 13px 26px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(31, 42, 36, 0.25);
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .btn-secondary {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
  }

  .btn-secondary:hover { color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    .btn-primary { transition: none; }
  }

  /* ==========================================================================
     Hero figure — one continuous cable with ADAPT embedded in it, laid
     full-bleed behind the hero so the cable runs past the copy instead of
     sitting in its own column. One SVG, one coordinate system. Every
     state-specific element carries .fig-fx + .fig-fx-<state>; the <svg>'s
     data-state attribute drives all of them, so no geometry is duplicated.
     ========================================================================== */
  .hero-figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    /* figure-local tokens: greys follow the site theme. The hero is a
       permanently dark panel now, so these are the light-on-dark hardware
       hues directly (previously only used for the site's dark-mode toggle,
       which still restates the same values below — harmless duplication). */
    --fig-line: var(--ink-faint);
    --fig-green: var(--accent);
    --fig-green-soft: rgba(169, 196, 154, 0.3);
    --fig-cable: #7d8377;
    --fig-connector: #9aa094;
    --fig-adapt-dark: #0b1016;
    --fig-adapt-border: rgba(234, 240, 230, 0.14);
  }

  /* the cable — one heavy continuous run, with the signal drawn along its
     full length so the whole thing reads as a single live cable rather
     than a wire that happens to touch ADAPT */
  .fig-cable {
    fill: none;
    stroke: var(--fig-cable);
    stroke-width: 15;
    stroke-linecap: round;
  }
  .fig-signal {
    fill: none;
    stroke: var(--fig-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 2.5 11;
    opacity: 0.55;
    transition: opacity 700ms ease;
    animation: figDashFlow 2.2s linear infinite;
  }
  @keyframes figDashFlow { to { stroke-dashoffset: -27; } }

  /* CONNECTED / MEASURABLE: the same signal, just carrying more traffic */
  #heroFigure[data-state="connected"] .fig-signal,
  #heroFigure[data-state="measurable"] .fig-signal { opacity: 0.95; }

  /* moulded strain-relief connectors either side of the device — the
     visible CABLE -> CONNECTOR -> ADAPT -> CONNECTOR -> CABLE handoff */
  .fig-connector { fill: var(--fig-connector); }

  /* ADAPT — the intelligence layer, and the sole focal point of the drawing */
  .fig-adapt-body {
    fill: var(--fig-adapt-dark);
    stroke: var(--fig-green-soft);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 14px rgba(124, 154, 111, 0.22));
  }
  .fig-adapt-inner { fill: none; stroke: var(--fig-adapt-border); stroke-width: 1; }
  .fig-adapt-accent { stroke: var(--fig-green); stroke-width: 1.4; stroke-opacity: 0.4; }
  .fig-adapt-rivet { fill: rgba(234, 240, 230, 0.16); }
  .fig-adapt-word {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.13em;
    fill: #eaf0e6;
  }
  .fig-adapt-led {
    fill: var(--fig-green);
    filter: drop-shadow(0 0 2.5px rgba(124, 154, 111, 0.5));
    animation: figLedPulse 2.4s ease-in-out infinite;
  }
  @keyframes figLedPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }

  /* state system — data-state on the <svg> is the single switch */
  .fig-fx { opacity: 0; transition: opacity 700ms ease; }
  #heroFigure[data-state="controllable"] .fig-fx-controllable { opacity: 1; }
  #heroFigure[data-state="dynamic"] .fig-fx-dynamic { opacity: 1; }
  /* the link stays up once established, and only clears on a fresh cycle */
  #heroFigure[data-state="connected"] .fig-fx-connected,
  #heroFigure[data-state="measurable"] .fig-fx-connected { opacity: 1; }
  #heroFigure[data-state="measurable"] .fig-fx-measurable { opacity: 1; }

  .fig-wifi path { fill: none; stroke: var(--fig-green); stroke-width: 2.8; stroke-linecap: round; }
  .fig-wifi circle { fill: var(--fig-green); }

  .fig-readout {
    font-family: var(--mono);
    font-size: 13.5px;
    fill: var(--ink-soft);
  }
  .fig-readout .value { fill: var(--fig-green); font-weight: 600; }
  .fig-readout-bar { stroke: var(--fig-green); stroke-width: 1.6; stroke-opacity: 0.55; }

  @media (prefers-reduced-motion: reduce) {
    .fig-signal, .fig-adapt-led { animation: none; }
    .fig-fx { transition: none; }
  }

  @media (max-width: 900px) {
    .hero { padding-top: 96px; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 44px; order: 1; }
    .hero-copy { text-align: center; max-width: none; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }

    /* too narrow to run the cable behind the copy — drop the figure back
       into the flow underneath it, scaled up and bleeding off both edges
       so ADAPT still reads at phone width */
    .hero { overflow: hidden; }
    .hero-figure {
      position: static;
      order: 2;
      width: 150%;
      max-width: none;
      height: auto;
      margin: 28px 0 0 -30%;
    }
    .hero-ctas { justify-content: center; }
  }
  html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
  @media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }

  /* ---------- page sections (full-bleed tint + centered inner) ---------- */
  .section-inner {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px;
  }

  /* ---------- how it works ---------- */
  .how-it-works {
    position: relative;
    min-height: calc(100vh - 64px);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-works);
  }

  .section-label {
    font-size: 0.60rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 10px;
    text-align: center;
  }

  .section-title {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 12px;
    color: var(--ink);
  }

  .section-sub {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    text-align: center;
    max-width: 480px;
    margin: 0 auto 48px;
  }

  /* ==========================================================================
     How it works — full-screen split: editorial content (left) against a
     large system visualization (right). The visual reuses the hero's own
     .fig-* hardware classes (cable / connectors / ADAPT body / LED) so the
     device reads as the exact same object introduced in the hero, just
     rendered as the protagonist of a system diagram instead of a hero prop.
     ========================================================================== */
  .works-split {
    display: grid;
    grid-template-columns: minmax(300px, 44%) 1fr;
    align-items: center;
    gap: 56px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 96px 48px 64px;
  }

  .works-content { max-width: 480px; }

  .how-it-works .section-label,
  .how-it-works .section-title,
  .how-it-works .section-sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .how-it-works .section-title {
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem);
    line-height: 1.16;
  }
  .how-it-works .section-sub {
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: none;
    margin-bottom: 44px;
  }
  /* ---- compact technical annotations, not cards: a real table grid, one
     vertical rule down the middle plus a horizontal rule between every row,
     built from cell borders (not the grid gap) so the lines stay continuous ---- */
  .works-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid var(--card-border);
  }
  .works-spec {
    padding: 24px 32px 24px 0;
    border-bottom: 1px solid var(--card-border);
  }
  .works-spec:nth-child(odd) {
    border-right: 1px solid var(--card-border);
  }
  .works-spec:nth-child(even) {
    padding-right: 0;
    padding-left: 32px;
  }
  .works-spec-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .works-spec p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .works-spec p strong {
    font-weight: 650;
    letter-spacing: 0.01em;
  }

  .works-spec-description {
    margin-top: 0.5rem;
  }

  /* ---- the system visualization ---- */
  .works-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(400px, 50vh, 560px);

    /* hardware material tokens, shared with the hero figure so both read
       as the same physical product */
    --fig-line: var(--ink-faint);
    --fig-green: var(--accent);
    --fig-green-soft: rgba(124, 154, 111, 0.26);
    --fig-cable: #3a3f36;
    --fig-connector: #6b6f62;
    --fig-adapt-dark: #1b2421;
    --fig-adapt-border: rgba(234, 240, 230, 0.14);
  }

  /* digital control layer: Backend/EMS, same dark graphite material as
     ADAPT, connected down into it by a short animated API line */
  .works-backend {
    flex: 0 0 auto;
    width: min(218px, 78%);
    background: var(--fig-adapt-dark);
    border: 1.5px solid var(--fig-green-soft);
    border-radius: 16px;
    padding: 12px 16px 14px;
    box-shadow: 0 12px 25px -14px rgba(31, 42, 36, 0.45);
  }
  .works-backend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .works-backend-name {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c7cdc0;
  }
  .works-backend-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--fig-green);
    animation: figLedPulse 2.4s ease-in-out infinite;
  }
  .works-backend-connected { font-size: 9px; color: var(--fig-green); margin: 0 0 8px; font-family: var(--mono); }
  .works-backend-reading { display: flex; align-items: baseline; gap: 3px; }
  .works-backend-value { font-family: var(--mono); font-weight: 600; font-size: 23px; color: var(--fig-green); line-height: 1; }
  .works-backend-unit { font-family: var(--mono); font-size: 10px; color: rgba(234, 240, 230, 0.55); }

  .works-backend-metrics {
    display: flex;
    gap: 12px;
    margin: 9px 0 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(234, 240, 230, 0.14);
  }
  .works-backend-metric { display: flex; flex-direction: column; gap: 2px; }
  .works-backend-metric-value { font-family: var(--mono); font-size: 10px; font-weight: 600; color: #eaf0e6; }
  .works-backend-metric-label {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(234, 240, 230, 0.5);
  }

  .works-backend-caption { font-size: 9px; color: rgba(234, 240, 230, 0.55); margin: 0; }

  .works-api-line {
    flex: 0 0 auto;
    width: 2px;
    height: 56px;
    border-radius: 2px;
    background-image: linear-gradient(var(--fig-green) 55%, transparent 0%);
    background-size: 2px 13px;
    background-repeat: repeat-y;
    animation: worksApiFlow 1s linear infinite;
  }
  @keyframes worksApiFlow { to { background-position: 0 -13px; } }

  .works-figure-wrap { flex: 1 1 auto; width: 100%; min-height: 180px; max-height: 280px; }
  .works-figure { width: 100%; height: 100%; display: block; }

  /* the physical cable — identical language to the hero: a heavy graphite
     run with a live green signal drawn along it */
  .fig-cable { fill: none; stroke: var(--fig-cable); stroke-width: 15; stroke-linecap: round; }
  .fig-signal {
    fill: none;
    stroke: var(--fig-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 2.5 11;
    opacity: 0.55;
    animation: figDashFlow 2.2s linear infinite;
  }
  .fig-connector { fill: var(--fig-connector); }

  .fig-adapt-body {
    fill: var(--fig-adapt-dark);
    stroke: var(--fig-green-soft);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 16px rgba(124, 154, 111, 0.2));
  }
  .fig-adapt-inner { fill: none; stroke: var(--fig-adapt-border); stroke-width: 1; }
  .fig-adapt-accent { stroke: var(--fig-green); stroke-width: 1.4; stroke-opacity: 0.4; }
  .fig-adapt-rivet { fill: rgba(234, 240, 230, 0.16); }
  .fig-adapt-word {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.12em;
    fill: #eaf0e6;
  }
  .fig-adapt-led {
    fill: var(--fig-green);
    filter: drop-shadow(0 0 2.5px rgba(124, 154, 111, 0.5));
    animation: figLedPulse 2.4s ease-in-out infinite;
  }
  @keyframes figLedPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
  @keyframes figDashFlow { to { stroke-dashoffset: -27; } }

  .fig-node-label { font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif; font-weight: 600; font-size: 15px; fill: var(--ink); }

  /* the works-section ADAPT device is drawn ~13% taller than the hero's to
     read as the visualization's central physical component; scoped so the
     hero figure (#heroAdapt) keeps its own size */
  #worksAdapt .fig-adapt-word { font-size: 29px; }

  /* PWM annotations — attached under the two cable segments they describe */
  .works-signals {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
    margin-bottom: 64px;
    padding-top: 10px;
    border-top: 1px solid var(--card-border);
  }
  .works-signal { display: flex; flex-direction: column; gap: 6px; }
  .works-signal-right { text-align: right; }
  .works-signal-right .fig-wave { margin-left: auto; }
  .fig-wave { width: 100%; max-width: 200px; height: auto; display: block; }
  .fig-wave path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  #chargerWavePath { stroke: var(--ink-faint); }
  #evWavePath { stroke: var(--fig-green); }
  .works-signal-caption { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin: 0; }

  @media (max-width: 960px) {
    .works-split { grid-template-columns: 1fr; gap: 48px; padding: 72px 24px 96px; }
    .works-content { max-width: none; }
    .works-system { min-height: 560px; }
  }

  @media (max-width: 560px) {
    .works-specs { grid-template-columns: 1fr; gap: 0; }
    .works-spec { padding: 20px 0; }
    .works-spec:nth-child(odd) { border-right: none; }
    .works-spec:nth-child(even) { padding-left: 0; padding-right: 0; }
    .works-system { min-height: 320px; }
    .works-figure-wrap { min-height: 140px; }
    .works-backend { width: min(180px, 88%); }
    .works-signals { grid-template-columns: 1fr; gap: 16px; }
    .works-signal-right { text-align: left; }
    .works-signal-right .fig-wave { margin-left: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fig-signal, .fig-adapt-led, .works-backend-dot, .works-api-line { animation: none !important; }
    .fig-travel-dot { display: none; }
    .scroll-cue svg { animation: none !important; }
  }

  /* ---------- use cases ---------- */
  .use-cases {
    position: relative;
    min-height: calc(100vh - 64px);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-cases);
  }
  .use-cases .section-inner { max-width: 960px; text-align: center; }

  /* three audiences as one editorial spec row — same table-rule language as
     the "How it works" specs, not floating cards */
  .audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
    text-align: left;
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
  }
  .audience-item {
    padding: 28px 32px;
  }
  .audience-item:not(:first-child) {
    border-left: 1px solid var(--card-border);
  }
  .audience-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .audience-item h3 {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 10px;
    color: var(--ink);
  }
  .audience-item p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
  }
  @media (max-width: 640px) {
    .audience-grid { grid-template-columns: 1fr; }
    .audience-item { padding: 24px 0; }
    .audience-item:not(:first-child) {
      border-left: none;
      border-top: 1px solid var(--card-border);
    }
  }

  /* ==========================================================================
     Final chapter — Built & tested / What's next / Get early access, told as
     one continuous editorial sequence (proof -> vision -> action) on a
     single shared background instead of three full-screen slides. None of
     these are forced to 100vh; each is only as tall as its content.
     ========================================================================== */
  .finale-section { background: var(--tint-cta); }
  .finale-divider { border-top: 1px solid var(--card-border); }

  /* the page opens and closes dark — hero above, footer below — with
     everything in between white/off-white. Same dark-panel trick as the
     hero: local variable overrides so text, borders and form fields flip
     without touching any markup. */
  .site-footer {
    background: #0d1715;
    --ink: #f1f2ec;
    --ink-soft: #c3d0b7;
    --ink-faint: #7e8f79;
    --card: #17231f;
    --card-border: rgba(241, 242, 236, 0.14);
    --accent-soft: rgba(138, 166, 122, 0.18);
  }

  /* ---- 1. Built & tested: the strongest, most visually weighted part ---- */
  .finale-proof {
    display: grid;
    grid-template-columns: minmax(260px, 36%) 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1160px;
    margin: 0 auto;
    padding: 80px 48px 56px;
  }
  .finale-proof-copy .section-label,
  .finale-proof-copy .section-title,
  .finale-proof-copy .section-sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .finale-proof-copy .section-sub { max-width: 400px; margin-bottom: 0; }

  /* real prototype photos, side by side, shown whole (no cropping) — the
     garage shot leads at a larger width, the enclosure shot sits next to it
     smaller — proof, not a gallery */
  .finale-proof-media {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .proof-photo {
    display: block;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
  }
  .proof-photo-main { width: 62%; }
  .proof-photo-secondary { width: 38%; }

  @media (max-width: 820px) {
    .finale-proof { grid-template-columns: 1fr; gap: 28px; padding: 64px 24px 40px; }
    .finale-proof-copy .section-sub,
    .finale-status { max-width: none; }
  }

  /* ---- 1b. Pilot rollout: one compact beat between "it works today" and
     the longer product-journey/roadmap block — a sentence, not a slide ---- */
  .pilot-rollout .section-inner { max-width: 640px; padding: 40px 24px 32px; text-align: center; }
  .pilot-rollout .section-sub { margin-bottom: 0; }

  /* ---- 2. What's next: product journey as a small horizontal timeline,
     followed by the feature roadmap (same three-column language as the
     audience grid above it) ---- */
  .whats-next .section-inner { max-width: 900px; padding: 56px 24px 48px; text-align: center; }
  .whats-next .audience-item p { font-weight: 500; }

  .journey-timeline { position: relative; margin-top: 52px; }
  .journey-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .journey-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* each step draws its own segment of the line, from its own dot centre
     to the next one's — exact regardless of column width or gap, instead
     of guessing a percentage for one long overlaid line */
  .journey-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: calc(100% + 20px);
    height: 1px;
    background: var(--card-border);
  }
  .journey-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
  }
  .journey-num {
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .journey-label {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .journey-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 200px;
    margin: 0;
  }
  .journey-step .roadmap-target { display: block; margin: 6px 0 0; }

  @media (max-width: 700px) {
    .journey-steps { grid-template-columns: 1fr; gap: 28px; }
    .journey-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
    .journey-step:not(:last-child)::before {
      top: 10px;
      left: 5px;
      width: 1px;
      height: calc(100% + 28px);
    }
    .journey-dot { margin: 5px 0 0; }
    .journey-num { margin: 0 0 4px; }
    .journey-desc { max-width: none; }
  }

  .roadmap { margin-top: 56px; }
  .roadmap-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
    margin: 0 0 20px;
  }
  .roadmap-target {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .roadmap-caps { list-style: none; margin: 0; padding: 0; text-align: left; }
  .roadmap-caps li { display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px; }
  .roadmap-caps li:last-child { margin-bottom: 0; }
  .roadmap-cap-name { font-size: 0.88rem; color: var(--ink); font-weight: 500; }
  .roadmap-status {
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .roadmap-status--active { color: var(--accent); }

  /* ---- 3. Help shape what comes next: a compact, secondary vote — same
     interest-list language as the pilot form, deliberately smaller than it ---- */
  .vote .section-inner { max-width: 480px; text-align: center; }
  .vote .section-label { margin-bottom: 10px; }
  .vote-options { margin: 0 auto 16px; text-align: left; }
  .vote-form .waitlist-form { justify-content: center; }

  /* ---- 4. Get early access: a compact two-column close, not another
     standalone landing page ---- */
  .finale-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 24px 88px;
    text-align: left;
  }
  .finale-cta-copy .section-label,
  .finale-cta-copy .section-title,
  .finale-cta-copy .section-sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .finale-cta-copy .section-sub { max-width: 400px; margin-bottom: 0; }

  .finale-status {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--card-border);
    max-width: 400px;
  }
  .finale-status-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .finale-status-value {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .finale-status-arrow { color: var(--ink-faint); margin: 0 6px; }
  .finale-status-desc { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

  .finale-cta-form { display: flex; flex-direction: column; justify-content: center; }

  @media (max-width: 700px) {
    .finale-cta { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 72px; }
    .finale-cta-copy .section-sub,
    .finale-status { max-width: none; }
  }

  .waitlist-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .waitlist-input {
    flex: 1 1 220px;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--ink);
    font-size: 0.92rem;
    font-family: inherit;
  }
  .waitlist-input::placeholder { color: var(--ink-faint); }
  .waitlist-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .waitlist-submit {
    flex: 0 0 auto;
    background: var(--ink);
    color: var(--card);
    border: none;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .waitlist-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(31,42,36,0.25); }
  .waitlist-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    max-width: 420px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .waitlist-consent input { margin-top: 2px; flex: 0 0 auto; }
  .waitlist-consent a { color: var(--ink); text-decoration: underline; }
  .waitlist-interests {
    margin-bottom: 16px;
    max-width: 420px;
  }
  .waitlist-interests-label {
    font-size: 0.75rem;
    color: var(--ink-faint);
    margin: 0 0 10px;
  }
  .waitlist-interests-optional { font-style: italic; }
  .waitlist-interest {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--ink-soft);
    cursor: pointer;
    margin: 0 0 8px;
  }
  .waitlist-interest:last-child { margin-bottom: 0; }
  .waitlist-interest input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    margin: 0;
  }
  .waitlist-note {
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--ink-faint);
  }
  .waitlist-success {
    display: none;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--accent-soft);
    border-radius: 14px;
    padding: 16px 20px;
    max-width: 420px;
  }
  .waitlist-error {
    display: none;
    font-size: 0.92rem;
    color: var(--ink);
    background: rgba(224, 138, 110, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
    max-width: 420px;
  }
  .waitlist-error a { color: inherit; text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .waitlist-submit { transition: none; }
  }

  /* ---------- top nav ---------- */
  html { scroll-padding-top: 64px; }

  /* the nav is permanent dark glass, not themed per section — it's fixed
     chrome that floats over both the dark hero/footer and the light
     content in between, so it needs one treatment that reads cleanly
     against everything rather than flipping color per section (which,
     with the hero now permanently dark, left a jarring pale band at the
     very top of the page). */
  .topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(13, 23, 21, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
    --ink: #f1f2ec;
    --ink-soft: #c3d0b7;
    --ink-faint: #7e8f79;
    --card-border: rgba(241, 242, 236, 0.14);
  }
  .topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .topnav-brand svg { width: 20px; height: 20px; flex-shrink: 0; }
  .topnav-brand .dot { color: var(--accent); }

  .topnav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .topnav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.15s ease;
  }
  .topnav-links a:hover,
  .topnav-links a:focus-visible { color: var(--ink); }
  .topnav-links .topnav-cta {
    color: var(--pill-ink);
    background: var(--pill-bg);
    padding: 8px 16px;
    border-radius: 999px;
  }
  .topnav-links .topnav-cta:hover { color: var(--pill-ink); }

  .topnav-links .lang-switch {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
  }
  .topnav-links .lang-switch:hover { color: var(--ink); }

  @media (max-width: 860px) {
    .topnav-links a:not(.topnav-cta):not(.lang-switch) { display: none; }
  }

  @media (max-width: 480px) {
    .topnav { padding: 12px 16px; }
    .topnav-brand span:not(.dot) { display: none; }
    .topnav-links { gap: 14px; }
    .topnav-links .topnav-cta { padding: 7px 13px; font-size: 0.78rem; }
  }

  /* ---------- footer ---------- */
  .site-footer {
    border-top: 1px solid var(--card-border);
  }
  .site-footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .site-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .site-footer-brand svg { width: 18px; height: 18px; flex-shrink: 0; }
  .site-footer-brand .dot { color: var(--accent); }
  .site-footer-copy,
  .site-footer-legal,
  .site-footer-email {
    font-size: 0.8rem;
    color: var(--ink-faint);
  }
  .site-footer-legal,
  .site-footer-email { text-decoration: none; }
  .site-footer-legal:hover,
  .site-footer-email:hover { color: var(--ink-soft); }

  @media (max-width: 560px) {
    .site-footer-inner { flex-direction: column; text-align: center; padding: 24px; }
  }

  /* ==========================================================================
     Legal / prose pages (privacy policy)
     ========================================================================== */
  .legal-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 64px 24px 96px;
  }
  .legal-page h1 {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
  }
  .legal-page .legal-updated {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin: 0 0 40px;
  }
  .legal-page h2 {
    font-family: "Archivo", "Space Grotesk", ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 36px 0 10px;
  }
  .legal-page p, .legal-page li {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .legal-page ul { margin: 0 0 16px; padding-left: 20px; }
  .legal-page a { color: var(--ink); }
  .legal-page strong { color: var(--ink); }