:root {
  --site-ink: #071229;
  --site-muted: #657086;
  --site-blue: #0b4de8;
  --site-blue-dark: #073ec5;
  --site-blue-soft: #eff5ff;
  --site-red: #dc4134;
  --site-line: #e5eaf2;
  --site-surface: #f7f9fc;
  --site-white: #ffffff;
  --site-cta-surface: #f4f1eb;
  --site-cta-line: #ddd8cf;
  --site-cta-ink: #10231e;
  --site-cta-muted: #5f6b67;
  --ink: var(--site-ink);
  --ink-soft: #39445a;
  --muted: var(--site-muted);
  --paper: var(--site-white);
  --paper-strong: var(--site-white);
  --canvas: var(--site-white);
  --canvas-deep: var(--site-surface);
  --line: var(--site-line);
  --line-strong: #d2d9e5;
  --brand: var(--site-blue);
  --brand-dark: var(--site-blue-dark);
  --brand-light: #bcd0ff;
  --gold: var(--site-blue);
  --gold-pale: var(--site-blue-soft);
  --sage: var(--site-blue);
  --sage-pale: var(--site-blue-soft);
  --navy: var(--site-ink);
  --navy-light: var(--site-blue-soft);
  --premium-bone: var(--site-surface);
  --premium-paper: var(--site-white);
  --premium-ink: var(--site-ink);
  --premium-green: var(--site-ink);
  --premium-green-soft: var(--site-blue-soft);
  --premium-red: var(--site-blue);
  --premium-peach: #bcd0ff;
  --premium-line: var(--site-line);
  --v2-ink: var(--site-ink);
  --v2-muted: var(--site-muted);
  --v2-paper: var(--site-white);
  --v2-canvas: var(--site-surface);
  --v2-line: var(--site-line);
  --v2-copper: var(--site-blue);
  --v2-navy: var(--site-ink);
  --v2-sage: var(--site-blue);
  --shadow-sm: 0 10px 30px rgba(7, 18, 41, 0.05);
  --shadow-md: 0 22px 58px rgba(7, 18, 41, 0.08);
  --shadow-lg: 0 36px 90px rgba(7, 18, 41, 0.12);
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-feature: 28px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-feature);
  --radius-xl: var(--radius-feature);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --serif: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Phosphor";
  src: url("./assets/vendor/phosphor/fonts/Phosphor.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

.multipage-site .ph {
  display: inline-block;
  flex: 0 0 auto;
  font-family: "Phosphor" !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  vertical-align: -0.125em;
}

.multipage-site .ph-arrow-right::before { content: "\e06c"; }
.multipage-site .ph-caret-down::before { content: "\e136"; }
.multipage-site .ph-magnifying-glass::before { content: "\e30c"; }
.multipage-site .ph-speaker-high::before { content: "\e44a"; }
.multipage-site .ph-x::before { content: "\e4f6"; }

html {
  --site-header-height: 86px;
  --site-subnav-height: 76px;
  scroll-padding-top: calc(var(--site-header-height) + var(--site-subnav-height) + 20px);
}

body.multipage-site {
  min-width: 320px;
  color: var(--site-ink);
  background: var(--site-white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Resources is a supporting module, but it should still feel like the same
   Hanyu product. Keep its controls and editorial accents on the green/coral
   brand system used by Vocabulary, Grammar, Culture, Practice, and Tests. */
body[data-page="resources"].multipage-site {
  --site-ink: #10231e;
  --site-muted: #5f6b67;
  --site-blue: #173f35;
  --site-blue-dark: #102f28;
  --site-blue-soft: #edf3ef;
  --site-red: #bf4835;
  --site-line: rgba(16, 35, 30, 0.14);
  --site-surface: #ffffff;
  --site-white: #ffffff;
  --brand: var(--site-blue);
  --brand-dark: var(--site-blue-dark);
  --brand-light: #dce9e2;
  --premium-red: var(--site-red);
  --premium-green: var(--site-blue);
  --premium-green-soft: #dce9e2;
  --resources-serif: Iowan Old Style, Baskerville, "Times New Roman", "Songti SC", "STSong", serif;
  color: var(--site-ink);
  background: #fff;
}

body[data-page="resources"].multipage-site :focus-visible {
  outline-color: rgba(191, 72, 53, 0.46);
}

body[data-page="resources"].multipage-site .page-hero h1 {
  font-family: var(--resources-serif);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

body[data-page="resources"].multipage-site .page-hero h1 em {
  color: var(--site-red);
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
}

body[data-page="resources"].multipage-site .page-hero__meta {
  padding: 10px 26px;
  border: 0;
  border-radius: 20px;
  color: #fff8ef;
  background: var(--site-blue);
  box-shadow: 0 20px 52px rgba(16, 47, 40, 0.14);
}

body[data-page="resources"].multipage-site .page-hero__meta > span {
  min-height: 72px;
}

body[data-page="resources"].multipage-site .page-hero__meta > span + span {
  border-color: rgba(255, 255, 255, 0.14);
}

body[data-page="resources"].multipage-site .page-hero__meta small {
  color: #f0a68f;
}

body[data-page="resources"].multipage-site .page-hero__meta strong {
  color: #fff8ef;
}

.multipage-site.practice-tool-page {
  --tool-ink: var(--site-ink);
  --tool-ink-soft: var(--site-muted);
  --tool-orange: var(--site-blue);
  --tool-gold: #9db8ff;
  --tool-green: var(--site-blue);
  --tool-blue-pale: var(--site-blue-soft);
  --tool-paper: var(--site-white);
}

.multipage-site.stroke-page {
  --stroke-accent: var(--site-blue);
  --stroke-accent-dark: var(--site-blue-dark);
  --stroke-green: var(--site-ink);
  --stroke-board: var(--site-white);
  background: var(--site-white);
}

.multipage-site main,
.multipage-site .seo-page,
.multipage-site .seo-hero,
.multipage-site .page-hero,
.multipage-site .path-section,
.multipage-site .seo-section,
.multipage-site .seo-section--tint,
.multipage-site .culture-hub-section,
.multipage-site .history-explorer-section,
.multipage-site .zodiac-explorer-section,
.multipage-site .practice-tool-section,
.multipage-site .stroke-section,
.multipage-site .sample-library,
.multipage-site .sample-paper-section { background: var(--site-white); }

.multipage-site :focus-visible {
  outline: 3px solid rgba(11, 77, 232, 0.42);
  outline-offset: 3px;
}

.multipage-site .shell { width: min(1380px, calc(100% - 104px)); }

/* Header */
.multipage-site .site-header {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  left: 0;
  padding: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.multipage-site [data-site-header] {
  display: block;
  min-height: var(--site-header-height);
}

/* Page-level modules stay available directly below the fixed product header. */
.multipage-site [data-flow-nav] {
  display: block;
  position: fixed;
  z-index: 105;
  top: var(--site-header-height);
  right: 0;
  left: 0;
  min-height: var(--site-subnav-height);
}

.multipage-site [data-flow-nav] .track-context {
  display: none;
}

.multipage-site [data-flow-nav] .flow-nav,
.multipage-site .grammar-product__switch {
  position: sticky;
  z-index: 100;
  top: var(--site-header-height);
  box-shadow: 0 10px 28px rgba(7, 18, 41, 0.05);
}

.multipage-site .grammar-product__switch {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(18px);
}

.multipage-site [data-flow-nav] .flow-nav,
.multipage-site .local-nav {
  background: rgba(247, 249, 252, 0.97);
  backdrop-filter: blur(18px);
}

.multipage-site [data-flow-nav] .flow-nav {
  position: static;
  min-height: var(--site-subnav-height);
}

.multipage-site [data-flow-nav] .flow-nav__inner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.multipage-site [data-flow-nav] + main {
  padding-top: var(--site-subnav-height);
}

.multipage-site [data-flow-nav] + main > .local-nav {
  top: calc(var(--site-header-height) + var(--site-subnav-height));
}

.multipage-site .local-nav {
  position: sticky;
  z-index: 100;
  top: var(--site-header-height);
  box-shadow: 0 10px 28px rgba(7, 18, 41, 0.05);
}

.multipage-site[data-page="learn"] [data-flow-nav],
.multipage-site[data-page="learn"] .local-nav {
  display: block;
}

.multipage-site.practice-page .local-nav {
  position: sticky;
}

.multipage-site .site-header.is-scrolled {
  border-color: var(--site-line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(7, 18, 41, 0.06);
}

.multipage-site .nav-wrap {
  display: grid;
  min-height: 86px;
  grid-template-columns: 165px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
}

.multipage-site .brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  color: var(--site-ink);
  font-family: var(--sans);
  font-size: 29px;
  font-weight: 780;
  letter-spacing: -0.055em;
  line-height: 1;
}

.multipage-site .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
}

.multipage-site .desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(30px, 2.4vw, 36px);
  margin: 0;
}

.multipage-site .desktop-nav__item { gap: 5px; }
.multipage-site .desktop-nav__item::after { right: -15px; left: -15px; }

.multipage-site .desktop-nav .desktop-nav__primary,
.multipage-site .nav-signin {
  position: relative;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  color: var(--site-ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 560;
}

.multipage-site .desktop-nav a[aria-current="page"] { color: var(--site-blue); font-weight: 650; }
.multipage-site .desktop-nav a::after { bottom: 2px; height: 1px; background: currentColor; }
.multipage-site .nav-level-trigger { display: none; }
.multipage-site .desktop-nav__item--practice .nav-level-trigger {
  display: grid;
  width: 30px;
  height: 38px;
  margin-left: -4px;
  color: var(--site-ink);
}
.multipage-site .desktop-nav__item--practice .nav-level-trigger > .ph { font-size: 15px; transition: transform 160ms ease; }
.multipage-site .desktop-nav__item.is-open .nav-level-trigger > .ph,
.multipage-site .desktop-nav__item.is-intent-open .nav-level-trigger > .ph,
.multipage-site .nav-level-trigger[aria-expanded="true"] > .ph { transform: rotate(180deg); }
.multipage-site .desktop-nav__item--practice .nav-level-trigger:hover,
.multipage-site .desktop-nav__item--practice .nav-level-trigger:focus-visible { color: var(--site-blue); background: transparent; }

.multipage-site .nav-actions { gap: 32px; }
.multipage-site .nav-signin { display: inline-flex; align-items: center; }
.multipage-site .nav-signin::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.multipage-site .nav-signin:hover::after,
.multipage-site .nav-signin:focus-visible::after { transform: scaleX(1); }

.multipage-site .button,
.multipage-site .button--dark,
.multipage-site .button--brand {
  min-height: 48px;
  padding-inline: 25px;
  border: 1px solid var(--site-blue);
  border-radius: 7px;
  color: #fff;
  background: var(--site-blue);
  box-shadow: 0 9px 20px rgba(11, 77, 232, 0.16);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 660;
}

.multipage-site .button--small { min-height: 46px; padding-inline: 21px; border-radius: 7px; }
.multipage-site .button:hover,
.multipage-site .button--dark:hover,
.multipage-site .button--brand:hover {
  color: #fff;
  background: var(--site-blue-dark);
  box-shadow: 0 13px 26px rgba(11, 77, 232, 0.21);
  transform: translateY(-2px);
}

.multipage-site .button--paper,
.multipage-site .button--ghost {
  border-color: #d0d8e5;
  color: var(--site-ink);
  background: #fff;
  box-shadow: none;
}
.multipage-site .button--paper:hover,
.multipage-site .button--ghost:hover {
  border-color: var(--site-blue);
  color: var(--site-blue);
  background: #fff;
  box-shadow: none;
}

.multipage-site .nav-level-menu {
  top: calc(100% + 16px);
  width: min(620px, calc(100vw - 40px));
  border: 1px solid var(--site-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(7, 18, 41, 0.13);
}
.multipage-site .desktop-nav__item--practice .nav-level-menu { right: auto; left: -210px; width: min(620px, calc(100vw - 40px)); transform: translateY(-7px); }
.multipage-site .desktop-nav__item--practice:focus-within .nav-level-menu,
.multipage-site .desktop-nav__item--practice.is-open .nav-level-menu,
.multipage-site .desktop-nav__item--practice.is-intent-open .nav-level-menu,
.multipage-site .desktop-nav__item--practice .nav-level-trigger[aria-expanded="true"] + .nav-level-menu { transform: translateY(0); }
.multipage-site .nav-module-menu__top { min-height: 72px; border-color: var(--site-line); background: #f8faff; }
.multipage-site .nav-module-menu__heading small { color: var(--site-blue); }
.multipage-site .nav-module-menu__heading strong { color: var(--site-ink); }
.multipage-site .nav-module-links { gap: 1px; background: var(--site-line); }
.multipage-site .desktop-nav .nav-module-link,
.multipage-site .mobile-nav .nav-module-link { color: var(--site-ink); background: #fff; }
.multipage-site .nav-module-action {
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}
.multipage-site .desktop-nav .nav-module-link:hover,
.multipage-site .desktop-nav .nav-module-link:focus-visible,
.multipage-site .mobile-nav .nav-module-link:hover,
.multipage-site .mobile-nav .nav-module-link:focus-visible { color: var(--site-blue); background: var(--site-blue-soft); }
.multipage-site .nav-module-link__index { border-color: #cdd8ed; color: var(--site-blue); }
.multipage-site .nav-module-link__copy small { color: var(--site-muted); }
.multipage-site .nav-module-link > .ph {
  color: var(--site-blue);
  font-size: 17px;
  transition: color 160ms ease, transform 160ms ease;
}
.multipage-site .nav-module-link:hover > .ph,
.multipage-site .nav-module-link:focus-visible > .ph { color: var(--site-blue-dark); transform: translateX(2px); }

/* Editorial hierarchy */
.multipage-site .kicker,
.multipage-site .micro-label,
.multipage-site .seo-hero__eyebrow,
.multipage-site .article-step { color: var(--site-blue); }

.multipage-site .page-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.55fr);
  gap: clamp(48px, 7vw, 112px);
  padding-top: 48px;
  padding-bottom: 54px;
  border-bottom-color: var(--site-line);
}

.multipage-site .module-brand-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin: 0 12px 7px 0;
  object-fit: contain;
  vertical-align: middle;
}

.multipage-site .module-brand-icon + .kicker,
.multipage-site .module-brand-icon + .seo-hero__eyebrow { vertical-align: middle; }

.multipage-site .page-hero h1,
.multipage-site .seo-hero h1,
.multipage-site .page-section-heading h2,
.multipage-site .home-section-heading h2,
.multipage-site .section-heading h2,
.multipage-site .next-step__copy strong,
.multipage-site .seo-next strong,
.multipage-site .grammar-hub h1,
.multipage-site .grammar-hub h2,
.multipage-site .learning-article-hero h1,
.multipage-site .practice-tool-hero h1,
.multipage-site .stroke-hero h1 {
  color: var(--site-ink);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 720;
  letter-spacing: -0.052em;
}

.multipage-site .page-hero h1,
.multipage-site .seo-hero h1 { font-size: clamp(44px, 4.4vw, 62px); line-height: 1.04; }
.multipage-site .page-hero h1 em,
.multipage-site .seo-hero h1 em,
.multipage-site .practice-tool-hero h1 em,
.multipage-site .stroke-hero h1 em { color: var(--site-blue); font-family: inherit; font-style: normal; font-weight: inherit; }
.multipage-site .page-hero__copy > p,
.multipage-site .seo-hero__lead { color: var(--site-muted); font-size: 15px; line-height: 1.7; }

.multipage-site .page-hero__meta,
.multipage-site .seo-hero__facts,
.multipage-site .practice-tool-hero__stats,
.multipage-site .stroke-hero__stats {
  overflow: hidden;
  padding: 7px;
  border: 1px solid var(--site-line);
  border-radius: 14px;
  color: var(--site-ink);
  background: #fff;
  box-shadow: 0 16px 42px rgba(7, 18, 41, 0.06);
}
.multipage-site .page-hero__meta > span,
.multipage-site .seo-hero__facts > span,
.multipage-site .practice-tool-hero__stats > span,
.multipage-site .stroke-hero__stats > span { background: transparent; }
.multipage-site .page-hero__meta > span + span,
.multipage-site .seo-hero__facts > span + span,
.multipage-site .practice-tool-hero__stats > span + span,
.multipage-site .stroke-hero__stats > span + span { border-color: var(--site-line); }
.multipage-site .page-hero__meta small,
.multipage-site .seo-hero__facts small,
.multipage-site .practice-tool-hero__stats small,
.multipage-site .stroke-hero__stats small { color: #7b8598; }
.multipage-site .page-hero__meta strong,
.multipage-site .seo-hero__facts strong,
.multipage-site .practice-tool-hero__stats strong,
.multipage-site .stroke-hero__stats strong { color: var(--site-ink); }

.multipage-site .local-nav { border-color: var(--site-line); background: #f7f9fc; }
.multipage-site .local-nav a { border-radius: 7px; }
.multipage-site .local-nav a[aria-current="location"] { border-color: #cad7ef; color: var(--site-blue); background: #fff; }

.multipage-site .page-section-heading h2,
.multipage-site .section-heading h2,
.multipage-site .seo-section-heading h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; }
.multipage-site .page-section-heading p,
.multipage-site .section-heading p,
.multipage-site .seo-section-heading p { color: var(--site-muted); }

/* Cards, workspaces, and controls */
.multipage-site .level-button,
.multipage-site .topic-areas button,
.multipage-site .topic-groups button,
.multipage-site .scenario-picker button,
.multipage-site .history-timeline button,
.multipage-site .zodiac-sign-grid button,
.multipage-site .grammar-product__switch a,
.multipage-site .diagnosis-skill,
.multipage-site .weakness-list button { border-color: var(--site-line); color: var(--site-ink); background: #fff; }

.multipage-site .level-button.is-active,
.multipage-site .topic-areas button.is-active,
.multipage-site .topic-groups button.is-active,
.multipage-site .scenario-picker button.is-active,
.multipage-site .history-timeline button.is-active,
.multipage-site .zodiac-sign-grid button.is-active,
.multipage-site .diagnosis-skill.is-active,
.multipage-site .weakness-list button.is-active { border-color: var(--site-blue); color: #fff; background: var(--site-blue); }

.multipage-site .hsk-track-badge,
.multipage-site .track-context__standard { color: #fff; background: var(--site-blue); }
.multipage-site .level-detail,
.multipage-site .topic-browser,
.multipage-site .lesson-workspace,
.multipage-site .grammar-workspace,
.multipage-site .grammar-product__layout,
.multipage-site .culture-lesson,
.multipage-site .practice-lab__workspace,
.multipage-site .practice-ai-studio,
.multipage-site .resolver-workspace,
.multipage-site .diagnosis-surface,
.multipage-site .adaptive-board,
.multipage-site .mock-workspace,
.multipage-site .practice-tool-workspace,
.multipage-site .stroke-studio,
.multipage-site .paper-intro,
.multipage-site .paper-exam,
.multipage-site .paper-result {
  border-color: var(--site-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 18, 41, 0.055);
}

.multipage-site input,
.multipage-site select,
.multipage-site textarea { border-color: #d4dae5; border-radius: 8px; color: var(--site-ink); background: #fff; }
.multipage-site input:focus,
.multipage-site select:focus,
.multipage-site textarea:focus { border-color: var(--site-blue); box-shadow: 0 0 0 4px rgba(11, 77, 232, 0.1); outline: 0; }

.multipage-site .text-link,
.multipage-site a.text-link { color: var(--site-blue); }

/* SEO and directory pages */
.multipage-site.seo-page { background: #fff; }
.multipage-site .seo-hero { padding-top: 30px; padding-bottom: 44px; border-color: var(--site-line); background: #fff; }
.multipage-site .seo-breadcrumb { color: #778198; }
.multipage-site .seo-breadcrumb a { color: #58647b; text-decoration-color: #cad2df; }
.multipage-site .seo-hero__eyebrow::before { background: var(--site-blue); }
.multipage-site .seo-section { padding-block: clamp(52px, 5vw, 72px); }
.multipage-site .seo-section--tint { border-color: var(--site-line); background: #f8faff; }
.multipage-site .seo-section--dark { background: var(--site-ink); }
.multipage-site .seo-route-card,
.multipage-site .seo-word-card,
.multipage-site .seo-phrase-card,
.multipage-site .seo-dialogue,
.multipage-site .seo-example-card,
.multipage-site .sample-paper-card {
  border-color: var(--site-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.multipage-site .seo-route-card:hover,
.multipage-site .seo-route-card:focus-visible,
.multipage-site .sample-paper-card:hover,
.multipage-site .sample-paper-card:focus-within {
  border-color: #bdcdec;
  background: #f8faff;
  box-shadow: 0 16px 40px rgba(7, 18, 41, 0.07);
}
.multipage-site .seo-route-card__index,
.multipage-site .seo-route-card__glyph { border-color: #cad7ef; color: var(--site-blue); background: var(--site-blue-soft); }
.multipage-site .seo-route-card__copy em,
.multipage-site .seo-word-card__word span,
.multipage-site .vocabulary-target-word { color: var(--site-blue); }
.multipage-site .seo-route-card__copy strong { color: var(--site-ink); }
.multipage-site .seo-route-card__copy p { color: var(--site-muted); }
.multipage-site .seo-directory-rail { border-color: var(--site-line); background: #fff; }
.multipage-site .seo-directory-rail a[aria-current="page"] { color: #fff; background: var(--site-blue); }

/* Module-specific surfaces */
.multipage-site .grammar-hub__hero,
.multipage-site .grammar-hub__modules,
.multipage-site .grammar-hub__principles { background: #fff; }
.multipage-site .grammar-hub__card { border-color: var(--site-line); background: #fff; }
.multipage-site .grammar-hub__card--advanced { background: #f4f7fc; }
.multipage-site .grammar-hub__card:hover,
.multipage-site .grammar-hub__card:focus-visible { color: var(--site-blue); background: #f8faff; }
.multipage-site .grammar-hub__breadcrumb { color: #778198; }
.multipage-site .grammar-hub__hero .kicker,
.multipage-site .grammar-hub__modules .kicker,
.multipage-site .grammar-product__summary .kicker,
.multipage-site .grammar-topic-list__heading span,
body[data-page="grammar"] .seo-hero__eyebrow { color: var(--site-blue); }
.multipage-site .grammar-hub__hero aside strong,
.multipage-site .grammar-hub__number,
.multipage-site .grammar-hub__card > strong,
.multipage-site .grammar-product__summary > strong,
.multipage-site .grammar-category-nav__heading span { color: var(--site-ink); }
.multipage-site .grammar-hub__card h2 em,
body[data-page="grammar"] .seo-hero h1 em { color: var(--site-blue); }
.multipage-site .grammar-product__switch a[aria-current="page"] { border-color: var(--site-blue); color: #fff; background: var(--site-blue); }
.multipage-site .grammar-category-nav__items button.is-active { color: var(--site-blue); background: var(--site-blue-soft); box-shadow: inset 3px 0 var(--site-blue); }

.multipage-site .culture-hub-section { border-color: var(--site-line); background: #f8faff; }
.multipage-site .culture-hub-card { border-radius: 14px; box-shadow: 0 14px 38px rgba(7, 18, 41, 0.08); }
.multipage-site .culture-hub-card--compact { border-color: var(--site-line); background: #fff; }
.multipage-site .culture-hub-card--ink { color: #fff; background: var(--site-ink); }
.multipage-site .culture-hub-card__copy strong { font-family: var(--sans); font-weight: 700; }

.multipage-site .practice-path-summary { border-color: var(--site-line); background: #f8faff; }
.multipage-site .practice-stage-new__progress > span { background: var(--site-blue); }
.multipage-site .practice-round-panel,
.multipage-site .practice-stage-new,
.multipage-site .practice-ai-chat,
.multipage-site .practice-ai-context { border-color: var(--site-line); background: #fff; }
.multipage-site .practice-ai-studio__header,
.multipage-site .practice-ai-chat header { border-color: var(--site-line); background: #f8faff; }

.multipage-site .resolver-result,
.multipage-site .zodiac-result,
.multipage-site .next-step,
.multipage-site .seo-next,
.multipage-site .article-next { color: #fff; background: var(--site-ink); }
.multipage-site .next-step,
.multipage-site .seo-next,
.multipage-site .article-next { border-radius: 0; }
.multipage-site .next-step__copy strong,
.multipage-site .seo-next strong,
.multipage-site .article-next h2 { color: #fff; }
.multipage-site .next-step__copy small,
.multipage-site .seo-next small { color: #9db8ff; }
.multipage-site .next-step__copy p,
.multipage-site .seo-next p,
.multipage-site .article-next p { color: #c5cede; }

/* Keep supporting-module CTAs visually separate from the dark footer. */
body[data-page="resources"].multipage-site .next-step,
body[data-page="plan"].multipage-site .next-step,
body[data-page="exam"].multipage-site .next-step,
body[data-page="mock"].multipage-site .next-step {
  margin-bottom: clamp(72px, 6vw, 88px);
  border: 1px solid var(--site-cta-line);
  border-radius: 28px;
  color: var(--site-cta-ink);
  background: var(--site-cta-surface);
  box-shadow: 0 24px 58px rgba(38, 42, 39, 0.09);
}

body[data-page="resources"].multipage-site .next-step__copy strong,
body[data-page="plan"].multipage-site .next-step__copy strong,
body[data-page="exam"].multipage-site .next-step__copy strong,
body[data-page="mock"].multipage-site .next-step__copy strong {
  color: var(--site-cta-ink);
}

body[data-page="resources"].multipage-site .next-step__copy small,
body[data-page="plan"].multipage-site .next-step__copy small,
body[data-page="exam"].multipage-site .next-step__copy small,
body[data-page="mock"].multipage-site .next-step__copy small {
  color: var(--site-red);
}

body[data-page="resources"].multipage-site .next-step__copy p,
body[data-page="plan"].multipage-site .next-step__copy p,
body[data-page="exam"].multipage-site .next-step__copy p,
body[data-page="mock"].multipage-site .next-step__copy p {
  color: var(--site-cta-muted);
}

body[data-page="resources"].multipage-site .next-step .button,
body[data-page="plan"].multipage-site .next-step .button,
body[data-page="exam"].multipage-site .next-step .button,
body[data-page="mock"].multipage-site .next-step .button {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--site-blue);
  box-shadow: 0 14px 30px rgba(11, 77, 232, 0.2);
}

body[data-page="resources"].multipage-site .next-step .button:hover,
body[data-page="resources"].multipage-site .next-step .button:focus-visible,
body[data-page="plan"].multipage-site .next-step .button:hover,
body[data-page="plan"].multipage-site .next-step .button:focus-visible,
body[data-page="exam"].multipage-site .next-step .button:hover,
body[data-page="exam"].multipage-site .next-step .button:focus-visible,
body[data-page="mock"].multipage-site .next-step .button:hover,
body[data-page="mock"].multipage-site .next-step .button:focus-visible {
  color: #fff;
  background: var(--site-blue-dark);
  box-shadow: 0 18px 34px rgba(11, 77, 232, 0.24);
}

.multipage-site .practice-tool-hero,
.multipage-site .stroke-hero,
.multipage-site .learning-article-hero { background: #fff; }
.multipage-site .practice-tool-start,
.multipage-site .practice-tool-next,
.multipage-site .stroke-search button,
.multipage-site .stroke-primary-action { border-color: var(--site-blue); color: #fff; background: var(--site-blue); }
.multipage-site .practice-tool-start:hover,
.multipage-site .practice-tool-next:hover,
.multipage-site .stroke-search button:hover,
.multipage-site .stroke-primary-action:hover { background: var(--site-blue-dark); }
.multipage-site .practice-tool-start > .ph { font-size: 18px; }
.multipage-site .practice-tool-section { border-color: var(--site-line); background: #f8faff; }
.multipage-site .practice-tool-setup { border-color: var(--site-line); background: #f8faff; }
.multipage-site .practice-tool-options input:checked + span {
  border-color: var(--site-blue);
  background: var(--site-blue-soft);
  box-shadow: inset 3px 0 var(--site-blue);
}
.multipage-site .practice-tool-options input:checked + span::before { border-color: var(--site-blue); }
.multipage-site .practice-tool-progress > span { background: var(--site-blue); }
.multipage-site .practice-tool-coach,
.multipage-site .practice-tool-coach__card { background: var(--site-ink); }
.multipage-site .practice-tool-setup,
.multipage-site .practice-tool-trainer,
.multipage-site .stroke-context,
.multipage-site .stroke-stage,
.multipage-site .reading-passage,
.multipage-site .learning-article-aside > div { border-color: var(--site-line); background: #fff; }

.multipage-site .sample-paper-card__band,
.multipage-site .paper-intro__aside > div:first-child { color: #fff; background: var(--site-ink); }
.multipage-site .sample-paper-card:nth-child(n) .sample-paper-card__band { background: var(--site-ink); }
.multipage-site .sample-paper-card:nth-child(n) .sample-paper-card__band span { color: #c5cede; }
.multipage-site .sample-paper-card__stats,
.multipage-site .paper-intro__structure { border-color: var(--site-line); background: #f8faff; }

.multipage-site .stroke-level-browser { border-color: var(--site-ink); background: var(--site-ink); }
.multipage-site .stroke-level-browser a[aria-current="location"] { color: #fff; background: var(--site-blue); }
.multipage-site .stroke-toolbar { border-color: var(--site-line); background: #fff; }

/* Tone Path brand icon applications */
body[data-page="resources"].multipage-site .fact-brand-icon {
  width: 34px;
  height: 34px;
  grid-row: 1 / span 2;
  object-fit: contain;
}
body[data-page="resources"].multipage-site .card-icon {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(16, 35, 30, 0.12);
  border-radius: 50%;
  background: #fffaf3;
}
body[data-page="resources"].multipage-site .card-icon > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
body[data-page="resources"].multipage-site .library-card--dark .card-icon { background: #fffaf3; }
body[data-page="resources"].multipage-site .sound-button .ph { font-size: 16px; }
body[data-page="resources"].multipage-site .text-link .ph {
  font-size: 16px;
  transition: transform 180ms ease;
}
body[data-page="resources"].multipage-site .text-link:hover .ph { transform: translateX(3px); }

/* Overlays and footer */
.multipage-site .modal-backdrop,
.multipage-site .search-panel { background: rgba(7, 18, 41, 0.58); }
.multipage-site .plan-modal,
.multipage-site .search-dialog { border-color: var(--site-line); border-radius: 16px; background: #fff; box-shadow: 0 34px 90px rgba(7, 18, 41, 0.28); }
.multipage-site .plan-modal h2 { color: var(--site-ink); font-family: var(--sans); font-weight: 720; }
.multipage-site .plan-modal__progress span:first-child { background: var(--site-blue); }
.multipage-site .modal-close .ph { font-size: 17px; }
.multipage-site .modal-continue .ph { margin-left: 7px; font-size: 17px; }
.multipage-site .search-dialog__input > .ph { color: var(--site-muted); font-size: 21px; }

.multipage-site .site-footer { padding: 64px 0 24px; border-color: #1d2941; color: #fff; background: var(--site-ink); }
.multipage-site .site-footer .brand { color: #fff; }
.multipage-site .site-footer .brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  padding: 5px;
  border-radius: 50%;
  background: #fffaf3;
}
.multipage-site .footer-brand p,
.multipage-site .footer-grid > div:not(.footer-brand) a,
.multipage-site .footer-bottom { color: #aeb9cc; }
.multipage-site .footer-grid > div:not(.footer-brand) strong { color: #fff; font-family: var(--sans); }
.multipage-site .footer-grid > div:not(.footer-brand) a:hover { color: #fff; }
.multipage-site .footer-bottom { border-color: #283550; }

@media (max-width: 1120px) {
  .multipage-site .shell { width: calc(100% - 72px); }
  .multipage-site .nav-wrap { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .multipage-site .desktop-nav { gap: 22px; }
  .multipage-site .nav-actions { gap: 20px; }
}

@media (max-width: 1040px) {
  html {
    --site-header-height: 74px;
    --site-subnav-height: 62px;
  }
  .multipage-site .nav-wrap { min-height: 74px; grid-template-columns: 1fr auto; }
  .multipage-site .desktop-nav,
  .multipage-site .nav-signin,
  .multipage-site .nav-actions > .button { display: none; }
  .multipage-site .mobile-menu-button { display: grid; width: 48px; height: 48px; place-content: center; gap: 5px; padding: 0; border: 1px solid var(--site-line); border-radius: 8px; background: #fff; }
  .multipage-site .mobile-menu-button span { display: block; width: 19px; height: 1.5px; border-radius: 2px; background: var(--site-ink); }
  .multipage-site .mobile-nav { width: calc(100% - 72px); max-height: calc(100vh - 74px); margin: 0 auto; overflow-y: auto; padding: 12px 0 24px; border-top: 1px solid var(--site-line); color: var(--site-ink); background: #fff; }
  .multipage-site .mobile-nav.is-open { display: grid; }
  .multipage-site .mobile-nav > a:not(.button),
  .multipage-site .mobile-nav__primary > a,
  .multipage-site .mobile-nav__action { min-height: 50px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--site-line); border-radius: 0; color: var(--site-ink); background: transparent; font-family: var(--sans); font-size: 16px; font-weight: 620; text-align: left; cursor: pointer; }
  .multipage-site .mobile-nav__group { display: none; }
  .multipage-site .mobile-nav > a.mobile-nav__subitem { padding-left: 20px; color: var(--site-blue); font-size: 15px; }
  .multipage-site .mobile-nav .button { margin-top: 16px; }
  .multipage-site .page-hero,
  .multipage-site .seo-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .multipage-site .page-hero__meta,
  .multipage-site .seo-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .multipage-site [data-flow-nav] .flow-nav__inner { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
}

@media (max-width: 640px) {
  .multipage-site .shell,
  .multipage-site .mobile-nav { width: calc(100% - 32px); }
  .multipage-site .brand { font-size: 27px; }
  .multipage-site .brand-mark { width: 31px; height: 31px; flex-basis: 31px; }
  .multipage-site .site-footer .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .multipage-site .page-hero { padding-top: 30px; padding-bottom: 36px; }
  .multipage-site .page-hero h1,
  .multipage-site .seo-hero h1 { font-size: clamp(39px, 11vw, 48px); }
  .multipage-site .page-hero__meta,
  .multipage-site .seo-hero__facts { grid-template-columns: 1fr; }
  .multipage-site .page-hero__meta > span + span,
  .multipage-site .seo-hero__facts > span + span { border-top: 1px solid var(--site-line); border-left: 0; }
  .multipage-site .local-nav { justify-content: flex-start; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
  .multipage-site .local-nav::-webkit-scrollbar { display: none; }
  .multipage-site .local-nav a { flex: 0 0 auto; white-space: nowrap; }
  .multipage-site .seo-card-grid,
  .multipage-site .seo-card-grid--three { grid-template-columns: 1fr; }
  .multipage-site .seo-section-heading { grid-template-columns: 1fr; gap: 14px; }
  .multipage-site .next-step,
  .multipage-site .seo-next,
  .multipage-site .article-next { padding: 32px 22px; }
  body[data-page="resources"].multipage-site .next-step,
  body[data-page="plan"].multipage-site .next-step,
  body[data-page="exam"].multipage-site .next-step,
  body[data-page="mock"].multipage-site .next-step {
    margin-bottom: 48px;
    border-radius: 22px;
  }
  .multipage-site .site-footer { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .multipage-site *,
  .multipage-site *::before,
  .multipage-site *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}