:root {
  --color-primary: #C2410C;
  --color-on-primary: #FFFFFF;
  --color-secondary: #9A3412;
  --color-action: #C2410C;
  --color-on-action: #FFFFFF;
  --color-accent: #F97316;
  --color-on-accent: #1C1917;
  --color-background: #FFFFFF;
  --color-card: #FFFFFF;
  --color-foreground: #273540;
  --color-muted: #F2F4F4;
  --color-muted-foreground: #4A5B68;
  --color-faint-foreground: #586874;
  --color-border: #D7DADE;
  --shadow-color: #273540;

  --surface-accent-4: color-mix(in srgb, var(--color-accent) 4%, var(--color-card));
  --surface-accent-8: color-mix(in srgb, var(--color-accent) 8%, var(--color-card));
  --surface-accent-12: color-mix(in srgb, var(--color-accent) 12%, var(--color-card));
  --surface-ink-4: color-mix(in srgb, var(--color-foreground) 4%, var(--color-card));
  --surface-ink-7: color-mix(in srgb, var(--color-foreground) 7%, var(--color-card));
  --border-accent: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  --gradient-hero:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 34%),
    radial-gradient(circle at 16% 84%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 38%);
  --gradient-cta:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 32%),
    radial-gradient(circle at 90% 88%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 36%);

  --font-sans: "Plus Jakarta Sans", "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --type-h1-size: clamp(36px, 5.5vw, 56px);
  --type-h2-size: clamp(28px, 4vw, 40px);
  --type-h3-size: clamp(18px, 2vw, 20px);
  --type-subtitle-size: clamp(16px, 2vw, 18px);
  --type-body-size: 15px;
  --type-small-size: 13px;
  --type-mono-size: 12px;
  --type-h1-leading: 1.05;
  --type-h2-leading: 1.1;
  --type-h3-leading: 1.3;
  --type-subtitle-leading: 1.5;
  --type-body-leading: 1.6;
  --type-small-leading: 1.5;
  --type-mono-leading: 1.6;
  --tracking-h1: -0.022em;
  --tracking-h2: -0.022em;
  --tracking-h3: -0.012em;
  --tracking-body: -0.011em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --section-space: clamp(64px, 8vw, 96px);
  --content-width: 1024px;
  --reading-width: 704px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  --motion-press: 120ms;
  --motion-interaction: 180ms;
  --motion-reveal: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-scale: 0.97;
  --lift-hover: -2px;
  --reveal-offset: 12px;

  --elevation-1: 0 2px 8px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  --elevation-2: 0 8px 24px color-mix(in srgb, var(--shadow-color) 12%, transparent);
  --elevation-3: 0 16px 40px color-mix(in srgb, var(--shadow-color) 16%, transparent);
}

[lang^="zh"] {
  --font-sans: "Plus Jakarta Sans", "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", sans-serif;
  --type-h1-leading: 1.15;
  --type-h2-leading: 1.25;
  --tracking-h1: 0;
  --tracking-h2: 0;
  --tracking-h3: 0;
  --tracking-body: 0;
}

html:lang(zh-Hans) {
  --font-sans: "Plus Jakarta Sans", "PingFang SC", "Noto Sans SC", "PingFang TC", "Noto Sans TC", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--color-background);
  color: var(--color-foreground);
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--font-regular);
  line-height: var(--type-body-leading);
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

a {
  color: var(--color-primary);
  overflow-wrap: anywhere;
  text-underline-offset: var(--space-1);
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: var(--space-1);
}

p,
ol,
ul {
  margin-block: 0;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-foreground);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--font-extrabold);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--tracking-h1);
}

h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--font-bold);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--font-bold);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--tracking-h3);
}

small {
  font-size: var(--type-small-size);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--font-semibold);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(calc(100% - var(--space-8)), var(--content-width));
  margin-inline: auto;
}

.site-banner,
.subpage-header,
.legal-header {
  position: relative;
  z-index: 20;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-card);
}

.site-header,
.subpage-header__layout {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  min-height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 40px;
}

.nav-cluster,
.primary-nav,
.language-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav-cluster {
  justify-content: flex-end;
  gap: var(--space-2);
}

.primary-nav,
.language-nav {
  gap: var(--space-1);
}

.primary-nav a,
.language-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"],
.language-nav a:hover,
.language-nav a[aria-current="page"] {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.language-nav {
  padding-inline-start: var(--space-2);
  border-inline-start: 1px solid var(--color-border);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-action);
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--font-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-interaction) var(--ease-standard);
}

.button:hover {
  transform: translateY(var(--lift-hover));
}

.button:active {
  transform: scale(var(--press-scale));
  transition-duration: var(--motion-press);
}

.button--small {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
}

.button--secondary {
  background: var(--color-card);
  color: var(--color-primary);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}

.button--ghost:hover {
  background: var(--surface-accent-8);
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.eyebrow {
  margin-block-end: var(--space-3);
  color: var(--color-primary);
  font-size: var(--type-small-size);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero,
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hero::before,
.final-cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero::before {
  background: var(--gradient-hero);
}

.hero-layout {
  min-height: min(780px, calc(100vh - 72px));
  display: grid;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--section-space);
}

.hero-copy {
  max-width: 680px;
}

.hero-wordmark {
  width: min(228px, 100%);
  height: auto;
  margin-block-end: var(--space-8);
}

.hero-summary {
  max-width: 620px;
  margin-block-start: var(--space-6);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.platform-icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.platform-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-secondary);
  box-shadow: var(--elevation-1);
}

.platform-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.hero-glance {
  max-width: 420px;
  padding: var(--space-8);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--elevation-3);
}

.hero-glance__label {
  color: var(--color-secondary);
  font-size: var(--type-small-size);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
}

.hero-glance__path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block: var(--space-6);
}

.hero-glance__path span {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-accent-8);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-weight: var(--font-bold);
}

.hero-glance p {
  color: var(--color-muted-foreground);
}

.section {
  padding-block: var(--section-space);
  scroll-margin-block-start: var(--space-4);
}

.section-heading {
  max-width: var(--reading-width);
  margin-inline: auto;
  text-align: center;
}

.section-heading > p:last-child:not(.eyebrow) {
  margin-block-start: var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.chain-section,
.local-section,
.faq-section {
  background: var(--color-muted);
}

.classroom-window {
  max-width: 920px;
  margin: var(--space-12) auto 0;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--elevation-3);
}

.classroom-window__bar {
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--surface-ink-4);
}

.classroom-window__bar > p {
  font-size: var(--type-small-size);
  font-weight: var(--font-semibold);
  text-align: center;
}

.window-controls {
  display: flex;
  gap: var(--space-2);
}

.window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.window-controls span:first-child,
.recording-state > span {
  background: var(--color-accent);
}

.recording-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-family: var(--font-mono);
}

.recording-state > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.classroom-window__body {
  display: grid;
}

.classroom-panel {
  min-width: 0;
  padding: var(--space-8);
}

.classroom-panel--translation {
  border-block-start: 1px solid var(--color-border);
  background: var(--surface-accent-4);
}

.classroom-panel__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-6);
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
  font-weight: var(--font-semibold);
}

.classroom-panel__label span:last-child {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-muted);
  color: var(--color-foreground);
}

.caption-line {
  padding-block: var(--space-4);
}

.caption-line + .caption-line {
  border-block-start: 1px solid var(--color-border);
}

.speaker-label {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-weight: var(--font-bold);
}

.caption-line p {
  color: var(--color-muted-foreground);
}

.classroom-panel--translation .caption-line p {
  color: var(--color-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.learning-chain {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
  padding: 0;
  list-style: none;
}

.chain-link {
  position: relative;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.chain-index {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-weight: var(--font-bold);
}

.chain-link p {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.chain-close {
  max-width: var(--reading-width);
  margin: var(--space-12) auto 0;
  color: var(--color-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
  font-weight: var(--font-bold);
  text-align: center;
}

.platform-tabs {
  margin-block-start: var(--space-12);
}

.platform-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-muted);
}

.platform-tab {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition:
    color var(--motion-interaction) var(--ease-standard),
    transform var(--motion-interaction) var(--ease-standard),
    background-color var(--motion-interaction) var(--ease-standard);
}

.platform-tab:hover {
  color: var(--color-foreground);
  transform: translateY(var(--lift-hover));
}

.platform-tab[aria-selected="true"] {
  border-color: var(--border-accent);
  background: var(--color-card);
  color: var(--color-primary);
  box-shadow: var(--elevation-1);
}

.platform-tab svg {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
}

.platform-panels {
  margin-block-start: var(--space-4);
}

.platform-panel {
  min-height: 360px;
  display: grid;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--elevation-2);
}

.platform-panel + .platform-panel {
  margin-block-start: var(--space-4);
}

.platform-panel[hidden] {
  display: none;
}

.platform-panel__copy p {
  max-width: 460px;
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.platform-number {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-weight: var(--font-bold);
}

.device-mockup {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  background: var(--surface-accent-4);
}

.device-mockup > span {
  position: absolute;
  inset: var(--space-6) var(--space-6) auto;
  height: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-ink-7);
}

.device-mockup > div {
  position: absolute;
  inset: var(--space-16) var(--space-6) var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.device-mockup i {
  display: block;
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.device-mockup--phone {
  width: min(220px, 100%);
  min-height: 320px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
}

.device-mockup--buds > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-mockup--buds i:last-child {
  grid-column: span 2;
}

.local-layout {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  max-width: 840px;
}

.local-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background: var(--color-card);
  color: var(--color-secondary);
  box-shadow: var(--elevation-2);
}

.local-icon svg {
  width: 48px;
  height: 48px;
}

.local-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin-block: var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.pricing-cards {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
}

.plan-card {
  position: relative;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.plan-card--featured {
  border: 2px solid var(--color-primary);
}

.plan-name {
  display: block;
  color: var(--color-foreground);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--font-bold);
}

.plan-badge,
.pricing-plan__badge {
  display: inline-flex;
  margin-block-end: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-accent-12);
  color: var(--color-secondary);
  font-size: var(--type-small-size);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.plan-price {
  margin-block: var(--space-4) !important;
  color: var(--color-foreground) !important;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  font-weight: var(--font-extrabold);
}

.plan-price small {
  color: var(--color-muted-foreground);
  font-weight: var(--font-regular);
}

.plan-card > p:last-child {
  color: var(--color-muted-foreground);
}

.pricing-note {
  max-width: var(--reading-width);
  margin: var(--space-8) auto 0;
  color: var(--color-muted-foreground);
  text-align: center;
}

.pricing-section .section-actions,
.final-cta .section-actions {
  justify-content: center;
}

.faq-list {
  max-width: var(--reading-width);
  margin: var(--space-12) auto 0;
}

.faq-list details {
  border-block-end: 1px solid var(--color-border);
  background: transparent;
}

.faq-list details:first-child {
  border-block-start: 1px solid var(--color-border);
}

.faq-list summary {
  min-height: 56px;
  padding-block: var(--space-4);
  color: var(--color-foreground);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.faq-list details p {
  padding-block-end: var(--space-4);
  color: var(--color-muted-foreground);
}

.final-cta {
  text-align: center;
}

.final-cta::before {
  background: var(--gradient-cta);
}

.final-cta .container {
  max-width: var(--reading-width);
}

.referral-note {
  margin-block-start: var(--space-4);
  color: var(--color-muted-foreground);
}

.site-footer {
  padding-block: var(--space-12) var(--space-6);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-card);
}

.footer-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.footer-layout--columns {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-brand p {
  max-width: 220px;
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.footer-layout--columns .footer-links {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer-links strong {
  margin-block-end: var(--space-1);
}

.footer-links a,
.footer-layout > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-muted-foreground);
  font-weight: var(--font-semibold);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
}

.footer-meta {
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
}

.subpage,
.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.subpage-main,
.legal-main {
  flex: 1;
}

.subpage-hero {
  padding-block: var(--section-space) var(--space-16);
  background: var(--surface-accent-4);
}

.subpage-hero__content {
  max-width: 760px;
  text-align: center;
}

.subpage-hero__content > p:last-child {
  margin-block-start: var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.pricing-comparison,
.download-section,
.student-story-section,
.release-section,
.faq-directory,
.about-section {
  padding-block: var(--space-16) var(--section-space);
}

.student-story-intro {
  max-width: var(--reading-width);
}

.student-story-intro > p:last-child {
  margin-block-start: var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.student-journey {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
  padding: 0;
  list-style: none;
}

.student-step {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.student-step__index,
.release-card__date {
  display: block;
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  font-weight: var(--font-bold);
}

.student-step h3 {
  margin-block-start: var(--space-4);
}

.student-step p {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.student-story-close {
  max-width: var(--reading-width);
  margin: var(--space-12) auto 0;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-muted);
  text-align: center;
}

.student-story-close p {
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.student-story-close .button {
  margin-block-start: var(--space-6);
}

.release-feed {
  max-width: var(--reading-width);
  display: grid;
  gap: var(--space-6);
  margin-inline: auto;
}

.release-card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--elevation-2);
}

.release-card__content > p {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.release-card ul {
  margin-block-start: var(--space-6);
  padding-inline-start: var(--space-6);
  color: var(--color-muted-foreground);
}

.release-card li + li {
  margin-block-start: var(--space-3);
}

.release-card strong {
  color: var(--color-foreground);
}

.faq-directory .faq-list {
  margin-block-start: 0;
}

.faq-group {
  display: grid;
  gap: var(--space-12);
}

.faq-group__section h2 {
  margin-block-end: var(--space-6);
}

.about-panel {
  max-width: var(--reading-width);
  margin-inline: auto;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--elevation-2);
}

.about-panel > p {
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.about-contact,
.about-legal {
  padding-block-start: var(--space-8);
  margin-block-start: var(--space-8);
  border-block-start: 1px solid var(--color-border);
}

.about-contact p,
.about-legal p {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.about-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-3);
}

.pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-2);
}

.pricing-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  text-align: left;
}

.pricing-table caption {
  padding: var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--type-small-size);
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  vertical-align: top;
}

.pricing-table thead th {
  min-width: 168px;
  border-block-start: 0;
  background: var(--surface-ink-4);
}

.pricing-table tbody th {
  width: 28%;
  color: var(--color-foreground);
}

.pricing-table td {
  color: var(--color-muted-foreground);
}

.pricing-plan > span,
.pricing-plan > strong,
.pricing-plan > small {
  display: block;
}

.pricing-plan__name {
  color: var(--color-foreground);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
}

.pricing-plan > strong {
  margin-block-start: var(--space-2);
  color: var(--color-foreground);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
}

.pricing-plan > small {
  margin-block-start: var(--space-1);
  color: var(--color-muted-foreground);
}

.pricing-plan--featured {
  box-shadow: inset 0 4px 0 var(--color-primary);
}

.pricing-notes {
  padding-block: var(--section-space);
  background: var(--color-muted);
}

.pricing-notes__layout {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.pricing-notes ul {
  padding-inline-start: var(--space-6);
  color: var(--color-muted-foreground);
}

.pricing-notes li + li {
  margin-block-start: var(--space-2);
}

.download-grid {
  display: grid;
  gap: var(--space-4);
}

.download-card {
  min-width: 0;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.download-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-block-end: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-accent-8);
  color: var(--color-secondary);
}

.download-card__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.download-card > p:not(.download-trust) {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.download-trust {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-faint-foreground);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
}

.legal-header {
  padding-block: var(--space-3);
}

.legal-main {
  width: min(calc(100% - var(--space-8)), var(--reading-width));
  margin-inline: auto;
  padding-block: var(--section-space);
}

.legal-main > p {
  margin-block-start: var(--space-4);
  color: var(--color-muted-foreground);
}

.legal-languages {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

.legal-languages article {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-1);
}

.legal-languages p {
  margin-block-start: var(--space-3);
  color: var(--color-muted-foreground);
}

.og-page {
  width: 1200px;
  height: 630px;
  overflow: hidden;
  background-image: none;
}

.og-artboard {
  position: relative;
  isolation: isolate;
  width: 1200px;
  height: 630px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: var(--space-12);
  overflow: hidden;
  padding: var(--space-16);
  background: var(--color-background);
}

.og-artboard::before {
  position: absolute;
  z-index: -1;
  inset-block-start: -60px;
  inset-inline-end: -280px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: var(--surface-accent-12);
  content: "";
}

.og-copy img {
  width: 320px;
  height: auto;
}

.og-copy h1 {
  margin-block-start: var(--space-8);
}

.og-copy p {
  margin-block-start: var(--space-6);
  color: var(--color-muted-foreground);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-leading);
}

.og-ecosystem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.og-ecosystem__item {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--elevation-2);
}

.og-ecosystem__item svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--color-primary);
}

.og-ecosystem__item strong {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
}

@media (min-width: 48rem) {
  .classroom-window__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-panel--translation {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .platform-tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .platform-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    padding: var(--space-12);
  }

  .local-layout {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pricing-cards,
  .download-grid,
  .student-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .release-card {
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  }

  .legal-languages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-notes__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .pricing-notes__layout .button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 64rem) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  }

  .learning-chain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .chain-link:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--space-4) * -1 - 5px);
    width: 10px;
    height: 10px;
    border-block-start: 2px solid var(--color-primary);
    border-inline-end: 2px solid var(--color-primary);
    background: var(--color-muted);
    content: "";
    transform: rotate(45deg) translateY(-50%);
  }

  .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-layout--columns {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }

  .legal-languages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 63.999rem) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-cluster {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-layout {
    min-height: auto;
  }

  .hero-glance {
    max-width: none;
  }
}

@media (max-width: 47.999rem) {
  .container {
    width: min(calc(100% - var(--space-6)), var(--content-width));
  }

  .brand img {
    height: 36px;
  }

  .primary-nav {
    width: 100%;
  }

  .language-nav {
    padding-block-start: var(--space-2);
    padding-inline-start: 0;
    border-block-start: 1px solid var(--color-border);
    border-inline-start: 0;
  }

  .nav-cluster > .button {
    width: 100%;
  }

  .hero-actions,
  .section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button,
  .section-actions .button {
    width: 100%;
  }

  .hero-glance,
  .classroom-panel,
  .platform-panel,
  .download-card,
  .student-step,
  .release-card,
  .about-panel {
    padding: var(--space-6);
  }

  .classroom-window__bar {
    grid-template-columns: auto 1fr;
  }

  .classroom-window__bar > p {
    display: none;
  }

  .footer-layout--columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-js="on"] [data-reveal="ready"] {
    opacity: 0;
    transform: translateY(var(--reveal-offset));
  }

  html[data-js="on"] [data-reveal="visible"] {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--motion-reveal) var(--ease-standard),
      transform var(--motion-reveal) var(--ease-standard);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .button:hover,
  .platform-tab:hover {
    transform: none;
  }
}