/* CantaLingo design system: copied verbatim from the homepage inline <style> on 2026-10-17. Keep in sync. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/AtkinsonHyperlegible-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/AtkinsonHyperlegible-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/Fredoka-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/Fredoka-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    :root {
      color-scheme: light dark;
      --canvas: #fbf7f4;
      --paper: #fffdfb;
      --ink: #173a36;
      --body: #294d49;
      --muted: #627572;
      --line: #d9ded9;
      --soft: #edf1ec;
      --teal: #1e4d48;
      --teal-2: #2f6b64;
      --terracotta: #a9502f;
      --amber: #e2a336;
      --focus: #107d90;
      --shadow: 0 14px 34px rgba(28, 64, 58, .12);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --canvas: #101817;
        --paper: #172321;
        --ink: #f5eee8;
        --body: #d8e6e2;
        --muted: #a8b9b5;
        --line: #354541;
        --soft: #22312e;
        --teal: #9bc9c1;
        --teal-2: #b9ddd7;
        --terracotta: #ef9d7f;
        --amber: #f0be5b;
        --focus: #78d9eb;
        --shadow: 0 18px 42px rgba(0, 0, 0, .3);
      }
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: auto; }
    body {
      margin: 0;
      background: var(--canvas);
      color: var(--body);
      font-family: "Atkinson Hyperlegible", sans-serif;
      font-size: 17px;
      line-height: 1.45;
      text-rendering: optimizeLegibility;
    }
    button, a { font: inherit; }
    a { color: inherit; }
    a:focus-visible, button:focus-visible, audio:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
    .skip { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; }
    .skip:focus { top: 16px; }
    .site-nav { position: sticky; top: 0; z-index: 70; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(28, 64, 58, .08); }
    .chapter-toggle { display: none; }
    .nav-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
    .nav-link { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 8px; color: var(--muted); text-align: center; text-decoration: none; font-weight: 700; font-size: .86rem; line-height: 1.15; }
    .nav-link::after { content: ""; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 3px; background: transparent; }
    .nav-link:hover { color: var(--ink); background: var(--soft); }
    .nav-link[aria-current="location"] { color: var(--teal); }
    .nav-link[aria-current="location"]::after { background: var(--terracotta); }
    .guide-bar { min-height: 62px; display: grid; grid-template-columns: minmax(150px, .65fr) minmax(180px, 1.35fr) auto; gap: 18px; align-items: center; padding-block: 9px; }
    .progress-meta { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
    .progress-meta span { flex: 0 0 auto; color: var(--terracotta); font: 600 .76rem/1.2 "Fredoka", sans-serif; }
    .progress-meta strong { min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progress-track { height: 6px; overflow: hidden; background: var(--soft); }
    .progress-track span { display: block; width: 16.666%; height: 100%; background: var(--terracotta); transition: width .18s ease; }
    .guide-actions { display: flex; gap: 8px; }
    .guide-btn { min-height: 44px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--teal); font-weight: 700; cursor: pointer; }
    .guide-btn:hover:not(:disabled) { border-color: var(--teal); background: var(--soft); }
    .guide-btn:disabled { color: var(--muted); opacity: .48; cursor: default; }
    .guide-btn.next { border-color: var(--teal); background: var(--teal); color: var(--canvas); }
    .guide-btn.next:hover:not(:disabled) { border-color: var(--teal-2); background: var(--teal-2); color: var(--canvas); }
    @media (prefers-color-scheme: dark) { .guide-btn.next, .guide-btn.next:hover:not(:disabled) { color: #10231f; } }
    .screen-section[hidden] { display: none !important; }
    .hero { padding: clamp(44px, 7vw, 78px) 0 38px; border-bottom: 1px solid var(--line); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
    .kicker, .eyebrow { margin: 0 0 10px; color: var(--terracotta); font: 600 .88rem/1.25 "Fredoka", sans-serif; }
    h1, h2, h3 { color: var(--ink); margin-top: 0; }
    h1 { max-width: 760px; margin-bottom: 18px; font: 600 clamp(2.8rem, 6vw, 5rem)/.98 "Fraunces", serif; letter-spacing: -.04em; }
    h2 { margin-bottom: 0; font: 600 clamp(2rem, 4vw, 3.25rem)/1.04 "Fraunces", serif; letter-spacing: -.025em; }
    .lede { max-width: 650px; margin: 0; font-size: clamp(1.12rem, 2vw, 1.3rem); }
    .anchor-line { margin: 12px 0 0; color: var(--teal); font-weight: 700; }
    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border: 1px solid var(--teal); border-radius: 7px; background: transparent; color: var(--teal); text-decoration: none; font-weight: 700; cursor: pointer; }
    .btn.primary { background: var(--teal); color: var(--canvas); }
    .btn:hover { background: var(--teal-2); border-color: var(--teal-2); color: var(--canvas); }
    @media (prefers-color-scheme: dark) { .btn.primary { color: #10231f; } }
    .hero-brief { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--amber); padding: 22px; box-shadow: var(--shadow); }
    .brief-title { margin: 0 0 12px; color: var(--ink); font: 600 1.05rem/1.2 "Fredoka", sans-serif; }
    .brief-list { list-style: none; padding: 0; margin: 0; }
    .brief-list li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
    .brief-list li:first-child { border-top: 0; padding-top: 0; }
    .brief-list strong { color: var(--ink); font-size: .9rem; }
    .signal-strip { background: var(--teal); color: var(--canvas); }
    @media (prefers-color-scheme: dark) { .signal-strip { background: #213d39; color: #eef9f6; } }
    .signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .signal { padding: 16px 20px; border-left: 1px solid rgba(255,255,255,.24); }
    .signal:first-child { border-left: 0; }
    .signal b { display: block; font: 600 1.4rem/1 "Fraunces", serif; margin-bottom: 4px; }
    .signal span { font-size: .86rem; opacity: .9; }
    .credibility-strip { background: var(--paper); border-bottom: 1px solid var(--line); }
    .credibility-grid { display: grid; grid-template-columns: .82fr .92fr .92fr 1.34fr; }
    .brand-wordmark, .creator { padding: 18px 22px; }
    .creator { border-left: 1px solid var(--line); }
    .wordmark { display: block; color: var(--teal); font: 600 clamp(1.4rem, 3vw, 1.9rem)/1 "Fredoka", sans-serif; }
    .wordmark-note, .creator span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }
    .creator-credit { display: block; margin-top: 10px; color: var(--terracotta); font: 600 .75rem/1.3 "Fredoka", sans-serif; }
    .creator strong { display: block; color: var(--ink); font-size: .95rem; }
    section { padding: clamp(54px, 7vw, 78px) 0; scroll-margin-top: calc(var(--nav-height, 58px) + var(--dock-height, 0px) + 18px); }
    main > section:not(.overview-section) { border-top: 1px solid var(--line); }
    .overview-section { padding: 0; }
    .section-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: end; margin-bottom: 30px; }
    .section-intro { margin: 0; max-width: 630px; font-size: 1.06rem; }

    .sample-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 22px; align-items: start; }
    .sample-showcase { position: relative; overflow: hidden; background: var(--teal); color: var(--canvas); border: 1px solid var(--teal); box-shadow: var(--shadow); }
    .sample-showcase::after { content: ""; position: absolute; right: -88px; top: -88px; width: 220px; height: 220px; border: 44px solid color-mix(in srgb, var(--amber) 42%, transparent); border-radius: 50%; pointer-events: none; }
    @media (prefers-color-scheme: dark) { .sample-showcase { background: #213d39; color: #eef9f6; } }
    .sample-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; align-items: end; padding: 22px 22px 17px; }
    .sample-heading h3 { margin: 0; color: inherit; font: 600 1.55rem/1.1 "Fraunces", serif; }
    .sample-heading p { max-width: 440px; margin: 6px 0 0; color: inherit; opacity: .84; font-size: .9rem; }
    .sample-count { flex: 0 0 auto; padding: 6px 9px; border: 1px solid currentColor; color: inherit; font: 600 .76rem/1.2 "Fredoka", sans-serif; }
    .public-player { position: relative; z-index: 2; margin: 0 22px 20px; padding: 16px; background: var(--paper); color: var(--body); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(8, 29, 26, .2); }
    .public-player .player-inner { min-height: 0; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr); gap: 16px; align-items: center; padding: 0; }
    .public-player audio { width: 100%; height: 42px; }
    .public-player .player-status { display: block; grid-column: 1 / -1; max-width: none; margin-top: -7px; text-align: right; }
    .sample-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; background: var(--paper); color: var(--body); }
    .song-row { display: grid; grid-template-columns: 44px 30px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 62px; padding: 10px 16px; border-top: 1px solid var(--line); }
    .song-row.is-playing { background: color-mix(in srgb, var(--amber) 13%, var(--paper)); }
    .play-track { width: 44px; height: 44px; font-size: 1rem; display: grid; place-items: center; border: 1px solid var(--teal); border-radius: 50%; background: transparent; color: var(--teal); cursor: pointer; font-weight: 700; }
    .play-track:hover, .play-track[aria-pressed="true"] { background: var(--teal); color: var(--canvas); }
    @media (prefers-color-scheme: dark) { .play-track:hover, .play-track[aria-pressed="true"] { color: #10231f; } }
    .sample-index { color: var(--muted); font: 600 .76rem/1 "Fredoka", sans-serif; }
    .song-name { min-width: 0; color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sound-tag { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--muted); font: 600 .75rem/1.2 "Fredoka", sans-serif; }
    .library-vault { background: var(--paper); border: 1px solid var(--line); }
    .vault-head { display: flex; gap: 16px; justify-content: space-between; align-items: start; padding: 20px; border-bottom: 1px solid var(--line); }
    .vault-head h3 { margin: 0; font: 600 1.35rem/1.15 "Fraunces", serif; }
    .vault-head p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }
    .vault-count { flex: 0 0 auto; color: var(--terracotta); font: 600 .8rem/1.2 "Fredoka", sans-serif; }
    .locked-list { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 8px 12px; }
    .locked-track { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 43px; padding: 7px 6px; color: var(--muted); opacity: .78; border-bottom: 1px solid var(--line); }
    .locked-track:nth-last-child(-n + 2) { border-bottom: 0; }
    .lock-mark { display: grid; width: 20px; height: 20px; place-items: center; color: var(--terracotta); }
    .lock-mark svg { width: 14px; height: 14px; display: block; }
    .locked-name { min-width: 0; font-size: .82rem; line-height: 1.15; }
    .locked-sound { color: var(--muted); font: 600 .69rem/1 "Fredoka", sans-serif; }
    .unlock-card { padding: 21px 20px 22px; background: color-mix(in srgb, var(--amber) 10%, var(--paper)); border-top: 1px solid var(--line); }
    .cohort-note { margin: 0 0 7px; color: var(--terracotta); font: 600 .78rem/1.2 "Fredoka", sans-serif; }
    .unlock-card h3 { margin: 0 0 8px; font: 600 1.3rem/1.14 "Fraunces", serif; }
    .unlock-card > p:not(.cohort-note) { margin: 0 0 16px; color: var(--body); font-size: .9rem; }
    .unlock-cta { width: 100%; text-align: center; }
    .koch-proof { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
    .proof-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--canvas); font: 600 .76rem/1 "Fredoka", sans-serif; }
    @media (prefers-color-scheme: dark) { .proof-mark { color: #10231f; } }
    .koch-proof strong { display: block; color: var(--ink); font-size: .84rem; }
    .koch-proof span { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; line-height: 1.25; }
    .sequence { margin-top: 18px; padding: 20px; border: 1px solid var(--line); background: var(--paper); }
    .sequence h3 { margin: 0 0 14px; font: 600 1.15rem/1.2 "Fraunces", serif; }
    .sequence-line { display: grid; grid-template-columns: repeat(5, 1fr); }
    .sequence-step { position: relative; padding: 25px 12px 0 0; border-top: 3px solid var(--teal); }
    .sequence-step::before { content: attr(data-step); position: absolute; top: -15px; left: 0; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 2px solid var(--teal); color: var(--ink); font: 600 .72rem/1 "Fredoka", sans-serif; }
    .sequence-step strong { display: block; color: var(--ink); font-size: .87rem; }
    .sequence-step span { color: var(--muted); font-size: .78rem; }

    .rx-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .rx-step { padding: 17px; background: var(--paper); border-top: 4px solid var(--terracotta); }
    .rx-step .step-no { color: var(--terracotta); font: 600 .78rem/1 "Fredoka", sans-serif; }
    .rx-step h3 { margin: 8px 0 5px; font: 600 1rem/1.2 "Fredoka", sans-serif; }
    .rx-step p { margin: 0; color: var(--muted); font-size: .9rem; }
    .rating-row { margin-top: 18px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; align-items: center; padding: 18px; background: var(--paper); border: 1px solid var(--line); }
    .rating-row h3 { margin: 0 0 4px; font: 600 1rem/1.2 "Fredoka", sans-serif; }
    .rating-row p { margin: 0; color: var(--muted); font-size: .88rem; }
    .ratings { display: flex; flex-wrap: wrap; gap: 7px; }
    .rating { padding: 7px 9px; border-radius: 4px; background: var(--soft); font-size: .83rem; }

    .evidence { background: color-mix(in srgb, var(--teal) 5%, var(--canvas)); }
    .pilot-stack { display: grid; gap: 26px; }
    .pilot-figure { margin: 0; padding: 20px; border: 1px solid var(--line); background: var(--paper); }
    .figure-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: 16px; }
    .figure-head h3 { margin: 0; font: 600 1.2rem/1.2 "Fraunces", serif; }
    .figure-head p { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: .9rem; }
    .figure-tag { padding: 5px 9px; border: 1px solid var(--amber); color: var(--ink); font: 600 .75rem/1.2 "Fredoka", sans-serif; }
    .endpoint-key { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding: 9px 11px; background: var(--soft); color: var(--body); font-size: .83rem; }
    .endpoint-key::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: var(--terracotta); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--terracotta) 16%, transparent); }
    .endpoint-key strong { color: var(--ink); }
    .pilot-figure svg { display: block; width: 100%; height: auto; }
    .pilot-figure figcaption { margin-top: 13px; color: var(--muted); font-size: .83rem; }
    .svg-paper { fill: var(--paper); }
    .svg-soft { fill: var(--soft); }
    .svg-baseline { fill: color-mix(in srgb, var(--amber) 13%, var(--paper)); }
    .svg-treatment { fill: color-mix(in srgb, var(--teal) 9%, var(--paper)); }
    .svg-endpoint { fill: color-mix(in srgb, var(--terracotta) 9%, var(--paper)); }
    .svg-line { stroke: var(--line); }
    .svg-axis { stroke: var(--muted); }
    .svg-phase { stroke: var(--terracotta); }
    .svg-data-line { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
    .svg-point { fill: var(--paper); stroke: var(--teal); stroke-width: 2.2; }
    .svg-ink { fill: var(--ink); }
    .svg-body { fill: var(--body); }
    .svg-muted { fill: var(--muted); }
    .svg-teal { fill: var(--teal); }
    .svg-terracotta { fill: var(--terracotta); }
    .svg-amber { fill: var(--amber); }
    .svg-label { font: 700 14px "Atkinson Hyperlegible", sans-serif; }
    .svg-copy { font: 400 13px "Atkinson Hyperlegible", sans-serif; }
    .svg-small { font: 400 11px "Atkinson Hyperlegible", sans-serif; }
    .svg-kicker { font: 600 11px "Fredoka", sans-serif; }
    .svg-dash { stroke-dasharray: 5 5; }
    .mobile-visual { display: none !important; }
    .cadence-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
    .cadence-key div { padding: 12px 14px; border-top: 3px solid var(--amber); background: var(--paper); }
    .cadence-key div:nth-child(2) { border-color: var(--teal); }
    .cadence-key div:nth-child(3) { border-color: var(--terracotta); }
    .cadence-key strong { display: block; color: var(--ink); font-size: .88rem; }
    .cadence-key span { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }

    .clinic-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
    .time-stack { display: grid; gap: 8px; }
    .time-item { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding: 15px; background: var(--paper); border: 1px solid var(--line); }
    .time-item strong { color: var(--terracotta); font: 600 1.12rem/1 "Fraunces", serif; }
    .time-item h3 { margin: 0 0 3px; font: 600 .95rem/1.2 "Fredoka", sans-serif; }
    .time-item p { margin: 0; color: var(--muted); font-size: .86rem; }
    .clinic-detail { padding: 22px; background: var(--teal); color: var(--canvas); }
    @media (prefers-color-scheme: dark) { .clinic-detail { background: #213d39; color: #eef9f6; } }
    .clinic-detail h3 { color: inherit; margin-bottom: 12px; font: 600 1.25rem/1.2 "Fraunces", serif; }
    .clinic-detail ol { margin: 0; padding-left: 20px; }
    .clinic-detail li { margin: 8px 0; padding-left: 4px; }
    .fineprint { margin: 16px 0 0; color: var(--muted); font-size: .82rem; }
    .cta-section { padding-bottom: clamp(68px, 9vw, 104px); }
    .cta { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: center; padding: clamp(26px, 5vw, 44px); background: var(--paper); border: 1px solid var(--line); border-left: 7px solid var(--terracotta); }
    .cta h2 { margin-bottom: 10px; font-size: clamp(1.9rem, 4vw, 3rem); }
    .cta p { margin: 0; max-width: 640px; }
    .cta-actions { display: grid; gap: 9px; }
    .copy-status { min-height: 1.2em; color: var(--muted); text-align: center; font-size: .84rem; }
    footer { border-top: 1px solid var(--line); padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); }
    footer .wrap { display: flex; justify-content: space-between; gap: 22px; color: var(--muted); font-size: .82rem; }

    .player-dock { position: sticky; z-index: 60; top: var(--nav-height, 58px); border-block: 1px solid var(--line); background: var(--paper); box-shadow: 0 10px 24px rgba(16, 38, 34, .12); }
    .player-dock.is-idle { display: none; }
    .player-inner { min-height: 72px; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.2fr) auto; gap: 18px; align-items: center; padding-block: 8px calc(8px + env(safe-area-inset-bottom)); }
    .now-playing { min-width: 0; }
    .now-label { display: block; color: var(--terracotta); font: 600 .72rem/1.15 "Fredoka", sans-serif; }
    .now-title { display: block; margin-top: 3px; color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .player-dock audio { width: 100%; height: 40px; }
    .player-status { max-width: 210px; color: var(--muted); font-size: .78rem; line-height: 1.2; }
    .player-dock.is-idle .now-label { color: var(--muted); }

    @media (max-width: 860px) {
      .chapter-toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
      .chapter-toggle span { color: var(--muted); font-size: .8rem; font-weight: 400; }
      .nav-list { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .site-nav.menu-open .nav-list { display: grid; }
      .nav-link { min-height: 48px; padding: 7px 5px; font-size: .8rem; }
      .guide-bar { min-height: 66px; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding-block: 8px; }
      .progress-track { grid-column: 1 / -1; grid-row: 2; }
      .guide-actions { grid-column: 2; grid-row: 1; }
      .hero-grid, .section-head, .clinic-grid, .cta { grid-template-columns: 1fr; }
      .sample-layout { grid-template-columns: 1fr; }
      .hero-brief { max-width: 680px; }
      .signal-grid { grid-template-columns: repeat(2, 1fr); }
      .signal:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.24); }
      .signal:nth-child(4) { border-top: 1px solid rgba(255,255,255,.24); }
      .credibility-grid { grid-template-columns: repeat(3, 1fr); }
      .brand-wordmark { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
      .creator:first-of-type { border-left: 0; }
      .rx-flow { grid-template-columns: repeat(2, 1fr); }
      .rx-step:last-child { grid-column: 1 / -1; }
      .cadence-key { grid-template-columns: 1fr; }
      .player-inner { grid-template-columns: minmax(120px, .7fr) minmax(220px, 1.3fr); }
      .player-status { display: none; }
    }
    @media (max-width: 560px) {
      body { font-size: 16px; }
      .wrap { width: min(100% - 24px, 1120px); }
      .guide-bar { gap: 7px; }
      .progress-meta { gap: 6px; }
      .progress-meta strong { font-size: .9rem; }
      .guide-actions { gap: 5px; }
      .guide-btn { min-height: 44px; min-width: 44px; padding: 8px 10px; font-size: .9rem; }
      .hero { padding-top: 32px; }
      h1 { font-size: clamp(2.5rem, 14vw, 3.8rem); }
      .actions, .cta-actions { display: grid; }
      .btn { width: 100%; }
      .credibility-grid { grid-template-columns: 1fr; }
      .brand-wordmark { grid-column: auto; }
      .creator { border-left: 0; border-top: 1px solid var(--line); padding: 16px; }
      .brand-wordmark { padding: 16px; }
      .signal { padding: 14px 12px; }
      .signal b { font-size: 1.2rem; }
      .signal span { font-size: .78rem; }
      .sample-heading { display: block; padding: 18px 16px 14px; }
      .sample-count { display: inline-block; margin-top: 12px; }
      .public-player { margin: 0 12px 14px; padding: 14px; }
      .public-player .player-inner { grid-template-columns: 1fr; gap: 8px; }
      .public-player .player-status { grid-column: auto; margin-top: 0; text-align: left; }
      .song-row { grid-template-columns: 44px 26px minmax(0, 1fr); padding-inline: 12px; }
      .sound-tag { display: none; }
      .locked-list { grid-template-columns: 1fr; }
      .locked-track:nth-last-child(2) { border-bottom: 1px solid var(--line); }
      .vault-head { padding: 17px 16px; }
      .unlock-card { padding: 19px 16px 20px; }
      .sequence-line { grid-template-columns: 1fr; padding-left: 13px; }
      .sequence-step { min-height: 62px; padding: 0 0 16px 28px; border-top: 0; border-left: 3px solid var(--teal); }
      .sequence-step::before { top: 0; left: -15px; }
      .rx-flow, .rating-row { grid-template-columns: 1fr; }
      .rx-step:last-child { grid-column: auto; }
      .ratings { display: grid; grid-template-columns: 1fr 1fr; }
      .pilot-figure { padding: 14px; }
      .figure-head { grid-template-columns: 1fr; gap: 9px; }
      .figure-tag { width: max-content; max-width: 100%; }
      .desktop-visual { display: none !important; }
      .mobile-visual { display: block !important; }
      .time-item { grid-template-columns: 72px 1fr; }
      footer .wrap { display: block; }
      footer p { margin: 4px 0; }
      .player-inner { min-height: 100px; grid-template-columns: 1fr; gap: 5px; padding-block: 7px calc(7px + env(safe-area-inset-bottom)); }
      .now-title { font-size: .9rem; }
      .player-dock audio { height: 36px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .progress-track span { transition: none; } }

    button, a, summary, input, select, textarea { touch-action: manipulation; }
    .site-nav { padding-top: env(safe-area-inset-top); }
    .wrap, .hero-grid > *, .cta > *, .section-head > * { min-width: 0; }
    h1, h2, h3, p, li, a, strong, span { overflow-wrap: break-word; }
    .lyrics { margin: 0; padding: 4px 16px 14px; background: var(--paper); color: var(--body); border-top: 1px solid var(--line); }
    .lyrics details { border-bottom: 1px solid var(--line); }
    .lyrics details:last-child { border-bottom: 0; }
    .lyrics summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--teal); font-weight: 700; }
    .lyrics summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .lyric-body { margin: 0 0 14px; white-space: pre-line; font-size: .95rem; line-height: 1.5; }
    .lyric-body strong { color: var(--ink); }
    .lyric-note { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
    .pilot-form { display: grid; gap: 12px; margin-top: 4px; }
    .pilot-form label { display: grid; gap: 5px; color: var(--ink); font-weight: 700; font-size: .95rem; }
    .pilot-form input, .pilot-form select, .pilot-form textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 7px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; }
    .pilot-form textarea { min-height: 96px; resize: vertical; }
    .pilot-form input:focus-visible, .pilot-form select:focus-visible, .pilot-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .form-note { margin: 0; color: var(--muted); font-size: .85rem; }
    .pilot-form .field-hint { margin: -7px 0 0; color: var(--muted); font-size: .85rem; }
    .pilot-form input[aria-invalid="true"] { border-color: var(--terracotta); }
    .contact-line { display: grid; gap: 6px; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
    .contact-line p { margin: 0; color: var(--muted); font-size: .95rem; }
    .contact-btn { min-height: 56px; padding: 14px 22px; border-width: 2px; font-size: 1.08rem; width: 100%; background: var(--paper); }
    .contact-btn span { font-size: 1.15em; line-height: 1; }
    .footer-contact a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 4px; margin: -10px -4px; }
    .footer-contact { overflow-wrap: anywhere; }
    .footer-resources a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 4px; margin: -10px -4px; }
    .mobile-cta-bar { display: none; }
    .ask-fab { position: fixed; z-index: 66; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--teal-2); color: var(--canvas); font: inherit; font-weight: 700; font-size: .95rem; letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 16px rgba(16, 38, 34, .16), 0 1px 3px rgba(16, 38, 34, .12); transition: background-color .15s ease, box-shadow .15s ease; }
    .ask-fab-icon { flex: none; }
    .ask-fab:hover { background: var(--teal); box-shadow: 0 8px 20px rgba(16, 38, 34, .22), 0 1px 3px rgba(16, 38, 34, .14); }
    @media (prefers-color-scheme: dark) { .ask-fab { background: var(--teal-2); color: #10231f; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); } .ask-fab:hover { background: var(--teal); } }
    @media (prefers-reduced-motion: reduce) { .ask-fab { transition: none; } }
    .ask-fab:focus-visible, .ask-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    body.form-focus .ask-fab, body.ask-open .ask-fab { visibility: hidden; }
    .ask-dialog { position: fixed; inset: auto max(20px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) auto; margin: 0; width: min(380px, calc(100vw - 40px)); max-height: calc(100dvh - 110px); overflow: auto; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 44px rgba(16, 38, 34, .25); }
    .ask-dialog[open] { animation: ask-pop .16s ease-out; }
    .ask-dialog::backdrop { background: rgba(10, 25, 22, .28); }
    .ask-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
    .ask-head h2 { margin: 0; font-size: 1.35rem; }
    .ask-intro { margin: 6px 0 12px; color: var(--muted); font-size: .9rem; }
    .ask-close { flex: none; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
    .ask-close:hover { background: var(--line); }
    .ask-form textarea { min-height: 110px; }
    .ask-form input[aria-invalid="true"], .ask-form textarea[aria-invalid="true"] { border-color: var(--terracotta); }
    @keyframes ask-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes ask-sheet { from { transform: translateY(100%); } to { transform: none; } }
    @media (prefers-reduced-motion: reduce) { .ask-dialog[open] { animation: none; } }
    @media (max-width: 560px) {
      .mobile-cta-bar { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(28,64,58,.1); }
      .mobile-cta-bar .btn { flex: 1; min-height: 48px; }
      body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
      body.on-join .mobile-cta-bar { display: none; }
      .ask-fab { right: max(10px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); font-size: .9rem; }
      body.on-join .ask-fab { bottom: calc(12px + env(safe-area-inset-bottom)); }
      .ask-dialog { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 16px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
      .ask-dialog[open] { animation: ask-sheet .22s ease-out; }
    }
    @media (max-width: 360px) {
      .ask-fab { width: 44px; padding: 0; gap: 0; }
      .ask-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    }
    @media (max-width: 560px) and (prefers-reduced-motion: reduce) { .ask-dialog[open] { animation: none; } }
    @media (max-width: 420px) {
      .wrap { width: calc(100% - 20px); }
      .hero-grid { grid-template-columns: minmax(0, 1fr); }
      h1 { font-size: clamp(1.9rem, 11vw, 3.2rem); }
      h2 { font-size: clamp(1.6rem, 9vw, 2.4rem); }
      .hero-brief { padding: 16px; }
      .brief-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
      .signal-grid { grid-template-columns: minmax(0, 1fr); }
      .signal { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.24); }
      .guide-bar { grid-template-columns: minmax(0, 1fr); }
      .guide-actions { grid-column: 1; grid-row: auto; }
      .guide-actions { flex-wrap: wrap; }
      .guide-actions .guide-btn { flex: 1 1 auto; white-space: normal; min-width: 0; }
      .locked-track { grid-template-columns: 22px minmax(0, 1fr); }
      .locked-sound { grid-column: 2; }
      .ratings { grid-template-columns: minmax(0, 1fr); }
      .time-item { grid-template-columns: minmax(0, 1fr); }
      .song-row { grid-template-columns: 44px minmax(0, 1fr); }
      .sample-index { display: none; }
      .song-name { white-space: normal; }
      .sample-layout, .clinic-grid, .section-head, .cta, .rx-flow, .rating-row, .figure-head { grid-template-columns: minmax(0, 1fr) !important; }
      .sample-layout > *, .clinic-grid > *, .time-stack > *, .cta > *, .figure-head > * { min-width: 0; max-width: 100%; }
      .figure-tag { width: auto !important; white-space: normal; }
      .pilot-figure, .sample-showcase, .clinic-detail, .time-item, .hero-brief, .cta { padding-inline: 10px; }
      .public-player { margin-inline: 6px; padding: 10px; }
      .sample-heading, .vault-head, .lyrics { padding-inline: 10px; }
      .mobile-cta-bar .btn { min-width: 0; padding-inline: 6px; }
      .vault-head { flex-wrap: wrap; }
      .pilot-stack, .sequence-line, .time-stack { grid-template-columns: minmax(0, 1fr) !important; }
      .pilot-stack > *, .sequence-line > *, .pilot-figure, .sequence-step { min-width: 0; }
      .endpoint-key { flex-wrap: wrap; }
      .credibility-grid > * { min-width: 0; overflow-wrap: anywhere; }
      .endpoint-key > * { min-width: 0; flex: 1 1 100%; }
    }

    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .resources { margin-bottom: 40px; }
    .res-head { max-width: 760px; margin-bottom: 22px; }
    .res-head p:last-child { margin: 10px 0 0; }
    .why-music { position: relative; padding: clamp(18px, 4vw, 30px); margin-bottom: 30px; background: var(--teal); color: var(--canvas); border-top: 6px solid var(--amber); box-shadow: var(--shadow); }
    @media (prefers-color-scheme: dark) { .why-music { background: #213d39; color: #eef9f6; } }
    .why-label { margin: 0 0 8px; font: 600 .82rem/1.2 "Fredoka", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: inherit; }
    .why-head h3 { margin: 0 0 8px; color: inherit; font: 600 clamp(1.5rem, 3.4vw, 2.2rem)/1.1 "Fraunces", serif; }
    .why-head p { max-width: 760px; margin: 0 0 18px; color: inherit; opacity: .95; }
    .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; list-style: none; margin: 0 0 24px; padding: 0; }
    .res-grid.one { grid-template-columns: minmax(0, 1fr); }
    .res-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; background: var(--paper); color: var(--body); border: 1px solid var(--line); border-top: 4px solid var(--amber); }
    .res-card.research { border-top-color: var(--terracotta); }
    .res-card h4 { margin: 0 0 6px; color: var(--ink); font: 600 1.1rem/1.2 "Fraunces", serif; }
    .res-card p { margin: 0 0 10px; font-size: .95rem; }
    .res-kicker { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; align-items: center; color: var(--teal); font: 600 .8rem/1.2 "Fredoka", sans-serif; }
    .res-badge { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--soft); }
    .res-finding { color: var(--ink); font-weight: 700; }
    .res-cite { color: var(--muted); font-size: .84rem !important; overflow-wrap: anywhere; }
    .res-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; padding: 8px 2px; color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .res-link:hover { color: var(--teal-2); }
    .res-subhead { margin: 0 0 12px; font: 600 1.35rem/1.2 "Fraunces", serif; }
    .res-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .res-foot { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
    @media (max-width: 760px) { .res-split { grid-template-columns: minmax(0, 1fr); } .res-grid { grid-template-columns: minmax(0, 1fr); } }

    .faq { padding-block: clamp(28px, 5vw, 48px); }
    .faq h2 { margin: 0 0 14px; font: 600 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 "Fraunces", serif; color: var(--ink); }
    .faq details { border-top: 1px solid var(--line); }
    .faq details:last-of-type { border-bottom: 1px solid var(--line); }
    .faq summary { min-height: 48px; display: flex; align-items: center; padding: 10px 2px; cursor: pointer; color: var(--ink); font-weight: 700; }
    .faq details p { margin: 0 0 14px; max-width: 760px; color: var(--body); }