:root {
      /* PAPER (2026-07-09 redesign): warm editorial. Token NAMES keep historical spelling
         (--teal = primary-accent slot) so all usages re-skin in place; ink (dark) = the
         companion block in 40-account-modals-billing.css. */
      color-scheme: light;
      --bg: #f5f0e6;
      --bg-soft: #ede6d8;
      --panel: rgba(251, 248, 241, 0.94);
      --panel-strong: #fbf8f1;
      --line: rgba(58, 45, 28, 0.14);
      --line-strong: rgba(58, 45, 28, 0.24);
      --ink: #2b2114;
      --muted: #695b46;
      --soft: #47392a;
      --teal: #2b2114;      /* ONE METAL (2026-07-12): the primary-accent slot is INK — actions are ink, gold is music */
      --teal-text: #8a5613;   /* accent text on LIGHT surfaces = brass, AA on paper (theme-aware) */
      --teal-deep: #1c150d;
      --gold: #b0701f;
      /* rose/violet darkened 2026-07-15 for AA as text (full note in git). */
      --rose: #a8503f;
      --blue: #56688a;
      --violet: #6b5a8c;
      --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
      --shadow: 0 18px 48px rgba(70, 52, 30, 0.14);
      --shadow-soft: 0 8px 24px rgba(70, 52, 30, 0.09);
      --radius: 8px;
      --radius-control: 8px;   /* passport: controls share the sheet radius */
      --radius-surface: 12px;  /* passport: objects/cards */
      --radius-feature: 18px;
      --radius-pill: 999px;

    /* Icon accent (art223): pierces the icons.svg <use> shadow boundary — the sprite reads these. */
    .gi { --gi-ac: #a97f38; --gi-ac-soft: rgba(169,127,56,.13); }   /* v4: the SUBTLE gold, quieter fill */
      --control-min: 44px;
      --content-max: 1160px;
      --page-gutter: clamp(12px, 3vw, 32px);
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --section-space: clamp(38px, 5.5vw, 66px);
      --motion-fast: 120ms;
      --motion-ui: 180ms;
      --ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);
      --focus-ring: 0 0 0 3px rgba(176, 112, 31, 0.30);
      --beat-duration: 0.72s;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-padding-top: var(--app-scroll-offset, 76px);
      background-color: #f5f0e6;   /* paint the base bg immediately so there's no white flash before the app boots */
    }
    /* The inline boot script sets data-boot-theme from saved settings so a dark-mode user never flashes white. */
    html[data-boot-theme="dark"], html[data-boot-theme="dark"] body { background-color: #14110c; }
    html[data-boot-theme="dark"] body { color: #f0e8d6; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 12% 0%, rgba(112, 96, 58, 0.06), transparent 36%),
        radial-gradient(circle at 88% 8%, rgba(176, 112, 31, 0.05), transparent 34%),
        linear-gradient(180deg, #f9f5ec 0%, var(--bg) 50%, #ece4d3 100%);
      color: var(--ink);
    }/* Editorial display type: big headings speak serif; body copy stays Inter. */
    /* Serif = the voice of the MUSIC (owner 2026-07-12): groove titles and top-level heads
       only. Everything structural speaks Inter. */
    h2, .section-title {
      font-family: var(--font-display);
      letter-spacing: 0.1px;
      font-weight: 650;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    /* Number fields NEVER show the browser's native spin arrows — every stepper on the site
       is a custom −/+ pair, and the native arrows on top of them read as a glitch. */
    input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    button {
      border: 0;
      color: inherit;                     /* iOS otherwise paints button text (and currentColor icons) system-blue */
      -webkit-text-fill-color: currentColor;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;                  /* no stray text-selection highlight on tap (iOS) */
      touch-action: manipulation;
    }

    .shell {
      width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
      margin: 0 auto;
      padding: 22px 0 48px;
    }

    .static-home {
      display: grid;
      gap: var(--space-5);
      width: min(880px, calc(100% - (var(--page-gutter) * 2)));
      margin: 0 auto;
      padding: clamp(44px, 9vw, 104px) 0 64px;
    }

    .static-home h2 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(2.25rem, 7vw, 4.75rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    .static-home-intro {
      max-width: 670px;
      margin: 0;
      color: var(--muted);
      font-size: clamp(1rem, 2.4vw, 1.18rem);
      line-height: 1.65;
    }

    .static-instruments {
      margin: 0;
      color: var(--muted);
    }

    .static-start {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 52px;
      padding: 0 24px;
      border-radius: var(--radius-control);
      background: linear-gradient(180deg,#c09a58,#a97f38);
      color: #2b2114;
      font-weight: 800;
      text-decoration: none;
    }

    .static-product-path {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-5);
      padding-top: var(--space-6);
      border-top: 1px solid var(--line);
    }

    .static-product-path p { display: grid; gap: var(--space-2); min-width: 0; margin: 0; color: var(--muted); line-height: 1.55; }
    .static-product-path strong { color: var(--ink); font-size: 1rem; }

    .feature-state {
      display: grid;
      align-content: center;
      justify-items: start;
      gap: var(--space-4);
      min-height: min(68vh, 620px);
      padding-block: var(--space-8);
    }

    .feature-state h1,
    .feature-state p { max-width: 620px; margin: 0; }
    .feature-state p { color: var(--muted); line-height: 1.6; }

    /* Content skeleton — a shimmering placeholder shown while a deferred surface materializes,
       so a slow load reads as "the room is assembling" rather than a blank gap. */
    .skeleton-block { display: grid; gap: 10px; width: min(100%, 620px); margin-top: var(--space-2); }
    .skeleton-line { height: 14px; border-radius: 8px; background: var(--panel-strong); position: relative; overflow: hidden; }
    .skeleton-line.lg { height: 110px; border-radius: 12px; }
    .skeleton-line.w70 { width: 70%; }
    .skeleton-line.w50 { width: 50%; }
    .skeleton-line::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
      transform: translateX(-100%); animation: skeletonShimmer 1.4s ease-in-out infinite;
    }
    @keyframes skeletonShimmer { 100% { transform: translateX(100%); } }@media (prefers-reduced-motion: reduce) { .skeleton-line::after { animation: none; } }@media (max-width: 640px) {
      .static-product-path { grid-template-columns: 1fr; gap: var(--space-4); }
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      overflow: hidden;
      background: transparent;
      box-shadow: var(--shadow-soft);
      flex: 0 0 auto;
    }
    .brand-mark img { width: 100%; height: 100%; display: block; }

    /* THE COUNT-IN HOLD (2026-07-12): the interface holds its breath while the band counts —
       chrome recedes a step, the playing control carries a gold count pulse, and everything
       returns in the same frame the downbeat lands (is-counting → is-grooving). */
    .app-header, .bottom-nav { transition: opacity .3s ease; }
    body.is-counting .app-header, body.is-counting .bottom-nav { opacity: .55; }
    @keyframes gwCountPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 169, 90, 0); } 34% { box-shadow: 0 0 0 5px rgba(217, 169, 90, .38); } }
    body.is-counting .stage-play, body.is-counting [data-action="play"], body.is-counting .jam-dock-play { animation: gwCountPulse var(--beat-duration, .7s) ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { body.is-counting .stage-play, body.is-counting [data-action="play"], body.is-counting .jam-dock-play { animation: none; } }

    /* THE PRESS LAW (passport 2026-07-12): every rectangular button presses identically;
       round buttons press with the equivalent scale. */
    .primary-button:active, .ghost-button:active, .mini-button:active, .inline-action:active,
    .stage-play:active, .seg:active, .step-btn:active, .loop-step:active { transform: translateY(1px); }

    /* THE LIVING LAYER (2026-07-12): while the band plays, the interface keeps time.
       body.is-grooving + --beat-duration come from the transport; everything here is a
       whisper (2-4%), not a light show — paper stays calm, it just has a pulse. */
    @keyframes gwBreathe { 0%, 100% { transform: scale(1); } 34% { transform: scale(1.04); } }
    @keyframes gwCardPulse { 0%, 100% { border-color: var(--line); } 34% { border-color: rgba(176, 112, 31, 0.55); } }
    body.is-grooving .app-header .brand-mark { animation: gwBreathe var(--beat-duration, .7s) ease-in-out infinite; }
    body.is-grooving .groove-card { animation: gwCardPulse calc(var(--beat-duration, .7s) * 4) ease-in-out infinite; }
    body.is-grooving .hd-flame svg { animation: gwBreathe var(--beat-duration, .7s) ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      body.is-grooving .app-header .brand-mark, body.is-grooving .groove-card,
      body.is-grooving .hd-flame svg { animation: none; }
    }

    /* Page content is visible immediately; no first-scroll reveal or repeated entrance lag. */
    .reveal { opacity: 1; }
    /* Consistent rhythm between top-level home sections; scoped to <section> so nested
       .reveal cards are unaffected. */
    section.reveal { margin-top: var(--section-space); }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1 {
      font-size: clamp(2rem, 3.4vw, 3.35rem);
      line-height: 1;
      letter-spacing: 0;
    }