/* =====================================================================
   Saltado Sessions: the shared stylesheet for /features/<topic> pages.

   Created 2026-09-13, when features.html became a short directory and the
   depth moved to one page per feature area. Everything from the top of this
   file down to the "NEW on 2026-09-13" banner near the bottom was LIFTED
   VERBATIM out of features.html's inline <style>, comments and all: the page
   chrome (tokens, body grid, topbar, page head), the .feat-group bullet
   cards, the in-depth .feat-row layout with its illustrations, the summary
   cards, the three-step block and the per-DAW capability matrix with its
   phone card layout. Nothing was reworded, and nothing should be: the
   contrast notes in these comments are the record of a WCAG pass.

   features.html keeps its own trimmed copy of the chrome rules inline. It
   does NOT load this file, so the two can be edited independently; if you
   change a token here, change it there too.
   ===================================================================== */

    /* Design tokens shared with index.html, lifted from the app's "Default"
       theme (client/src/styles.css) so the site reads as the same product. */
    :root {
      --bg: #2b2b2b;
      --surface: #363636;
      --surface-2: #424242;
      --border: #4d4d4d;
      --text: #cfcfcf;
      --muted: #9e9e9e;
      --accent: #d99146;
      --accent-hover: #e6a25c;
      --accent-soft: rgba(217, 145, 70, 0.18);
      --sidebar: #232323;
      /* Added 2026-09-13 with the blocks moved off index.html. site.css supplies
         the text-grade inks (--ok-ink, --warn-ink, --error-ink), but the raw hues
         are per-page: .verdict's ring is var(--error), .soon's is var(--warn), and
         a var() that resolves to nothing takes the whole border declaration with
         it, which would leave those chips with no edge at all. */
      --ok: #67b84b;
      --warn: #e2b13a;
      --error: #e5544b;
      --grid: rgba(0, 0, 0, 0.16);
      --grid-strong: rgba(0, 0, 0, 0.32);
      --band: rgba(255, 255, 255, 0.03);
    }

    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    body {
      background-color: var(--bg);
      background-image:
        repeating-linear-gradient(90deg, var(--grid-strong) 0 1px, transparent 1px 176px),
        repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, var(--band) 0 176px, transparent 176px 352px);
      background-attachment: fixed;
      color: var(--text);
      font-family: 'Helvetica Neue', 'Arial Nova', Arial, 'Segoe UI', system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--surface-2); color: var(--text);
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 11px 20px; font-size: 14px; font-weight: 600;
      cursor: pointer; text-decoration: none;
      transition: background 0.12s, border-color 0.12s; white-space: nowrap;
    }
    .btn:hover { border-color: var(--muted); }
    .btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1305; }
    .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
    .btn.sm { padding: 7px 13px; font-size: 13px; }

    /* ---------- top nav (same as index.html) ----------
       Always fixed, body reserves its height, so it never reflows: hide on
       scroll down / show on scroll up is pure transform, no jump at the top. */
    body { padding-top: 53px; }
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 30;
      background: var(--sidebar);
      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
      transition: transform 0.15s ease;
    }
    .topbar.hidden { transform: translateY(-100%); }
    .topbar .wrap { display: flex; align-items: center; gap: 20px; height: 52px; }
    /* Lockup: stacked-folders mark, then both text marks white, same size. */
    .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
    .logo-mark { height: 26px; width: auto; display: block; }
    .wordmark, .brand .product {
      font-size: 16px; font-weight: 800; color: var(--text);
      letter-spacing: 0.22em; text-transform: uppercase;
    }
    .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
    .topbar nav > a {
      color: var(--muted); text-decoration: none; font-size: 13px;
      padding: 7px 12px; border-radius: var(--radius);
    }
    .topbar nav > a:hover { color: var(--text); background: rgba(128,128,128,0.14); }
    .topbar nav > a.btn { color: var(--text); }
    .topbar nav > a.btn.primary { color: #1a1305; }

    /* ---------- page head ---------- */
    .page-head { border-bottom: 1px solid var(--border); }
    .page-head-inner { padding: 52px 0 44px; }
    h1 { font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; }
    .page-sub { color: var(--muted); font-size: 16px; margin-top: 12px; }
    .page-sub a { color: var(--accent-ink); }
    /* The early-access line under the lede. Set a step below .page-sub and in a
       thin rule rather than a filled callout: it is context for the list, not a
       warning about it. Accent lead matches the pricing card's .price-early. */
    .page-status {
      color: var(--muted); font-size: 13.5px; line-height: 1.6;
      margin: 18px 0 0; max-width: 66ch;
      border-left: 2px solid var(--border); padding-left: 14px;
    }
    .page-status strong { color: var(--accent-ink); font-weight: 600; }

    /* ---------- the list ---------- */
    .feat-lists { padding: 44px 0 26px; }
    .feat-cols {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }
    .feat-group {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 20px 22px;
    }
    .feat-group h2 {
      font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
      display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
    }
    /* Keyword-rich group description: real indexable content above the
       scannable bullets, styled secondary so the bullets still lead. */
    .feat-group .desc { color: var(--muted); font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
    .feat-group .desc strong { color: var(--text); font-weight: 600; }
    .pro-chip {
      font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
      color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius);
      padding: 1px 6px;
    }
    .feat-group ul { list-style: none; }
    /* --accent-ink, never raw var(--accent): accent as TEXT misses AA in
       classic-light and two of the dark themes (CLAUDE.md contrast bullet). */
    .feat-group li a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .feat-group li a:hover { text-decoration: underline; }
    .feat-group li {
      color: var(--muted); font-size: 14px; padding: 4px 0 4px 18px; position: relative;
    }
    .feat-group li::before {
      content: '·'; position: absolute; left: 4px; top: 1px;
      color: var(--accent-ink); font-weight: 700; font-size: 18px;
    }
    /* A sub-list inside a bullet (the metering console). The browser default of
       40px would indent it off the edge of a 280px column, so it gets a small
       one of its own; everything else about it is inherited, markers included. */
    .feat-group li > ul { padding-left: 10px; margin-top: 2px; }

    /* "read more" link out to a group's in-depth page */
    .feat-group .more {
      display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
      color: var(--accent-ink); text-decoration: none;
    }
    .feat-group .more:hover { text-decoration: underline; }

    /* ---------- bottom CTA ---------- */
    .cta-final { padding: 40px 0 64px; text-align: center; }
    .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

    /* site footer styles live in /footer.css (shared across all pages) */

    @media (max-width: 720px) { h1 { font-size: 28px; } }

    /* =================================================================
       MOVED FROM index.html, 2026-09-13. The homepage had grown to 3,197
       visible words, most of it the thirteen in-depth feature rows and the
       per-DAW capability matrix. Those blocks now live at the foot of this
       page (#pro-in-depth, #ar-in-depth, #daws) and every rule they need
       came with them, VERBATIM, comments included. Nothing below was
       reworded; only the wrappers around it are new.
       ================================================================= */

    /* Section furniture the moved blocks sit in. Lifted from index.html's
       own rules so the sections read identically on both pages. */
    section[id].deep { padding: 80px 0; }
    .sec-head { text-align: center; margin-bottom: 48px; }
    .sec-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
    .sec-head p { color: var(--muted); font-size: 16px; margin-top: 10px; max-width: 72ch; margin-left: auto; margin-right: auto; }
    .band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
    /* The membership band, recessed and lit from its own edges, as on the
       homepage: translucent washes so the body grid stays visible. */
    #ar-in-depth.band {
      border-top: 1px solid rgba(217, 145, 70, 0.45);
      border-bottom: 1px solid rgba(217, 145, 70, 0.45);
      box-shadow:
        inset 0 0 120px rgba(217, 145, 70, 0.05),
        inset 0 0 26px rgba(217, 145, 70, 0.09);
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.12) 140px,
          rgba(0, 0, 0, 0.12) calc(100% - 140px), rgba(0, 0, 0, 0.26));
    }
    /* An inline link inside a moved row (the phone row's "All of it, in detail"). */
    .inline-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .inline-link:hover { text-decoration: underline; }
    /* The contents list jumps to a group card, not a <section>, so site.css's
       section[id] anchor offset does not reach it. Same 69px: the fixed topbar
       plus a breath. */
    .feat-group[id] { scroll-margin-top: 69px; }
    .toc { display: flex; flex-wrap: wrap; gap: 5px 0; margin-top: 20px; font-size: 13px; }
    .toc a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .toc a:hover { text-decoration: underline; }
    .toc a + a::before { content: '\00b7'; color: var(--muted); font-weight: 400; margin: 0 9px; }

    /* Feature rows: a looping demo video beside each feature's text, alternating
       sides. Drop a clip at videos/<slug>.mp4 and it autoplays here; until then
       the placeholder shows (swap handled by the script at the foot of the page). */
    .feat-rows { display: flex; flex-direction: column; gap: 46px; }
    .feat-row {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 44px; align-items: center;
    }
    .feat-row.flip .feat-media { order: -1; }
    /* --icon-accent, not --accent: these SVGs are meaningful graphics, so WCAG
       1.4.11 holds them to 3:1 against what they sit on, and the raw hue read
       1.53:1 on classic-light's --bg. The token is var(--accent) on the dark
       five, so nothing there changes. */
    .feat-row .p-ico { color: var(--icon-accent); }
    .p-ico svg { width: 26px; height: 26px; display: block; }
    .feat-row h3 { font-size: 22px; font-weight: 800; margin: 10px 0 10px; letter-spacing: -0.01em; }
    .feat-row p { color: var(--muted); font-size: 15px; }
    /* No red tint behind the red type. It was the same failure the step numeral
       had (see the note at .step .n): ink and background sharing one hue, and
       both values hardcoded to the Default theme's red, so the chip carried a
       dark-theme wash onto classic-light and measured 1.03:1 there, the worst
       reading on the page. Dropping the fill puts the label on plain --bg, which
       is exactly what --error-ink is tuned against (4.51 to 5.49 across the six),
       and the ring stays so the chip still reads as a chip. */
    .verdict {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
      color: var(--error-ink); border: 1px solid var(--error);
      border-radius: var(--radius); padding: 7px 12px; font-size: 13px; font-weight: 600;
    }
    /* "Being built" chip on a feature row whose subject is NOT in the build you
       can download today. Deliberately the same .soon class the pricing card
       uses for a coming feature, so the page has one vocabulary for "not yet"
       instead of three; only scoped here for the larger heading it sits in.
       Muted, not amber: it labels a line, it does not warn about one.
       Nothing strips this class automatically. When a feature ships, the chip
       AND the "Illustration · Being built" corner tag both come off by hand. */
    .feat-row h3 .soon {
      margin-left: 9px; vertical-align: 3px;
      font-size: 10px; letter-spacing: 0.07em; border-radius: 999px;
      color: var(--muted); border-color: var(--border); white-space: nowrap;
    }
    .feat-media { min-width: 0; }
    .feat-media video, .media-soon {
      display: block; width: 100%; aspect-ratio: 16 / 9;
      border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--sidebar);
    }
    .feat-media video { object-fit: cover; box-shadow: var(--sh-1); }
    .feat-still {
      display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      box-shadow: var(--sh-1); background: var(--sidebar);
    }
    /* Flat, intentional media placeholder, no emoji, no gradient (Linear/
       Ableton register): the app's own grid, one quiet play affordance, a small
       label. Swapped for the real clip the moment videos/<slug>.mp4 exists. */
    .media-soon {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
      background-image:
        repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 44px);
      color: var(--muted);
    }
    .media-soon .play {
      display: grid; place-items: center; width: 46px; height: 46px;
      border: 1px solid var(--border); border-radius: 50%; color: var(--accent);
    }
    .media-soon .play svg { width: 18px; height: 18px; display: block; margin-left: 2px; }
    .media-soon .soon-label {
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
    }
    /* Animated feature demo, a stylized recreation of the app's preview UI
       (tagged "illustration"; NOT a screen recording). It keeps the .media-soon
       class on purpose: drop a real clip into videos/<slug>.mp4 later and the
       existing reveal script hides this and shows the footage, zero edits. */
    .media-soon.demo-anim {
      /* align-items:stretch overrides the base .media-soon centering, without
         it the wave div (whose children are all absolute) collapses to 0 width */
      display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0;
      background-image: none; background: var(--sidebar);
      position: relative; padding: 20px 22px; text-align: left;
    }
    .demo-anim .d-tag {
      position: absolute; top: 10px; right: 13px; font-size: 9px; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--muted); opacity: 0.65;
    }
    .demo-anim .d-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); }
    .demo-anim .d-play {
      width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--border); border-radius: var(--radius);
      display: grid; place-items: center; color: var(--accent); background: var(--surface);
    }
    .demo-anim .d-play svg { width: 11px; height: 11px; display: block; margin-left: 1px; }
    .demo-anim .d-name { font-weight: 600; }
    .demo-anim .d-meta { margin-left: auto; display: flex; gap: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .sec-kicker {
      display: inline-block; font-size: 1em; font-weight: 800; letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--accent-ink); margin-right: 18px;
    }
    /* The Pro section opens with the same lit rule the membership band has,
       so the two offerings read as siblings. */
    #features { border-top: 1px solid rgba(217, 145, 70, 0.45); }
    .demo-anim .d-vitals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
    .demo-anim .d-vitals span {
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 2px 8px; font-size: 10.5px; color: var(--muted); white-space: nowrap;
    }
    .demo-anim .d-wave { position: relative; margin-top: 12px; height: 104px; }
    .demo-anim .d-svg { position: absolute; inset: 0; }
    .demo-anim .d-svg svg { width: 100%; height: 100%; display: block; }
    /* the draggable preview window, as in WaveformPicker */
    .demo-anim .d-win {
      position: absolute; top: -4px; bottom: -4px; left: 34%; width: 30%;
      border: 1px solid var(--accent); background: rgba(217, 145, 70, 0.10); border-radius: var(--radius);
    }
    .demo-anim .d-win::before, .demo-anim .d-win::after {
      content: ''; position: absolute; top: 50%; width: 3px; height: 18px; transform: translateY(-50%);
      background: var(--accent); border-radius: 1px;
    }
    .demo-anim .d-win::before { left: -2px; }
    .demo-anim .d-win::after { right: -2px; }
    .demo-anim .d-head { position: absolute; top: 0; bottom: 0; left: 34%; width: 2px; background: var(--accent); }
    .demo-anim .d-cap {
      margin-top: 14px; display: flex; justify-content: space-between; gap: 12px;
      font-size: 11px; color: var(--muted);
    }
    .demo-anim .d-cap b { color: var(--accent-ink); font-weight: 600; }
    @media (prefers-reduced-motion: no-preference) {
      /* the playhead sweeps the preview window and loops, like the app's
         windowed playback */
      .demo-anim .d-head { animation: dhead 7s linear infinite; }
      @keyframes dhead { 0% { left: 34%; } 100% { left: 63.7%; } }
    }

    /* ---- shared bits for the other animated demos ---- */
    .demo-anim .d-title {
      font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 13px;
    }
    /* a table-ish list of rows, as in the app's session/plugin lists */
    .d-list { display: flex; flex-direction: column; gap: 7px; }
    .d-line {
      display: flex; align-items: center; gap: 9px;
      font-size: 12px; color: var(--text);
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); padding: 7px 10px;
    }
    .d-line .nm { font-weight: 600; }
    .d-line .rt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
    .d-line .ok { color: var(--ok-ink); font-weight: 700; }
    .d-line .miss { color: var(--warn-ink); font-weight: 700; }
    .d-line .dim { color: var(--muted); }
    .d-pill {
      font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; border-radius: var(--radius);
      padding: 1px 6px; border: 1px solid currentColor;
    }
    .d-foot { margin-top: 13px; font-size: 11px; color: var(--muted); }
    .d-foot b { color: var(--accent-ink); font-weight: 600; }
    .d-foot .warnb { color: var(--warn-ink); font-weight: 600; }

    @media (prefers-reduced-motion: no-preference) {
      /* rows arrive one after another (scan + import + compat lists) */
      .d-list.stagger .d-line { opacity: 0; animation: dIn 0.5s ease forwards; }
      .d-list.stagger .d-line:nth-child(1) { animation-delay: 0.2s; }
      .d-list.stagger .d-line:nth-child(2) { animation-delay: 1.0s; }
      .d-list.stagger .d-line:nth-child(3) { animation-delay: 1.8s; }
      .d-list.stagger .d-line:nth-child(4) { animation-delay: 2.6s; }
      .d-list.stagger .d-line:nth-child(5) { animation-delay: 3.4s; }
      @keyframes dIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      /* the summary line fades in after the rows have landed */
      .demo-anim .d-foot.late { opacity: 0; animation: dIn 0.6s ease 4.3s forwards; }
      /* the submission pipeline advances through its stages */
      .d-stage { position: relative; }
      .d-stage > span { opacity: 0; }
      .d-stage > span.s1 { animation: dFlash 9s ease infinite; }
      .d-stage > span.s2 { animation: dFlash 9s ease infinite 3s; }
      .d-stage > span.s3 { animation: dFlash 9s ease infinite 6s; }
      @keyframes dFlash {
        0%, 2% { opacity: 0; }
        6%, 30% { opacity: 1; }
        34%, 100% { opacity: 0; }
      }
    }
    /* no-JS / reduced motion: show the first stage only, so nothing is blank */
    @media (prefers-reduced-motion: reduce) {
      .d-stage > span.s1 { opacity: 1; }
      .d-stage > span.s2, .d-stage > span.s3 { display: none; }
    }
    .d-stage { display: inline-grid; }
    .d-stage > span { grid-area: 1 / 1; white-space: nowrap; }
    @media (max-width: 860px) {
      .feat-row { grid-template-columns: 1fr; gap: 22px; }
      .feat-row.flip .feat-media { order: 0; }
    }

    /* micro-polish: DAW rows respond to the cursor (the ready row keeps its wash) */
    .daw-table tbody tr { transition: background 0.12s ease; }
    .daw-table tbody tr:not(.is-live):hover { background: rgba(255, 255, 255, 0.03); }

    /* per-DAW capability matrix */
    .daw-scroll {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    }
    .daw-table { width: 100%; min-width: 740px; border-collapse: collapse; font-size: 13px; }
    .daw-table th, .daw-table td {
      padding: 11px 12px; text-align: center;
      border-bottom: 1px solid var(--border);
    }
    .daw-table th {
      /* --muted-strong: these are 10px, and they sit on --surface-2, the lightest
         bed on the page, where plain --muted measured 3.75 to 3.92 on all five
         dark themes. The row-header cells (the DAW names) are th too, so this
         background is what .daw-name, .daw-ext and .beta actually sit on: the
         is-live row's wash never reaches them, it paints under an opaque cell. */
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--muted-strong); background: var(--surface-2); white-space: nowrap;
    }
    .daw-table th:first-child, .daw-table td:first-child { text-align: left; white-space: nowrap; }
    .daw-table tbody tr:last-child td { border-bottom: 0; }
    /* A 10% wash, not --accent-soft's 18-20%. The wash is the bed for seven ✓
       marks and one .why note, and at full strength it was the binding constraint
       on --ok-ink in every theme: clearing 4.5 on it would have pushed the
       Default green from #67b84b to #8dca78 and classic-dark's to a near-white
       #bdddaf, i.e. green would have stopped reading as green to fix a contrast
       bug. Halving the wash hands that budget back (the Default ink moves four
       points of lightness instead of twelve) and the row is still visibly tinted.
       Below about 10% the wash stops binding at all, so there is nothing further
       to buy by dropping it, and dropping it would cost the row its only
       full-width marker. */
    .daw-table tr.is-live { background: color-mix(in srgb, var(--accent) 10%, transparent); }
    /* th:first-child, not just td: the first cell in every body row is a
       <th scope="row">, so the td-only selector never matched and the accent edge
       this rule exists to draw has never rendered. It matters more now that the
       row wash is lighter, so the marker is worth having on the one row that is
       not "beta". */
    .daw-table tr.is-live th:first-child,
    .daw-table tr.is-live td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
    /* The table reads as "what Sessions will read from each format," not
       "what works today": every ✓ is green (we can get this info), - means the
       format doesn't store it, ? means we're still researching that format. */
    /* The ink variants, not the raw hues: these are the marks the whole table is
       read through, and the raw --ok sat at 1.87:1 on classic-light and 2.62:1 on
       the tinted Ableton row in classic-dark. */
    .daw-table .y { color: var(--ok-ink); font-weight: 700; }
    .daw-table .n { color: var(--muted); }
    .daw-table .m { color: var(--warn-ink); font-weight: 700; }
    /* symbol meanings are native title tooltips (set by script); hint at them */
    .daw-table td[title], .daw-table th[title] { cursor: default; }
    /* var(--text) on every row, not just the shipping one. The names used to be
       --muted, which was fine in isolation but inverted the hierarchy the moment
       the column headers above them lifted to --muted-strong: the row's subject
       cannot be quieter than the label describing the column. The Ableton row
       keeps its distinction from the accent edge and the wash on its cells, and
       every other row still says Beta on the same line. */
    .daw-name { font-weight: 600; color: var(--text); }
    .daw-ext {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px; color: var(--muted-strong); margin-left: 5px;
    }
    /* The note must read the same in every cell, so it resets what the symbol
       classes set on the td: .y/.m/.u are font-weight 700 and .u adds a green
       glow, and both inherit into the span (a note in a ✓ cell came out bold
       and haloed while the, cells' notes were plain). */
    /* --muted-strong: at 10px these are the smallest running text on the page,
       and one of them sits inside a ✓ cell on the tinted Ableton row, where
       plain --muted measured 3.21 to 3.40 across the five dark themes. */
    .why {
      display: block; font-size: 10px; font-weight: 400; color: var(--muted-strong);
      text-shadow: none; margin-top: 2px; line-height: 1.3;
    }
    .soon {
      display: inline-block; margin-left: 7px; padding: 1px 6px;
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--warn-ink); border: 1px solid var(--warn); border-radius: var(--radius); vertical-align: 1px;
    }
    .soon.explore { color: var(--muted-strong); border-color: var(--muted); }

    /* ---------------------------------------------------------------
       SUMMARY CARDS AND STEPS, moved here from index.html on 2026-09-13
       with the four Pro cards, the four A&R cards and the A&R three-step
       block. Every rule below is that page's own, lifted unchanged, so the
       blocks read exactly as they did on the homepage. .use-card is
       site.css's card class: it owns the hover lift and the display-face
       h3, but it never carried a base look, so the box is drawn here.
       --------------------------------------------------------------- */
    .idea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .idea-grid .use-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--sh-1);
    }
    /* --icon-accent, not --accent: these SVGs are meaningful graphics, so WCAG
       1.4.11 holds them to 3:1 against what they sit on, and the raw hue read
       1.53:1 on classic-light's --bg. */
    .idea-grid .p-ico { color: var(--icon-accent); }
    .idea-grid h3 { font-size: 19px; font-weight: 800; margin: 12px 0 8px; letter-spacing: -0.01em; }
    .idea-grid p { color: var(--muted); font-size: 14.5px; }
    /* The "Being built" chip on a card heading: muted, not amber. It labels a
       line, it does not warn about one. Nothing strips this class
       automatically; when the feature ships, the chip comes off by hand. */
    .idea-grid h3 .soon {
      margin-left: 9px; vertical-align: 2px;
      font-size: 10px; letter-spacing: 0.07em; border-radius: 999px;
      color: var(--muted); border-color: var(--border); white-space: nowrap;
    }

    /* three steps */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .step { position: relative; padding: 4px 4px 4px 0; }
    /* No accent-soft fill behind the numeral: accent-coloured type on an
       accent-tinted disc measured 3.58 to 4.16:1 in all six themes.
       --accent-ink is tuned against --bg, so the numeral on the plain page
       clears 4.5 everywhere. The accent ring stays, so the markers still read
       as a numbered sequence. */
    .step .n {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 50%;
      color: var(--accent-ink); font-weight: 800; font-size: 13px;
      border: 1px solid var(--accent); margin-bottom: 12px;
    }
    .step h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
    .step p { color: var(--muted); font-size: 14px; }
    /* The steps sit under a .sec-head, centred like the head above them and one
       size down, so the section reads as one unit. */
    .steps-block { margin: 0 0 54px; }
    .steps-title { text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
    .steps-lede { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 26px; }
    /* The link line under a moved grid. Same rule index.html carries. */
    .idea-grid + .pricing-more { text-align: center; margin-top: 26px; font-size: 13.5px; }
    .pricing-more a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .pricing-more a:hover { text-decoration: underline; }
    /* "Beta" on every non-Ableton row: Ableton is the finished one, the rest
       are in progress. */
    .beta {
      display: inline-block; margin-left: 8px; padding: 1px 6px;
      /* 10px, not 9: 9px was below the point where uppercase letterforms with
         0.06em tracking stay legible, and site.css's span.beta rule already
         mutes the colour, so the chip had neither size nor contrast going for
         it. The 1px vertical padding still clears the cap height at 10px. */
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius); vertical-align: 1px;
    }
    /* The first two capability columns work for every DAW (they never read the
       project file), so they glow and sit behind a glowing separator; the rest
       is what the format itself stores. */
    .daw-table tr.grp-row th {
      font-size: 10px; padding: 7px 12px 2px; border-bottom: 0;
    }
    .daw-table .grp-univ { color: var(--accent-ink); }
    .daw-table .grp-fmt { color: var(--muted-strong); font-weight: 700; }
    /* Open + Bounce preview are format-independent, so they're a ✓ for EVERY
       DAW, the whole "Every DAW" band glows green, not just the Ableton row. */
    .daw-table td.u { color: var(--ok-ink); font-weight: 700; }
    .daw-table td:nth-child(4),
    .daw-table thead tr:last-child th:nth-child(4),
    .daw-table tr.grp-row th.grp-fmt {
      border-left: 1px solid var(--accent);
    }

    /* ---------------------------------------------------------------
       PHONE AND SMALL TABLET: the matrix becomes one card per format.
       An eight-column table cannot be read on a 390px screen, and the
       horizontal scroll it needed was invisible: the container clips
       mid-column with no edge, no shadow and no hint, so the five
       format columns past the fold read as if they did not exist.
       Sideways scrolling inside a vertically scrolling page is also the
       gesture a phone gets wrong most often.
       Nothing is dropped or reworded here: every row keeps all seven
       capabilities and every .why caveat, so the mobile card and the
       desktop row make the same claims. The two universal capabilities
       stay first and keep the accent rule that separates them from what
       the format itself stores, which is the same split the group
       header draws above the table on desktop.
       900px, not 720: measured, the table's natural width is 829px (its
       min-width of 740 is not what binds, the eight columns of content
       are), and .wrap adds 24px gutters either side, so it starts
       clipping at about 877px of viewport plus whatever the scrollbar
       takes. The cards have to take over before that rather than after
       it, or the invisible-scroll problem simply moves to tablets and
       small laptop windows.
       The per-cell labels are static data-label attributes in the HTML,
       not written by the script at the foot of the page: if that script
       ever fails, a card of bare check marks with no labels is worse
       than the table was.
       --------------------------------------------------------------- */
    @media (max-width: 900px) {
      /* The frame moves from the container onto each card. */
      .daw-scroll {
        overflow-x: visible; border: 0; background: none;
        box-shadow: none; border-radius: 0;
      }
      .daw-table { display: block; min-width: 0; }
      .daw-table thead { display: none; }
      .daw-table tbody { display: grid; gap: 12px; }
      /* Two columns of capabilities, not one: stacked one per line the ten
         cards ran to 3,700px, which is five phone screens of a table nobody
         asked to read. Paired up it is closer to 1,800 and each pair still
         fits its longest label ("Bounce preview") at this size. The name
         cell spans both columns as the card's header strip. */
      .daw-table tr {
        display: grid; grid-template-columns: 1fr 1fr;
        border: 1px solid var(--border); border-radius: var(--radius-lg);
        background: var(--surface); overflow: hidden;
      }
      .daw-table tbody tr:not(.is-live):hover { background: var(--surface); }
      /* An opaque tint, not the base rule's transparent wash: the card sits
         on the page background here, not on the container the table used to
         have. */
      .daw-table tr.is-live {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, var(--surface));
      }
      /* The format name is the card's header strip. It is a th, so it already
         carries the --surface-2 bed the column headers use. */
      .daw-table th[scope="row"] {
        grid-column: 1 / -1; text-align: left; white-space: normal;
        padding: 9px 13px; font-size: 12px; letter-spacing: 0.04em;
        border-bottom: 1px solid var(--border);
      }
      .daw-table tr.is-live th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
      /* Label and mark on one line, the caveat under them. The label is the
         column header the hidden thead used to supply, and it is a static
         data-label attribute rather than something the script at the foot of
         the page writes: if that script ever fails, a card of bare check marks
         with no labels is worse than the table was. */
      .daw-table td {
        display: block; text-align: left; border-bottom: 0;
        padding: 7px 13px 8px; font-size: 13px; line-height: 1.35;
      }
      .daw-table td::before {
        content: attr(data-label) " ";
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--muted-strong);
      }
      .daw-table td .why { margin-top: 1px; }
      /* The vertical group rule becomes a horizontal one. Tempo and Key are
         the two cells of the same grid row, so a border on both draws one
         line across the card: everything below it is what the format itself
         stores, which is the split the group header makes on desktop. */
      .daw-table td:nth-child(4),
      .daw-table td:nth-child(5) { border-left: 0; border-top: 1px solid var(--accent); }
      .daw-table td:nth-child(4) { padding-top: 9px; }
      .daw-table td:nth-child(5) { padding-top: 9px; }
    }

    /* Tablets and small laptop windows: two cards abreast. One column of
       860px-wide cards is mostly empty space, and this halves how far the
       section runs. 760 is the floor for it: below that a card is under
       340px, which is where the label and its mark stop sharing a line. */
    @media (min-width: 760px) and (max-width: 900px) {
      .daw-table tbody { grid-template-columns: 1fr 1fr; align-items: start; }
    }

    /* Under 360px ("Bounce preview" and "Session versions" are the long ones)
       the mark breaks onto a line of its own and reads as an orphan, so the
       pairs give up and stack. The group rule has to come off the Key cell
       here or it draws twice, once per line. */
    @media (max-width: 359px) {
      .daw-table tr { grid-template-columns: 1fr; }
      .daw-table td:nth-child(5) { border-top: 0; padding-top: 7px; }
    }

    /* The homepage's phone rules for the moved blocks, moved with them. */
    @media (max-width: 720px) {
      section[id].deep { padding: 60px 0; }
      .sec-head { margin-bottom: 32px; }
      .sec-head h2 { font-size: clamp(21px, 5.9vw, 30px); }
      .sec-head p { font-size: 15px; }
      /* Once the kicker wraps onto its own line (which is the intent), its 18px
         right margin is dead space that also pulls the centred line off centre. */
      .sec-kicker { display: block; margin-right: 0; margin-bottom: 1px; }
      /* One column for the moved summary cards and steps; the multi-column
         grids are in the base rules above. */
      .idea-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; gap: 20px; }
      .feat-row h3 { font-size: 19px; }
      .feat-rows { gap: 40px; }
      #ar-in-depth.band {
        box-shadow:
          inset 0 0 80px rgba(217, 145, 70, 0.05),
          inset 0 0 18px rgba(217, 145, 70, 0.09);
      }
    }

    /* ---------------------------------------------------------------
       NEW on 2026-09-13, the only rules on this page that were not
       lifted out of features.html: the per-page "Related guides" list
       and the closing line under it. Everything above is that page's
       own CSS, verbatim, comments included.
       --------------------------------------------------------------- */
    .related { padding: 10px 0 0; }
    .related h2 {
      font-size: 13px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.09em; margin-bottom: 12px;
    }
    .related ul { list-style: none; display: grid; gap: 6px; }
    .related li { padding-left: 18px; position: relative; font-size: 14px; }
    .related li::before {
      content: '\00b7'; position: absolute; left: 4px; top: -1px;
      color: var(--accent-ink); font-weight: 700; font-size: 18px;
    }
    .related a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .related a:hover { text-decoration: underline; }
    /* The closing line: where this page sits in the whole list, and the price. */
    .page-close { padding: 34px 0 64px; color: var(--muted); font-size: 14px; }
    .page-close a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
    .page-close a:hover { text-decoration: underline; }