:root {
  color-scheme: light;
  --ink: #1A2238;
  --ink-2: #28304A;
  --muted: #5A6072;
  --muted-2: #4A5163;
  --paper: #F6F8FC;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --surface-3: #E8EBF2;
  --cool-section: #F6F8FC;
  --sound-blue: #14346B;
  --sound-blue-ink: #0E2A5C;
  --sound-blue-soft: #EAF0FB;
  --yellow: #FFD43B;
  --success: #2F8F5B;
  --success-soft: #E7F3EC;
  --error: #C0563C;
  --error-soft: #FBE9E8;
  --line: #E3E8F0;
  --line-strong: #C9D5E8;
  --shadow-sm: 0 12px 32px rgba(20, 52, 107, 0.07);
  --shadow-md: 0 24px 72px rgba(20, 52, 107, 0.13);
  --shadow-soft: 0 16px 44px rgba(20, 52, 107, 0.08);
  --radius-sm: .8rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.45rem;
  --radius-xl: 2rem;
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: .9rem;
  --space-4: 1.2rem;
  --space-5: 1.8rem;
  --space-6: 2.6rem;
  --wrap: 1120px;
  --motion: 180ms cubic-bezier(.2,.8,.2,1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --phrase-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sound-blue); text-decoration: underline; text-underline-offset: .22em; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; }
::selection { background: var(--sound-blue); color: white; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: calc(var(--wrap) + 2rem);
  margin: 0 auto;
  padding: .72rem 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--sound-blue);
  text-decoration: none;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: .55rem .78rem;
  border-radius: 999px;
  font-weight: 600;
}
.nav-links {
  display: none;
  position: absolute;
  top: 3.8rem;
  left: 1rem;
  right: 1rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-md);
  z-index: 12;
}
.nav-links.open { display: grid; gap: var(--space-2); }
.nav-links a {
  border-radius: 999px;
  color: var(--muted);
  padding: .54rem .72rem;
  text-decoration: none;
  font-weight: 600;
}
.nav-links a:hover, .nav-links a.active { background: var(--surface-2); color: var(--sound-blue); }
.nav-progress {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink-2);
  font-weight: 600;
}
.nav-progress .mini-progress { width: 4.6rem; }

.hero {
  width: min(calc(var(--wrap) + 2rem), calc(100% - 1rem));
  margin: .5rem auto 0;
  padding: clamp(1.6rem, 5vw, 3.1rem);
  color: white;
  background: linear-gradient(135deg, #0E2A5C 0%, #14346B 52%, #1B4286 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.hero-short { min-height: auto; }
.hero-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
}
.hero-copy h1, .page-heading h1 {
  margin: 0;
  max-width: 880px;
  color: inherit;
  font-size: clamp(1.95rem, 5.2vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.hero-copy p:not(.eyebrow), .page-heading p {
  max-width: 670px;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.55;
}
.eyebrow {
  margin: 0 0 .65rem;
  color: var(--sound-blue-ink);
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: none;
  font-size: .78rem;
}
.hero .eyebrow { color: #C3D2F5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--space-4); }
.primary-action, .secondary-action, .card-action, .secondary-page-action, .lesson-nav a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .74rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.primary-action { background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.primary-action:hover { transform: translateY(-1px); }
.secondary-action { border: 1px solid rgba(255,255,255,.26); color: white; }
.card-action, .secondary-page-action, .lesson-nav a { background: var(--ink); color: white; width: fit-content; }
.secondary-page-action { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.hero-card { display: flex; justify-content: center; }
.sample-card {
  width: min(100%, 350px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
  display: grid;
  gap: var(--space-3);
}
.sample-card strong { font-size: clamp(2.05rem, 8vw, 3.1rem); line-height: .95; letter-spacing: -.065em; }
.sample-card span { color: var(--muted); font-size: 1.08rem; }
.sample-card .eyebrow { color: var(--sound-blue); }

.section {
  width: min(var(--wrap), calc(100% - 2rem));
  margin: var(--space-6) auto;
}
.page-heading, .steps-panel, .signup-panel, .sources-panel, .privacy-panel, .progress-card, .lesson-view, .quiz-card, .soon-card, .lesson-card, .text-link-panel, .topic-card, .split-panel {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.page-heading, .steps-panel, .signup-panel, .sources-panel, .privacy-panel, .progress-card, .lesson-view, .quiz-card, .text-link-panel, .split-panel { padding: var(--space-4); }
.page-heading {
  background: rgba(255,255,255,.9);
}
.page-heading h1, .page-heading p { color: var(--ink); }
.page-heading p, .section-head p, .lesson-view p, .signup-panel p, .privacy-panel p { color: var(--muted); line-height: 1.58; }
.section-head { max-width: 780px; margin-bottom: var(--space-4); }
.section-head h2, .lesson-view h1, .lesson-view h2, .signup-panel h2, .privacy-panel h2 {
  margin: 0;
  font-size: clamp(1.65rem, 5.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.06em;
}
.section-head.compact h2 { font-size: clamp(1.55rem, 4vw, 2.35rem); }

.step-grid, .lesson-grid, .soon-grid, .topic-grid, .mini-path { display: grid; gap: .85rem; }
.step-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
}
.step-grid span, .lesson-number {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  font-weight: 600;
}
.soon-card span, .topic-card span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  padding: .28rem .55rem;
  font-size: .72rem;
  font-weight: 600;
}
.step-grid h3, .soon-card h3, .lesson-card h3, .topic-card h3 { margin: .8rem 0 .4rem; letter-spacing: -.035em; }
.step-grid p, .soon-card p, .lesson-card p, .topic-card p { color: var(--muted); line-height: 1.48; }
.signup-panel { display: grid; gap: var(--space-4); }
.waitlist-form { display: grid; gap: .65rem; align-items: start; }
.waitlist-form label:not(.consent-row) { display: grid; gap: .25rem; color: var(--ink-2); font-weight: 600; }
.waitlist-form input[type="email"], .type-question input, .search-box input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .86rem .95rem;
  background: var(--surface);
  color: var(--ink);
}
.waitlist-form button {
  border: 0;
  border-radius: 999px;
  padding: .82rem 1rem;
  background: var(--sound-blue);
  color: white;
  font-weight: 600;
}
.waitlist-form button:disabled { opacity: .65; }
.consent-row { display: flex; gap: .55rem; align-items: flex-start; color: var(--muted); line-height: 1.4; font-size: .92rem; }
.consent-row input { margin-top: .2rem; accent-color: var(--sound-blue); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-feedback { min-height: 1.35rem; margin: 0; font-weight: 600; }
.form-feedback.good { color: var(--success); }
.form-feedback.bad { color: var(--sound-blue); }
.waitlist-form small { color: var(--muted); line-height: 1.42; }
.waitlist-form small a { color: var(--sound-blue-ink); font-weight: 600; }
.text-link-panel a { color: var(--sound-blue-ink); font-weight: 600; text-decoration-thickness: .08em; text-underline-offset: .22em; }

.lesson-card {
  text-align: left;
  padding: var(--space-4);
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lesson-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.lesson-card.complete { border-color: rgba(35,116,91,.34); }
.lesson-card-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.lesson-level { border-radius: 999px; background: var(--surface-2); padding: .25rem .55rem; color: var(--ink-2); font-weight: 600; font-size: .76rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.card-meta small { border-radius: 999px; background: var(--surface-2); color: var(--muted); padding: .33rem .5rem; font-weight: 600; }
.soon-card, .topic-card { padding: var(--space-4); }
.topic-card { display: grid; gap: var(--space-3); align-content: space-between; }
.split-panel { display: grid; gap: var(--space-4); }
.split-panel ul { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.split-panel li { margin: .45rem 0; }
.mini-path a { display: grid; gap: .2rem; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; }
.mini-path span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--sound-blue-soft); color: var(--sound-blue); font-weight: 600; }
.mini-path small { color: var(--muted); line-height: 1.4; }
.inline-progress { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: 620px; }

.lesson-layout { display: grid; gap: var(--space-4); }
.lesson-picker { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .4rem; }
.lesson-picker .eyebrow { display: none; }
.picker-item {
  flex: 0 0 auto;
  min-width: 7.25rem;
  display: grid;
  gap: .2rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius-md);
  padding: .78rem;
  text-align: left;
  text-decoration: none;
}
.picker-item span { color: var(--sound-blue); font-weight: 600; }
.picker-item small { color: var(--muted); }
.picker-item.active { background: var(--ink); color: white; border-color: var(--ink); }
.picker-item.active small, .picker-item.active span { color: #D8E2F4; }
.lesson-title-row { display: grid; gap: var(--space-3); }
.lesson-statement {
  margin: var(--space-4) 0;
  padding: clamp(1.15rem, 4vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #14346B, #1B4286);
  color: white;
  overflow: hidden;
}
.lesson-statement span {
  display: block;
  margin-bottom: .6rem;
  color: #C3D2F5;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: none;
}
.lesson-statement strong {
  display: block;
  max-width: 950px;
  font-size: clamp(1.95rem, 5.5vw, 3.15rem);
  line-height: .98;
  letter-spacing: -.065em;
}
.lesson-statement small { display: block; margin-top: .85rem; color: var(--muted); font-size: 1rem; }
.lesson-note { margin: var(--space-4) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-2); line-height: 1.5; border: 1px solid var(--line); }
.register-note { background: #FFF9D8; }
.register-note ul { margin: .45rem 0 0; padding-left: 1.1rem; }
.register-note li { margin: .35rem 0; }
.local-progress-note { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.content-block { margin-top: var(--space-4); }
.content-block h3, .quiz-head h3 { margin: 0 0 .7rem; }
.content-block li { margin: .5rem 0; color: var(--muted); line-height: 1.5; }
.vocab-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.vocab-grid div, .phrase-row, .dialogue-line, .library-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
}
.vocab-grid div { padding: .78rem; display: grid; gap: .2rem; }
.vocab-grid span, .phrase-row span, .dialogue-line small, .library-card p, .library-card span { color: var(--muted); }
.phrase-stack, .phrase-results, .source-list { display: grid; gap: .65rem; }
.phrase-row, .dialogue-line, .library-card { display: grid; gap: .8rem; padding: .88rem; }
.phrase-row strong, .library-card strong { display: block; font-size: 1.06rem; margin-bottom: .25rem; }
.audio-controls { display: flex; gap: .42rem; flex-wrap: wrap; align-items: center; }
.audio-button {
  border: 0;
  background: var(--sound-blue);
  color: white;
  padding: .52rem .72rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .82rem;
}
.audio-button.pending { background: transparent; color: var(--muted); }
.audio-button.playing { background: transparent; color: var(--sound-blue); }
.audio-message { flex-basis: 100%; margin: .1rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.audio-message.bad { color: var(--sound-blue); }
.audio-message.pending { color: var(--muted); }
.audio-meta { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.audio-meta span { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; background: var(--surface); color: var(--muted); font-size: .9rem; }
.audio-meta strong { color: var(--ink); }
.audio-validation-list { display: grid; gap: .85rem; }
.audio-validation-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.audio-validation-card span { display: block; margin-bottom: .28rem; color: var(--muted); font-size: .86rem; font-weight: 600; }
.audio-validation-card strong { color: var(--ink); font-size: 1.08rem; line-height: 1.35; }
.validation-phrase { max-width: 62rem; }
.validation-version-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.validation-version-panel { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.validation-version-head { display: grid; gap: .1rem; }
.validation-version-head span { margin: 0; color: var(--sound-blue); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.validation-version-head strong { font-size: .98rem; }
.validation-version-head small, .validation-audio small, .validation-ratio { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.validation-audio-controls { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: .6rem; min-width: 0; }
.validation-audio { display: grid; gap: .28rem; min-width: 0; }
.validation-audio > span { margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.validation-audio audio { width: 100%; max-width: 100%; }
.validation-ratio { margin: 0; }
.dialogue-card { background: var(--surface-2); padding: var(--space-3); border-radius: var(--radius-lg); }
.dialogue-line { grid-template-columns: auto 1fr; align-items: start; margin-bottom: .65rem; }
.dialogue-line > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-weight: 600;
}
.dialogue-line small { display: block; margin-top: .25rem; line-height: 1.45; }
.quiz-head, .progress-numbers { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-bottom: var(--space-3); }
.question { border: 0; padding: var(--space-3) 0; margin: 0; border-top: 1px solid var(--line); }
.question legend, .type-question label { display: block; width: 100%; font-weight: 600; margin-bottom: .8rem; }
.option-list { display: grid; gap: .55rem; }
.option {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: .82rem;
  text-align: left;
}
.option.correct { border-color: rgba(35,116,91,.45); background: #e9f4ef; }
.option.wrong { border-color: rgba(192,86,60,.45); background: var(--sound-blue-soft); }
.type-question { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.type-question input, .search-box input { margin-top: .5rem; }
.check-type, .complete-toggle, .reset-progress {
  margin-top: .65rem;
  border: 0;
  border-radius: 999px;
  padding: .78rem 1rem;
  background: var(--ink);
  color: white;
  font-weight: 600;
}
.complete-toggle.done { background: var(--success); }
.feedback { min-height: 1.35rem; margin: .55rem 0 0; font-weight: 600; }
.feedback.good { color: var(--success); }
.feedback.bad { color: var(--sound-blue); }
.lesson-complete-panel { margin-top: var(--space-4); }
.lesson-nav { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: var(--space-4); }

.search-box { display: grid; gap: .25rem; font-weight: 600; }
.progress-meter, .mini-progress { height: .68rem; background: #E8EBF2; border-radius: 999px; overflow: hidden; }
.progress-meter span, .mini-progress span { display: block; height: 100%; background: var(--sound-blue); border-radius: inherit; }
.progress-card { display: grid; gap: var(--space-3); }
.progress-numbers > div { min-width: 9rem; display: grid; }
.progress-numbers strong { font-size: 1.55rem; letter-spacing: -.05em; color: var(--ink); }
.progress-numbers span { color: var(--muted); }
.privacy-list { display: grid; gap: .8rem; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.privacy-list strong { color: var(--ink); }
.source-list a { display: grid; gap: .25rem; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; }
.source-list span { color: var(--muted); line-height: 1.45; }
.source-list small { color: var(--sound-blue-ink); font-weight: 600; overflow-wrap: anywhere; }
.footer { display: grid; gap: .35rem; width: min(var(--wrap), calc(100% - 2rem)); margin: var(--space-6) auto var(--space-5); color: var(--muted); }
.footer strong { color: var(--ink); }
.footer-links { display: flex; gap: .8rem; flex-wrap: wrap; }
.footer-links a { color: var(--sound-blue-ink); font-weight: 600; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.empty-state { color: var(--muted); }

@media (max-width: 759px) {
  .audio-validation-card { grid-template-columns: 1fr; }
  .validation-audio-controls { grid-template-columns: 1fr; }
}

@media (min-width: 760px) {
  .topbar { padding-inline: 1rem; }
  .menu-toggle { display: none; }
  .nav-links { position: static; display: flex; align-items: center; background: transparent; box-shadow: none; padding: 0; border: 0; border-radius: 0; }
  .nav-progress { margin-left: .35rem; }
  .hero-grid { grid-template-columns: 1.28fr .72fr; }
  .page-heading, .steps-panel, .signup-panel, .sources-panel, .privacy-panel, .progress-card, .lesson-view, .quiz-card, .text-link-panel, .split-panel { padding: var(--space-5); }
  .step-grid, .soon-grid, .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-panel { grid-template-columns: 1fr .95fr; align-items: start; }
  .lesson-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signup-panel { grid-template-columns: 1fr .8fr; align-items: center; }
  .waitlist-form { grid-template-columns: 1fr auto; align-items: end; }
  .waitlist-form .form-feedback, .waitlist-form small { grid-column: 1 / -1; }
  .waitlist-form button { grid-column: 2; grid-row: 1; }
  .consent-row { grid-column: 1 / -1; }
  .lesson-layout { grid-template-columns: 218px 1fr; align-items: start; }
  .lesson-picker { position: sticky; top: 5rem; display: grid; overflow: visible; }
  .lesson-picker .eyebrow { display: block; }
  .picker-item { width: 100%; }
  .lesson-title-row { grid-template-columns: 1fr auto; align-items: start; }
  .phrase-row, .library-card { grid-template-columns: 1fr auto; align-items: center; }
  .dialogue-line { grid-template-columns: auto 1fr auto; }
  .vocab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .option-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.language-choice {
  border: 1px solid #E3E8F0;
  border-radius: 18px;
  padding: 0.9rem;
}

.language-choice legend {
  font-weight: 600;
  padding: 0 0.25rem;
}

.language-choice small {
  color: var(--muted);
  display: block;
  margin-bottom: 0.65rem;
}

.language-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.language-options label {
  align-items: center;
  border: 1px solid #E3E8F0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
}

.audio-issue-button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.15rem 0.25rem;
}

.audio-issue-button:hover,
.audio-issue-button:focus-visible {
  color: var(--ink);
}

.session-teaser, .pricing-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.practice-card-mini, .session-card, .session-final .final-acts article, .pricing-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.practice-card-mini {
  display: grid;
  gap: var(--space-2);
}
.practice-card-mini strong, .session-phrase strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.practice-session { display: grid; gap: var(--space-4); }
.session-topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  font-weight: 600;
}
.session-meter {
  height: .75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.session-meter span { display: block; height: 100%; background: #2457c5; border-radius: inherit; transition: width 240ms ease; }
.session-card {
  display: grid;
  gap: var(--space-4);
  background: linear-gradient(180deg, #FFFFFF, var(--surface));
}
.session-copy h1, .session-final h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -.06em; }
.session-copy p { color: var(--muted); line-height: 1.55; }
.session-phrase {
  display: grid;
  gap: var(--space-2);
  border-left: .35rem solid #2457c5;
  background: #eef3ff;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.session-phrase span { color: var(--muted); font-weight: 600; }
.session-phrase em { color: var(--sound-blue); font-style: normal; font-weight: 600; }
.audio-gated {
  border: 1px dashed #2457c5;
  border-radius: var(--radius-md);
  background: #f6f8ff;
  color: #173a83;
  padding: var(--space-3);
  font-weight: 600;
}
.session-options { display: grid; gap: .65rem; }
.session-options button, .session-input input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: .9rem 1rem;
  text-align: left;
  font-weight: 600;
}
.session-input { display: grid; gap: .4rem; font-weight: 600; }
.session-feedback { padding: var(--space-3); border-radius: var(--radius-md); font-weight: 600; }
.session-feedback.good { background: #e7f5ef; color: var(--success); }
.session-feedback.bad { background: var(--sound-blue-soft); color: var(--sound-blue-ink); }
.session-final { display: grid; gap: var(--space-4); }
.final-acts { display: grid; gap: .85rem; }
.final-acts span {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--sound-blue);
  color: white;
  font-weight: 600;
}
.validation-audio audio { width: min(100%, 18rem); display: block; margin: .35rem 0; }
@media (min-width: 760px) {
  .session-teaser, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .final-acts { grid-template-columns: repeat(3, 1fr); }
}

.launch-note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}
.order-panel, .pricing-status-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}
.pricing-status-panel {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}
.pricing-status-panel h2 { margin: .35rem 0 .45rem; }
.pricing-status-panel p { color: var(--muted); line-height: 1.58; }
.status-pill {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .38rem .65rem;
  background: var(--surface-2);
  color: var(--sound-blue-ink);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
@media (min-width: 760px) {
  .pricing-status-panel { grid-template-columns: 1fr auto; }
}

.audio-editorial {
  width: min(var(--wrap), calc(100% - 2rem));
  margin: var(--space-3) auto 0;
  display: grid;
  gap: .35rem;
  border: 1px solid rgba(36, 87, 197, .22);
  border-left: .38rem solid #2457c5;
  border-radius: var(--radius-md);
  background: #f6f8ff;
  color: #173a83;
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.audio-editorial strong { color: #102d66; }
.audio-editorial span { line-height: 1.5; font-weight: 600; }
.landing-split {
  display: grid;
  gap: var(--space-4);
}
.landing-split article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.landing-split h2 { margin: .45rem 0 .75rem; }
.landing-split ul, .pricing-grid ul { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.58; }
.status-pill.muted { color: var(--ink-2); }
@media (min-width: 860px) {
  .landing-split { grid-template-columns: 1fr 1fr; }
}

/* Accessibility, audio and responsive behavior */
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--sound-blue);
  outline-offset: 3px;
}

:where(a, button, input, summary) {
  min-height: 44px;
}

.hero-actions > a,
.footer-links a,
.mini-path a,
.source-list a,
.picker-item,
.language-options label,
summary {
  min-height: 44px;
}

.primary-action,
.secondary-action,
.card-action,
.secondary-page-action,
.lesson-nav a,
.check-type,
.complete-toggle,
.reset-progress,
.session-options button,
.session-input input,
.option,
.inactive-checkout {
  min-height: 44px;
}

.hero-copy { min-width: 0; }
.hero-card, .sample-card { min-width: 0; }
.hero-actions { align-items: stretch; }
.launch-note { color: rgba(255, 255, 255, .74); }
.pricing-status-panel .primary-action { background: var(--ink); color: white; }

.faq-panel {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.faq-list { display: grid; gap: .7rem; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: .2rem .9rem;
}
.faq-list summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.faq-list p { margin: 0 0 .95rem; color: var(--muted); line-height: 1.58; }

.inactive-checkout {
  width: fit-content;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  padding: .74rem 1rem;
  font-weight: 600;
}
.footer span { max-width: 58rem; line-height: 1.45; }
.footer-links { margin-top: .25rem; }

.audio-controls-gated .audio-button { max-width: 100%; }
.audio-button { min-height: 44px; min-width: 44px; }
.play-disc { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; }
.audio-label { white-space: nowrap; }
.audio-wave { flex: 0 0 auto; }
.audio-message { max-width: 32rem; }

@media (max-width: 759px) {
  .topbar { padding: .6rem .75rem; }
  .brand { font-size: 1.18rem; }
  .hero {
    width: min(100% - .75rem, calc(var(--wrap) + 2rem));
    margin-top: .38rem;
    padding: 1.15rem;
    border-radius: 1.35rem;
  }
  .hero-grid { gap: 1.15rem; }
  .hero-copy h1 { font-size: clamp(2rem, 11vw, 2.85rem); line-height: 1.02; }
  .hero-copy p:not(.eyebrow) { font-size: 1rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero-actions > a { width: 100%; padding-inline: .85rem; text-align: center; }
  .sample-card { width: 100%; padding: 1rem; }
  .sample-card strong { font-size: clamp(2rem, 16vw, 2.85rem); }
  .section { width: min(var(--wrap), calc(100% - 1rem)); margin: 1.7rem auto; }
  .page-heading, .steps-panel, .signup-panel, .sources-panel, .privacy-panel, .progress-card, .lesson-view, .quiz-card, .text-link-panel, .split-panel, .faq-panel { padding: 1rem; }
  .vocab-grid { grid-template-columns: 1fr; }
  .phrase-row, .dialogue-line { grid-template-columns: 1fr; align-items: start; }
  .dialogue-line > span { width: 2.25rem; height: 2.25rem; }
  .audio-controls { width: 100%; align-items: flex-start; }
  .audio-controls-gated { display: grid; gap: .45rem; }
  .audio-button { padding: .12rem .2rem .12rem .12rem; }
  .audio-label { white-space: normal; }
  .audio-wave { display: none; }
  .audio-message { flex-basis: auto; width: 100%; }
  .session-topline { grid-template-columns: auto 1fr; }
  .session-topline small { grid-column: 1 / -1; }
  .session-card { animation: none; }
  .pricing-grid article { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-controls.playing .audio-wave i,
  .audio-button.playing .audio-wave i,
  .session-card {
    animation: none !important;
  }
  .primary-action:hover,
  .lesson-card:hover {
    transform: none !important;
  }
  .session-meter span {
    transition: none !important;
  }
}
.text-link-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 759px) {
  .hero-card {
    display: none;
  }
}
@media (max-width: 759px) {
  .audio-editorial {
    width: min(var(--wrap), calc(100% - .75rem));
    margin-top: .45rem;
    padding: .7rem .85rem;
    gap: .2rem;
    font-size: .9rem;
  }
  .audio-editorial span { line-height: 1.34; }
}
@media (max-width: 759px) {
  .hero { padding: .95rem; }
  .hero-copy h1 { font-size: clamp(1.86rem, 9.6vw, 2.45rem); }
  .hero-copy p:not(.eyebrow) { line-height: 1.42; }
  .launch-note { line-height: 1.34; }
}
.checkout-readiness h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}
.checkout-readiness-list {
  margin: .85rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.6;
}
.checkout-return {
  display: grid;
  gap: .25rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--muted);
}
.checkout-return.good {
  background: rgba(91, 124, 91, .12);
  border-color: rgba(91, 124, 91, .28);
}
.checkout-return strong { color: var(--ink); }
.readiness-gates {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.readiness-gate {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  gap: .65rem;
  align-items: center;
  padding: .72rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.readiness-gate span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 600;
}
.readiness-gate.ready span {
  background: rgba(91, 124, 91, .15);
  color: var(--success);
}
.readiness-gate small {
  color: var(--muted);
  font-weight: 600;
}
.inactive-checkout.checkout-ready {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
  cursor: pointer;
}

.lesson-practice-panel, .diagnosis-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--sound-blue-soft);
}
.lesson-practice-panel p { margin: .25rem 0 0; color: var(--muted); }
.prompt-only strong { margin-top: .35rem; }
.dialogue-turn { display: grid; gap: var(--space-3); }
.dialogue-side {
  display: grid;
  gap: .45rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.dialogue-side small { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dialogue-side strong { font-size: 1.45rem; line-height: 1.1; }
.user-turn { background: #FFF9D8; }
.session-options button.selected, .diagnosis-card .session-options button.selected { border-color: var(--sound-blue); background: var(--sound-blue-soft); color: var(--sound-blue); }
.diagnosis-panel h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.055em; line-height: 1.04; }
.diagnosis-result { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.diagnosis-result > p { color: var(--muted); max-width: 700px; line-height: 1.58; }
.diagnosis-meaning {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 2.1rem);
}
.diagnosis-email { margin-top: var(--space-5); background: var(--surface-2); }
.diagnosis-email label { display: grid; gap: .35rem; flex: 1 1 260px; font-weight: 600; }
.diagnosis-email input { width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: .8rem 1rem; background: white; }
.diagnosis-email .form-feedback { flex-basis: 100%; margin: 0; color: var(--muted); }
.diagnosis-email .form-feedback.good { color: var(--success); }
.diagnosis-email .form-feedback.bad { color: var(--error); }

.full-access-conversion {
  margin-top: var(--space-5);
}
.conversion-card {
  border-color: rgba(255, 212, 59, .7);
  background: linear-gradient(135deg, #fffdf1 0%, #ffffff 54%, #eef4ff 100%);
  box-shadow: var(--shadow-md);
}
.conversion-card h2 {
  margin: .45rem 0 .55rem;
  max-width: 780px;
  font-size: clamp(1.55rem, 4.8vw, 2.35rem);
  letter-spacing: -.045em;
  line-height: 1.06;
}
.conversion-card p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}
.conversion-price-note {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .35rem 0 1rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-weight: 700;
}
.conversion-actions {
  margin-top: .3rem;
}
.conversion-actions .primary-action,
.conversion-actions .secondary-page-action {
  min-height: 3.15rem;
}
.conversion-safety {
  margin: .85rem 0 0;
  font-size: .92rem;
}
@media (max-width: 640px) {
  .diagnosis-result {
    padding: var(--space-4);
  }
  .full-access-conversion {
    margin-top: var(--space-4);
  }
  .conversion-card {
    padding: var(--space-4);
  }
  .conversion-price-note {
    display: flex;
    width: 100%;
    border-radius: var(--radius-md);
  }
  .conversion-actions {
    display: grid;
  }
  .conversion-actions .primary-action,
  .conversion-actions .secondary-page-action {
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 760px) { .dialogue-turn { grid-template-columns: 1fr 1fr; } }

.language-select {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}
.language-select select {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: .45rem .7rem;
  font-weight: 600;
}
.oral-page p { max-width: 760px; }
.oral-topic-grid .topic-grid, .photo-choice-grid .photo-grid {
  display: grid;
  gap: var(--space-4);
}
.photo-choice-card, .photo-practice-card, .photo-guide-card, .model-answer-panel, .recording-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.photo-choice-card { overflow: hidden; }
.photo-choice-card img, .photo-practice-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.photo-choice-card div, .photo-practice-card p, .photo-guide-card, .model-answer-panel, .recording-panel { padding: var(--space-4); }
.photo-choice-card span, .topic-card span { color: var(--sound-blue); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.photo-practice-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
.prompt-list { padding-left: 1.25rem; line-height: 1.7; }
.model-answer-panel .section-head { align-items: center; }
.model-lb { font-size: 1.15rem; line-height: 1.7; }
.validation-notice {
  display: inline-flex;
  width: fit-content;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  padding: .55rem .8rem;
  font-size: .9rem;
  font-weight: 600;
}
.validation-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--error-soft);
  color: var(--error);
  padding: .35rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.recording-panel { margin-top: var(--space-4); }
.recording-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.recording-panel audio { width: 100%; margin-top: var(--space-3); }
.photo-bank-actions { margin-top: var(--space-4); display: flex; justify-content: center; }
.photo-bank-list { display: grid; gap: var(--space-2); }
.photo-bank-list a {
  display: grid;
  gap: .2rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
}
.photo-bank-list span { color: var(--muted); font-size: .9rem; }
@media (min-width: 760px) {
  .oral-topic-grid .topic-grid, .photo-choice-grid .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-practice-layout { grid-template-columns: .95fr 1.05fr; }
}
@media (max-width: 920px) {
  .language-select { width: 100%; justify-content: space-between; }
}
.validation-notice.validated {
  border-color: rgba(35, 128, 86, .28);
  background: #EAF8F0;
  color: #0C5F3A;
}
.validation-badge.validated {
  background: #EAF8F0;
  color: #0C5F3A;
}
.a2-audio-controls { margin-top: .65rem; }
.prompt-list .a2-audio-controls { margin-top: .45rem; }
.b1-question-stack { display: grid; gap: .85rem; }
.b1-review-packet { display: grid; gap: var(--space-4); }
.b1-review-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.b1-review-card h3, .b1-review-card h4 { margin: 0; }
.b1-review-options { display: grid; gap: .45rem; margin: 0; padding-left: 1.15rem; color: var(--muted); }
.b1-review-options .correct-answer { color: #0C5F3A; font-weight: 600; }
.b1-question.review-mode { padding-bottom: 0; }
.b1-decision-panel ul { margin: .75rem 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.transcript-lb { white-space: pre-line; }

/* Consolidated blue design system components */
html, body, button, input, select { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body, p, li, input, select { font-weight: 400; }
strong, b, h1, h2, h3, h4, h5, h6, summary { font-weight: 600; }
.hero-copy h1, .page-heading h1, .section-head h2, .lesson-view h1, .lesson-view h2, .session-copy h1, .session-final h1 { font-weight: 600; letter-spacing: -.025em; }
.eyebrow, label, legend, .status-pill, .lesson-level, .card-meta small, .language-select, .sample-card small, .topic-card span, .validation-badge, .validation-notice { font-weight: 500; }
button, .primary-action, .secondary-action, .card-action, .secondary-page-action, .header-cta, .inactive-checkout, .lesson-nav a { font-weight: 600; }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
button, a, .lesson-card, .topic-card, .photo-choice-card, .feature-grid article, .step-grid article, .path-line article, .pricing-grid article { transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion), background-color var(--motion), color var(--motion); }
button:active, .primary-action:active, .secondary-page-action:active, .card-action:active, .secondary-action:active { transform: translateY(1px); }
.lesson-card:hover, .topic-card:hover, .photo-choice-card:hover, .feature-grid article:hover, .step-grid article:hover, .path-line article:hover, .pricing-grid article:hover { transform: translateY(-2px); border-color: #9DB6E0; box-shadow: 0 18px 42px rgba(20,52,107,.11); }
.brand::before { content: none; }
.brand-logo { align-items: center; line-height: 0; flex: 0 0 auto; }
.brand-logo:hover { text-decoration: none; }
.brand-logo-img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; }
.brand-logo-full .brand-logo-img { width: clamp(9.1rem, 16vw, 11.4rem); }
.brand-logo-symbol .brand-logo-img { width: 2.35rem; }
.brand-header .brand-logo-img { width: clamp(8.8rem, 14vw, 10.4rem); }
.hero-brand { margin-bottom: .9rem; }
.hero-brand .brand-logo-img { width: clamp(9.6rem, 18vw, 12.4rem); }
.topbar { display: grid; grid-template-columns: auto 1fr auto auto; }
.nav-links a.active { background: var(--yellow); color: var(--ink); }
.nav-links a:hover { background: var(--sound-blue-soft); color: var(--sound-blue); text-decoration: none; }
.header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.45rem; padding: .62rem .9rem; border-radius: 999px; background: var(--sound-blue); color: #FFFFFF; white-space: nowrap; }
.hero { border-radius: 1.8rem; box-shadow: 0 24px 72px rgba(14,42,92,.24); }
.hero-grid { grid-template-columns: 1fr; gap: clamp(1.2rem, 4vw, 2.6rem); }
.hero-copy .eyebrow { display: inline-flex; width: fit-content; padding: .35rem .62rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #C3D2F5; background: rgba(255,255,255,.08); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.hero-copy p:not(.eyebrow) { color: #C3D2F5; max-width: 620px; }
.primary-action { background: var(--sound-blue); color: #FFFFFF; box-shadow: none; }
.primary-action.yellow, .hero .primary-action.yellow { background: var(--yellow); color: var(--ink); }
.secondary-action { color: #FFFFFF; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.card-action, .lesson-nav a, .check-type, .complete-toggle, .reset-progress { background: var(--sound-blue); color: #FFFFFF; }
.secondary-page-action { background: var(--sound-blue-soft); color: var(--sound-blue); border-color: #D8E2F4; }
.sample-card { width: min(100%, 360px); padding: 1.15rem; background: #FFFFFF; border: 1px solid var(--line); color: var(--ink-2); }
.sample-card strong, .lesson-statement strong, .phrase-row strong, .library-card strong, .vocab-grid strong, .dialogue-line strong, .practice-card-mini strong, .session-phrase strong, .session-final h1 { font-family: var(--phrase-font); color: var(--sound-blue); font-weight: 600; letter-spacing: -.035em; }
.sample-card span, .lesson-statement small, .phrase-row span, .dialogue-line small, .vocab-grid span, .library-card p, .library-card span, .session-phrase span { color: var(--muted); font-style: normal; font-weight: 500; }
.demo-audio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: clamp(1rem, 3vw, 1.6rem); padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); }
.proof-row div { display: grid; gap: .18rem; }
.proof-row strong { color: #FFFFFF; font-size: 1rem; }
.proof-row span { color: #C3D2F5; font-size: .88rem; }
.path-panel, .features-panel, .faq-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-sm); padding: var(--space-4); }
.path-grid, .feature-grid { display: grid; gap: .85rem; }
.step-grid article, .path-grid article, .feature-grid article { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); background: #FFFFFF; }
.path-grid article.active { border-color: #9DB6E0; background: linear-gradient(180deg, #FFFFFF, #F6F8FC); }
.step-grid span, .lesson-number, .mini-path span, .final-acts span { background: var(--sound-blue-soft); color: var(--sound-blue); }
.status-pill, .soon-card span, .topic-card span, .lesson-level, .card-meta small { background: var(--sound-blue-soft); color: var(--sound-blue); border-color: #D8E2F4; }
.lesson-statement { background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.lesson-statement span { color: #3D6BB5; text-transform: uppercase; letter-spacing: .08em; }
.phrase-row strong, .dialogue-line strong, .session-phrase strong { font-size: clamp(1.35rem, 3vw, 1.65rem); line-height: 1.12; }
.audio-controls { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.audio-button { display: inline-flex; align-items: center; gap: .48rem; border: 0; background: transparent; color: var(--sound-blue); padding: .16rem; border-radius: 999px; min-height: 44px; min-width: 44px; }
.play-disc { display: inline-grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--sound-blue); color: #FFFFFF; box-shadow: 0 0 0 .42rem rgba(20,52,107,.12), 0 12px 22px rgba(20,52,107,.18); }
.play-disc svg { width: 1rem; height: 1rem; fill: currentColor; margin-left: .08rem; }
.audio-wave { display: inline-flex; align-items: end; gap: .16rem; height: 1.2rem; flex: 0 0 auto; }
.audio-wave i { display: block; width: .18rem; min-height: .22rem; border-radius: 999px; background: #3D6BB5; opacity: .48; transform-origin: center bottom; }
.audio-wave i:nth-child(1) { height: .34rem; } .audio-wave i:nth-child(2) { height: .62rem; } .audio-wave i:nth-child(3) { height: .92rem; } .audio-wave i:nth-child(4) { height: .48rem; }
.audio-controls.playing .audio-wave i, .audio-button.playing .audio-wave i { animation: wave-pulse 260ms ease-in-out infinite alternate; opacity: .9; }
.audio-controls.playing .audio-wave i:nth-child(2), .audio-button.playing .audio-wave i:nth-child(2) { animation-delay: 70ms; }
.audio-controls.playing .audio-wave i:nth-child(3), .audio-button.playing .audio-wave i:nth-child(3) { animation-delay: 140ms; }
.audio-controls.playing .audio-wave i:nth-child(4), .audio-button.playing .audio-wave i:nth-child(4) { animation-delay: 210ms; }
@keyframes wave-pulse { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.session-card { background: #FFFFFF; animation: card-enter 260ms ease both; }
.session-phrase { border: 1px solid var(--line); background: var(--paper); }
.session-phrase em { color: var(--sound-blue); font-style: normal; font-weight: 600; }
.session-meter span, .progress-meter span, .mini-progress span { background: var(--sound-blue); }
.session-final { display: grid; gap: var(--space-4); padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(circle at 12% 8%, rgba(20,52,107,.1), transparent 18rem), #FFFFFF; box-shadow: var(--shadow-md); }
@keyframes card-enter { from { opacity: 0; transform: translateY(.55rem); } to { opacity: 1; transform: translateY(0); } }
.option.correct, .session-feedback.good { border-color: rgba(47,143,91,.45); background: var(--success-soft); color: var(--success); }
.option.wrong, .session-feedback.bad { border-color: rgba(192,86,60,.45); background: var(--error-soft); color: var(--error); }
.feedback.good { color: var(--success); } .feedback.bad { color: var(--error); }
.inactive-checkout { width: fit-content; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-3); color: var(--muted); padding: .74rem 1rem; }
.coming-soon-pill, .inactive-checkout.coming-soon { background: #FFF5D0; border-color: #FFE68A; color: #775C00; }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: .2rem .9rem; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--ink); }
.faq-list summary::after { content: '⌄'; transition: transform var(--motion); color: var(--sound-blue); }
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list p { margin: 0 0 .95rem; color: var(--muted); line-height: 1.58; }
.source-list a { grid-template-columns: auto 1fr; align-items: start; }
.source-list a strong, .source-list a span:not(.source-icon), .source-list a small { grid-column: 2; }
.source-icon { grid-row: 1 / span 3; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--sound-blue-soft); color: var(--sound-blue); font-weight: 600; }
.legal-prevails { padding: .75rem .9rem; border: 1px solid #D8E2F4; border-radius: .9rem; background: var(--sound-blue-soft); color: var(--sound-blue); }
.footer { border: 0; background: transparent; }
.footer-card { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-sm); }
.footer-brand { display: inline-flex; align-items: center; color: var(--sound-blue); }
.footer-brand .brand-logo-img { width: 9.5rem; }
.footer-links a { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--muted); }
.score-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.score-buttons .selected, .option.selected { border-color: var(--yellow); background: #FFF9D8; color: var(--ink); }
@media (min-width: 760px) { .nav-links { display: inline-flex; } .menu-toggle { display: none; } .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr); } .step-grid, .path-grid, .feature-grid { grid-template-columns: repeat(3, 1fr); } .path-line { grid-template-columns: repeat(4,1fr); } .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; } .pricing-grid article { display: flex; flex-direction: column; } .pricing-grid article .card-action, .pricing-grid article .inactive-checkout { margin-top: auto; } }
@media (max-width: 759px) { .topbar { grid-template-columns: auto auto; padding: .6rem .75rem; } .language-select, .header-cta { grid-column: auto; width: auto; } .header-cta { grid-column: 1 / -1; font-size: .82rem; padding-inline: .65rem; } .brand-header .brand-logo-img { width: 8.4rem; } .hero-card { display: none; } .hero { width: min(100% - .75rem, calc(var(--wrap) + 2rem)); margin-top: .38rem; padding: .95rem; border-radius: 1.25rem; } .hero-copy h1 { font-size: clamp(1.86rem, 9.6vw, 2.45rem); line-height: 1.1; } .hero-copy p:not(.eyebrow) { line-height: 1.42; } .hero-actions { display: grid; grid-template-columns: 1fr; gap: .6rem; } .hero-actions > a { width: 100%; padding-inline: .85rem; text-align: center; } .proof-row { grid-template-columns: 1fr; } .section { width: min(var(--wrap), calc(100% - 1rem)); margin: 1.7rem auto; } .page-heading, .steps-panel, .signup-panel, .sources-panel, .privacy-panel, .progress-card, .lesson-view, .quiz-card, .text-link-panel, .split-panel, .faq-panel { padding: 1rem; } .vocab-grid { grid-template-columns: 1fr; } .phrase-row, .dialogue-line { grid-template-columns: 1fr; align-items: start; } .audio-controls { width: 100%; align-items: flex-start; } .audio-controls-gated { display: grid; gap: .45rem; } .audio-wave { display: none; } .audio-label { white-space: normal; } .audio-message { flex-basis: auto; width: 100%; } .session-topline { grid-template-columns: auto 1fr; } .session-topline small { grid-column: 1 / -1; } .session-card { animation: none; } .footer-bottom { display: grid; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .audio-controls.playing .audio-wave i, .audio-button.playing .audio-wave i, .session-card { animation: none !important; } .primary-action:hover, .lesson-card:hover { transform: none !important; } .session-meter span { transition: none !important; } }
.study-route-panel { display: grid; gap: var(--space-4); }
.study-route-steps { display: grid; gap: var(--space-4); }
.study-step, .b1-set-card, .oral-rubric-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.study-step { display: grid; gap: .55rem; position: relative; }
.study-step > span {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--sound-blue);
  font-weight: 600;
}
.study-step small { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.study-step h3, .oral-rubric-panel h3 { margin: 0; }
.study-step p, .oral-rubric-panel p { color: var(--muted); line-height: 1.58; margin: 0; }
.study-step.start { border-color: #9DB6E0; box-shadow: 0 18px 42px rgba(20,52,107,.13); }
.study-step.start > span { background: var(--yellow); color: var(--ink); }
.study-step.before-start { opacity: .72; }
.mini-level-path { display: flex; gap: .5rem; flex-wrap: wrap; margin: var(--space-3) 0; }
.mini-level-path span { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; color: var(--muted); background: var(--surface); }
.mini-level-path span.active { border-color: #9DB6E0; color: var(--sound-blue); background: #EEF4FF; }
.oral-rubric-panel { margin-top: var(--space-4); background: var(--surface-2); }
.oral-rubric-panel ul { margin: var(--space-3) 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.55; }
.b1-set-card { display: grid; gap: var(--space-4); }
.audio-controls.no-audio { padding: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.audio-controls.no-audio .audio-message { margin: 0; }
@media (min-width: 900px) { .study-route-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pwa-install-panel {
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(20, 52, 107, 0.14);
  border-radius: 16px;
  background: #fffdf4;
  color: #14346b;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  box-shadow: 0 10px 26px rgba(20, 52, 107, 0.08);
}
.pwa-install-panel.update { background: #edf4ff; }
.pwa-install-panel span { font-size: 0.92rem; font-weight: 500; }
.pwa-install-panel .secondary-page-action { padding: 8px 12px; white-space: nowrap; }
.pwa-dismiss {
  border: 0;
  background: transparent;
  color: #14346b;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}
.readiness-profile-panel .section-head { align-items: flex-start; }
.readiness-grid, .strategy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.readiness-grid article, .strategy-card {
  background: #fff;
  border: 1px solid rgba(20, 52, 107, 0.12);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 38px rgba(20, 52, 107, 0.08);
}
.readiness-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#14346b var(--pct), rgba(20, 52, 107, 0.12) 0);
  margin-bottom: 12px;
}
.readiness-ring strong {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: #14346b;
}
.strategy-card > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd43b;
  color: #14346b;
  font-weight: 700;
}
.strategy-examples { display: grid; gap: 10px; margin: 14px 0; }
.strategy-examples blockquote {
  margin: 0;
  padding: 12px;
  border-left: 4px solid #14346b;
  background: #f5f8ff;
  border-radius: 12px;
}
.strategy-examples small { display: block; margin-top: 6px; color: #445; }
.mini-exercise { border-top: 1px solid rgba(20, 52, 107, 0.12); padding-top: 12px; }
@media (max-width: 720px) {
  .pwa-install-panel { margin: 8px 12px 0; align-items: flex-start; }
  .pwa-install-panel .secondary-page-action { padding: 7px 9px; }
}

/* Root coherence pass: shared components and spacing */
:root {
  --component-card-padding: 1.2rem;
  --component-card-radius: 1.1rem;
  --component-icon-size: 30px;
  --component-icon-container: 56px;
  --section-y: 2rem;
}
.section { margin: var(--section-y) auto; }
.ml-card,
.landing-split article,
.feature-grid article,
.step-grid article,
.pricing-grid article,
.lesson-card,
.topic-card,
.b1-review-card,
.b1-set-card,
.photo-choice-card,
.photo-guide-card,
.model-answer-panel,
.recording-panel,
.source-list a,
.text-link-panel,
.privacy-panel,
.progress-card,
.quiz-card,
.lesson-view,
.split-panel {
  border: 1px solid var(--line);
  border-radius: var(--component-card-radius);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.ml-card,
.landing-split article,
.feature-grid article,
.step-grid article,
.pricing-grid article,
.topic-card,
.b1-review-card,
.b1-set-card { padding: var(--component-card-padding); }
.step-grid article,
.feature-grid article,
.pricing-grid article,
.lesson-card { min-height: auto; height: 100%; align-content: start; }
.step-grid article,
.feature-grid article,
.lesson-card,
.pricing-grid article { display: flex; flex-direction: column; gap: .58rem; }
.step-grid article .card-action,
.feature-grid article .card-action,
.lesson-card .card-action,
.pricing-grid article .card-action,
.pricing-grid article .inactive-checkout { margin-top: auto; }
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: var(--component-icon-container);
  height: var(--component-icon-container);
  border-radius: 1rem;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  margin-bottom: .25rem;
}
.line-icon { width: var(--component-icon-size); height: var(--component-icon-size); stroke-width: 1.7; }
.step-grid article > .line-icon,
.feature-grid article > .line-icon,
.topic-card .line-icon { width: var(--component-icon-size); height: var(--component-icon-size); }
.step-number,
.lesson-number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  font-weight: 600;
}
.language-select {
  min-height: 2.45rem;
  padding: .2rem .3rem .2rem .62rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.language-select select { border: 0; padding: .35rem .45rem; background: transparent; max-width: 10rem; }
.language-globe { line-height: 1; }
.footer-brand-wrap .brand,
.footer-brand { text-decoration: none; }
.lesson-card-top { align-items: flex-start; }
.lesson-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.lesson-status,
.lesson-level,
.card-meta small {
  display: inline-flex;
  align-items: center;
  border: 1px solid #D8E2F4;
  border-radius: 999px;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  padding: .28rem .55rem;
  font-size: .76rem;
  font-weight: 500;
}
.lesson-card.locked { opacity: .82; }
.lesson-card.complete .lesson-status { background: var(--success-soft); color: var(--success); border-color: rgba(47,143,91,.25); }
.quiz-dots { display: inline-flex; align-items: center; gap: .24rem; padding: .34rem .12rem; background: transparent; border: 0; }
.quiz-dot { display: inline-block; width: .42rem; height: .42rem; border-radius: 999px; background: #D8E2F4; }
.quiz-dot.filled { background: var(--sound-blue); }
.path-line {
  position: relative;
  display: grid;
  gap: .9rem;
}
.path-line::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 2.1rem;
  height: 2px;
  background: #D8E2F4;
  z-index: 0;
}
.path-line article {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .45rem;
  padding: var(--component-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--component-card-radius);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.path-line article span,
.mini-level-path span {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--sound-blue-soft);
  color: var(--sound-blue);
  font-weight: 600;
}
.path-line article.active { border-color: #9DB6E0; box-shadow: 0 18px 42px rgba(20,52,107,.12); }
.path-line article.active span { background: var(--yellow); color: var(--ink); }
.audio-control-group { gap: .7rem; }
.audio-button { min-height: 42px; }
.audio-wave { display: none; }
.audio-issue-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: .2rem .1rem;
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: .22em;
}
.audio-issue-button:hover { color: var(--sound-blue); }
.sources-panel .source-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.source-list a { min-height: 9rem; }
.text-link-panel { padding: .85rem 1rem; }
.notify-form { display: grid; gap: .72rem; margin-top: .75rem; width: 100%; }
.notify-form label:not(.consent-row) { display: grid; gap: .35rem; font-weight: 500; }
.notify-form input[type="email"] { width: 100%; border: 1px solid var(--line-strong); border-radius: .9rem; padding: .86rem .95rem; background: var(--surface); color: var(--ink); }
.notify-form .consent-row { align-items: flex-start; margin: 0; }
.notify-form button[type="submit"] { width: fit-content; }
.pricing-grid article { min-height: 21rem; }
.home-pricing article { min-height: 14rem; }
@media (min-width: 760px) {
  .path-line { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 759px) {
  :root { --section-y: 1.45rem; --component-card-padding: 1rem; }
  .path-line::before { display: none; }
  .pricing-grid article { min-height: auto; }
  .language-select select { max-width: 7.6rem; }
}
.step-grid .icon-badge,
.feature-grid .icon-badge,
.topic-card .icon-badge {
  width: var(--component-icon-container);
  min-width: var(--component-icon-container);
  height: var(--component-icon-container);
  padding: 0;
  border-radius: 1rem;
}

/* 2026-06-09 shared mobile/performance/UI fixes */
.audio-button.loading .audio-label::after { content: '…'; }
.audio-button.pending:not([data-audio-missing]) { opacity: .92; cursor: progress; }
@media (max-width: 759px) {
  .step-grid article,
  .feature-grid article,
  .pricing-grid article,
  .lesson-card,
  .path-grid article,
  .topic-card,
  .ml-card {
    height: auto;
    min-height: 0;
  }
  .step-grid article .card-action,
  .feature-grid article .card-action,
  .lesson-card .card-action,
  .pricing-grid article .card-action,
  .pricing-grid article .inactive-checkout {
    margin-top: .7rem;
  }
}
@media (min-width: 760px) {
  .step-grid article,
  .feature-grid article,
  .pricing-grid article,
  .lesson-card {
    height: 100%;
  }
}
.notify-form .consent-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  line-height: 1.35;
}
.notify-form .consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}
.notify-form button[type="submit"].secondary-page-action {
  border-color: var(--sound-blue);
  background: var(--sound-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(20, 52, 107, .18);
}
.notify-form button[type="submit"].secondary-page-action:hover,
.notify-form button[type="submit"].secondary-page-action:focus-visible {
  background: #0E2A5C;
  color: #fff;
}
.hero-brand { display: none; }

.diagnosis-result-stack {
  display: grid;
  gap: var(--space-4);
}
.diagnosis-result-card {
  display: grid;
  gap: var(--space-3);
}
.diagnosis-result-card h1,
.diagnosis-result-card h2 {
  margin: 0;
  letter-spacing: -.055em;
  line-height: 1.04;
}
.diagnosis-result-card h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.diagnosis-result-card h2 { font-size: clamp(1.55rem, 4vw, 2.35rem); }
.diagnosis-result-card p { color: var(--muted); line-height: 1.58; max-width: 780px; }
.diagnosis-level-meter { display: grid; gap: .55rem; margin: .4rem 0 .15rem; }
.diagnosis-meter-track {
  position: relative;
  min-height: 3.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, #edf4ff 0%, #edf4ff 66%, #fff8d8 100%);
  overflow: visible;
}
.diagnosis-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .9rem;
  border-radius: 999px;
  background: var(--sound-blue);
  color: #fff;
}
.diagnosis-meter-fill strong { font-weight: 700; }
.diagnosis-meter-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  white-space: nowrap;
}
.diagnosis-meter-pin.current { background: var(--yellow); color: var(--ink); }
.diagnosis-meter-pin.target { background: #fff; color: var(--sound-blue); border-color: #9DB6E0; transform: translate(-100%, -50%); }
.diagnosis-meter-labels { display: grid; grid-template-columns: repeat(3, 1fr); color: var(--muted); font-weight: 600; font-size: .9rem; }
.diagnosis-meter-labels span:nth-child(2) { text-align: center; }
.diagnosis-meter-labels span:nth-child(3) { text-align: right; }
.diagnosis-route-card .path-line { margin-top: .3rem; }
.diagnosis-offer-card { border-color: rgba(255, 212, 59, .7); background: linear-gradient(135deg, #fffdf1 0%, #ffffff 54%, #eef4ff 100%); }
.diagnosis-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.diagnosis-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.diagnosis-offer-actions span { display: inline-flex; align-items: center; padding: .65rem .85rem; border-radius: 999px; background: var(--yellow-soft); color: var(--ink); font-weight: 700; }
.diagnosis-free-link { width: fit-content; }
.readiness-level-line { font-weight: 600; color: var(--sound-blue) !important; }
@media (min-width: 760px) {
  .path-line { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .diagnosis-meter-track { min-height: 3.25rem; }
  .diagnosis-meter-pin.target { max-width: 5.8rem; white-space: normal; line-height: 1.05; text-align: center; }
  .diagnosis-offer-actions { display: grid; }
  .diagnosis-offer-actions .primary-action,
  .diagnosis-free-link { width: 100%; justify-content: center; text-align: center; }
  .diagnosis-offer-actions span { border-radius: var(--radius-md); }
}

/* 2026-06-09 site polish pass: compact headers, contact, pricing, guided recording review */
.page-heading {
  max-width: min(860px, calc(100% - 2rem));
}
.pricing-feature-list,
.guided-self-eval ul {
  display: grid;
  gap: .55rem;
  margin: .35rem 0 1rem;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.45;
}
.guided-self-eval,
.contact-form {
  display: grid;
  gap: .85rem;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.guided-self-eval h3,
.guided-self-eval p { margin: 0; }
.guided-self-eval p,
.model-audio-compare span { color: var(--muted); line-height: 1.45; }
.guided-self-eval label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.guided-self-eval input { margin-top: .18rem; accent-color: var(--sound-blue); }
.model-audio-compare { display: grid; gap: .45rem; }
.contact-panel { max-width: min(860px, calc(100% - 2rem)); }
.contact-form label { display: grid; gap: .35rem; color: var(--ink-2); font-weight: 600; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .86rem .95rem;
  background: var(--surface);
  color: var(--ink);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.brand-logo-full .brand-logo-img,
.brand-header .brand-logo-img,
.footer-brand .brand-logo-img,
.hero-brand .brand-logo-img {
  padding-right: .22rem;
  overflow: visible;
}
.brand-logo-full { overflow: visible; }
@media (min-width: 760px) {
  .pricing-feature-list { margin-bottom: 1.4rem; }
}
@media (max-width: 759px) {
  .page-heading,
  .contact-panel { max-width: min(100% - 1rem, var(--wrap)); }
}

.checkout-consent-box {
  display: grid;
  gap: .75rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-2);
}
.checkout-email,
.checkout-consent {
  display: grid;
  gap: .4rem;
  color: var(--ink);
}
.checkout-email input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: .8rem;
  padding: .72rem .85rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
.checkout-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  font-size: .94rem;
  line-height: 1.45;
}
.checkout-consent input {
  margin-top: .2rem;
  width: 1.1rem;
  height: 1.1rem;
}
.checkout-smallprint {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
.sales-terms-summary {
  margin-top: 1.25rem;
}

/* 2026-06-09 SEO guides hub */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}
.guide-grid.compact { margin-top: 1rem; }
.guide-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.guide-card h3 { margin: .15rem 0 0; font-size: 1.1rem; line-height: 1.25; }
.guide-card p { color: var(--muted); line-height: 1.55; margin: 0; }
.guide-card .card-action { margin-top: auto; }
.guide-article {
  max-width: 880px;
  margin-inline: auto;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 1.25rem;
}
.breadcrumb a { color: var(--blue); }
.guide-header {
  background: linear-gradient(135deg, rgba(20,52,107,.08), rgba(255,212,59,.16));
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  padding: clamp(1.3rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}
.guide-header h1 { margin: .45rem 0 .75rem; }
.guide-header p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 66ch; }
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.guide-meta span {
  border: 1px solid rgba(20,52,107,.16);
  border-radius: 999px;
  padding: .35rem .65rem;
  color: var(--muted);
  background: rgba(255,255,255,.7);
  font-size: .88rem;
}
.guide-body {
  display: grid;
  gap: 1rem;
}
.guide-body section,
.guide-faq,
.official-sources,
.guide-disclaimer,
.guide-cta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}
.guide-body h2,
.guide-faq h2,
.official-sources h2,
.guide-disclaimer h2,
.guide-cta h2 { margin-top: 0; }
.guide-body p,
.guide-body li,
.guide-faq p,
.guide-disclaimer p,
.guide-cta p { color: var(--muted); line-height: 1.65; }
.guide-body ul,
.official-sources ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.guide-faq details { border-top: 1px solid var(--line); padding: .85rem 0; }
.guide-faq details:first-of-type { border-top: 0; }
.guide-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.guide-faq p { margin: .55rem 0 0; line-height: 1.65; }
.guide-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}
.guide-faq,
.official-sources,
.guide-disclaimer,
.guide-cta { margin-top: 1rem; }
.guide-teaser-panel .secondary-page-action { margin-top: 1rem; }
@media (max-width: 759px) {
  .guide-article { padding-inline: 1rem; }
  .guide-header { border-radius: 1rem; }
}

/* 2026-06-10 production audit: paywall, navigation, pricing conversion, mobile polish */
.nav-extra { display: inline-flex; align-items: center; }
.nav-links .language-select { margin: 0; }
.header-cta.in-menu { background: var(--yellow); color: var(--ink); }
.primary-action, .primary-action.yellow, .hero .primary-action.yellow, .inactive-checkout.checkout-ready { background: var(--yellow); color: var(--ink); box-shadow: none; }
.primary-action:not(.yellow) { background: var(--yellow); color: var(--ink); }
.secondary-page-action { background: var(--sound-blue-soft); color: var(--sound-blue); border-color: #D8E2F4; }
.card-action, .lesson-nav a, .check-type, .complete-toggle, .reset-progress { background: var(--sound-blue); color: #fff; }
.paywall-card { border-color: rgba(255,212,59,.72); box-shadow: 0 20px 60px rgba(20,52,107,.12); }
.paywall-teaser { display: grid; gap: var(--space-4); }
.gated-page .lesson-view { max-width: 860px; margin: 0 auto; }
.gated-b1-set .lesson-statement { align-items: start; }
.topic-card.locked { border-color: rgba(20,52,107,.18); background: linear-gradient(180deg,#fff,#F6F8FC); }
.sample-phrase-stack { display: grid; gap: .9rem; }
.sample-phrase { display: grid; gap: .45rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.sample-phrase:last-child { border-bottom: 0; padding-bottom: 0; }
.sample-phrase strong { font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.05; }

.hero-card { align-items: center; }
.hero-sample-card { padding: clamp(.95rem, 2vw, 1.15rem); gap: .75rem; }
.hero-sample-card .sample-phrase-stack { gap: .72rem; }
.hero-sample-card .sample-phrase { gap: .34rem; padding-bottom: .62rem; }
.hero-sample-card .sample-phrase strong { font-size: clamp(1.3rem, 2.1vw, 1.65rem); }
.hero-sample-card .demo-audio-row { gap: .35rem; }
.hero-sample-card .audio-control-group { gap: .35rem; }
.hero-sample-card .audio-button { min-height: 40px; min-width: 40px; padding: .1rem; }
.hero-sample-card .play-disc { flex-basis: 2.35rem; width: 2.35rem; height: 2.35rem; box-shadow: 0 0 0 .32rem rgba(20,52,107,.1), 0 10px 18px rgba(20,52,107,.14); }
.hero-sample-card .audio-wave, .hero-sample-card .audio-issue-button { display: none; }
.pricing-audio-sample { display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.pricing-audio-sample > span { font-weight: 600; color: var(--sound-blue); }
.trust-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.1rem, 3vw, 1.6rem); }
.trust-proof { margin-top: 0; }
.trust-panel .trust-proof strong { color: var(--sound-blue); }
.home-pricing { background: linear-gradient(135deg,#0E2A5C,#14346B); color: #fff; border-radius: var(--radius-xl); padding: clamp(1rem,3vw,1.4rem); }
.home-pricing .pricing-card { background: rgba(255,255,255,.97); color: var(--ink); }
.features-panel, .path-panel, .faq-panel, .guide-teaser-panel { background: var(--surface); border-radius: var(--radius-xl); padding: clamp(1rem, 3vw, 1.4rem); }
.order-panel, .landing-split, .trust-panel { background: var(--sound-blue-soft); border-radius: var(--radius-xl); padding: clamp(1rem, 3vw, 1.4rem); }
.sproochentest-landing p { max-width: 760px; }
.oral-topic-grid .line-icon { display: block; margin-bottom: .65rem; }
.session-card { animation-duration: 80ms; }
@media (min-width: 760px) {
  .nav-links { gap: .35rem; }
  .nav-links .header-cta { margin-left: .25rem; }
}
@media (max-width: 759px) {
  .topbar { grid-template-columns: auto auto; justify-content: space-between; }
  .brand-header .brand-logo-img { width: 8.6rem; }
  .nav-links { top: 3.45rem; }
  .nav-extra, .nav-links .language-select, .nav-links .header-cta { width: 100%; }
  .nav-links .language-select select { width: 100%; }
  .header-cta.in-menu { display: flex; }
  .hero { margin-top: .35rem; }
  .hero-copy h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .pwa-install-panel { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; margin: 0; z-index: 30; align-items: center; }
  .pwa-install-panel span { font-size: .82rem; }
}