/* GENERATED by tools/web/build_site.py from tools/web/src/creators.html. */
  /* ================= Base ================= */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Cross-fade equivalents, not dead UI (BRAND.md 7): anything that TRAVELS
       (transform) snaps instantly; feedback that informs (opacity, color)
       keeps a short fade. The JS springs check this query and snap too. */
    *, *::before, *::after { animation: none !important; }
    *, *::before, *::after {
      transition-property: opacity, color, background-color, border-color !important;
      transition-duration: .2s !important;
    }
    .btn:hover, .btn:active { transform: none; }
  }
  :root { --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --frame: 1120px; }
  body { background: var(--bg-primary); }
  ::selection { background: var(--accent-color); color: #000; }

  /* Editorial frame: a fixed column with visible side rules. Sections divide it
     with full-width hairlines - the page reads like a printed spec sheet. */
  .frame { max-width: var(--frame); margin: 0 auto; border-inline: 1px solid var(--border-color); }
  .pad { padding-inline: clamp(20px, 4vw, 56px); }
  section { padding-block: clamp(56px, 9vw, 112px); border-top: 1px solid var(--border-color); }
  .hero { border-top: none; }

  /* The two voices: Inter speaks, mono annotates. */
  .micro { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
           letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
  .secnum { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .secnum .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-color); }
  .secnum .rule { flex: 1; height: 1px; background: var(--border-color); align-self: center; }

  h1, h2 { margin: 0; font-weight: var(--fw-extrabold); letter-spacing: -.03em; }
  h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
  p { margin: 0; }
  .body { font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
  a { color: var(--text-primary); }

  /* Buttons - one system */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
         height: 52px; padding: 0 24px; border-radius: var(--radius-md); border: none;
         font-family: inherit; font-size: 16px; font-weight: var(--fw-semibold);
         text-decoration: none; cursor: pointer; white-space: nowrap;
         transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s cubic-bezier(.4,0,.2,1); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(.98); }
  .btn-primary { background: var(--accent-color); color: #fff; }
  .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
  .btn .tag { font-family: var(--font-mono); font-size: 12px; opacity: .8; font-weight: 500; }
  .btn-sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 10px; }

  /* ================= Header ================= */
  /* Scrolled state = a hairline appears. Hairlines structure this page; no drop shadow. */
  /* Scroll edge, not a hairline: floating chrome meets content with a faded
     shadow mask that appears only once content actually slides beneath. */
  .native-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 14px; pointer-events: none; opacity: 0;
    background: linear-gradient(rgba(0,0,0,.55), transparent);
    transition: opacity var(--dur-settle) var(--spring-settle); }
  .native-header.scrolled::after { opacity: 1; }
  .nav { max-width: var(--frame); margin: 0 auto; height: 52px;
         display: flex; align-items: center; justify-content: space-between;
         padding-inline: clamp(20px, 4vw, 56px); }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold);
           letter-spacing: -.02em; font-size: 15px; color: var(--text-primary); text-decoration: none; }
  .brand svg { width: 24px; height: 24px; }
  .brand .cast { color: var(--accent-color); }
  .nav-links { display: flex; align-items: center; gap: var(--space-md); }
  .nav-links a:not(.btn) { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-secondary); text-decoration: none; transition: color .18s cubic-bezier(.4,0,.2,1); }
  .nav-links a:not(.btn):hover { color: var(--text-primary); }
  @media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

  /* ================= Hero ================= */
  .hero-brand { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 20px);
                margin-bottom: clamp(28px, 4vw, 44px); text-decoration: none; }
  .hero-brand svg { width: clamp(56px, 9vw, 84px); height: clamp(56px, 9vw, 84px); flex: none; }
  .hero-brand .wm { font-size: clamp(38px, 7vw, 60px); font-weight: var(--fw-extrabold);
                    letter-spacing: -.03em; line-height: 1; color: var(--text-primary); }
  .hero-brand .wm .cast { color: var(--accent-color); }
  .hero .topline { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .hero .topline .rule { flex: 1; height: 1px; background: var(--border-color); }
  /* Sized down from 92px max: the new headline is a full sentence rather than a
     three-word tagline, so the old scale ran to the frame edge and crowded the
     sub. 74px keeps it dominant without shouting. */
  .hero h1 { font-size: clamp(36px, 6.6vw, 74px); line-height: 1.04; }
  .hero h1 em, h2 em { font-style: normal; color: var(--accent-color); }
  .hero .sub { max-width: 560px; margin-top: var(--space-md); font-size: 17px; line-height: 1.65;
               color: var(--text-secondary); }
  .hero .cta { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); }
  .hero .cta .micro { text-transform: none; letter-spacing: .04em; }
  @media (max-width: 640px) {
    .hero .cta .btn, .outro .cta .btn, .price-cta .btn { width: 100%; }
  }

  /* ---- The A/B translation demo ---- */
  .ab { margin-top: clamp(40px, 6vw, 72px); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
        overflow: hidden; background: rgba(255,255,255,.02); }
  .ab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
             padding: 14px 20px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
  .ab-controls { display: flex; align-items: center; gap: var(--space-xs, 8px); flex-wrap: wrap; }
  .ab-play { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 9px 16px;
             background: transparent; color: var(--accent-color); border: 1px solid var(--border-color);
             border-radius: 9px; cursor: pointer; transition: background .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1); }
  .ab-play:hover { border-color: var(--accent-color); }
  .ab-play.playing { background: var(--accent-color); color: #000; font-weight: 500; }
  /* Fluid pass: the toggle is a physical object. The thumb tracks the finger
     1:1, rubber-bands past the ends, projects momentum on release, and can be
     caught mid-flight (JS springs). The two buttons stay real buttons: the
     keyboard and click path is unchanged, and a click settles without bounce
     because a click carries no momentum. */
  .ab-toggle { display: flex; border: 1px solid var(--border-color); border-radius: 9px;
               overflow: hidden; position: relative; touch-action: pan-y; min-width: 308px; }
  .ab-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
              background: var(--accent-color); will-change: transform;
              transition: background-color var(--dur-settle) var(--spring-settle); }
  .ab.phone .ab-thumb { background: var(--status-searching); }
  .ab-toggle button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    padding: 9px 16px; background: transparent; color: var(--text-secondary); border: none; cursor: pointer;
    flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
    transition: color .25s cubic-bezier(.4,0,.2,1); }
  .ab-toggle button.on { color: #000; font-weight: 500; }
  .wave { display: flex; align-items: center; gap: 3px; height: 180px; padding: 24px 20px; }
  .wave i { flex: 1; border-radius: 2px; background: var(--accent-color);
            transition: height var(--dur-settle) var(--spring-settle), background-color var(--dur-settle) var(--spring-settle), opacity var(--dur-settle) var(--spring-settle); }
  /* While a finger owns the thumb, feedback is 1:1: no easing between it and you. */
  .ab.scrub .wave i { transition: background-color var(--dur-settle) var(--spring-settle); }
  .ab.phone .wave i { background: var(--status-searching); opacity: .82; }
  .ab.phone .wave { filter: saturate(.9); }
  /* .08s linear is the live analyser's frame pace, not a UI state change. */
  .ab.live .wave i { transition: height .08s linear, background-color .55s cubic-bezier(.4,0,.2,1); }
  .ab-foot { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 12px 20px;
             border-top: 1px solid var(--border-color); flex-wrap: wrap; }

  /* ================= 01 WHY - editorial split ================= */
  .split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); }
  @media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
  .freq { margin: var(--space-md) 0 0; }
  .freq svg { width: 100%; height: auto; display: block; }
  .freq .fl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
              fill: var(--text-secondary); }
  .freq .fl.warm { fill: var(--status-searching); }
  .loss { margin-top: var(--space-lg); border-top: 1px solid var(--border-color); }
  .loss div { display: flex; justify-content: space-between; gap: var(--space-sm);
              padding: 12px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
  .loss .what { color: var(--text-primary); font-weight: var(--fw-medium); }
  .loss .fate { font-family: var(--font-mono); font-size: 12px; color: var(--status-searching); }

  /* ================= 02 SIGNAL PATH ================= */
  .path { display: flex; align-items: stretch; gap: 0; margin-top: var(--space-lg); flex-wrap: wrap; }
  .node { flex: 1 1 0; min-width: 150px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
          padding: 14px 16px; background: rgba(255,255,255,.02); }
  .node .t { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
  .node .d { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
  .link { display: flex; flex-direction: column; align-items: center; justify-content: center;
          padding: 0 10px; gap: 4px; }
  .link .wire { width: 32px; height: 1px; background: var(--text-secondary); position: relative; }
  .link .wire::after { content: ""; position: absolute; right: -1px; top: -2.5px;
    border-left: 5px solid var(--text-secondary); border-block: 3px solid transparent; }
  .link .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--text-secondary); }
  /* The device mockups below already tell this story on a narrow screen. */
  @media (max-width: 640px) { .path { display: none; } }
  @media (max-width: 860px) {
    .path { flex-direction: column; }
    .node { min-width: 0; }
    .link { padding: 6px 0; }
    .link .wire { width: 1px; height: 20px; }
    .link .wire::after { right: -2.5px; top: auto; bottom: -1px;
      border-top: 5px solid var(--text-secondary); border-inline: 3px solid transparent; border-left-width: 3px; }
  }

  /* device mockups (the real apps) */
  .stage { display: flex; align-items: center; justify-content: center; gap: var(--space-lg);
           margin-top: clamp(40px, 6vw, 64px); }
  @media (max-width: 860px) { .stage { flex-direction: column; gap: var(--space-md); } }
  .device-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
                  color: var(--text-secondary); margin-top: var(--space-sm); text-align: center; }
  .mac-panel { width: 300px; text-align: left; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: var(--space-sm); box-shadow: var(--shadow-card); }
  .mp-row { display: flex; align-items: center; gap: 8px; }
  .mp-head { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
  .mp-head svg { width: 18px; height: 18px; }
  .mp-div { height: 1px; background: var(--border-color); margin: 12px 0; }
  .mp-ok { color: var(--status-streaming); font-size: 12px; font-weight: var(--fw-medium);
           display: flex; align-items: center; gap: 6px; }
  .mp-ok::before { content: "✓"; font-weight: var(--fw-bold); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-secondary);
         border-radius: 8px; padding: 2px; margin: 12px 0; font-size: 12px; font-weight: var(--fw-medium); }
  .seg span { text-align: center; padding: 5px 0; border-radius: 6px; color: var(--text-secondary); }
  .seg .on { background: var(--bg-primary); color: var(--text-primary);
             box-shadow: 0 1px 3px rgba(0,0,0,.4); font-weight: var(--fw-semibold); }
  .mp-btn { display: flex; align-items: center; gap: 8px; background: var(--status-stop); color: #fff;
            border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: var(--fw-semibold); }
  .mp-btn::before { content: "■"; font-size: 10px; }
  .mp-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px;
               color: var(--text-secondary); }
  .mp-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-streaming);
                    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-streaming) 22%, transparent); }
  /* Signal-flow connector. Static staggered bars: the streaming idea reads from
     the shape alone, and nothing decorative loops on this page. */
  .stream { display: flex; align-items: center; gap: 4px; height: 64px; }
  .stream i { width: 4px; border-radius: 2px; background: var(--accent-color); height: var(--h, 30%); opacity: .9; }
  @media (max-width: 860px) {
    .stream { flex-direction: column; height: auto; width: 64px; }
    .stream i { height: 4px; width: var(--h, 30%); }
  }
  .iphone { width: 252px; background: var(--bg-primary);
    border: 7px solid var(--text-primary); border-radius: 40px; padding: 14px 14px 18px;
    box-shadow: var(--shadow-card); position: relative; }
  .iphone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 78px; height: 20px; border-radius: var(--radius-pill); background: var(--text-primary); }
  .ip-screen { padding-top: 40px; text-align: center; }
  .ip-mark svg { width: 30px; height: 30px; }
  .ip-name { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -.02em; margin: 6px 0 2px; }
  .ip-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
  .ip-card { background: var(--bg-secondary); border-radius: 14px; padding: 14px 10px; margin: 12px 0; }
  .ip-state { display: flex; align-items: center; justify-content: center; gap: 7px;
              font-size: 15px; font-weight: var(--fw-semibold); }
  .ip-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-streaming);
                   box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-streaming) 22%, transparent); }
  .ip-detail { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }
  .ip-btn { background: var(--status-stop); color: #fff; border-radius: 10px; padding: 11px 0;
            font-size: 13px; font-weight: var(--fw-semibold); }

  /* Compact datasheet grid: hairlines via a 1px gap over a border-color bg */

  /* ================= 03 THE CHECKS: feature cards =================
     Three small instruments, drawn like the app draws them. The graphic says
     it; each card gets one line of words. Shared with the creators page
     (tools/web/build_creators.py copies this stylesheet). */
  .feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm);
           margin-top: clamp(32px, 5vw, 56px); }
  @media (max-width: 860px) { .feats { grid-template-columns: 1fr; } }
  .feat { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px;
          background: rgba(255,255,255,.02); display: flex; flex-direction: column; }
  .feat .viz { height: 132px; display: flex; flex-direction: column; justify-content: center; margin: 14px 0 18px; }
  .feat .say { font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
  .feat .sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
  /* live EQ: bars grow up or down from a centre line, as in the app */
  .eq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; height: 84px; position: relative; }
  .eq::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-color); }
  .eq i { position: relative; }
  .eq i::after { content: ""; position: absolute; left: 0; right: 0; height: var(--h); border-radius: 2px;
                 background: var(--status-streaming); bottom: 50%; }
  .eq i.d::after { bottom: auto; top: 50%; }
  .eq i.hot::after { background: var(--status-searching); }   /* too much: turn it down */
  .eq i.low::after { background: var(--accent-color); }       /* too little is blue */
  .eq-l { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px;
          color: var(--text-secondary); margin-top: 8px; }
  /* loudness */
  .lufs { display: flex; align-items: baseline; gap: 8px; }
  .lufs b { font-size: 44px; font-weight: var(--fw-extrabold); letter-spacing: -.03em; line-height: 1; }
  .lufs span { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); letter-spacing: .08em; }
  .lvl { display: grid; grid-template-columns: 36fr 30fr 34fr; gap: 2px; height: 9px; margin-top: 16px; position: relative; }
  .lvl span { border-radius: 3px; }
  .lvl .q { background: var(--accent-color); opacity: .75; }      /* too quiet is blue */
  .lvl .g { background: var(--status-streaming); }
  .lvl .h { background: var(--status-stop); opacity: .75; }
  .lvl .dot { position: absolute; left: var(--at, 50%); top: 50%; width: 13px; height: 13px; border-radius: 50%;
              background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
  .lvl-l { display: grid; grid-template-columns: 36fr 30fr 34fr; font-size: 10px; color: var(--text-secondary);
           text-align: center; margin-top: 6px; }
  /* report rows */
  .rows div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px;
              border-bottom: 1px solid var(--border-color); }
  .rows div:last-child { border-bottom: none; }
  .rows div::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-streaming); flex: none; }
  .rows div.warn::before { background: var(--status-searching); }
  .rows div.warn { color: var(--status-searching); }
  .rows div.off { color: var(--text-secondary); }
  .rows div.off::before { background: var(--border-color); }
  .aside { margin-top: var(--space-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
           color: var(--text-secondary); }
  /* phone mockup: the app's own cards */
  .ip-card.l { text-align: left; padding: 12px; }
  .ip-k { font-size: 10px; color: var(--text-secondary); margin-bottom: 5px; }
  .ip-v { font-size: 13px; font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 6px; letter-spacing: -.01em; }
  .ip-v .warn { width: 8px; height: 8px; border-radius: 50%; background: var(--status-searching); flex: none; }
  .ip-v .ok { width: 8px; height: 8px; border-radius: 50%; background: var(--status-streaming); flex: none; }
  .ip-v.good { color: var(--status-streaming); font-size: 15px; }
  .ip-d { font-size: 10.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
  .ip-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary); margin-bottom: 5px; }
  .ip-row b { color: var(--accent-color); font-weight: var(--fw-medium); }
  .ip-card .eq { height: 44px; gap: 4px; margin: 10px 2px 8px; }
  .ip-card .ip-btn { margin-top: 10px; }
  .ip-card .lvl { margin-top: 9px; }
  .ip-card .lvl-l { font-size: 8.5px; margin-top: 4px; }
  .ip-num { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
  .ip-num small { font-size: 9px; font-weight: 400; color: var(--text-secondary); margin-left: 3px; }
  /* one-line note under a diagram */
  .note { margin: clamp(32px, 5vw, 56px) auto 0; max-width: 640px; text-align: center; font-size: 16px; line-height: 1.6;
          color: var(--text-secondary); }
  .note b { color: var(--text-primary); font-weight: var(--fw-semibold); }

  /* ================= 04 PRICE ================= */
  .price-line { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
  .price-line .amount { font-size: clamp(72px, 12vw, 128px); font-weight: var(--fw-extrabold);
                        letter-spacing: -.04em; line-height: 1; }
  .price-line .meta { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary);
                      letter-spacing: .08em; text-transform: uppercase; }
  .terms { margin-top: var(--space-lg); border-top: 1px solid var(--border-color); max-width: 560px; }
  .terms div { padding: 12px 0; border-bottom: 1px solid var(--border-color); font-size: 16px;
               color: var(--text-secondary); display: flex; gap: 12px; }
  /* The dash is a text marker, not a live element - blue is interactive/live only. */
  .terms div::before { content: ""; display: inline-block; width: 12px; height: 1.5px; background: var(--text-secondary); vertical-align: middle; }
  .price-cta { margin-top: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

  /* ================= 05 FAQ ================= */
  .faq { margin-top: var(--space-lg); border-top: 1px solid var(--border-color); max-width: 760px; }
  .faq details { border-bottom: 1px solid var(--border-color); }
  .faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
    gap: var(--space-sm); padding: 18px 0; font-size: 16px; font-weight: var(--fw-semibold);
    letter-spacing: -.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .i { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); flex: none; width: 28px; }
  .faq summary .x { margin-left: auto; font-family: var(--font-mono); color: var(--text-secondary);
                    transition: transform var(--dur-settle) var(--spring-settle); }
  .faq details[open] summary .x { transform: rotate(45deg); }
  .faq .answer { padding: 0 0 18px 44px; font-size: 16px; line-height: 1.65; color: var(--text-secondary);
                 animation: faq-in .3s cubic-bezier(.4,0,.2,1); }
  /* Terminal command in the uninstall answer. Mono is the brand's annotation face;
     it must also WRAP, because this line is longer than the column and a
     non-wrapping code block would push the page into horizontal scroll on a phone. */
  .faq .answer code { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary);
                      background: var(--bg-secondary); border: 1px solid var(--border-color);
                      border-radius: var(--radius-sm); padding: 10px 12px; display: block;
                      white-space: pre-wrap; word-break: break-all; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* ================= Outro + footer ================= */
  /* Closing statement runs a touch hotter than a section head, but stays inside
     the H2 ceiling of 44px. */
  .outro h2 { font-size: clamp(28px, 4.5vw, 44px); }
  .outro .cta { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; }
  footer { border-top: 1px solid var(--border-color); }
  .foot { max-width: var(--frame); margin: 0 auto; padding: var(--space-lg) clamp(20px, 4vw, 56px);
          border-inline: 1px solid var(--border-color); }
  .foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
  /* Internal-link row: every page one click from home (search engines weigh
     internal links; readers get the long-form pages). Same mono register as .legal. */
  .foot-read { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 11px;
               letter-spacing: .06em; line-height: 2; color: var(--text-secondary); }
  .foot-read a { color: var(--text-secondary); text-decoration: none; }
  .foot-read a:hover { color: var(--text-primary); }
  .legal { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7;
           color: var(--text-secondary); max-width: 70ch; }

  /* creators only: the voice bracket on the frequency chart */
  /* feature showcase: words on one side, a large piece of the app on the other */
  .show { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
  .show.flip > :first-child { order: 2; }
  .show.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .show .body { margin-top: var(--space-sm); max-width: 420px; }
  @media (max-width: 860px) { .show, .show.flip { grid-template-columns: 1fr; } .show.flip > :first-child { order: 0; } }
  .panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 28px;
           padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--shadow-card); }
  .p-k { font-size: 14px; color: var(--text-secondary); }
  .p-title { font-size: 26px; font-weight: var(--fw-extrabold); letter-spacing: -.02em; }
  .p-big { font-size: clamp(22px, 2.8vw, 30px); font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.15;
           display: flex; align-items: center; gap: 12px; margin-top: 18px; }
  .p-big .warn { width: 14px; height: 14px; border-radius: 50%; background: var(--status-searching); flex: none; }
  .p-big.good { color: var(--status-streaming); font-size: clamp(34px, 4.6vw, 48px); letter-spacing: -.03em; }
  .p-sub { font-size: 16px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }
  .p-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; padding: 4px;
              background: rgba(255,255,255,.05); border-radius: 12px; }
  .p-states span { text-align: center; padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: var(--fw-medium);
                   color: var(--text-secondary); }
  .p-states .on { background: var(--status-searching); color: #000; font-weight: var(--fw-semibold); }
  .p-tip { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); }
  .p-tip b { display: block; font-size: 16px; font-weight: var(--fw-semibold); }
  .p-tip span { display: block; font-size: 14px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
  .p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .p-chips span { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-color);
                  font-size: 14px; color: var(--text-secondary); }
  .p-chips .on { background: var(--accent-color); border-color: var(--accent-color); color: #fff; font-weight: var(--fw-semibold); }
  .panel .lvl { height: 12px; margin-top: 22px; }
  .panel .lvl .dot { width: 20px; height: 20px; }
  .panel .lvl-l { font-size: 12px; margin-top: 8px; }
  .p-alt { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); font-size: 14px; }
  .p-alt .q { color: var(--accent-color); } .p-alt .h { color: var(--status-stop); }
  .p-verdict { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: var(--fw-bold); margin-top: 10px; }
  .p-verdict .arr { width: 24px; height: 24px; border-radius: 50%; background: var(--status-searching); color: #000;
                 font-style: normal; font-size: 15px; display: grid; place-items: center; }
  .p-rows { margin-top: 18px; display: grid; gap: 8px; }
  .p-rows div { background: rgba(255,255,255,.05); border-radius: 14px; padding: 12px 16px; }
  .p-rows span { display: block; font-size: 12px; color: var(--text-secondary); }
  .p-rows b { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: var(--fw-medium); margin-top: 3px; }
  .p-rows b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-streaming); flex: none; }
  .p-rows .warn b { color: var(--status-searching); } .p-rows .warn b::before { background: var(--status-searching); }
  .panel .tog-row { font-size: 20px; padding-bottom: 20px; }
  .panel .vol { height: 72px; margin-top: 24px; }
  /* hero phone: a full creator-mode screen */
  .iphone.big { width: 292px; }
  .ip-wave { display: flex; align-items: center; gap: 2.5px; height: 34px; margin: 10px 4px 6px; }
  .ip-wave i { flex: 1; height: var(--h); border-radius: 2px; background: var(--accent-color); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px); align-items: center; }
  .hero-grid h1 { font-size: clamp(34px, 4.8vw, 56px); }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-phone { justify-self: center; } }
  .feats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 860px) { .feats.two { grid-template-columns: 1fr; } }
  /* quiet speaker card: the app's switch, and a volume turned right down */
  .tog-row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: var(--fw-semibold);
             padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
  .tog { width: 46px; height: 28px; border-radius: 14px; background: var(--status-streaming); position: relative; flex: none; }
  .tog::after { content: ""; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
  .vol { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: 18px; }
  .vol i { flex: 1; border-radius: 3px; background: var(--border-color); }
  .vol i:nth-child(1) { height: 22%; } .vol i:nth-child(2) { height: 38%; } .vol i:nth-child(3) { height: 54%; }
  .vol i:nth-child(4) { height: 70%; } .vol i:nth-child(5) { height: 86%; } .vol i:nth-child(6) { height: 100%; }
  .vol i.on { background: var(--accent-color); }
  .freq .gl { font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; }
  .freq .gl.voice { fill: var(--text-primary); font-weight: 500; }
  .freq .gl.blue { fill: var(--accent-color); }
  .freq .gl.warm { fill: var(--status-searching); }
  .freq .gl.dim { fill: var(--text-secondary); }
  .freq figcaption { font-size: 16px; color: var(--text-secondary); margin-top: 12px; }

/* ================= Multi-page site (tools/web/build_site.py) ================= */
/* phone: the page links move to a row you can swipe, under the bar */
.mnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: flex; gap: 22px; overflow-x: auto; padding: 10px clamp(20px, 4vw, 56px) 12px;
          border-top: 1px solid var(--border-color); scrollbar-width: none; }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
  .mnav a.on { color: var(--text-primary); }
  /* the bar is one row taller on a phone: keep the page clear of it */
  main.frame { padding-top: 40px; }
  .native-header { height: auto; }
}
.nav-links a.on:not(.btn) { color: var(--text-primary); }
/* page heads for the inner pages */
.phead { border-top: none; padding-bottom: clamp(32px, 5vw, 56px); }
.phead h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; margin-top: var(--space-md); }
.phead .sub { max-width: 600px; margin-top: var(--space-md); font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.more { margin-top: var(--space-lg); display: inline-block; font-family: var(--font-mono); font-size: 12px;
        letter-spacing: .08em; text-transform: uppercase; color: var(--accent-color); text-decoration: none; }
.more:hover { text-decoration: underline; }
/* "also inside" list */
.inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px);
          margin-top: var(--space-lg); border-top: 1px solid var(--border-color); }
@media (max-width: 760px) { .inside { grid-template-columns: 1fr; } }
.inside div { padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.inside b { display: block; font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.inside span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 3px; }
/* comparison chart */
.cmp-wrap { overflow-x: auto; margin-top: var(--space-lg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.cmp tr:last-child td { border-bottom: none; }
.cmp thead th { font-size: 15px; font-weight: var(--fw-semibold); position: sticky; top: 0; background: var(--bg-primary); }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--text-primary); font-weight: var(--fw-medium); }
.cmp .us { background: rgba(10,132,255,.08); }
.cmp thead .us { color: var(--accent-color); }
.cmp .y { color: var(--status-streaming); font-size: 18px; font-weight: 700; }
.cmp .n { color: var(--text-secondary); font-size: 16px; opacity: .7; }
.cmp .t { color: var(--text-secondary); font-size: 13px; }
.cmp .grp td { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--text-secondary); background: rgba(255,255,255,.03); }
.fine { margin-top: var(--space-md); font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-width: 760px; }
.fine a { color: var(--text-secondary); }
/* learn */
.glist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }
@media (max-width: 760px) { .glist { grid-template-columns: 1fr; } }
.gcard { display: block; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px;
         background: rgba(255,255,255,.02); text-decoration: none; transition: border-color .18s; }
.gcard:hover { border-color: var(--accent-color); }
.gcard b { display: block; font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.gcard span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 6px; }
.article { max-width: 760px; }
.article h2 { font-size: clamp(22px, 3vw, 30px); margin-top: clamp(40px, 6vw, 64px); }
.steps { margin-top: var(--space-md); border-top: 1px solid var(--border-color); }
.steps div { display: flex; gap: var(--space-sm); padding: 14px 0; border-bottom: 1px solid var(--border-color);
             font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.steps .i { font-family: var(--font-mono); font-size: 12px; color: var(--accent-color); flex: none; width: 28px; padding-top: 4px; }
.steps b, .article li b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.article ul { margin: var(--space-md) 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 16px; line-height: 1.7; }
.article .qa { margin-top: var(--space-md); }
.article .qa b { display: block; font-size: 16px; font-weight: var(--fw-semibold); }
.article .qa span { display: block; font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin-top: 4px; }
/* languages */
.langs { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; line-height: 2.1;
         color: var(--text-secondary); }
.langs a { color: var(--text-secondary); text-decoration: none; margin-right: 14px; white-space: nowrap; }
.langs a:hover, .langs a.on { color: var(--text-primary); }

/* frequency chart legend (home page): plain text above the drawing, so it wraps */
.freq-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; font-family: var(--font-mono);
            font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2px; }
.freq-key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.freq-key span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); }
.freq-key .ph::before { background: var(--status-searching); }

/* Hebrew (dir="rtl"): text and layout run right to left. Charts, meters and
   the demo switch keep their left-to-right direction. */
/* the label typeface has no Hebrew letters, and its stand-in is thin and hard to read */
html[dir=rtl] { --font-mono: var(--font-sans); }
[dir=rtl] .ab-toggle, [dir=rtl] .eq, [dir=rtl] .lvl, [dir=rtl] .freq, [dir=rtl] .wave,
[dir=rtl] .ip-wave, [dir=rtl] .viz svg, [dir=rtl] .vol, [dir=rtl] .eq-l, [dir=rtl] .lvl-l, [dir=rtl] .p-states,
[dir=rtl] .lufs, [dir=rtl] .ip-num { direction: ltr; }
[dir=rtl] .mac-panel, [dir=rtl] .ip-card.l { direction: rtl; text-align: right; }
/* the Mac-to-phone diagram runs right to left like the text, so its arrows turn round */
[dir=rtl] .link .wire { transform: scaleX(-1); }
/* words inside the left-to-right pictures still read in their own direction */
[dir=rtl] .ab-toggle *, [dir=rtl] .freq-key span, [dir=rtl] .lvl-l span, [dir=rtl] .eq-l span, [dir=rtl] .p-states span { unicode-bidi: plaintext; }
[dir=rtl] .cmp th:first-child, [dir=rtl] .cmp td:first-child, [dir=rtl] .cmp .grp td { text-align: right; }
[dir=rtl] .article ul { padding-left: 0; padding-right: 20px; }
[dir=rtl] .langs a { margin-right: 0; margin-left: 14px; }
[dir=rtl] .faq summary .x { margin-left: 0; margin-right: auto; }
[dir=rtl] .ip-num small { margin-left: 0; margin-right: 3px; }
[dir=rtl] .micro, [dir=rtl] .secnum, [dir=rtl] .tag, [dir=rtl] .lbl { letter-spacing: .02em; }