/* ============================================================
   Home page theme — "Ask first, v2" (#18935)

   One page, one scope. Every rule below starts from `body.home-v2`, which
   only static-site/index.html carries, or targets an `.hv-*` class that only
   that page's markup uses — so nothing here can restyle another page.

   The header and footer are NOT rebuilt: their markup is generated by
   scripts/unify_static_nav.py and must stay byte-equal to it. They are
   re-coloured here, on this page only.

   Mobile first: the base rules are the 390px layout; wider layouts are
   added with min-width queries. There is no max-width query in this file.
   ============================================================ */

/* Self-hosted: the site's CSP is `style-src 'self'`, so a Google Fonts
   stylesheet cannot load. Latin subsets only — Sinhala and Tamil pages keep
   the script fonts style.css already declares for them. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/css/fonts/bricolage-grotesque-800-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/css/fonts/figtree-var-latin.woff2) format('woff2');
}

/* ---- Tokens ------------------------------------------------- */
body.home-v2 {
  --hv-ink: #0F1B2D;
  --hv-paper: #F3F5F1;
  --hv-card: #FFFFFF;
  --hv-line: #D5DBD2;
  --hv-muted: #2B3545;
  --hv-accent: #0A6B55;
  --hv-accent-press: #085846;
  --hv-accent-text: #FFFFFF;
  --hv-hl: #FFD84D;
  --hv-hl-text: #0F1B2D;
  --hv-bubble: #EEF1EB;
  --hv-band: #0F1B2D;
  --hv-band-text: #FFFFFF;
  --hv-band-soft: #D5DBE4;
  --hv-band-mute: #AEB8C6;
  --hv-band-line: #33425A;
  --hv-r-card: 22px;
  --hv-r-pill: 999px;
  --hv-bar-h: 72px;
  --hv-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --hv-font-body: 'Figtree', 'Noto Sans Sinhala', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', sans-serif;

  background-color: var(--hv-paper);
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  /* Room for the bottom bar, so it never covers the footer's last links. */
  padding-bottom: calc(var(--hv-bar-h) + env(safe-area-inset-bottom, 0px));
}

/* ---- Header (generated markup, re-coloured) ----------------- */
body.home-v2 .nav {
  background-color: var(--hv-paper);
  border-bottom: 1px solid var(--hv-line);
  box-shadow: none;
}

body.home-v2 .nav.nav-scrolled {
  box-shadow: 0 6px 20px rgba(15, 27, 45, 0.08);
}

body.home-v2 .nav-logo,
body.home-v2 .nav-logo:hover {
  color: var(--hv-ink);
  font-family: var(--hv-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.home-v2 .nav-link,
body.home-v2 .nav-dropdown-trigger,
body.home-v2 .nav-links.nav-open .nav-link,
body.home-v2 .nav-links.nav-open .nav-dropdown-trigger {
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  font-weight: 600;
}

body.home-v2 .nav-link:hover,
body.home-v2 .nav-dropdown-trigger:hover,
body.home-v2 .nav-links.nav-open .nav-link:hover,
body.home-v2 .nav-links.nav-open .nav-dropdown-trigger:hover {
  color: var(--hv-accent);
}

body.home-v2 .nav-link::after {
  background: var(--hv-hl);
}

body.home-v2 .nav-links.nav-open {
  background-color: var(--hv-card);
  border-color: var(--hv-line);
}

body.home-v2 .nav-dropdown-menu {
  background-color: var(--hv-card);
  border: 1px solid var(--hv-line);
  border-radius: 16px;
}

body.home-v2 .nav-dropdown-item {
  color: var(--hv-ink);
}

body.home-v2 .nav-dropdown-item:hover,
body.home-v2 .nav-dropdown-item-featured,
body.home-v2 .nav-dropdown-item-featured:hover {
  background: var(--hv-bubble);
  color: var(--hv-ink);
}

body.home-v2 .nav-actions .btn-primary {
  background-color: var(--hv-accent);
  border-color: var(--hv-accent);
  color: var(--hv-accent-text);
  font-family: var(--hv-font-body);
}

body.home-v2 .nav-actions .btn-primary:hover {
  background-color: var(--hv-accent-press);
  border-color: var(--hv-accent-press);
  color: var(--hv-accent-text);
}

body.home-v2 .nav-actions .btn-ghost,
body.home-v2 .nav-links .nav-signin-mobile {
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
}

body.home-v2 .nav-links .nav-signin-mobile {
  border-color: var(--hv-ink);
}

body.home-v2 .nav-actions .btn-ghost:hover,
body.home-v2 .nav-links .nav-signin-mobile:hover {
  background-color: var(--hv-bubble);
  color: var(--hv-ink);
}

body.home-v2 .lang-switcher a {
  color: var(--hv-muted);
}

body.home-v2 .lang-switcher a.lang-active,
body.home-v2 .nav-links .lang-switcher-mobile a.lang-active {
  background: var(--hv-hl);
  border-color: var(--hv-hl);
  color: var(--hv-hl-text);
}

body.home-v2 .nav-links .lang-switcher-mobile a:hover {
  background: var(--hv-bubble);
}

body.home-v2 .nav-mobile-toggle {
  color: var(--hv-ink);
}

/* ---- Footer (generated markup, re-coloured) ----------------- */
body.home-v2 .footer {
  background-color: var(--hv-band);
  color: var(--hv-band-soft);
  font-family: var(--hv-font-body);
}

body.home-v2 .footer-logo,
body.home-v2 .footer-logo:hover {
  color: var(--hv-band-text);
  font-family: var(--hv-font-display);
  font-weight: 800;
}

body.home-v2 .footer-brand p {
  color: var(--hv-band-soft);
}

body.home-v2 .footer-col h3 {
  color: var(--hv-hl);
}

body.home-v2 .footer-col a {
  color: var(--hv-band-soft);
}

body.home-v2 .footer-col a:hover {
  color: var(--hv-band-text);
}

body.home-v2 .footer-bottom {
  border-top: 1px solid var(--hv-band-line);
}

body.home-v2 .footer-bottom p {
  color: var(--hv-band-mute);
}

body.home-v2 .footer-bottom-links a {
  color: var(--hv-band-soft);
}

body.home-v2 .footer-bottom-links a:hover {
  color: var(--hv-hl);
}

body.home-v2 .footer-social a {
  background: transparent;
  border: 1px solid var(--hv-band-line);
  color: var(--hv-band-soft);
}

body.home-v2 .footer-social a:hover {
  background: var(--hv-hl);
  border-color: var(--hv-hl);
  color: var(--hv-hl-text);
}

/* The bar's "Ask the coach" is an in-page anchor; keep its target clear of
   the sticky header when the browser scrolls to it. */
body.home-v2 #home-ai-widget-mount {
  scroll-margin-top: 96px;
}

/* ---- Bottom action bar -------------------------------------- */
/* Two actions at the thumb on a phone: ask, or start. It replaces the
   site-wide scroll-triggered bar on this page (switched off by
   data-hide-mobile-cta-bar on <body>). Plain links, so it works with
   JavaScript off. */
.hv-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--hv-bar-h);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--hv-card);
  border-top: 1px solid var(--hv-line);
  box-shadow: 0 -8px 24px rgba(15, 27, 45, 0.08);
}

.hv-bar__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--hv-r-pill);
  border: 2px solid var(--hv-ink);
  background: var(--hv-card);
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.hv-bar__btn:hover {
  background: var(--hv-bubble);
  color: var(--hv-ink);
}

.hv-bar__btn--primary {
  background: var(--hv-accent);
  border-color: var(--hv-accent);
  color: var(--hv-accent-text);
}

.hv-bar__btn--primary:hover {
  background: var(--hv-accent-press);
  border-color: var(--hv-accent-press);
  color: var(--hv-accent-text);
}

.hv-bar__btn:focus-visible {
  outline: 3px solid var(--hv-hl);
  outline-offset: 2px;
}

.hv-bar__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* While the visitor is typing a question the bar steps aside, so it can
   never sit between the on-screen keyboard and the input. */
.hv-bar.hv-bar--away {
  display: none;
}

/* The cookie bar is also docked to the bottom edge. Until the visitor has
   answered it, it takes the edge and this bar waits. */
body.home-v2:has(#ia-cookie-banner) .hv-bar {
  display: none;
}

/* ---- 768px to 959px: the desktop header on a narrow screen ---
   The site header switches from its menu button to its full row of links
   at 768px, and that row is about 950px wide — it ran off the right edge
   and took Sign In and Start Free with it. In this band the bottom bar
   already offers "Start free", so the header drops its copy and tightens
   its gaps; both are restored at 960px. */
@media (min-width: 768px) {
  body.home-v2 .nav-inner {
    padding: 0 16px;
  }

  body.home-v2 .nav-links {
    gap: 14px;
  }

  body.home-v2 .nav-actions .btn-primary {
    display: none;
  }
}

/* ---- 960px and up: the header carries both actions ---------- */
@media (min-width: 960px) {
  body.home-v2 {
    padding-bottom: 0;
  }

  body.home-v2 .nav-inner {
    padding: 0 var(--space-6);
  }

  body.home-v2 .nav-links {
    gap: var(--space-8);
  }

  body.home-v2 .nav-actions .btn-primary {
    display: inline-flex;
  }

  .hv-bar {
    display: none;
  }
}

/* ============================================================
   Page body (#18935, Phase 2)
   Base rules are the phone layout. `.hv-*` classes exist only in
   the home page's markup.
   ============================================================ */

body.home-v2 main {
  font-size: 1.0625rem; /* 17px floor for body text */
  line-height: 1.5;
}

body.home-v2 main h1,
body.home-v2 main h2 {
  font-family: var(--hv-font-display);
  font-weight: 800;
  color: inherit;
  margin: 0;
}

body.home-v2 main h1 {
  font-size: clamp(2.25rem, 6.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

body.home-v2 main h2 {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

body.home-v2 main h3 {
  margin: 0;
  color: inherit;
  font-family: var(--hv-font-body);
}

body.home-v2 main p {
  margin: 0;
}

body.home-v2 main a {
  color: var(--hv-accent);
}

body.home-v2 main :focus-visible {
  outline: 3px solid var(--hv-hl);
  outline-offset: 3px;
}

.hv-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* The highlighter stroke under the key words of a heading. A flat two-stop
   gradient is how a half-height underline is drawn; it is not a wash. */
.hv-mark {
  background: linear-gradient(transparent 58%, var(--hv-hl) 58%);
}

.hv-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  color: var(--hv-muted);
}

/* ---- Buttons and links -------------------------------------- */
body.home-v2 main .hv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--hv-r-pill);
  border: 2px solid transparent;
  font-family: var(--hv-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

body.home-v2 main .hv-btn--primary {
  background: var(--hv-accent);
  border-color: var(--hv-accent);
  color: var(--hv-accent-text);
}

body.home-v2 main .hv-btn--primary:hover {
  background: var(--hv-accent-press);
  border-color: var(--hv-accent-press);
}

body.home-v2 main .hv-btn--secondary {
  background: var(--hv-card);
  border-color: var(--hv-ink);
  color: var(--hv-ink);
}

body.home-v2 main .hv-btn--secondary:hover {
  background: var(--hv-bubble);
}

body.home-v2 main .hv-btn--hl {
  background: var(--hv-hl);
  border-color: var(--hv-hl);
  color: var(--hv-hl-text);
}

body.home-v2 main .hv-btn--ink {
  background: var(--hv-ink);
  border-color: var(--hv-ink);
  color: var(--hv-band-text);
}

body.home-v2 main .hv-btn--lg {
  font-size: 1.1875rem;
  padding: 16px 28px;
}

body.home-v2 main .hv-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-weight: 700;
  font-size: 1.0625rem;
}

body.home-v2 main .hv-link--on-band {
  color: var(--hv-band-text);
}

.hv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---- Hero ---------------------------------------------------- */
.hv-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 40px;
}

.hv-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hv-hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--hv-muted);
  max-width: 520px;
}

/* ---- Coach card ---------------------------------------------- */
.hv-coach {
  background: var(--hv-card);
  border: 1px solid var(--hv-line);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 27, 45, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-margin-top: 96px;
}

.hv-coach__head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Tall enough for the level switch the script adds (44px buttons + its
     3px padding), so the head does not grow when it arrives. */
  min-height: 50px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hv-line);
  font-weight: 700;
}

.hv-coach__avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--hv-accent);
  color: var(--hv-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hv-coach__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Reserve the question row (52px) before the widget script draws it, so
   nothing below moves on load. The sample questions under it are in the
   HTML already. The no-JavaScript fallback releases the space (see the
   <noscript> block in the page). */
body.home-v2 #home-ai-widget-mount {
  min-height: 52px;
}

.hv-coach__label {
  font-family: var(--hv-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}

.hv-coach__foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--hv-line);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv-muted);
}

.hv-coach__noscript a {
  font-weight: 700;
}

/* The live widget's own elements, restyled inside the card. Its markup is
   built by js/home-ai-widget.js and is unchanged. */
body.home-v2 .hv-coach .home-ai-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Question box and Ask button on one row, the examples under them. The
   widget builds label, textarea, examples, then an actions row; a grid
   re-seats them without touching its script. `display: contents` lifts the
   button and the counter out of their wrapper so each can take a cell. */
body.home-v2 .hv-coach .home-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.home-v2 .hv-coach .home-ai-form > * {
  grid-column: 1 / -1;
}

body.home-v2 .hv-coach .home-ai-input {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  resize: none;
  /* One line, like an input: a long question scrolls sideways inside the
     box instead of wrapping under its own top edge. */
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 13px 14px;
  border: 1.5px solid var(--hv-muted);
  border-radius: 14px;
  background: var(--hv-card);
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  font-size: 1.0625rem;
  line-height: 1.4;
}

body.home-v2 .hv-coach .home-ai-input::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.home-v2 .hv-coach .home-ai-actions {
  display: contents;
}

body.home-v2 .hv-coach .home-ai-submit {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--hv-accent);
  border-color: var(--hv-accent);
  color: var(--hv-accent-text);
  font-family: var(--hv-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
}

body.home-v2 .hv-coach .home-ai-submit:hover {
  background: var(--hv-accent-press);
  border-color: var(--hv-accent-press);
}

body.home-v2 .hv-coach .home-ai-counter {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--hv-muted);
}

body.home-v2 .hv-coach .home-ai-counter:empty,
body.home-v2 .hv-coach .home-ai-status:empty {
  display: none;
}

body.home-v2 .hv-coach .home-ai-status {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv-ink);
}

body.home-v2 .hv-coach .home-ai-examples {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.home-v2 .hv-coach .home-ai-examples-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv-muted);
}

body.home-v2 .hv-coach .home-ai-example-chip {
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--hv-ink);
  border-radius: 14px;
  background: var(--hv-card);
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
}

body.home-v2 .hv-coach .home-ai-example-chip:hover,
body.home-v2 .hv-coach .home-ai-example-chip:focus-visible {
  background: var(--hv-bubble);
  border-color: var(--hv-ink);
  color: var(--hv-ink);
}

/* ---- Coach card, state by state (#18935 Phase 3) ------------- */

/* The O/L - A/L switch (built by the widget script). */
.hv-level {
  display: flex;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  background: var(--hv-bubble);
  border-radius: var(--hv-r-pill);
}

.hv-level button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--hv-r-pill);
  background: transparent;
  color: var(--hv-ink);
  font-family: var(--hv-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.hv-level button[aria-pressed="true"] {
  background: var(--hv-ink);
  color: var(--hv-band-text);
}

/* Sample questions: plain links in the HTML. */
.hv-samples {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hv-samples[hidden],
.hv-sample[hidden],
.hv-thread[hidden],
.hv-gate[hidden],
body.home-v2 .hv-coach .home-ai-form[hidden] {
  display: none;
}

.hv-samples__hint {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv-muted);
}

body.home-v2 main .hv-sample {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--hv-ink);
  border-radius: 14px;
  background: var(--hv-card);
  color: var(--hv-ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

body.home-v2 main .hv-sample:hover {
  background: var(--hv-bubble);
}

.hv-sample small {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hv-accent);
}

/* The thread: question right in ink, answer left and light. */
.hv-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hv-answer {
  align-self: flex-start;
  max-width: 96%;
  box-sizing: border-box;
  padding: 12px 16px;
  background: var(--hv-bubble);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  color: var(--hv-ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hv-answer:focus {
  outline: none;
}

.hv-answer:focus-visible {
  outline: 3px solid var(--hv-hl);
  outline-offset: 3px;
}

.hv-answer .home-ai-answer-body {
  white-space: pre-wrap;
}

.hv-answer .home-ai-answer-locator {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hv-muted);
}

.hv-answer__thinking {
  color: var(--hv-muted);
}

/* The "general guidance" line under an answer that is not from the syllabus
   corpus. The site-wide muted grey measures 4.17:1 on this card; the page's
   own muted ink is 12:1. It is a limit the reader needs to see. */
.hv-answer .home-ai-answer-note {
  color: var(--hv-muted);
}

body.home-v2 .hv-coach .home-ai-counter {
  font-size: 0.875rem;
  color: var(--hv-muted);
}

/* One next step after an answer. */
.hv-gate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--hv-ink);
  border-radius: 18px;
}

.hv-gate__title {
  font-weight: 700;
  font-size: 1.125rem;
}

.hv-gate__another {
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--hv-accent);
  font-family: var(--hv-font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

body.home-v2 .hv-coach .home-ai-answer-cta,
body.home-v2 .hv-coach .home-ai-cap-cta {
  background: var(--hv-accent);
  border-color: var(--hv-accent);
  color: var(--hv-accent-text);
}

/* ---- Bands and sections -------------------------------------- */
.hv-band {
  background: var(--hv-band);
  color: var(--hv-band-text);
}

.hv-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 44px);
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.hv-section__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.hv-cols {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- What is Idasara Academy --------------------------------- */
.hv-what {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hv-what__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hv-what__copy p {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  color: var(--hv-band-text);
}

.hv-facts {
  margin: 0;
}

.hv-facts div {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hv-band-line);
}

.hv-facts div:last-child {
  border-bottom: 0;
}

.hv-facts dt {
  flex: 0 0 104px;
  font-weight: 700;
  color: var(--hv-hl);
}

.hv-facts dd {
  margin: 0;
}

/* ---- Cards and the mini chat screens -------------------------- */
.hv-card {
  background: var(--hv-card);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.hv-step {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hv-accent);
}

.hv-bubble {
  padding: 12px 16px;
  border-radius: 18px;
}

/* One squared corner: the user's bubble sits right, in ink. */
.hv-bubble--user {
  align-self: flex-end;
  max-width: 90%;
  background: var(--hv-ink);
  color: var(--hv-band-text);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

/* The coach's reply sits left, light, with the opposite corner squared. */
.hv-mini {
  background: var(--hv-bubble);
  color: var(--hv-ink);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hv-mini__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hv-muted);
}

.hv-mini__note {
  font-size: 1rem;
  color: var(--hv-muted);
}

/* Every mock screen says it is an example: the figures in them are
   illustrations, not a student's results. */
.hv-example {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--hv-muted);
  border-radius: var(--hv-r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hv-muted);
}

.hv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 12px;
}

.hv-row--on {
  background: var(--hv-card);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
}

.hv-badge {
  background: var(--hv-hl);
  color: var(--hv-hl-text);
  border-radius: var(--hv-r-pill);
  padding: 2px 10px;
  font-size: 0.875rem;
  font-weight: 700;
}

.hv-badge--lg {
  font-size: 1rem;
  padding: 4px 12px;
}

.hv-good {
  font-weight: 700;
  color: var(--hv-accent);
}

.hv-snap {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hv-snap b {
  font-family: var(--hv-font-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
}

/* ---- Parents -------------------------------------------------- */
.hv-parents {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.hv-parents__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hv-parents__copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hv-parents__chat {
  background: var(--hv-card);
  color: var(--hv-ink);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hv-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--hv-card);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}

/* Each status is a word first; the fill only reinforces it. */
.hv-status {
  border-radius: var(--hv-r-pill);
  padding: 4px 12px;
  font-size: 0.9375rem;
  font-weight: 700;
  border: 1.5px solid transparent;
}

.hv-status--ok {
  background: var(--hv-accent);
  color: var(--hv-accent-text);
}

.hv-status--mid {
  background: var(--hv-hl);
  color: var(--hv-hl-text);
}

.hv-status--low {
  background: var(--hv-card);
  color: var(--hv-ink);
  border-color: var(--hv-ink);
}

/* ---- Pricing -------------------------------------------------- */
.hv-price {
  background: var(--hv-card);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hv-price .hv-btn {
  margin-top: auto;
}

body.home-v2 main .hv-price h3 {
  font-size: 1.125rem;
  color: var(--hv-accent);
}

.hv-price__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--hv-muted);
}

.hv-price__figure b {
  font-family: var(--hv-font-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--hv-ink);
}

.hv-price__note {
  color: var(--hv-muted);
}

.hv-price--free {
  background: var(--hv-band);
  border-color: var(--hv-band);
  color: var(--hv-band-text);
}

body.home-v2 main .hv-price--free h3 {
  color: var(--hv-hl);
}

.hv-price--free .hv-price__figure b,
.hv-price--free .hv-price__note {
  color: var(--hv-band-text);
}

/* ---- FAQ ------------------------------------------------------ */
.hv-faq-band {
  background: var(--hv-card);
  border-top: 1px solid var(--hv-line);
  border-bottom: 1px solid var(--hv-line);
}

.hv-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hv-faq h2 {
  margin-bottom: 12px;
}

.hv-faq details {
  border-bottom: 1px solid var(--hv-line);
  padding: 4px 0;
}

.hv-faq details:last-child {
  border-bottom: 0;
}

.hv-faq summary {
  cursor: pointer;
  min-height: 44px;
  padding: 14px 0;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 1.1875rem;
}

.hv-faq details p {
  margin-bottom: 16px;
  background: var(--hv-bubble);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 14px 16px;
}

/* ---- Explore --------------------------------------------------- */
.hv-explore {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.home-v2 main .hv-explore h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
}

.hv-explore__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

body.home-v2 main .hv-explore__grid h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.hv-explore__grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hv-explore__grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* ---- Final call to action -------------------------------------- */
.hv-final {
  background: var(--hv-hl);
  color: var(--hv-hl-text);
}

.hv-final .hv-wrap {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

body.home-v2 main .hv-final h2 {
  font-size: clamp(2.125rem, 5vw, 4rem);
  line-height: 1;
  max-width: 820px;
}

.hv-final__note {
  font-weight: 600;
}

body.home-v2 main .hv-final__note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hv-hl-text);
}

/* ---- 700px and up ---------------------------------------------- */
@media (min-width: 700px) {
  .hv-cols {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hv-cols > * {
    flex: 1 1 280px;
    min-width: 0;
  }

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

/* ---- 960px and up: two-column hero and bands -------------------- */
@media (min-width: 960px) {
  .hv-hero {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .hv-hero__copy {
    flex: 1 1 0;
    gap: 22px;
    padding-top: 40px;
  }

  .hv-coach {
    flex: 1 1 0;
  }

  .hv-what,
  .hv-parents {
    flex-direction: row;
    gap: 56px;
  }

  .hv-what > *,
  .hv-parents > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .hv-parents {
    align-items: center;
  }

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

/* ==========================================================================
   Sinhala and Tamil home pages (/si/, /ta/) — same layout, colours and
   buttons; only what the scripts themselves need changes.
   - The page's two faces have Latin letters only, so Sinhala and Tamil text
     is set in the device's own font for that script (every phone and
     computer in use ships one; on Android it is Noto itself). The Noto WEB
     font is deliberately not named here: named, it arrived after first
     paint, re-wrapped the hero and pushed the coach card down (layout shift
     0.31 on /si/, 0.25 on /ta/; measured, Lighthouse mobile).
   - No negative tracking: it is tuned for Latin capitals and pulls Sinhala
     and Tamil vowel signs into their neighbours.
   - Taller lines: both scripts stack marks above and below the letter.
   ========================================================================== */
body.home-v2:lang(si),
body.home-v2:lang(ta) {
  --hv-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hv-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.home-v2:lang(si) main :is(h1, h2, h3),
body.home-v2:lang(ta) main :is(h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* The same sentence runs about half as long again in Sinhala or Tamil, in
   words that cannot be hyphenated. At the English sizes the largest
   headings break inside a word, so they step down; everything else keeps
   its size. */
body.home-v2:lang(si) main h1,
body.home-v2:lang(ta) main h1 {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
}

body.home-v2:lang(si) main h2,
body.home-v2:lang(ta) main h2 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
}

body.home-v2:lang(si) .hv-coach__label,
body.home-v2:lang(ta) .hv-coach__label {
  letter-spacing: 0;
  line-height: 1.35;
  font-size: 1.25rem;
}

body.home-v2:lang(si) main :is(.hv-btn, .hv-link, .hv-sample),
body.home-v2:lang(ta) main :is(.hv-btn, .hv-link, .hv-sample),
body.home-v2:lang(si) .hv-bar__btn,
body.home-v2:lang(ta) .hv-bar__btn {
  letter-spacing: 0;
  line-height: 1.4;
}

/* Sinhala and Tamil words are long and do not hyphenate: a subject and its
   status may not fit one line on a 320px phone, and a link label may be one
   unbreakable word. Let the row wrap and the label break instead of pushing
   the page sideways. */
body.home-v2:lang(si) .hv-status-row,
body.home-v2:lang(ta) .hv-status-row {
  flex-wrap: wrap;
}

body.home-v2:lang(si) main :is(a, dd, p, .hv-status),
body.home-v2:lang(ta) main :is(a, dd, p, .hv-status) {
  overflow-wrap: break-word;
}

/* The header's "start free" label is longer in Sinhala and Tamil, and with
   the logo and the menu button it is wider than a 320px phone. Below 960px
   the bottom bar already carries that action on this page, so the header
   drops its copy there and takes it back where the bar ends. */
body.home-v2:lang(si) .nav-actions .btn-primary,
body.home-v2:lang(ta) .nav-actions .btn-primary {
  display: none;
}

@media (min-width: 960px) {
  body.home-v2:lang(si) .nav-actions .btn-primary,
  body.home-v2:lang(ta) .nav-actions .btn-primary {
    display: inline-flex;
  }
}

/* The Explore columns size to their longest word; a one-word Tamil label is
   wider than half a 320px phone. Let those labels break. */
body.home-v2:lang(si) .hv-explore :is(a, h3),
body.home-v2:lang(ta) .hv-explore :is(a, h3) {
  overflow-wrap: anywhere;
}