/* One site footer, in the home page's design: the brand and social links in a wide first
   column, three link groups, and the copyright line under a rule. Same width as the header. */
.landing-footer { --footer-gutter: clamp(24px, 6.5vw, 100px); border: 0; background: var(--color-paper); color: var(--color-ink); line-height: 1.5; }
.landing-footer__inner { display: grid; grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(0, 1fr)); align-items: start; gap: 40px; width: min(calc(100% - 2 * var(--footer-gutter)), 1320px); margin-inline: auto; padding-block: 40px max(32px, env(safe-area-inset-bottom)); }
.landing-footer :is(h2, p) { margin: 0; letter-spacing: 0; }
.landing-footer__wordmark { display: inline-block; color: var(--color-ink); text-decoration: none; }
.landing-footer .ragafied-brand-logo { width: 165px; }
.landing-footer p { font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.landing-footer__brand p { max-width: 36ch; margin-top: 18px; }
.landing-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* The html/body prefix outranks the page heading scales in brand-surfaces.css and listening-home.css. */
html body .landing-footer .landing-footer__group h2 { margin-bottom: 10px; font: 500 12px/1.5 var(--font-body); letter-spacing: 0; color: var(--color-ink); }
.landing-footer a { font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--color-ink-soft); text-decoration: none; }
.landing-footer__group a { display: inline-block; padding-block: 7px; }
.landing-footer a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.landing-footer__copyright { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; padding-top: 24px; border-top: 1px solid var(--color-rule); }
.landing-footer__attribution { margin-inline-start: auto; font-size: .625rem; opacity: .5; }
.landing-footer .landing-footer__attribution a { color: inherit; font-size: inherit; }
@media (max-width: 760px) {
  .landing-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .landing-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .landing-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .landing-footer__legal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; width: 100%; }
  .landing-footer__legal h2 { grid-column: 1 / -1; }
}

/* Public policy pages prioritize readable, reviewable terms over decoration. */
.legal-page { max-width: 72rem; margin-inline: auto; }
.legal-page > header { max-width: 56rem; padding-bottom: 36px; border-bottom: 1px solid var(--color-rule); }
.legal-page > header > p:not(.kicker) { max-width: 46rem; margin-top: 1.25rem; font-size: 1.125rem; }
.legal-page > header > p.legal-page__status { color: var(--color-ink-soft); font-size: var(--text-sm); }
.legal-page section { max-width: 48rem; padding-block: 28px; }
.legal-page section + section { border-top: 1px solid var(--color-rule); }
/* The html prefix outranks the product-page heading face (brand-surfaces.css). */
html .legal-page section h2 { font: 500 clamp(24px, 2.5vw, 30px)/1.2 var(--font-display); letter-spacing: -.055em; }
.legal-page section p, .legal-page section ul { margin: 1rem 0 0; color: var(--color-ink-soft); font-size: 1rem; line-height: 1.75; }
.legal-page section li { line-height: 1.75; }
.legal-page section li + li { margin-top: .55rem; }
.legal-page a { color: var(--color-accent); text-underline-offset: .2em; }
.legal-page__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; font-size: 14px; }
@media (max-width: 600px) { .legal-page > header > p { font-size: 16px; } }

/* Public-page composition. Visual primitives live in tokens.css and controls.css. */
.public-page-content { padding-block: var(--section-space); }
.public-page-content h1 { max-width: 20ch; }
.public-page-content .kicker { margin-bottom: 1rem; color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
.public-page-content > .lesson-catalog { padding-block: 0; }
.public-page-content .auth-shell { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.public-page-content .auth-panel { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-rule); border-radius: var(--radius-large); background: var(--color-glass); box-shadow: var(--shadow-surface); backdrop-filter: blur(16px); }
.public-page-content .auth-panel h2 { font: 600 15px/1.4 var(--font-body); letter-spacing: 0; }
.public-page-content .auth-intro > p:last-child { margin-top: 1.5rem; font-size: 1.125rem; }
.public-page-content .auth-links { gap: 0.5rem 1.5rem; }
.public-page-content .auth-links a { white-space: normal; color: var(--color-accent); font-size: var(--text-sm); }
.public-page-content .flash-stack { margin-bottom: 2rem; }
.public-page-content .form-errors ul { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: disc; }
.public-page-content .form-section { border: 0; border-radius: var(--radius-large); background: var(--color-surface-raised); }
@media (max-width: 47.999rem) {
  .public-page-content { padding-block: 4.5rem; }
  .public-page-content .auth-shell { grid-template-columns: minmax(0, 1fr); }
}
/* Shared editorial layout for explaining the audio technology. */
.landing-page .landing-technology-image { margin-top: 2rem; }
.landing-technology-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-large); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.landing-technology-image figcaption { margin-top: 0.75rem; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.landing-section-copy > .landing-kicker, .landing-microphone > div > .landing-kicker { margin: 0 0 1rem; }
.landing-teacher-process ol { align-self: center; }
.landing-teacher-process li { min-height: 0; }
.landing-microphone .landing-text-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1rem; }

@media (max-width: 47.999rem) {
  .landing-page-hero--media { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .landing-page-hero--media { gap: 32px; }
  .landing-page-hero__media { max-height: 360px; }
}