/* Academy design tokens and shared experience. */
:root {
  --paper: #f7f8f2;
  --surface: #ffffff;
  --ink: #153e38;
  --body: #314d44;
  --muted: #52665e;
  --line: #dce3d8;
  --teal: #153e38;
  --teal-dark: #0d2c27;
  --sage: #edf1e6;
  --lime: #d7ee92;
  --coral: #90502f;
  --coral-soft: #f4eadf;
  --gold: #dabb83;
  --radius-card: 22px;
  --shadow: 0 16px 40px rgba(21,62,56,.07);
  --motion: 200ms;
  --layer-header: 60;
  --layer-mobile-nav: 80;
  --layer-toast: 100;
}
html { scroll-padding-top: 112px; }
body { font-size: 16px; }
main { min-height: 55vh; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a, button { transition-duration: var(--motion); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #967229; outline-offset: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
button:active:not(:disabled), .button:active { transform: translateY(1px); }
::selection { background: var(--lime); color: var(--ink); }
.container { width: min(1240px, calc(100% - 80px)); }
.section { padding-block: 88px; }
.section-bottom { padding-bottom: 88px; }
h1,h2,h3 { letter-spacing: 0; }
h2 { font-size: clamp(28px, 3vw, 40px); }
.eyebrow { font-size: 13px; }
.small { font-size: 14px; }
.button { border-radius: 12px; font-size: 15px; min-height: 52px; padding: 13px 23px; }
.button-small { font-size: 13px; min-height: 44px; padding: 10px 16px; }
.button-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.button-lime:hover { background: #e4f6b4; border-color: #e4f6b4; box-shadow: 0 5px 25px #0002; }
.button-outline { background: transparent; border-color: #a8b8a8; }
.text-link { font-size: 14px; min-height: 44px; }
.circle-link { width: 44px; height: 44px; }
.pill { font-size: 12px; }
.section-heading { margin-bottom: 32px; align-items: end; }
.section-heading h2 { line-height: 1.65; }
.section-heading p { font-size: 15px; line-height: 2; }
.section-index { color: var(--muted); margin-bottom: 12px !important; }
.section-aside { max-width: 240px; }
.page-heading { padding-block: 56px 40px; }
.page-heading p,.lead { font-size: 16px; line-height: 2; }
.prose { font-size: 16px; color: var(--body); }
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose pre { max-width: 100%; overflow-x: auto; }
.prose a { color: #874426; }
.panel { border-radius: var(--radius-card); }
.empty-state p { font-size: 16px; }
.pagination { font-size: 14px; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; padding-block: 24px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
/* Navigation */
.site-header { background: #f7f8f2f5; border-color: var(--line); z-index: var(--layer-header); backdrop-filter: blur(14px); }
.header-inner { min-height: 88px; gap: 22px; }
.brand { gap: 9px; }
.brand-logo { width: 58px; height: auto; }
.brand strong { font-size: 20px; }
.brand small { font-size: 11px; }
.desktop-nav { gap: 26px; }
.desktop-nav a { font-size: 14px; color: var(--muted); padding-block: 26px; }
.desktop-nav a[aria-current] { font-weight: 700; }
.desktop-nav a[aria-current]:after { background: var(--teal); bottom: 17px; width: 20px; border-radius: 2px; }
.header-actions { gap: 12px; }
.header-search { border: 1px solid var(--line); border-radius: 50%; }
/* Home: editorial portrait and learning paths */
.academy-hero { margin: 16px auto 0; width: min(1392px, calc(100% - 32px)); background: var(--teal); color: var(--paper); border-radius: 26px; overflow: clip; position: relative; }
.academy-hero-grid { display: grid; grid-template-columns: 1.13fr 1fr; gap: 60px; padding-block: 48px 32px; align-items: center; }
.hero-kicker { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #cfdbcb; margin-bottom: 24px; }
.hero-kicker>span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.academy-hero h1 { font-size: clamp(36px,4.3vw,61px); line-height: 1.7; color: var(--paper); margin-bottom: 20px; white-space: normal; }
.academy-hero h1 em { font-style: normal; color: var(--lime); }
.academy-hero-copy>p { font-size: 16px; line-height: 2.15; color: #d2ded1; margin-bottom: 30px; }
.academy-hero-actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.hero-listen-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 13px; color: var(--paper); }
.hero-listen-link>span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #719086; border-radius: 50%; }
.hero-listen-link svg { width: 18px; height: 18px; }
.hero-listen-link:hover>span { background: #2e554c; }
.hero-explore { display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; min-height: 44px; font-size: 12px; color: #c3d3c6; }
.hero-explore svg { width: 16px; height: 16px; }
.academy-portrait { width: min(100%,420px); margin-inline: auto; position: relative; padding: 0 0 18px 20px; }
.portrait-label { display: flex; justify-content: space-between; font-size: 12px; color: #bfd0c4; margin-bottom: 12px; padding-inline: 8px; }
.portrait-frame { border-radius: 120px 120px 18px 18px; overflow: hidden; position: relative; background: #dce3d8; }
.portrait-frame>img { width: 100%; height: 424px; object-fit: cover; object-position: center; }
.portrait-signature { background: linear-gradient(0deg,#08271cec,transparent); position: absolute; inset: auto 0 0; padding: 60px 28px 25px; }
.portrait-signature span { font-size: 12px; display: block; color: #e0e6d8; }
.portrait-signature strong { font-size: 28px; color: white; }
.portrait-stamp { display: flex; align-items: center; gap: 12px; position: absolute; left: 0; bottom: 4px; background: var(--lime); color: var(--ink); border: 6px solid var(--teal); border-radius: 20px; padding: 14px 18px; transform: rotate(-5deg); font-size: 13px; line-height: 1.6; }
.portrait-stamp svg { width: 30px; height: 30px; }
.hero-bottomline { border-top: 1px solid #45655b; display: flex; gap: 28px; align-items: center; padding-block: 20px 22px; color: #cfdbcb; font-size: 12px; }
.hero-bottomline>span { display: flex; align-items: center; gap: 10px; }
.hero-bottomline svg { width: 18px; height: 18px; }
.hero-bottomline>a { margin-right: auto; color: var(--lime); display: flex; align-items: center; gap: 12px; min-height: 44px; }
.discovery-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; }
.discovery-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; transition: border-color var(--motion), box-shadow var(--motion); }
.discovery-card:hover { border-color: #96ab8d; box-shadow: var(--shadow); }
.discovery-featured { background: var(--lime); border-color: var(--lime); }
.discovery-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #d1dbca; background: var(--paper); border-radius: 14px; color: var(--teal); margin-bottom: 24px; }
.discovery-featured .discovery-icon { border-color: #b5ca78; background: #e4f4b9; }
.discovery-card .eyebrow { font-size: 12px; color: #506244; }
.discovery-card h3 { font-size: clamp(22px,2.1vw,29px); line-height: 1.85; margin-bottom: 10px; }
.discovery-card p { font-size: 14px; line-height: 2; color: var(--muted); margin-bottom: 28px; }
.discovery-featured p { color: #415731; }
.discovery-link { font-size: 14px; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; border-top: 1px solid #d7e0d0; padding-top: 18px; font-weight: 600; }
.discovery-featured .discovery-link { border-color: #bbcf87; }
.academy-courses-section { border-block: 1px solid var(--line); background: #eef2e8; }
.listening-section { padding-bottom: 0; }
.listening-room { background: #173e37; border-radius: 26px; color: var(--paper); display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; padding: 48px; overflow: hidden; }
.listening-room-copy .eyebrow { color: #c2d5b9; }
.listening-room h2 { color: var(--paper); font-size: clamp(27px,3vw,40px); line-height: 1.8; margin-bottom: 18px; }
.listening-room h2 em { color: var(--lime); font-style: normal; }
.listening-room p { color: #cddccc; font-size: 16px; line-height: 2; margin-bottom: 27px; }
.listening-room-art { display: flex; align-items: center; flex-direction: column; position: relative; }
.audio-disc { width: 250px; height: 250px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle,#274f44 0 1px,#16382f 2px 4px); border: 1px solid #708267; box-shadow: 0 0 0 20px #ffffff03; }
.audio-disc>div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; color: var(--ink); background: var(--lime); gap: 10px; }
.audio-disc svg { width: 36px; height: 36px; }
.audio-disc span { font-size: 12px; }
.audio-caption { width: 270px; border: 1px solid #6b8470; background: #254a3e; border-radius: 16px; padding: 16px 22px; margin-top: -18px; position: relative; }
.audio-caption>span { display: block; font-size: 12px; text-align: center; color: #dbe6d3; }
.audio-caption .sound-bars { height: 40px; color: var(--lime); gap: 5px; justify-content: center; margin-block: 10px; }
.audio-caption .sound-bars i { width: 3px; }
.begin-panel { background: var(--lime); border-radius: var(--radius-card); padding: 38px; display: flex; gap: 28px; align-items: center; }
.begin-panel .eyebrow { color: #475d35; }
.begin-panel h2 { font-size: 32px; margin-bottom: 6px; }
.begin-panel p { margin-bottom: 0; font-size: 15px; }
.begin-panel .button { margin-right: auto; flex-shrink: 0; }
.begin-mark svg { width: 60px; height: 60px; stroke-width: 1px; }
/* Footer and shared form readability */
.site-footer { background: #eaf0e4; padding-top: 0; }
.footer-manifesto { padding-block: 35px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccd8c4; margin-bottom: 36px; }
.footer-manifesto>span { font-size: clamp(23px,3vw,36px); font-weight: 700; color: var(--ink); }
.footer-manifesto .icon-button { border: 1px solid #a9bba1; border-radius: 50%; }
.footer-main { gap: 36px; padding-bottom: 35px; }
.footer-brand { font-size: 27px; }
.footer-intro p,.footer-note p { font-size: 13px; line-height: 2.2; }
.footer-main h2 { font-size: 15px; }
.footer-main>div>a:not(.footer-brand) { font-size: 13px; min-height: 44px; line-height: 2; display: flex; align-items: center; }
.footer-explore { gap: 12px 22px; border-color: #ccd8c4; }
.footer-explore>span,.footer-explore>a { font-size: 12px; min-height: 44px; }
.footer-bottom { font-size: 11px; color: var(--muted); border-color: #ccd8c4; }
.field label,.field legend { font-size: 14px; }
.field input,.field select,.field textarea { font-size: 16px; }
.field small { font-size: 12px; }
.form-panel>p,.form-message { font-size: 14px; }
.form-panel .button { font-size: 15px; }
.comment-form textarea { font-size: 16px; }
.comment-form .button { font-size: 14px; }
.captcha-row .field label { font-size: 12px; }
.checkout-layout .lead { font-size: 16px; }
.checkout-product h2 { font-size: 23px; }
.checkout-assurance p,.summary-line,.checkout-choice>span,.checkout-choice strong { font-size: 14px; }
.checkout-choice { min-height: 56px; }
.rules-choice span { font-size: 14px !important; }
.coupon-details summary { min-height: 48px; font-size: 14px; }
.checkout-summary .button,.checkout-back { font-size: 14px; }
.checkout-summary h2 { font-size: 24px; }
.summary-total>span { font-size: 14px; }
.toast { z-index: var(--layer-toast); font-size: 14px; }
.folder-nav a { min-height: 44px; font-size: 14px; }
.quiz-options label,.game-banner p,.game-history p,.package-card .prose,.package-courses li { font-size: 15px; }
.quiz-options label { min-height: 48px; }
.game-stats span,.game-history strong { font-size: 13px; }
.engagement .button { min-height: 44px; font-size: 13px; }
@media (max-width:1100px) {
  .container { width: calc(100% - 56px); }
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 12px; }
  .academy-hero-grid { gap: 30px; }
  .academy-hero h1 { font-size: 44px; }
  .academy-hero-actions { gap: 16px; }
  .academy-hero-actions .button { font-size: 13px; padding-inline: 17px; }
  .portrait-frame>img { height: 380px; }
  .discovery-card { padding: 24px; }
  .discovery-card h3 { font-size: 24px; }
  .listening-room { gap: 25px; padding: 36px; }
  .begin-mark { display: none; }
}
@media (max-width:900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 28px 24px; border-top: 1px solid var(--line); gap: 8px; background: var(--paper); }
  .mobile-menu a { font-size: 15px; min-height: 48px; display: flex; align-items: center; border-radius: 10px; padding: 10px 16px; }
  .mobile-menu a:hover,.mobile-menu a[aria-current] { background: var(--sage); }
  .academy-hero h1 { font-size: 36px; }
  .academy-hero-copy>p { font-size: 15px; }
  .academy-portrait { padding-left: 12px; }
  .portrait-frame>img { height: 360px; }
  .hero-bottomline { gap: 20px; flex-wrap: wrap; }
  .hero-bottomline>a { margin-right: 0; }
  .hero-kicker { font-size: 12px; }
  .discovery-grid { gap: 14px; }
  .discovery-card { padding: 20px; }
  .discovery-card h3 { font-size: 21px; }
  .discovery-card p { font-size: 13px; }
  .listening-room { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px; }
  .listening-room h2 { font-size: 28px; }
  .audio-disc { width: 215px; height: 215px; }
  .audio-caption { width: 230px; }
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-note { display: none; }
}
@media (max-width:700px) {
  .container { width: calc(100% - 40px); }
  .section { padding-block: 52px; }
  .section-bottom { padding-bottom: 52px; }
  .header-inner { min-height: 76px; gap: 12px; }
  .header-actions { gap: 8px; }
  .header-search { display: none; }
  .brand-logo { width: 44px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 10px; }
  .header-actions .button { font-size: 12px; padding: 9px 12px; }
  .header-actions .button svg { display: none; }
  .academy-hero { width: calc(100% - 20px); border-radius: 22px; margin-top: 10px; }
  .academy-hero-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .academy-hero h1 { font-size: clamp(32px,7vw,44px); line-height: 1.8; }
  .hero-kicker { margin-bottom: 19px; font-size: 12px; }
  .academy-hero-copy>p { font-size: 16px; line-height: 2.1; margin-bottom: 25px; }
  .desktop-break { display: none; }
  .academy-hero-actions { gap: 12px; }
  .academy-hero-actions .button { font-size: 14px; min-height: 52px; }
  .hero-listen-link { font-size: 13px; }
  .hero-explore { margin-top: 18px; }
  .academy-portrait { max-width: 350px; padding: 0 0 18px 12px; }
  .portrait-label { font-size: 11px; }
  .portrait-frame { border-radius: 95px 95px 16px 16px; }
  .portrait-frame>img { height: 335px; }
  .portrait-signature { padding: 50px 22px 24px; }
  .portrait-signature strong { font-size: 26px; }
  .portrait-stamp { padding: 12px 15px; }
  .hero-bottomline { padding-block: 16px 20px; gap: 12px; justify-content: space-between; font-size: 11px; }
  .hero-bottomline>span { gap: 7px; }
  .hero-bottomline>a { width: 100%; justify-content: space-between; font-size: 13px; border-top: 1px solid #45655b; padding-top: 14px; margin-top: 4px; }
  .section-heading { align-items: start; flex-wrap: wrap; gap: 16px; }
  .section-heading h2 { font-size: 28px; }
  .section-heading .eyebrow { font-size: 12px; }
  .section-heading p { font-size: 15px; }
  .section-heading>.text-link { font-size: 13px; min-height: 44px; }
  .section-aside { max-width: none; }
  .discovery-grid { grid-template-columns: 1fr; gap: 14px; }
  .discovery-card { padding: 24px; display: grid; grid-template-columns: 1fr 48px; gap: 0 16px; }
  .discovery-card .discovery-icon { grid-column: 2; grid-row: 1; margin: 0; }
  .discovery-card>div { grid-column: 1; grid-row: 1; }
  .discovery-card h3 { font-size: 24px; line-height: 1.7; }
  .discovery-card h3 br { display: none; }
  .discovery-card p { font-size: 14px; margin-bottom: 22px; }
  .discovery-link { grid-column: 1/-1; }
  .listening-section { padding-bottom: 0; }
  .listening-room { grid-template-columns: 1fr; gap: 32px; padding: 30px 24px; border-radius: 22px; }
  .listening-room h2 { font-size: 29px; }
  .listening-room p { font-size: 15px; }
  .listening-room .button { font-size: 14px; }
  .listening-room-art { padding-block: 10px 0; }
  .audio-disc { width: 220px; height: 220px; }
  .audio-caption { width: 260px; }
  .begin-panel { padding: 28px 24px; flex-direction: column; align-items: start; gap: 23px; }
  .begin-panel h2 { font-size: 28px; }
  .begin-panel p { font-size: 15px; line-height: 2; }
  .begin-panel .button { margin: 0; }
  .begin-panel .eyebrow { font-size: 12px; }
  .footer-manifesto { padding-block: 26px; margin-bottom: 27px; gap: 20px; }
  .footer-manifesto>span { font-size: 25px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-intro { grid-column: 1/-1; }
  .footer-main h2 { font-size: 15px; }
  .footer-main>div>a:not(.footer-brand) { font-size: 13px; }
  .footer-intro p { font-size: 13px; }
  .footer-explore { gap: 4px 20px; }
  .footer-explore>a,.footer-explore>span { font-size: 12px; min-height: 44px; }
  .footer-explore>span { width: 100%; }
  .footer-bottom { font-size: 11px; line-height: 2.1; }
  .bottom-nav { z-index: var(--layer-mobile-nav); }
  .bottom-nav a { min-height: 52px; font-size: 11px; color: var(--muted); }
  .bottom-nav a[aria-current] { background: var(--sage); }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .page-heading h1 { font-size: 32px; }
  .page-heading p,.lead,.prose,.article-prose { font-size: 16px; }
  .eyebrow { font-size: 12px; }
  .breadcrumb { font-size: 12px; gap: 8px; padding-block: 16px; }
  .empty-state p { font-size: 15px; }
  .empty-state .button,.pagination .button { font-size: 13px; }
  .field label,.field legend,.form-panel>p { font-size: 14px; }
  .field small { font-size: 12px; }
  .form-message { font-size: 14px; }
  .form-panel .button,.checkout-summary .button { font-size: 15px; }
  .checkout-product { align-items: start; padding: 20px; }
  .checkout-product h2 { font-size: 20px; }
  .checkout-product img { width: 85px; height: 85px; object-fit: cover; }
  .checkout-choice { gap: 10px; flex-wrap: wrap; }
  .checkout-choice>span,.checkout-choice strong,.summary-line,.checkout-assurance p { font-size: 14px; }
  .checkout-summary { padding: 24px; }
  .summary-total { gap: 12px; flex-wrap: wrap; }
  .toast { font-size: 13px; }
  .folder-nav a { min-height: 44px; font-size: 13px; }
  .quiz-options label,.game-banner p,.game-history p,.package-card .prose,.package-courses li { font-size: 15px; }
  .game-stats span,.game-history strong { font-size: 12px; }
  .comment-form .button { font-size: 14px; }
  .engagement .button { min-height: 44px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  button:active:not(:disabled),.button:active { transform: none; }
}

/* Shared media feedback belongs on listening and course pages too. */
.media-error-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; line-height: 1.9; color: #873b2f; background: #fcf4ef; border: 1px solid #eed1cb; border-radius: 10px; padding: 12px 16px; margin-top: 12px; }
.media-error-note .text-link { font-size: 13px; min-height: 44px; }