/* First Chi homepage, 2026-10-19: beginner's first practice. Light palette from the Flutter App (h5_design_constants.dart). */
/* Every homepage class uses the hm- prefix so shared rules in styles.css / design-system.css (.hero, .tabs, details …) don't leak in. */
@font-face {
  font-family: "First Chi Serif";
  src: url("/assets/home/home-serif-subset.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

.page-home {
  --hm-bg: #ffffff;
  --hm-bg-raised: #f4f6f4;
  --hm-surface: #ffffff;
  --hm-line: rgb(18 26 24 / .1);
  --hm-line-strong: rgb(18 26 24 / .18);
  --hm-text: #121a18;               /* inkGreen */
  --hm-muted: #5a625e;
  --hm-jade: #4a7a73;               /* jadeTeal */
  --hm-jade-ink: #3a6159;
  --hm-jade-tint: rgb(74 122 115 / .1);
  --hm-jade-band: #3f6a63;
  --hm-gold-deep: #c49a5c;          /* warmGold */
  --hm-gold-ink: #8a6630;
  --hm-moon: #f5f5f0;
  --hm-cinnabar: #b5432f;
  --hm-hill: #cfe0da;
  --hm-dot-idle: rgb(18 26 24 / .09);
  --hm-badge-bg: rgb(255 255 252 / .92);
  --hm-device: #121a18;
  --hm-device-edge: transparent;
  --hm-shadow: 0 .0625rem .125rem rgb(18 26 24 / .04), 0 .5rem 1.5rem rgb(18 26 24 / .05);
  --hm-shadow-hover: 0 .0625rem .125rem rgb(18 26 24 / .05), 0 .875rem 2rem rgb(18 26 24 / .08);
  --hm-serif: "First Chi Serif", "Noto Serif SC", "Songti SC", "STSong", serif;
  --hm-radius-card: 1.25rem;
  --hm-radius-sm: .75rem;

  /* Shared header, topic nav and footer read these. */
  --paper: var(--hm-bg);
  --ink: var(--hm-text);
  --muted: var(--hm-muted);
  --line: var(--hm-line);
  --surface: var(--hm-bg-raised);
  --surface-raised: var(--hm-surface);
  --surface-deep: #e8ede8;
  --jade: var(--hm-jade-ink);
  --primary: var(--hm-jade-ink);
  --primary-hover: #2f5049;
  --on-primary: var(--hm-moon);
  --focus: var(--hm-jade-ink);
  background: var(--hm-bg);
  color: var(--hm-text);
}

html:lang(en) .page-home { --hm-serif: Georgia, "Times New Roman", serif; }
html:lang(en) .hm-seal { writing-mode: horizontal-tb; letter-spacing: 0; }
html:lang(en) .hm-practice-tag { letter-spacing: 0; }

@media (prefers-color-scheme: dark) {
  .page-home {
    --hm-bg: #121a18;
    --hm-bg-raised: #18211f;
    --hm-surface: #1d2826;
    --hm-line: rgb(245 245 240 / .1);
    --hm-line-strong: rgb(245 245 240 / .2);
    --hm-text: #ecebe4;
    --hm-muted: #a9b1ac;
    --hm-jade: #5d9188;
    --hm-jade-ink: #86b8ae;
    --hm-jade-tint: rgb(127 176 167 / .1);
    --hm-jade-band: #24403b;
    --hm-gold-ink: #d9b983;
    --hm-cinnabar: #e0765f;
    --hm-hill: #22332f;
    --hm-dot-idle: rgb(245 245 240 / .1);
    --hm-badge-bg: rgb(18 26 24 / .88);
    --hm-device: #0b100f;
    --hm-device-edge: rgb(245 245 240 / .14);
    --hm-shadow: 0 .0625rem .125rem rgb(0 0 0 / .2), 0 .5rem 1.5rem rgb(0 0 0 / .18);
    --hm-shadow-hover: 0 .0625rem .125rem rgb(0 0 0 / .24), 0 .875rem 2rem rgb(0 0 0 / .26);
    --surface-deep: #26322f;
    --primary-hover: #a3cbc2;
    --on-primary: #121a18;
  }
}

.page-home .wrap { width: min(72rem, 100% - 3rem); }
.page-home main { font-size: 1.0625rem; line-height: 1.75; }
.page-home main h1, .page-home main h2, .page-home main h3 { font-family: var(--hm-serif); font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-wrap: balance; }
.page-home main figure { margin: 0; }
.page-home main img { height: auto; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.hm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.75rem; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 700; white-space: nowrap;
}
.hm-btn:active { transform: translateY(.0625rem); }
.hm-btn-gold { background: linear-gradient(180deg, #d5b17b, #cda56a); color: #1a1408; box-shadow: 0 .125rem .375rem rgb(196 154 92 / .14); }
.hm-btn-gold:hover { background: linear-gradient(180deg, #dbb982, #d3ad72); }
.hm-btn-cream { background: #f5f5f0; color: #121a18; }
.hm-btn-cream:hover { background: #fff; }
.hm-btn-ghost { border: .0625rem solid var(--hm-line-strong); color: var(--hm-text); background: var(--hm-surface); }
.hm-btn-ghost:hover { border-color: var(--hm-jade); }

/* Shared type */
.hm-eyebrow { color: var(--hm-gold-ink); font-size: .875rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .875rem; }
.hm-section { padding: 7rem 0; }
.hm-section-tight { padding: 4rem 0; }
.hm-section-tight + .hm-section { padding-top: 3rem; }
.hm-section-raised { background: var(--hm-bg-raised); }
.hm-section-head { max-width: 40rem; margin-bottom: 3rem; }
.page-home .hm-section-head h2, .page-home .hm-learn-copy h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.hm-section-lead { color: var(--hm-muted); font-size: 1.125rem; margin-top: 1rem; }
.hm-muted-sm { color: var(--hm-muted); font-size: .875rem; }
.hm-caption { color: var(--hm-muted); font-size: .8125rem; margin-top: .75rem; }
.hm-caption a { color: var(--hm-jade-ink); text-decoration: underline; text-underline-offset: .1875rem; }
.page-home .hm-h3 { font-size: 1.5rem; }

/* Hero */
.hm-hero { position: relative; overflow: hidden; padding: 5rem 0 2rem; }
.hm-hero-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.page-home .hm-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.22; }
.hm-lead { color: var(--hm-muted); font-size: 1.1875rem; margin-top: 1.5rem; max-width: 36rem; }
.hm-facts {
  list-style: none; padding: 0; margin: 3rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: .0625rem solid var(--hm-line); max-width: 36rem;
}
.hm-facts li { padding: 1.125rem 1rem 0 0; color: var(--hm-muted); font-size: .8125rem; line-height: 1.5; }
.hm-facts strong { display: block; color: var(--hm-text); font-family: var(--hm-serif); font-size: 1.0625rem; font-weight: 600; margin-bottom: .25rem; }

.hm-hero-visual { position: relative; display: grid; justify-items: center; padding-top: .75rem; }
.hm-hill {
  position: absolute; left: 50%; bottom: -7.5rem; width: 150%; aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--hm-hill) 0%, transparent 80%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hm-phone {
  position: relative; width: min(18.75rem, 78%);
  padding: .625rem; border-radius: 2.75rem;
  background: var(--hm-device); box-shadow: 0 0 0 .0625rem var(--hm-device-edge), 0 1.875rem 3.75rem rgb(18 26 24 / .22);
}
.hm-phone img { border-radius: 2.125rem; aspect-ratio: 600 / 1198; object-fit: cover; }
.hm-float-card {
  position: absolute; left: 0; bottom: 6rem; width: 13.125rem;
  padding: 1rem 1.125rem; border-radius: 1rem;
  background: var(--hm-surface); border: .0625rem solid var(--hm-line);
  box-shadow: 0 1rem 2.5rem rgb(18 26 24 / .14);
}
.hm-float-title { color: var(--hm-muted); font-size: .8125rem; }
.hm-float-day { display: flex; align-items: center; justify-content: space-between; font-family: var(--hm-serif); font-weight: 600; font-size: 1.375rem; margin-top: .125rem; }
.hm-float-bar { height: .1875rem; background: var(--hm-line); border-radius: .125rem; margin-top: .75rem; }
.hm-float-bar i { display: block; width: 12%; height: 100%; background: var(--hm-gold-deep); border-radius: .125rem; }
.hm-seal {
  display: inline-grid; place-items: center;
  font-family: var(--hm-serif); font-weight: 600; color: var(--hm-cinnabar);
  border: .125rem solid var(--hm-cinnabar); border-radius: .25rem;
  writing-mode: vertical-rl; letter-spacing: .1em; line-height: 1.2;
}
.hm-float-seal { font-size: .75rem; padding: .25rem .125rem; }
.hm-hero .hm-caption { position: relative; text-align: center; }

/* How it works */
.hm-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.hm-step { background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-card); padding: 2rem 1.75rem 2.25rem; box-shadow: var(--hm-shadow); }
.hm-step-num { font-family: var(--hm-serif); font-weight: 600; color: var(--hm-gold-ink); font-size: .9375rem; letter-spacing: .1em; }
.page-home .hm-step h3 { font-size: 1.625rem; margin: .875rem 0 .625rem; }
.hm-step p { color: var(--hm-muted); }

/* Choose a practice */
.hm-practice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hm-practice-card {
  display: flex; flex-direction: column;
  background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-card); overflow: hidden;
  box-shadow: var(--hm-shadow);
}
.hm-practice-card:hover { border-color: rgb(74 122 115 / .45); box-shadow: var(--hm-shadow-hover); }
.hm-practice-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hm-practice-media img { width: 100%; height: 100%; object-fit: cover; }
.page-home .hm-practice-media img { height: 100%; }
.hm-badge {
  position: absolute; left: 1rem; top: 1rem;
  padding: .25rem .875rem; border-radius: 999px; font-size: .8125rem; font-weight: 700;
  color: var(--hm-gold-ink); background: var(--hm-badge-bg); border: .0625rem solid rgb(196 154 92 / .6);
}
.hm-practice-body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; flex: 1; }
.page-home .hm-practice-body h3 { font-size: 2rem; }
.hm-practice-tag { color: var(--hm-jade-ink); font-family: var(--hm-serif); font-size: 1.1875rem; font-weight: 600; letter-spacing: .06em; margin-top: .375rem; }
.hm-practice-intro { color: var(--hm-muted); margin-top: .875rem; }
.hm-traits { margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.hm-traits div { display: grid; grid-template-columns: 4.5em 1fr; gap: 1rem; padding: 1rem 1.125rem; border-radius: var(--hm-radius-sm); background: var(--hm-jade-tint); }
.hm-traits dt { color: var(--hm-jade-ink); font-size: .8125rem; font-weight: 700; padding-top: .1875rem; }
.hm-traits dd { margin: 0; color: var(--hm-muted); font-size: .9375rem; line-height: 1.7; }
.hm-traits strong { display: block; color: var(--hm-text); font-size: 1rem; margin-bottom: .125rem; }
.hm-practice-meta { color: var(--hm-muted); font-size: .875rem; margin-top: 1.25rem; }
.hm-link { margin-top: auto; padding-top: 1.25rem; color: var(--hm-jade-ink); font-weight: 700; }
/* Side by side, the two cards share row tracks so intros of different lengths keep the trait boxes level. */
@media (min-width: 40.0625em) {
  @supports (grid-template-rows: subgrid) {
    .hm-practice-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    .hm-practice-body { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
    .hm-traits { grid-row: span 2; grid-template-rows: subgrid; }
    .hm-link { align-self: end; }
  }
}
.hm-aside-line { color: var(--hm-muted); margin-top: 1.75rem; font-size: .9375rem; }
.hm-aside-line a, .hm-trust-links a { color: var(--hm-jade-ink); text-decoration: underline; text-underline-offset: .1875rem; }

/* Learn step by step (tabs driven by app.js) */
.hm-learn-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 4rem; align-items: center; }
.page-home .hm-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; border-bottom: 0; }
.page-home .hm-tabs[hidden] { display: none; }
.page-home .hm-tabs button {
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; white-space: nowrap;
  color: var(--hm-muted); background: var(--hm-surface); border: .0625rem solid var(--hm-line-strong);
}
.page-home .hm-tabs button:hover { color: var(--hm-text); border-color: var(--hm-jade); }
.page-home .hm-tabs button[aria-selected=true] { color: #f5f5f0; background: var(--hm-jade); border-color: var(--hm-jade); }
.page-home #teaching-panel { margin-top: 1.25rem; padding: 0; min-height: 3.6em; max-width: none; font-size: 1.125rem; line-height: 1.75; color: var(--hm-text); }
.hm-features { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; border-top: .0625rem solid var(--hm-line); }
.hm-features li { display: grid; grid-template-columns: 7.5em 1fr; gap: 1rem; padding: 1rem 0; border-bottom: .0625rem solid var(--hm-line); }
.hm-features strong { font-family: var(--hm-serif); font-weight: 600; }
.hm-features span { color: var(--hm-muted); }
/* Course illustrations keep their own paper colour in both schemes. */
.hm-step-frame { background: #f4efe4; border-radius: var(--hm-radius-card); overflow: hidden; border: .0625rem solid var(--hm-line); box-shadow: var(--hm-shadow); }
.hm-step-frame figcaption { display: flex; justify-content: space-between; padding: .875rem 1.25rem; color: #5b5a52; font-size: .8125rem; font-weight: 700; }
.hm-step-frame img { width: 100%; aspect-ratio: 1121 / 1403; object-fit: contain; }

/* 100-day foundation */
.hm-foundation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; align-items: stretch; }
.hm-foundation-card { background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-card); padding: 2rem; box-shadow: var(--hm-shadow); }
.hm-foundation-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.hm-day-big { font-family: var(--hm-serif); font-weight: 600; font-size: 2.5rem; line-height: 1.2; margin-top: .25rem; }
.hm-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: .4375rem; margin: 1.75rem 0 2rem; }
.hm-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--hm-dot-idle); }
.hm-dots i.is-on { background: var(--hm-gold-deep); }
.hm-seals { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.hm-seal-item { display: flex; gap: .75rem; align-items: center; padding: .875rem; border-radius: var(--hm-radius-sm); border: .0625rem solid var(--hm-line); font-size: .8125rem; color: var(--hm-muted); line-height: 1.5; }
.hm-seal-item > span:last-child { text-wrap: pretty; }
.hm-seal-item strong { display: block; color: var(--hm-text); font-size: .9375rem; }
.hm-seal-item .hm-seal { font-size: .875rem; padding: .375rem .1875rem; flex: none; opacity: .3; filter: grayscale(1); }
.hm-seal-item.is-done .hm-seal { opacity: 1; filter: none; }
.hm-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hm-shots img { border-radius: 1.125rem; box-shadow: 0 .75rem 1.75rem rgb(18 26 24 / .16); }
.hm-shots figcaption { color: var(--hm-muted); font-size: .8125rem; margin-top: .75rem; }

/* Compare */
.hm-table-wrap { overflow-x: auto; border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-card); background: var(--hm-surface); box-shadow: var(--hm-shadow); }
.hm-compare { width: 100%; border-collapse: collapse; min-width: 47.5rem; font-size: .9375rem; line-height: 1.6; }
.hm-compare th, .hm-compare td { text-align: left; vertical-align: top; padding: 1.125rem 1.25rem; border-bottom: .0625rem solid var(--hm-line); }
.hm-compare tbody tr:last-child > * { border-bottom: 0; }
.hm-compare thead th { font-family: var(--hm-serif); font-size: 1.125rem; font-weight: 600; padding-top: 1.375rem; white-space: nowrap; }
.hm-compare tbody th { color: var(--hm-muted); font-weight: 700; font-size: .875rem; white-space: nowrap; width: 8em; }
.hm-compare tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--hm-surface); }
.hm-compare td { color: var(--hm-muted); text-wrap: balance; }
.hm-compare .is-ours { background: var(--hm-jade-tint); color: var(--hm-text); }
.hm-compare thead .is-ours { color: var(--hm-jade-ink); }
.hm-scroll-hint { display: none; color: var(--hm-muted); font-size: .8125rem; margin: -1rem 0 .75rem; }
.hm-tick { color: var(--hm-jade-ink); font-weight: 700; }
.hm-tick::before { content: "✓ "; }
.hm-compare-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.75rem; }
.hm-compare-links a { color: var(--hm-jade-ink); font-weight: 700; padding: .5rem 0; }
.hm-compare-links a:hover { color: var(--hm-text); }

/* Needs */
.hm-needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hm-need { display: grid; gap: .25rem; padding: 1.375rem 1.5rem; background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-radius: 1rem; }
.hm-need:hover { border-color: rgb(74 122 115 / .45); }
.hm-need strong { font-family: var(--hm-serif); font-size: 1.25rem; font-weight: 600; }
.hm-need span { color: var(--hm-muted); font-size: .9375rem; }

/* Sources */
.hm-trust { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 2.5rem; align-items: center; }
.hm-trust p { color: var(--hm-muted); margin-top: .625rem; font-size: .9375rem; }
.hm-sources { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hm-sources li { padding: .375rem .875rem; border: .0625rem solid var(--hm-line-strong); border-radius: 999px; font-size: .8125rem; color: var(--hm-muted); background: var(--hm-surface); }
.hm-trust-links { display: flex; gap: 1.5rem; font-weight: 700; }
.hm-trust-links a { padding: .625rem 0; white-space: nowrap; }

/* FAQ */
.hm-faq-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.hm-faq details { border-bottom: .0625rem solid var(--hm-line-strong); }
.hm-faq details:first-child { border-top: .0625rem solid var(--hm-line-strong); }
.page-home .hm-faq summary {
  display: block; position: relative; padding: 1.375rem 2.5rem 1.375rem 0;
  font-family: var(--hm-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.6;
}
.hm-faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1.125rem; color: var(--hm-jade-ink); font-size: 1.625rem; font-family: var(--sans); font-weight: 300; }
.hm-faq details[open] summary::after { content: "−"; }
.hm-faq-more { margin-top: 1.5rem; }
.hm-faq-more a { display: inline-block; padding: .375rem 0; color: var(--hm-jade-ink); font-weight: 700; }
.hm-faq-more a:hover { color: var(--hm-text); }
.page-home .hm-faq details p { margin: 0; padding: 0 2.5rem 1.5rem 0; color: var(--hm-muted); font-size: 1.0625rem; line-height: 1.75; }

/* Closing band: the one jade surface */
.hm-cta-band { position: relative; overflow: hidden; background: var(--hm-jade-band); color: #f5f5f0; padding-top: 6rem; }
.hm-cta-band::before {
  content: ""; position: absolute; left: 50%; top: 2.5rem; width: 140%; aspect-ratio: 2.4 / 1; transform: translateX(-50%);
  background: #4a7a73; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .45;
}
.hm-cta-inner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
.hm-cta-copy { padding-bottom: 6rem; }
.page-home .hm-cta-copy h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.hm-cta-copy > p:not(.hm-muted-sm) { color: rgb(245 245 240 / .88); font-size: 1.1875rem; margin-top: 1rem; }
.hm-cta-copy .hm-muted-sm { color: rgb(245 245 240 / .8); margin-top: 1.25rem; }
.hm-cta-band .hm-btn-ghost { background: transparent; color: #f5f5f0; border-color: rgb(245 245 240 / .5); }
.hm-cta-band .hm-btn-ghost:hover { border-color: #f5f5f0; }
.hm-cta-band :focus-visible { outline-color: #f5f5f0; }
.hm-cta-figure { width: 14.375rem; margin-right: 6%; }

/* Tablet */
@media (max-width: 60em) {
  .hm-hero-inner, .hm-learn-inner, .hm-foundation-grid, .hm-faq-inner { grid-template-columns: 1fr; }
  .hm-hero-visual { margin-top: 1rem; }
  .hm-steps, .hm-needs { grid-template-columns: 1fr 1fr; }
  .hm-trust { grid-template-columns: 1fr; gap: 1.25rem; }
  .hm-learn-inner { gap: 2.5rem; }
  .hm-step-frame { max-width: 26.25rem; }
  .hm-faq-inner { gap: .5rem; }
}

/* Phone */
@media (max-width: 40em) {
  .page-home main { font-size: 1rem; }
  .hm-section { padding: 4.5rem 0; }
  .hm-section-head { margin-bottom: 2rem; }
  .hm-hero { padding: 2.5rem 0 4rem; }
  .page-home .hm-hero h1 { font-size: 1.875rem; }
  .page-home .hm-section-head h2, .page-home .hm-learn-copy h2 { font-size: 1.75rem; }
  .hm-br-md { display: none; }
  .hm-lead { font-size: 1.0625rem; margin-top: 1.125rem; }
  .hm-actions { margin-top: 1.75rem; }
  .hm-actions .hm-btn { flex: 1 1 100%; }
  .hm-facts { grid-template-columns: 1fr 1fr; margin-top: 2.25rem; }
  .hm-facts li { padding: 1rem .75rem .25rem 0; }
  .hm-phone { width: 15.625rem; }
  .hm-float-card { left: -.25rem; bottom: 4.5rem; width: 11.25rem; padding: .75rem .875rem; }
  .hm-float-day { font-size: 1.1875rem; }
  .hm-steps, .hm-practice-grid, .hm-needs { grid-template-columns: 1fr; }
  .hm-shots { gap: .75rem; }
  .hm-step { padding: 1.5rem 1.375rem 1.75rem; }
  .page-home .hm-step h3 { font-size: 1.4375rem; }
  .hm-practice-body { padding: 1.375rem 1.25rem 1.625rem; }
  .page-home .hm-practice-body h3 { font-size: 1.6875rem; }
  .hm-practice-tag { font-size: 1.0625rem; }
  .hm-traits div { grid-template-columns: 1fr; gap: .125rem; padding: .875rem 1rem; }
  .hm-traits dt { padding-top: 0; }
  .hm-features li { grid-template-columns: 1fr; gap: .125rem; }
  .page-home #teaching-panel { font-size: 1.0625rem; }
  .hm-compare { min-width: 51.25rem; }
  .hm-compare th, .hm-compare td { padding: 1rem; }
  .hm-compare tbody th { width: 6.5em; }
  .hm-scroll-hint { display: block; }
  .hm-foundation-card { padding: 1.5rem 1.25rem; }
  .hm-day-big { font-size: 2rem; }
  .hm-dots { grid-template-columns: repeat(10, 1fr); gap: .5rem; }
  .hm-seals { grid-template-columns: 1fr; }
  .page-home .hm-faq summary { font-size: 1.125rem; }
  .page-home .hm-faq details p { font-size: 1rem; }
  .hm-cta-inner { grid-template-columns: 1fr; }
  .hm-cta-copy { padding-bottom: 0; }
  .hm-cta-copy > p:not(.hm-muted-sm) { font-size: 1.0625rem; }
  .hm-cta-band { padding-top: 4.5rem; }
  .hm-cta-band::before { width: 300%; top: 11.875rem; bottom: 0; aspect-ratio: auto; }
  .hm-cta-figure { width: 9.375rem; justify-self: end; margin: .5rem .5rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home *, .page-home *::before { transition: none !important; }
}

/* English labels need full hit areas even when their visible text is short. */
html[lang="en"] .page-home .lang-switch { min-width: 44px; justify-content: center; }
html[lang="en"] .page-home .breadcrumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
html[lang="en"] .page-home .breadcrumbs { align-items: center; }

/* Keep English page-reference labels readable in the existing compact table. */
@media (min-width: 48rem) {
  html[lang="en"] .reading-body .reference-table th:first-child { width: 28%; }
}