/* Chalk and ink for the Ways section — self-hosted, SIL OFL, latin subset. */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/patrick-hand-v23-latin.woff2') format('woff2');
}
/* Site styles. No colours are written here directly — every value
   comes from brand.css so a rebrand stays a one-file change. */

/* The typeface is served from this site, not from a font CDN. Loading a font
   from someone else's server sends every visitor's IP address to that server,
   which needs a legal basis under the GDPR. Self-hosting removes the question
   entirely. Inter is used under the SIL Open Font License; the licence ships
   in public/fonts/LICENSE-Inter.txt as that licence requires. */
@font-face {
  font-family: "InterVar";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: var(--weight-heading);
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: pretty;
  margin: 0;
}
h1 { font-size: clamp(34px, 5.1vw, 58px); }
h2 { font-size: clamp(27px, 3.5vw, 40px); }
h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.006em; }
p  { margin: 0; }

a { color: var(--brand-1); text-decoration: none; transition: color var(--motion) var(--ease); }
/* A link sitting inside a paragraph must be tellable from the text around it
   without relying on colour alone — colour-blind readers otherwise see plain
   text. Navigation and buttons are exempt: their position makes them obvious. */
p a, dd a, blockquote a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
p a:hover, dd a:hover, blockquote a:hover { text-decoration-thickness: 2px; }
a:hover { color: var(--brand-pale); }

button {
  font: inherit; color: inherit; background: none; border: none;
  padding: 0; cursor: pointer; text-align: left;
}
button:disabled { cursor: default; opacity: 0.45; }

:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(126, 212, 200, 0.28); }

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

/* When the page hides something, it must actually disappear. Layout rules like
   `display: grid` otherwise beat the browser's own hiding, so a hidden panel
   stays on screen. This one line prevents that everywhere. */
[hidden] { display: none !important; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ground-raised); color: var(--ink);
  padding: 12px 18px; border-radius: var(--radius); border: 1px solid var(--line);
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--measure-narrow); }
/* Density: the old clamp reached 92px top AND bottom on desktop, stacking
   184px of air at every seam — ~2,200px of padding on one page, which the
   owner called out. This keeps the rhythm at roughly two-thirds. */
.section { padding-block: clamp(40px, 4.5vw, 64px); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ---------- brand marks ---------- */
.mark { display: block; height: auto; }
.mark--sm { width: 26px; }
.mark--xs { width: 18px; }

/* Wordmark. Tracked caps, weight 500, never bolder — a brand rule.
   Left padding always matches the tracking so the word stays optically
   centred, because letter-spacing adds a gap after the last letter too. */
.wordmark {
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-lockup);
  padding-left: var(--track-lockup);
  font-size: 15px;
  white-space: nowrap;
}
.wordmark--sm { font-size: 12px; letter-spacing: var(--track-small); padding-left: var(--track-small); }
.wordmark .wm-brand { color: var(--brand-1); }
.wordmark .wm-ink   { color: var(--ink); }

.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup:hover .wm-ink   { color: var(--brand-pale); }
.lockup:hover .wm-brand { color: var(--brand-pale); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground-sunk) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.nav-links a:hover { color: var(--brand-1); }
.header-right { display: flex; align-items: center; gap: 14px; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color var(--motion) var(--ease);
}
.burger:hover { border-color: var(--line-brand); }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--ink-soft); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink-soft);
}
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

.mobile-menu { display: none; border-bottom: 1px solid var(--line-soft); background: var(--ground-sunk); }
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 0 16px; }
.mobile-menu a { display: block; padding: 11px var(--gutter); color: var(--ink-soft); font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: var(--weight-label);
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid transparent; white-space: nowrap;
  transition: border-color var(--motion) var(--ease), color var(--motion) var(--ease),
              background-color var(--motion) var(--ease);
}
.btn--primary { border-color: var(--line-brand); color: var(--brand-1); background: var(--wash-brand); }
.btn--primary:hover:not(:disabled) { border-color: var(--brand-1); color: var(--brand-pale); background: rgba(20,184,166,0.14); }
.btn--ghost { color: var(--ink-soft); }
.btn--ghost:hover:not(:disabled) { color: var(--brand-1); }
.btn--quiet { border-color: var(--line); color: var(--ink-soft); font-size: 12.5px; padding: 11px 16px; }
.btn--quiet:hover:not(:disabled) { border-color: var(--line-brand); color: var(--brand-pale); }

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: 11.5px; font-weight: var(--weight-label);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-1); margin-bottom: 16px; display: block;
}
/* One measure for every lede: wide enough that a one‑or‑two‑sentence line
   breathes instead of wrapping beside empty space, capped where long prose
   would stop being comfortable. The owner called out the ragged wraps. */
.lede { color: var(--ink-soft); font-size: clamp(16.5px, 1.65vw, 18.5px);
  line-height: 1.6; max-width: 68ch; }
.fine { color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; }

.card {
  background: var(--ground-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: border-color var(--motion) var(--ease);
}
.card:hover { border-color: var(--line); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-muted); font-size: 14px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); }
.ticks li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 2px; background: var(--brand-2);
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 12% 8%,  rgba(30,107,96,0.30), transparent 62%),
    radial-gradient(680px 460px at 88% 26%, rgba(38,42,96,0.42), transparent 66%);
}
.hero .wrap { position: relative; }
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- the guided board panel ---------- */
.board {
  background: var(--ground-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.way {
  font-size: 12.5px; font-weight: var(--weight-heading); padding: 12px 17px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  color: var(--ink-soft); white-space: nowrap;
  transition: border-color var(--motion) var(--ease), color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.way:hover { border-color: var(--line-brand); color: var(--brand-pale); }
.way[aria-pressed="true"] { border-color: var(--line-brand); color: var(--brand-1); background: var(--wash-brand); }






/* ---------- outcome band ---------- */
.quiet-band { border-block: 1px solid var(--line-soft); background: var(--ground-sunk); }

.safeguard {
  border: 1px solid rgba(243,199,126,0.28); background: var(--wash-amber);
  border-radius: var(--radius-lg); padding: 17px 19px; margin-top: 18px;
}
.safeguard b { color: var(--amber); font-size: 13px; font-weight: var(--weight-label); display: block; margin-bottom: 6px; }
.safeguard p { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: start; }
.plan { display: flex; flex-direction: column; height: 100%; }
.plan--feature { border-color: var(--line-brand); }
.plan-flag {
  font-size: 10.5px; font-weight: var(--weight-label); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-1); margin-bottom: 12px; display: block;
}
.plan-name { font-size: 15px; font-weight: var(--weight-label); color: var(--ink); margin-bottom: 10px; }
.price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 18px; }
.price b { font-size: 40px; font-weight: var(--weight-heading); line-height: 1; letter-spacing: -0.02em; }
.price span { font-size: 13px; color: var(--ink-faint); }
.price--quote b { font-size: 22px; color: var(--ink-soft); }
.plan .ticks { margin-bottom: 20px; }
.plan .btn { width: 100%; margin-top: auto; }
.plan .fine { margin-top: 10px; text-align: center; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.pull {
  border-left: 2px solid var(--brand-2); padding-left: 16px; margin-top: 22px;
  font-size: 17px; color: var(--ink); line-height: 1.5;
}

/* ---------- closing ---------- */
.closing { text-align: center; }
.closing .lede { margin-inline: auto; max-width: 56ch; }
.closing .hero-cta { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--ground-sunk); border-top: 1px solid var(--line-soft); padding-block: 40px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 26px; list-style: none; margin: 0; padding: 0; }
.footer-links a {
  color: var(--ink-muted); font-size: 13.5px;
  display: inline-block; padding-block: 9px;   /* a finger-sized tap area */
}
.footer-links a:hover { color: var(--brand-1); }
.footer-tag { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.footer-legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* ---------- the one animation: the tone wave ---------- */
@keyframes aw-w1 { 0%,100% { opacity: 1; }    25%,75% { opacity: 0.4; } }
@keyframes aw-w2 { 0%,50%,100% { opacity: 0.5; } 25% { opacity: 1; } }
@keyframes aw-w3 { 0%,100% { opacity: 0.46; }    50% { opacity: 1; } }
@keyframes aw-w4 { 0%,50%,100% { opacity: 0.42; } 75% { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .stack { gap: 40px; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .stack { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { gap: 14px; }
  .hero-cta .btn { width: 100%; }
}

/* Small phones (360px and under). The header CTA and the menu button together
   were wider than the screen, so the row is tightened rather than dropping the
   CTA — the trial button is the whole point of the header. */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .site-header .wrap { gap: 10px; }
  .header-right { gap: 8px; }
  .wordmark { font-size: 13px; }
  .lockup { gap: 8px; }
}

/* The header row has to survive both a 360px phone AND a 200% browser zoom,
   which is the same problem: very little usable width. Rather than shrink the
   tap targets (which breaks them for fingers), the trial button shortens to
   "Try free" and the full label is left for screen readers. */
@media (max-width: 460px) {
  .site-header .cta-long { display: none; }
  .site-header .cta-short { display: inline; }
  .site-header .btn { padding: 11px 14px; }
}
.cta-short { display: none; }
.btn--wide   { width: 100%; font-size: 14px; padding: 11px 20px; }



/* Trader identity in the footer. EU rules require a commercial website to
   identify who is behind it. While the real details are pending, the site
   says so plainly rather than inventing them. */
.legal-block { margin-top: 14px; max-width: 66ch; }
.legal-block p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

/* Quotes from the people who tested MyHommi before launch. Rendered only
   when a real quote exists — see `testers` in content.mjs. */
.quote {
  margin: 0; padding: 22px;
  background: var(--ground-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; height: 100%;
}
.quote blockquote { margin: 0 0 18px; }
.quote blockquote p { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.quote figcaption {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13px; font-weight: var(--weight-label); color: var(--ink);
}
.quote figcaption span { display: block; font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-top: 3px; }

/* ---------- QA/QC pass: fixes and improvements ---------- */

/* The hero panel is an illustration. It previously used real button styling,
   so visitors clicked controls that did nothing. Now it reads as a picture,
   and says so. */
.board--still { opacity: 0.94; }

[data-demo-feedback][data-state="checked"] { color: var(--brand-1); }

/* The logo link was 21px tall — a small target for a thumb. Padding gives it
   a comfortable tap area without moving anything visually. */
.lockup { padding-block: 11px; }
.gb-head .mark { width: 20px; flex: none; }
.gb-refused {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: var(--weight-label);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gb-amber); margin-bottom: 6px;
}
.gb-refused::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gb-amber); flex: none;
}

/* A label that only screen readers see — the composer's placeholder carries
   the visible instruction, but a placeholder is not a label. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- QA pass 2 ---------- */

/* The header is sticky, so an anchor target would land underneath it and the
   heading you clicked towards would be invisible. scroll-margin pushes the
   landing point clear of it. */
:where(section[id], #main) { scroll-margin-top: 76px; }

/* The skip link now moves keyboard focus, not just the scroll position.
   Without tabindex the browser scrolls to <main> but leaves focus at the top
   of the page, so the next Tab drops the user back into the navigation —
   which defeats the entire point of a skip link. */
#main:focus { outline: none; }
#main:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 4px; }

/* Landscape phones: the sticky header eats a third of a 390px-tall screen. */
@media (max-height: 460px) and (orientation: landscape) {
  .site-header { position: static; }
  .section { padding-block: 40px; }
}

/* FAQ built on <details> so it works with JavaScript switched off. */
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 2px; font-size: 15.5px; color: var(--ink); cursor: pointer;
  list-style: none; transition: color var(--motion) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--brand-pale); }
.faq-sign { flex: none; width: 14px; height: 14px; position: relative; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; background: var(--ink-muted);
  transition: transform var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.faq-sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-sign::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.faq-item[open] .faq-sign::after { transform: scaleY(0); }
.faq-item[open] .faq-sign::before { background: var(--brand-1); }
.faq-a { padding: 0 2px 20px; font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; max-width: 62ch; }

/* ==========================================================================
   REDESIGN: warm sections, editorial scenes, less grid
   ========================================================================== */

/* ---- the warm paper sections ---- */
.paper { background: var(--paper); color: var(--ink-dark); position: relative; }
.paper--top    { border-top: 1px solid var(--paper-line); }
.paper + .paper { border-top: 0; padding-top: 0; }
.h2--paper   { color: var(--ink-dark); }
.lede--paper { color: var(--ink-dark-soft); }
.eyebrow--paper        { color: var(--brand-on-paper); }
.pull--paper { border-left-color: var(--brand-on-paper); color: var(--ink-dark); }
.paper a { color: var(--brand-on-paper); }
.paper a:hover { color: var(--brand-on-paper-2); }
.says-land {
  max-width: 700px; margin: 42px auto 0; text-align: center;
  font-size: clamp(21px, 3vw, 30px); font-weight: var(--weight-heading);
  line-height: 1.28; letter-spacing: -0.015em; color: var(--ink-dark);
  text-wrap: balance; position: relative;
}
.squiggle { display: block; width: 190px; height: 12px; margin: 14px auto 0; }

/* ---- 3. the reasons ---- */


/* ---- 6. how it works: numbered ---- */


/* ---- 7. what's inside: outcome first ---- */


/* ---- 10. founder signature ---- */
.signature {
  margin-top: 22px; font-size: 14px; color: var(--brand-on-paper);
  font-weight: var(--weight-label); letter-spacing: 0.02em;
}

/* ---- board variants ---- */
.gb--flat { box-shadow: none; }
.hero-art { position: relative; }

/* ---- layout helpers ---- */
.stack--wide { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.stack--art  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.lede--big { margin-top: 20px; max-width: 46ch; font-size: clamp(17px, 1.75vw, 19.5px); }

@media (max-width: 980px) {
  .stack--wide, .stack--art { grid-template-columns: minmax(0, 1fr); }
  /* the illustration follows the words on a narrow screen */
  .stack--art > figure { order: 2; }
}
.gb-hinted {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: var(--weight-label);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gb-teal); margin-bottom: 6px;
}
.gb-hinted::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gb-teal); flex: none;
}

/* ---------- print ----------
   Without this the page prints as near-white text on a dark background that
   most browsers drop, so the sheet comes out blank. Somebody will print the
   pricing or hand the schools section to a head teacher, so it should work. */
@media print {
  :root {
    --ground: #fff; --ground-raised: #fff; --ground-sunk: #fff; --band: #fff;
    --paper: #fff; --paper-2: #fff;
    --ink: #111; --ink-soft: #222; --ink-muted: #333; --ink-faint: #444;
    --ink-dark: #111; --ink-dark-soft: #222; --ink-dark-faint: #333;
    --line: #999; --line-soft: #ccc; --paper-line: #ccc;
  }
  body { background: #fff !important; color: #111 !important; font-size: 11pt; }
  .site-header, .mobile-menu, .skip, .hero-cta, .gb-chips, .gb-steps,
  .gb-compose, .gb-hint, .ways, .picks, .note-amber, .gb-legend,
  .squiggle, .btn { display: none !important; }
  .section { padding-block: 14pt; break-inside: avoid; }
  .paper, .quiet-band { background: #fff !important; border: 0 !important; }
  h1 { font-size: 22pt; } h2 { font-size: 15pt; } h3 { font-size: 12pt; }
  h1, h2, h3 { color: #111 !important; break-after: avoid; }
  .gb, .card, .promise, .scene { border: 1px solid #bbb !important;
    background: #fff !important; box-shadow: none !important; break-inside: avoid; }
  .faq-item { break-inside: avoid; }
  .faq-a { display: block !important; }          /* print every answer */
  /* a printed link is useless without its address */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ---------- hero: MyHommi beside the homework ---------- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 44px; align-items: center;
}
.hero-words .lede--big { max-width: 42ch; }
/* .hero-promise once matched a generic .promise rule elsewhere, so the
   hero's brand line was silently inheriting a bordered card. */
.hero-promise {
  margin-top: 18px; font-size: 15px; font-weight: var(--weight-label);
  letter-spacing: 0.02em; color: var(--brand-1);
}

.beside { margin: 0; position: relative; }
.beside-label {
  display: inline-block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: var(--weight-label);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 11px;
}
.browser {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ground-sunk); overflow: hidden;
  box-shadow: 0 24px 54px rgba(0,0,0,0.34);
}
.browser-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: var(--ground-raised);
  border-bottom: 1px solid var(--line-soft);
}
.browser-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-ctl, var(--line)); flex: none; }
.browser-url {
  margin-left: 10px; font-size: 11px; color: var(--ink-faint);
  background: var(--ground-sunk); border-radius: var(--radius-pill);
  padding: 4px 12px; flex: 1; min-width: 0;
}
.browser-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }

/* the homework page itself — a plain worksheet, no school's branding */
.hw-page { padding: 18px 16px; background: #FBFAF6; min-height: 250px; }
.hw-h  { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #757166; margin: 0 0 12px; }
.hw-q  { font-size: 13.5px; line-height: 1.5; color: #241F1A; margin: 0; }
.hw-q b { color: #241F1A; }
.hw-ans {
  margin-top: 12px; border: 1px dashed #C8C1B0; border-radius: 6px;
  padding: 11px 12px; font-size: 12px; color: #78715F;
}
.hw-h2 { margin: 20px 0 10px; font-size: 13.5px; color: #241F1A; font-weight: 600; }
.hw-rule { display: block; height: 7px; border-radius: 4px; background: #E7E2D6; margin-bottom: 8px; }
.hw-rule--s { width: 62%; }

/* the extension, open beside it */
.hw-panel {
  padding: 14px 13px; background: var(--gb-chrome);
  border-left: 2px solid var(--gb-teal); display: grid; gap: 10px; align-content: start;
}
.hw-panel-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: var(--weight-label);
  letter-spacing: 0.06em; color: var(--gb-text);
}
.hw-read {
  margin: 0; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gb-teal);
}
.hw-panel .gb-coach { font-size: 13px; }
.hw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hw-chips span {
  font-size: 11px; color: var(--gb-text);
  border: 1px solid var(--gb-line); border-radius: 10px;
  padding: 6px 10px; background: var(--gb-surface-2);
}

/* the line that ties the question to the help */
.beside-link {
  position: absolute; left: 46%; top: 52%; width: 9%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gb-teal));
  opacity: 0.7; pointer-events: none;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .browser-body { grid-template-columns: minmax(0, 1fr); }
  .hw-panel { border-left: 0; border-top: 2px solid var(--gb-teal); }
  .beside-link { display: none; }
}

/* ---------- before MyHommi: labelled roles, no chat, no teal ---------- */
.eyebrow--before { color: var(--ink-dark-faint); }
@media (max-width: 720px) {
}

/* The scripted preview is labelled as one. Neutral, not amber (amber means a
   refusal) and not teal (teal means a real product action). */
.preview-tag {
  font-size: 10.5px; font-weight: var(--weight-label);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gb-muted);
  border: 1px solid var(--gb-line); border-radius: var(--radius-pill); padding: 4px 10px;
}

/* schools: what works now, beside what does not exist yet */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; margin-top: 46px; }
.school-cta { margin-top: 46px; padding-top: 30px; border-top: 2px solid var(--paper-rule); }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0,1fr); gap: 26px; } }

/* The founder portrait. A real photograph with its studio background removed
   and graded onto the section's cream ---- */


/* ---------- Inside MyHommi: the three modes ---------- */
.modes { margin-top: 34px; }
.modes-body { font-size: 16px; line-height: 1.62; color: var(--ink-soft); max-width: 44ch; }

/* the panel itself, matching the real extension's chrome */
.mp {
  background: var(--gb-chrome); border: 1px solid var(--gb-line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
}
.mp-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  background: var(--gb-surface); border-bottom: 1px solid var(--gb-line);
}
.mp-name { font-size: 12px; font-weight: var(--weight-label); letter-spacing: 0.09em; color: var(--gb-text); }
.mp-head .preview-tag { margin-left: auto; }
.mp-tab.is-on[data-accent="teal"]   { color: var(--gb-teal);     border-bottom-color: var(--gb-teal); }
.mp-tab.is-on[data-accent="violet"] { color: var(--gb-lavender); border-bottom-color: var(--gb-lavender); }
.mp-tab.is-on[data-accent="amber"]  { color: var(--gb-amber);    border-bottom-color: var(--gb-amber); }
.mp-body { padding: 15px 14px; display: grid; gap: 12px; }
.mp-act.is-on { background: var(--gb-amber); border-color: var(--gb-amber); color: #2A1B02; font-weight: 600; }
.mp-card .mp-act.is-on { background: var(--gb-teal); border-color: var(--gb-teal); color: #06231e; }

@media (max-width: 900px) {
}

/* ---------- monthly / annual toggle ---------- */
.cycle {
  display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  background: var(--ground-raised);
}
.cycle-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: var(--weight-label);
  padding: 9px 18px; border-radius: var(--radius-pill); color: var(--ink-muted);
  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
}
.cycle-btn em {
  font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(243,199,126,0.45);
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.cycle-btn.is-on { background: var(--wash-brand); color: var(--brand-1); }
.cycle-btn.is-on em { color: var(--amber); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: start; margin-top: 26px; }
.price-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.price-note .save { color: var(--amber); font-weight: var(--weight-label); }
.price-equiv { margin: 3px 0 0; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0,1fr); } }

/* ---------- supporting pages ---------- */
.doc { padding-block: clamp(40px, 6vw, 72px); }
.doc-title { font-size: clamp(30px, 4.4vw, 46px); margin-top: 4px; }
.doc-lede { margin-top: 18px; font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.62; color: var(--ink-soft); max-width: 58ch; }
.doc-rule { height: 1px; background: var(--line-soft); border: 0; margin: 30px 0 6px; }
.doc-h  { font-size: clamp(19px, 2.2vw, 24px); margin-top: 38px; }
.doc-p  { margin-top: 14px; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); max-width: 66ch; }
.doc-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-muted); max-width: 62ch; }
.doc-updated { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-faint); }
.doc-ul, .doc-ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 9px; max-width: 64ch; }
.doc-ul li, .doc-ol li { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.doc-ul li::marker { color: var(--brand-2); }
.doc-ol li::marker { color: var(--brand-2); font-weight: var(--weight-label); }
.doc-rows { margin: 20px 0 0; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.doc-rows > div { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.doc-rows > div:last-child { border-bottom: 0; }
.doc-rows dt { font-size: 13.5px; font-weight: var(--weight-label); color: var(--ink); margin-bottom: 5px; }
.doc-rows dd { margin: 0; font-size: 14.5px; color: var(--ink-muted); line-height: 1.62; }
.doc-warn {
  margin-top: 22px; padding: 17px 19px; border-radius: var(--radius-lg);
  border: 1px solid rgba(243,199,126,0.3); background: var(--wash-amber);
}
.doc-warn b { display: block; color: var(--amber); font-size: 13px; font-weight: var(--weight-label); margin-bottom: 7px; }
.doc-warn p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.doc-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.doc-now, .doc-next { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 20px; }
.doc-now { background: var(--ground-raised); border-top: 2px solid var(--brand-2); }
.doc-next { border-style: dashed; }
.doc-now h3, .doc-next h3 { font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 14px; }
.doc-now h3 { color: var(--brand-1); }
.doc-next h3 { color: var(--ink-muted); }
.doc-next-warn { margin: 0 0 14px; font-size: 12.5px; color: var(--amber); font-weight: var(--weight-label); }
.doc-now ul, .doc-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-now li, .doc-next li { font-size: 14px; color: var(--ink-soft); line-height: 1.55; padding-left: 18px; position: relative; }
.doc-now li::before, .doc-next li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--line);
}
.doc-now li::before { background: var(--brand-2); }
@media (max-width: 760px) { .doc-split { grid-template-columns: minmax(0,1fr); } }

/* the four reasons, folded into the recognition section as a compact row */
.reasons-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 40px; }
.reasons-row > div { border-top: 2px solid var(--paper-rule); padding-top: 14px; }
.reasons-row b { display: block; font-size: 14.5px; color: var(--ink-dark); margin-bottom: 5px; font-weight: var(--weight-label); }
.reasons-row span { font-size: 13.5px; color: var(--ink-dark-soft); line-height: 1.55; }
@media (max-width: 900px) { .reasons-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } }
@media (max-width: 520px) { .reasons-row { grid-template-columns: minmax(0,1fr); } }

/* ---------- mobile density ----------
   A page that is right on a desktop can be exhausting on a phone. Section
   padding and illustration height are the two things that add up fastest. */
@media (max-width: 640px) {
  .section { padding-block: 40px; }
  .paper + .paper { padding-top: 0; }
  .portrait img { max-width: 300px; }
  .says-land { margin-top: 30px; }
  .before { margin-top: 26px; }
  .reasons-row { margin-top: 28px; }
  .doc-h { margin-top: 28px; }
}

@media (max-width: 640px) {
  h2 { font-size: clamp(24px, 6.6vw, 30px); }
  .lede { font-size: 15.5px; }
}

/* ---------- Homework Planner panel ---------- */
.mp--planner { align-self: start; }
.pl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--gb-line);
}
.pl-kicker {
  margin: 0 0 3px; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gb-lavender); font-weight: var(--weight-label);
}
.pl-title { margin: 0; font-size: 20px; font-weight: var(--weight-heading); color: var(--gb-text); }
.pl-toggle {
  display: inline-flex; border: 1px solid var(--gb-line); border-radius: var(--radius-pill);
  padding: 3px; gap: 2px;
}
.pl-toggle span { font-size: 11.5px; padding: 5px 12px; border-radius: var(--radius-pill); color: var(--gb-muted); }
.pl-toggle .is-on { background: var(--gb-lavender); color: #17123a; font-weight: 600; }

.pl-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.pl-week span {
  text-align: center; font-size: 10.5px; padding: 6px 2px; border-radius: 8px;
  color: var(--gb-muted); border: 1px solid var(--gb-line);
}
.pl-week .is-on { background: var(--gb-teal); border-color: var(--gb-teal); color: #06231e; font-weight: 700; }

.pl-progress { margin: 4px 0 0; font-size: 11.5px; color: var(--gb-muted); }
.pl-summary {
  margin: 0; font-size: 13px; color: var(--gb-text);
  background: var(--gb-lav-soft); border-radius: 10px; padding: 10px 12px;
}
.pl-label {
  margin: 4px 0 0; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gb-teal); font-weight: var(--weight-label);
}
.pl-label--ahead { color: var(--gb-amber); }

.pl-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pl-tasks li {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--gb-line); border-radius: 11px; padding: 11px 12px;
  background: var(--gb-surface-2);
}
.pl-tasks--ahead li { border-color: rgba(240,183,94,0.4); }
.pl-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gb-line-ctl); flex: none; margin-top: 2px; }
.pl-task { display: grid; gap: 7px; min-width: 0; }
.pl-task b { font-size: 13px; color: var(--gb-text); line-height: 1.4; font-weight: 500; }
.pl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-tags em {
  font-style: normal; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill); border: 1px solid var(--gb-line);
  color: var(--gb-muted);
}
.pl-tags em[data-src="agenda"] { color: var(--gb-teal); border-color: rgba(87,201,182,0.45); }
.pl-tags em[data-src="parent"] { color: var(--gb-amber); border-color: rgba(240,183,94,0.45); }
.pl-tags em[data-rep]          { color: var(--gb-lavender); border-color: rgba(180,167,240,0.4); }
.pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-acts span {
  font-size: 11px; padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--gb-line); color: var(--gb-muted);
}
.pl-acts .is-on { background: var(--gb-teal); border-color: var(--gb-teal); color: #06231e; font-weight: 600; }
.pl-acts .is-practice { color: var(--gb-lavender); border-color: rgba(180,167,240,0.5); }

/* ---------- language switch ----------
   The URL decides the language, so this is a plain link \u2014 no script, no
   storage, no browser sniffing. The current language is a <span>, not a link,
   so it cannot be tabbed to or clicked pointlessly. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0 8px;
  font-size: 12.5px; font-weight: var(--weight-label); letter-spacing: 0.06em;
  border-radius: var(--radius); color: var(--ink-muted);
  transition: color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
a.lang-opt:hover { color: var(--brand-1); background: var(--wash-brand); }
a.lang-opt:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.lang-opt.is-on { color: var(--brand-1); background: var(--wash-brand); }
.lang-sep { color: var(--line); font-size: 12px; user-select: none; }
.lang-switch--desktop { margin-right: 4px; }
.lang-switch--mobile { display: none; }

@media (max-width: 980px) {
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile {
    display: inline-flex; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--line-soft); width: 100%;
  }
  .lang-switch--mobile .lang-opt { min-width: 46px; min-height: 44px; font-size: 14px; }
}

/* ---------- the promo video ----------
   Poster only until pressed: preload is off and it never autoplays. A
   64-second video that starts by itself is a data bill on a phone. */
.promo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }
.promo-video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ground-sunk); box-shadow: 0 20px 46px rgba(0,0,0,0.34);
}

@media (max-width: 900px) { .promo { grid-template-columns: minmax(0,1fr); gap: 18px; } }
@media print { .promo-video { display: none; } }

/* ---------- animated logo ----------
   The designer's drop-in. It is one inline SVG plus CSS: no JavaScript, no
   video, no image request, and the geometry is identical to src/mark.svg so
   the two can never drift.

   It sits in the hero only, not in the header on all fourteen pages — an
   entrance moment rather than something looping in the corner of every page.

   NOTE: this comment must stay closed. An unterminated one here swallowed the
   .mh-logo rule up to the next */

.mh-logo {
  --mh-size: 120px;                 /* mark width — the whole lockup scales from this */
  --mh-teal-1: #7ED4C8; --mh-teal-2: #38A99C;
  --mh-teal-3: #1E6B60; --mh-teal-4: #134C44;
  --mh-lit: #D6F3EE; --mh-name: #E9E9ED;
  display: inline-flex; align-items: center;
  gap: calc(var(--mh-size) * 0.145);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1;
}

.mh-logo svg { width: var(--mh-size); height: calc(var(--mh-size) / 2); display: block; overflow: visible; }
.mh-logo svg path { animation: mh-in .9s cubic-bezier(.2,.7,.3,1) backwards, mh-wave 1.9s ease-in-out infinite; }
.mh-logo svg .p1 { fill: var(--mh-teal-1); animation-delay: 0s,    .95s; }
.mh-logo svg .p2 { fill: var(--mh-teal-2); animation-delay: .09s, 1.09s; }
.mh-logo svg .p3 { fill: var(--mh-teal-3); animation-delay: .18s, 1.23s; }
.mh-logo svg .p4 { fill: var(--mh-teal-4); animation-delay: .27s, 1.37s; }

.mh-word {
  display: inline-flex; align-items: flex-start;
  font-size: calc(var(--mh-size) * 0.30);
  font-weight: 500; letter-spacing: 0.13em; padding-left: 0.13em;
  white-space: nowrap;
}
.mh-word b {
  font-weight: 500; display: inline-block; color: var(--mh-name);
  animation: mh-rise .62s cubic-bezier(.2,.9,.3,1.3) backwards, mh-lit 1.9s ease-in-out infinite;
}
.mh-word b:nth-child(1), .mh-word b:nth-child(2) { color: var(--mh-teal-1); --mh-to: var(--mh-lit); }
.mh-word b:nth-child(n+3) { --mh-to: var(--mh-teal-1); }
.mh-word b:nth-child(1) { animation-delay: .50s, 1.05s; }
.mh-word b:nth-child(2) { animation-delay: .57s, 1.19s; }
.mh-word b:nth-child(3) { animation-delay: .64s, 1.33s; }
.mh-word b:nth-child(4) { animation-delay: .71s, 1.47s; }
.mh-word b:nth-child(5) { animation-delay: .78s, 1.61s; }
.mh-word b:nth-child(6) { animation-delay: .85s, 1.75s; }
.mh-word b:nth-child(7) { animation-delay: .92s, 1.89s; }

.mh-ai {
  /* Scales with the mark but never below legibility: the label is kept at
     every supported width, floored rather than removed. */
  font-size: max(calc(var(--mh-size) * 0.102), 10.5px);
  font-weight: 500; letter-spacing: 0.1em; color: var(--mh-teal-1);
  margin-left: calc(var(--mh-size) * 0.027); margin-top: calc(var(--mh-size) * 0.011);
  animation: mh-drop .7s cubic-bezier(.2,.9,.3,1.3) 1.05s backwards, mh-lit 1.9s ease-in-out 2.03s infinite;
  --mh-to: var(--mh-lit);
}
/* AI is a label, not a letter. It stays at every width; below a ~107px mark
   the font floor above takes over so it stays legible instead of vanishing.
   mh-logo--nolabel remains available for surfaces that must not carry it. */
.mh-logo--nolabel .mh-ai { display: none; }

@keyframes mh-in   { from { opacity: 0; transform: translateY(-8%) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mh-rise { from { opacity: 0; transform: translateY(0.2em); }         to { opacity: 1; transform: none; } }
@keyframes mh-drop { from { opacity: 0; transform: translateY(-0.3em); }        to { opacity: 1; transform: none; } }
@keyframes mh-wave { 0%, 100% { opacity: 1; } 42%, 58% { opacity: .46; } }
@keyframes mh-lit  { 0%, 100% { color: var(--mh-to); } 34%, 66% { color: inherit; } }

@media (prefers-reduced-motion: reduce) {
  .mh-logo svg path, .mh-word b, .mh-ai { animation: none !important; opacity: 1; }
}

/* Sits above the eyebrow as the page's opening beat. Sized so it introduces
   the headline rather than competing with it — 200px made the wordmark 60px,
   which is nearly the size of the h1 underneath. */
/* Sized here, not inline: an inline --mh-size beats every media query below
   it, so the responsive steps silently did nothing. */
.hero-logo { --mh-size: 150px; margin-bottom: 24px; max-width: 100%; }
/* The wordmark is nowrap, so it must not be allowed to shrink below its own
   width — as a flex item it was being squeezed and clipped mid-word. */
.hero-logo .mh-word { flex: none; }
.hero-logo svg { flex: none; }
@media (max-width: 760px) { .hero-logo { --mh-size: 132px; margin-bottom: 18px; } }
@media (max-width: 430px) { .hero-logo { --mh-size: 104px; } }
/* 320px is the narrowest supported width and the wordmark still overran it. */
@media (max-width: 360px) { .hero-logo { --mh-size: 86px; } }

/* ---------- the real interface gallery ----------
   Full content width so the interface is readable, one fixed frame, and a
   reserved aspect-ratio so nothing shifts while a slide loads. */
.gallery-section .wrap { max-width: 1180px; }
.gal { margin-top: 24px; }
.gal-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--ground-sunk);
  box-shadow: 0 20px 46px rgba(0,0,0,0.34);
}
.gal-slide { margin: 0; position: absolute; inset: 0; opacity: 0; }
.gal-slide[data-on="true"] { opacity: 1; }
/* A restrained crossfade, never a slide. */
.gal-slide { transition: opacity 460ms var(--ease); }
.gal-slide picture, .gal-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gal-slide .gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px; font-size: 13.5px; color: var(--ink);
  background: linear-gradient(180deg, rgba(10,14,24,0), rgba(10,14,24,0.92) 55%);
}
.gal-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); color: var(--ink);
  background: rgba(10,14,24,0.62); border: 1px solid var(--line);
  cursor: pointer;
}
.gal-zoom:hover { background: rgba(10,14,24,0.85); color: var(--brand-1); }

.gal-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gal-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--ground-raised); color: var(--ink-soft); cursor: pointer;
}
.gal-btn:hover { color: var(--brand-1); border-color: var(--line-brand); }
.gal-btn:focus-visible, .gal-zoom:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.gal-pos { margin: 0 0 0 4px; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* enlarged viewer */
.gal-lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,9,16,0.92);
}
.gal-lightbox[data-open="true"] { display: flex; }
.gal-lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); }
.gal-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--ground-raised); border: 1px solid var(--line);
  color: var(--ink); font-size: 20px; cursor: pointer;
}
.gal-close:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }

@media (max-width: 760px) {
  /* The mobile crop is 760x890 \u2014 taller than it is wide. */
  .gal-frame { aspect-ratio: 760 / 890; }
  .gal-slide img { object-fit: contain; }
  .gal-btn, .gal-zoom { width: 46px; height: 46px; }
  .gal-slide .gal-cap { font-size: 13px; padding: 26px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-slide { transition: none; }
}

/* ---------- the teaching approach ----------
   One band, not five cards. A horizontal path on desktop that wraps to a
   compact vertical list on a phone. */
.approach-band { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.seq {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
}
.seq-step {
  flex: 1 1 170px; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--ground-raised); position: relative;
}
.seq-n {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: var(--weight-label);
  color: var(--brand-1); background: var(--wash-brand);
  font-variant-numeric: tabular-nums;
}
.seq-t { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
/* the connector, drawn only where steps sit side by side */
@media (min-width: 900px) {
  .seq-step + .seq-step::before {
    content: ""; position: absolute; left: -10px; top: 50%;
    width: 10px; height: 1px; background: var(--line);
  }
}
.approach-foot {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 22px; margin-top: 24px; align-items: start;
}
.refusal {
  border: 1px solid var(--line-amber, var(--line-soft)); border-radius: var(--radius);
  padding: 14px 16px; background: var(--wash-amber);
}
.refusal-h {
  margin: 0 0 8px; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--amber); font-weight: var(--weight-label);
}
.refusal-ask {
  margin: 0 0 8px; font-size: 13.5px; color: var(--ink-muted);
  padding-left: 12px; border-left: 2px solid var(--line);
}
.refusal-reply { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.approach-notes p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.approach-notes p:last-child { margin: 0; }
@media (max-width: 900px) {
  .approach-foot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .seq-step { flex: 1 1 100%; }
}

/* The promo is a single column now that the bullet summary has gone; the
   transcript below it is the fuller written alternative. */
.promo--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* ---------- Homework Planner: compact ----------
   The panel was taller than the copy beside it, so the section had to reserve
   space nothing was using. Nothing is removed here \u2014 every task, tag, control
   and section label still renders. It is density only: tags and actions share
   a row, and the paddings and type steps come down a notch. */
.mp--planner .mp-body { padding: 12px 12px; gap: 9px; }
.mp--planner .pl-title { font-size: 17px; }
.mp--planner .pl-kicker { font-size: 9.5px; }
.mp--planner .pl-toggle span { font-size: 10.5px; padding: 4px 10px; }
.mp--planner .pl-week { gap: 3px; }
.mp--planner .pl-week span { font-size: 10px; padding: 4px 0; }
.mp--planner .pl-progress { font-size: 10.5px; margin-top: 2px; }
.mp--planner .pl-summary { font-size: 11.5px; padding: 7px 10px; }
.mp--planner .pl-label { font-size: 9.5px; margin: 2px 0 0; }
.mp--planner .pl-tasks { gap: 6px; }
.mp--planner .pl-tasks li { padding: 8px 10px; gap: 8px; }
.mp--planner .pl-dot { width: 12px; height: 12px; margin-top: 1px; }
.mp--planner .pl-task { gap: 5px; }
.mp--planner .pl-task b { font-size: 12.5px; line-height: 1.35; }

/* Tags and actions share one row instead of stacking two. */
.mp--planner .pl-task .pl-tags,
.mp--planner .pl-task .pl-acts { display: inline-flex; }
.mp--planner .pl-task {
  grid-template-columns: 1fr auto; align-items: center;
  column-gap: 10px; row-gap: 5px;
}
.mp--planner .pl-task b { grid-column: 1 / -1; }
.mp--planner .pl-tags { grid-column: 1; gap: 5px; }
.mp--planner .pl-acts { grid-column: 2; justify-self: end; gap: 5px; }
.mp--planner .pl-tags span { font-size: 8.5px; padding: 2px 6px; letter-spacing: 0.05em; }
.mp--planner .pl-acts span { font-size: 10.5px; padding: 4px 9px; }

@media (max-width: 900px) {
  /* Back to stacked on narrow screens, where one row would crowd. */
  .mp--planner .pl-task { grid-template-columns: 1fr; }
  .mp--planner .pl-tags, .mp--planner .pl-acts { grid-column: 1; justify-self: start; }
}

/* ---------- product proof: film beside the real interface ----------
   Stacked, these two filled a whole screen each and left the right half of the
   page empty. Side by side they read as one piece of evidence. */
.proof-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: start; }
.proof-col > .eyebrow { display: inline-block; }
.proof-col h2 { font-size: clamp(21px, 2vw, 27px); line-height: 1.2; }
.proof-col .lede { font-size: 15px; margin-top: 10px; }
.proof-col .promo, .proof-col .gal { margin-top: 16px; }
/* The written summary sits under the player rather than beside it now. */
.proof-col .promo { grid-template-columns: minmax(0,1fr); gap: 14px; }
.proof-col .transcript { margin-top: 14px; }
.proof-col .gal-frame { aspect-ratio: 16 / 9; }
.proof-col .gal-slide .gal-cap { font-size: 12.5px; padding: 26px 14px 11px; }
.proof-col .gal-bar { margin-top: 11px; }

@media (max-width: 1024px) {
  /* Back to stacked, where two columns would make both unreadable. */
  .proof-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
}

/* Anchor targets must clear the sticky header. Jumping to #video or #modes
   put the heading underneath it. */
main > section[id], .proof-col[id] { scroll-margin-top: 86px; }

/* ---------- hero: the AI line ----------
   Two coloured lines, read as one thought: lavender says what the engine is,
   teal keeps the promise. Compact spacing binds them. */
.hero-ai { color: var(--lav, #b8a6f5); font-weight: 600; font-size: 18px;
  letter-spacing: 0.01em; margin: 22px 0 0; max-width: 44ch; }
/* Clear air above so it reads as its own statement; still tight to the teal
   promise below so the two coloured lines stay one thought. */
.hero-ai + .hero-promise, .hero-promise { margin-top: 7px; }

/* ---------- modes: unmistakably clickable ----------
   Ring + tint + restrained glow on the selected card; accent hover on the
   rest; a chevron on every card. box-shadow only — */






/* ---------- proof row: aligned columns ----------
   Both columns share the parent's three rows (intro / media / controls), so
   the two frames' top edges align exactly and stay aligned as text wraps. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1025px) {
    .proof-grid { grid-template-rows: auto auto auto; }
    .proof-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
    .proof-intro { align-self: start; }
    .proof-col .promo, .proof-col .gal { align-self: start; margin-top: 16px; }
    .proof-col .gal-frame { margin-top: 0; }
  }
}
.gal-disclosure { margin-top: 10px; }

/* Enlarged-view navigation: the lightbox once had no way to the next screen. */
.gal-box-nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,16,22,.62); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; z-index: 2; }
.gal-box-prev { left: 18px; } .gal-box-next { right: 18px; }
.gal-box-nav:hover, .gal-box-nav:focus-visible { background: rgba(10,16,22,.88);
  border-color: var(--teal); outline: none; }
.gal-box-nav:focus-visible { box-shadow: 0 0 0 2px var(--teal); }
.gal-box-pos { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; letter-spacing: .04em; background: rgba(10,16,22,.62);
  padding: 5px 12px; border-radius: 999px; }
@media (max-width: 620px) { .gal-box-nav { width: 42px; height: 42px; }
  .gal-box-prev { left: 8px; } .gal-box-next { right: 8px; } }

/* ---------- Inside MyHommi: all three, always ----------
   Owner ruling: no switcher. Each mode stands under its own heading with a
   real panel beside real copy, like the product itself. */
.modes-tri { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; align-items: start; }
.mode-block { min-width: 0; }
.mode-block[data-accent="teal"]  { --acc: var(--teal); }
.mode-block[data-accent="lav"],
.mode-block[data-accent="violet"] { --acc: var(--lav, #b8a6f5); }
.mode-block[data-accent="amber"] { --acc: var(--amber, #e8b04b); }
.mode-h { margin: 0 0 6px; display: flex; flex-direction: column; gap: 2px; }
.mode-h b { color: var(--acc); font-size: 23px; letter-spacing: 0.01em;
  text-shadow: 0 0 16px var(--acc-glow), 0 0 2px var(--acc-glow); }
.mode-block[data-accent="teal"]   { --acc: #2FBFA4; --acc-glow: rgba(126,212,200,.55); }
.mode-block[data-accent="lav"],
.mode-block[data-accent="violet"] { --acc-glow: rgba(180,169,250,.55); }
.mode-block[data-accent="amber"]  { --acc-glow: rgba(243,199,126,.55); }
.mode-h span { color: var(--muted, #9aa7b4); font-size: 13.5px; }
.mode-block .modes-body { font-size: 13.5px; min-height: 3.6em; margin: 0 0 12px; }
.mode-block .mp { width: 100%; }
@media (max-width: 900px) {
  .modes-tri { grid-template-columns: 1fr; gap: 34px; }
  .mode-block .modes-body { min-height: 0; }
}

/* ---------- For schools: its own room ----------
   It sat inside the founder story's paper band and read as part of it. A dark
   band with a violet top rule makes it unmistakably a new section. */
.schools-band { background: var(--ground); border-top: 3px solid var(--lav, #b8a6f5); }
.eyebrow--violet { color: var(--lav, #b8a6f5); }
.school-cta--dark { border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 24px 26px; background: color-mix(in srgb, var(--lav, #b8a6f5) 6%, transparent); }
.school-cta--dark h3 { margin: 0; font-size: 19px; }

/* schools: challenge → value */
.sv-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lav, #b8a6f5); font-weight: 600; margin: 0 0 10px; }
.sv-kicker--amber { color: var(--amber, #e8b04b); }
.school-challenge { border-left: 3px solid var(--amber, #e8b04b); padding-left: 18px; }
.sv-challenge { margin: 0; font-size: 15.5px; color: var(--muted, #b7c0cc); max-width: 46ch; }
.sv-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.sv-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 17px;
  background: color-mix(in srgb, var(--lav, #b8a6f5) 4%, transparent); }
.sv-card b { display: block; font-size: 14.5px; margin-bottom: 7px; color: var(--gb-text, #e9e9ed); }
.sv-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted, #9aa7b4); }
@media (max-width: 900px) { .sv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .sv-grid { grid-template-columns: 1fr; } }

/* ---------- elevation: the page answers the cursor ----------
   One consistent lift for every showcase surface. Decorative, never
   load-bearing: keyboard users lose nothing, and reduced-motion turns the
   movement off while keeping the glow. No layout shift: transform+shadow. */
.mode-block .mp,
.gal-frame,
.promo-video,
.mp--planner,
.plans > .card,
.school-cta--dark {
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.mode-block .mp:hover,
.mp--planner:hover,
.school-cta--dark:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--acc, var(--teal)) 55%, transparent);
}
.gal-frame:hover,
.promo-video:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -18px color-mix(in srgb, var(--teal) 45%, #000 20%);
}
.plans > .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--teal) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mode-block .mp, .gal-frame, .promo-video, .mp--planner, .plan, .school-cta--dark {
    transition: none;
  }
  .mode-block .mp:hover, .gal-frame:hover, .promo-video:hover,
  .mp--planner:hover, .plan:hover, .school-cta--dark:hover {
    transform: none;
  }
}

/* ---------- families: needs and answers ----------
   Three cards a parent recognises: the need in their words, the answer in
   ours. Verified claims only. Joins the site-wide hover elevation. */
.fam-grid { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 8px; }
.fam-card { border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 20px 22px; background: color-mix(in srgb, var(--teal) 4%, transparent);
  transition: transform .18s ease, box-shadow .18s ease; }
.fam-card:hover { transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--teal) 45%, transparent); }
.fam-card b { font-size: 16px; color: var(--teal); }
.fam-need { margin: 8px 0 6px; font-size: 13px; color: var(--muted, #9aa7b4); font-style: italic; }
.fam-answer { margin: 0; font-size: 14px; line-height: 1.55; }
@media (max-width: 1000px) { .fam-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fam-card { transition: none; }
  .fam-card:hover { transform: none; } }

/* the founder-family cartoon: soft frame, joins the elevation system */
.portrait--family img { width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); }
.portrait--family { transition: transform .18s ease, box-shadow .18s ease; }
.portrait--family:hover { transform: translateY(-3px);
  box-shadow: 0 16px 38px -20px rgba(0,0,0,0.35); }
@media (prefers-reduced-motion: reduce) {
  .portrait--family { transition: none; }
  .portrait--family:hover { transform: none; } }

/* ---------- Ways section: designer handoff 2026-08-27 ----------
   Tokens verbatim from BUILD-SPEC.md. Identical-height cards via stretch;
   fixed chrome bands so the tabs align across the row. */
.modes-tri { align-items: stretch; }
.way-col { display: grid; grid-template-rows: auto auto 1fr; }
.way-col .mode-h { min-height: 52px; gap: 3px; }
.way-col .modes-body { min-height: 66px; }
.w3-cardshell { /* compact per owner: all three must fit one laptop screen */ display: flex; flex-direction: column; width: 100%;
  background: linear-gradient(180deg, #111B31, #0D1628); border: 1px solid #223049;
  border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); overflow: hidden; padding: 0; }
.w3-chrome { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid #1D2A42; }
.w3-word { font-weight: 500; font-size: 12px; font-family: inherit; letter-spacing: .13em; padding-left: .13em; color: #E9E9ED; }
.w3-word b { color: var(--teal); font-weight: 500; }
.w3-today { font-size: 10.5px; color: #F3C77E; border: 1px solid rgba(243,199,126,.5);
  border-radius: 999px; padding: 2px 9px; }
.w3-sp { flex: 1; min-width: 4px; }
.w3-preview { flex: none; white-space: nowrap; font-size: 10px; letter-spacing: .1em;
  color: #9AA7C0; border: 1px solid #2A3854; border-radius: 999px; padding: 3px 10px; }
.w3-tabs { height: 40px; display: grid; grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid #1D2A42; }
.w3-tab { display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .12em; color: #64748F; }
.way-col[data-accent="teal"]   .w3-tab.is-on { color: #7ED4C8; box-shadow: inset 0 -2px 0 #38A99C; }
.way-col[data-accent="violet"] .w3-tab.is-on { color: #B4A9FA; box-shadow: inset 0 -2px 0 #8B7FE8; }
.way-col[data-accent="amber"]  .w3-tab.is-on { color: #F3C77E; box-shadow: inset 0 -2px 0 #E8A33D; }
.w3-body { flex: 1; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 9px; }

.w3-banner { background: rgba(56,169,156,.09); border: 1px solid rgba(56,169,156,.32);
  border-radius: 10px; padding: 9px 11px; font-size: 13px; color: #CFEAE4; }
.w3-boardframe { padding: 7px; border-radius: 10px;
  background: linear-gradient(180deg,#4A3524,#2E2015); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.w3-board { position: relative; border-radius: 5px; padding: 14px 16px 18px;
  background: radial-gradient(120% 90% at 20% 10%, #2C5A47, #1C3F32 70%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.w3-boardhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.w3-boardhead span { font-weight: 700; font-size: 10.5px; font-family: inherit; letter-spacing: .16em; color: #BFE9E0; }
.w3-boardhead em { font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 15px; color: #F3C77E; font-style: normal; }
.w3-step { display: flex; gap: 6px; align-items: flex-start; margin: 9px 0; }
.w3-step i { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(234,243,236,.55); color: #EAF3EC;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 13px; display: grid; place-items: center; }
.w3-step b { display: block; font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 21px; color: #EAF3EC;
  text-shadow: 0 0 6px rgba(234,243,236,.25); }
.w3-step small { font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 16px; color: #9FC7B4; }
.w3-ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent); }
.w3-paper { border-radius: 10px; padding: 10px 12px;
  background: linear-gradient(180deg,#F7F3E7,#EFE9D8); }
.w3-paper span { font-weight: 600; font-size: 10px; font-family: inherit; letter-spacing: .14em; color: #9A8A62; text-transform: uppercase; }
.w3-paper b { display: block; font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 20px; color: #2B3325; margin-top: 4px; }
.w3-paper u { display: block; height: 22px; border: 0; border-bottom: 1.5px solid #C9BE9C; }
.w3-paper small { font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; font-size: 13px; color: #9A8A62; }
.w3-btns { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: auto; }
.w3-btn { height: 38px; display:flex; align-items:center; justify-content:center; padding: 0 10px; border-radius: 10px; background: #16223C; border: 1px solid #2A3854;
  color: #E9E9ED; font-weight: 500; font-size: 13px; font-family: inherit; cursor: pointer; }

.w3-intro { background: rgba(180,169,250,.09); border: 1px solid rgba(180,169,250,.3);
  border-radius: 10px; padding: 12px 13px; font-size: 13px; line-height: 1.55; color: #DDD8FB; }
.w3-intake { display: flex; gap: 10px; align-items: flex-start; }
.w3-intake i { flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(180,169,250,.12); border: 1px solid rgba(180,169,250,.35);
  color: #B4A9FA; display: grid; place-items: center; font-weight: 600; font-size: 13px; font-family: inherit; }
.w3-intake b { font-size: 13.5px; }
.w3-intake small { display: block; color: #9AA7C0; font-size: 12px; }
.w3-check { border: 1px solid #2A3854; border-radius: 10px; padding: 12px 13px; margin-top: auto; }
.w3-check span { font-weight: 700; font-size: 10.5px; font-family: inherit; letter-spacing: .14em; color: #B4A9FA; text-transform: uppercase; }
.w3-check p { margin: 7px 0 9px; font-size: 13px; line-height: 1.5; }
.w3-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.w3-pill { font-weight: 500; font-size: 11.5px; font-family: inherit; border-radius: 999px; padding: 3px 10px; font-style: normal; }
.w3-pill--ok { color: #7ED4C8; border: 1px solid rgba(56,169,156,.5); }
.w3-pill--warn { color: #F3C77E; border: 1px solid rgba(232,163,61,.6); }

.w3-words { border: 1px solid #2A3854; border-radius: 10px; padding: 11px 13px; }
.w3-wordstop { display: flex; justify-content: space-between; align-items: center; }
.w3-wordstop span { font-weight: 700; font-size: 10.5px; font-family: inherit; letter-spacing: .14em; color: #F3C77E; }
.w3-wordstop em { font-weight: 500; font-size: 11px; font-family: inherit; color: #E9E9ED; border: 1px solid #2A3854;
  border-radius: 999px; padding: 2px 9px; font-style: normal; }
.w3-words b { display: block; margin: 7px 0 8px; font-size: 14px; }
.w3-strength { height: 6px; border-radius: 999px; background: #16223C; overflow: hidden; }
.w3-strength i { display: block; height: 100%;
  background: linear-gradient(90deg,#E8A33D,#F3C77E); }
.w3-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.w3-chip { font-weight: 500; font-size: 12px; font-family: inherit; font-style: normal; border-radius: 999px; padding: 4px 11px;
  color: #C6D0E2; border: 1px solid #2A3854; }
.w3-chip.is-on { color: #F3C77E; border-color: rgba(232,163,61,.6);
  background: rgba(243,199,126,.10); }
.w3-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.w3-mode { height: 36px; display:flex; align-items:center; justify-content:center; border-radius: 10px; font-weight: 600; font-size: 12.5px; font-family: inherit; cursor: pointer;
  background: transparent; border: 1px solid #2A3854; color: #E9E9ED; }
.w3-mode.is-on { background: #F3C77E; border-color: #F3C77E; color: #2A1E08; }
.w3-card { border: 1.5px solid #E8A33D; border-radius: 12px; padding: 13px 14px;
  background: linear-gradient(180deg,#16223C,#121C32); }
.w3-cardtop { display: flex; justify-content: space-between; font-weight: 500; font-size: 10.5px; font-family: inherit;
  letter-spacing: .1em; color: #9AA7C0; text-transform: uppercase; }
.w3-cardtop em { font-style: normal; }
.w3-card b { display: block; text-align: center; font-weight: 600; font-size: 27px; font-family: inherit; margin: 10px 0 6px; }
.w3-card small { display: block; text-align: center; color: #9AA7C0; font-size: 12px; }
.w3-grades { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.w3-grade { min-height: 44px; display: flex; align-items: center;
  justify-content: center; padding: 0 14px; border-radius: 10px;
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  letter-spacing: .01em; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.w3-grade--amber { background: transparent; border: 1.5px solid #E8A33D; color: #F3C77E; }
.w3-grade--teal { background: #14B8A6; border: 1.5px solid #14B8A6; color: #06251F; }
.w3-foot { margin: 2px 0 0; font-size: 11.5px; color: #9AA7C0; }
.w3-btn:focus-visible, .w3-mode:focus-visible, .w3-grade:focus-visible,
.w3-chip:focus-visible { outline: 2px solid #7ED4C8; outline-offset: 2px; }
#modes.section { background:
  radial-gradient(70% 50% at 12% 0%, rgba(56,169,156,.10), transparent 62%), #0A1020; }
@media (max-width: 900px) {
  /* The handoff said collapse below 1100 but also demanded equal card tops at
     1024 and 924. The acceptance criteria win: the row holds to 900, and the
     no-clip check below proves the cards still fit. */
  .modes-tri { max-width: 560px; margin-inline: auto; }
  .w3-cardshell { min-height: 0; }
}

/* typing quotes: character spans inherit everything; only opacity moves */
.tw .tw-anim > span { transition: opacity .12s linear; }

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

/* ---------- a familiar evening, as the chat it really is ----------
   Child on the left, you on the right — the shape every family recognises
   from their own phone. Paper section, so ink-dark bubbles on cream. */
.evening-chat { max-width: 560px; margin: 26px auto 6px; display: flex;
  flex-direction: column; gap: 9px; }
.chat-day { align-self: center; font-size: 11.5px; color: #6F6240;
  letter-spacing: .04em; margin-bottom: 2px; }
.chat-row { display: flex; }
.chat-row--child { justify-content: flex-start; }
.chat-row--you { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 3px; }
.chat-who { font-size: 10.5px; color: #6F6240; padding-right: 6px; }
.chat-bubble { max-width: 78%; padding: 9px 14px; border-radius: 16px;
  font-size: 15px; line-height: 1.45; box-shadow: 0 1px 2px rgba(43,51,37,.10); }
.chat-bubble--child { background: #FFFFFF; color: #2B3325;
  border: 1px solid #E3DBC6; border-bottom-left-radius: 5px; }
.chat-bubble--you { background: #DFF3EE; color: #1E4A41;
  border: 1px solid #BCE0D6; border-bottom-right-radius: 5px; }

/* Reading flow: anchors glide instead of jump — unless motion is reduced. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The evening chat arrives like messages do: one after another, once,
   the first time it scrolls into view. Reduced motion sees it complete. */
@media (prefers-reduced-motion: no-preference) {
  .evening-chat[data-armed] .chat-row { opacity: 0; transform: translateY(6px); }
  .evening-chat.is-live .chat-row { animation: chat-in .34s ease forwards; }
  .evening-chat.is-live .chat-row:nth-child(2) { animation-delay: .05s; }
  .evening-chat.is-live .chat-row:nth-child(3) { animation-delay: .32s; }
  .evening-chat.is-live .chat-row:nth-child(4) { animation-delay: .60s; }
  .evening-chat.is-live .chat-row:nth-child(5) { animation-delay: 1.05s; }
  @keyframes chat-in { to { opacity: 1; transform: none; } }
}

/* ---------- a familiar evening, compact ----------
   The chat owns the right column; the framing and the two reasons own the
   left. Half the height, nothing lost. */
.stack--evening { align-items: start; gap: 44px; }
.stack--evening .evening-chat { margin: 6px 0 0; max-width: 460px; }
.says-land--tight { margin-top: 20px; }
.reasons-row--tight { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
.reasons-row--tight > div { border-top: 1px solid #D8CFB8; padding-top: 12px; }
@media (max-width: 900px) { .stack--evening { gap: 26px; } }

/* The mobile menu is a fixed sheet below the sticky header, so it opens in
   view no matter how far the page has scrolled. */
[data-mobile-menu] { position: fixed; top: 61px; left: 0; right: 0; bottom: 0;
  z-index: 50; overflow: auto; background: var(--ground);
  border-top: 1px solid var(--line); padding: 18px 20px 32px; }
[data-mobile-menu][hidden] { display: none; }
[data-mobile-menu][data-open="false"] { display: none; }

/* The two grade buttons are the only real controls in the Practice preview;
   they should feel like it: centered labels, honest hover and press. */
.w3-grade--amber:hover { box-shadow: 0 0 14px rgba(243,199,126,.28); }
.w3-grade--teal:hover { filter: brightness(1.06);
  box-shadow: 0 0 14px rgba(20,184,166,.35); }
.w3-grade:active { transform: translateY(1px); }

/* ---------- arrival choreography ----------
   The page reveals as the reader reaches it: eyebrows, headings and cards
   rise in with a small stagger, once. The product mocks wake the same way
   — chalk lines, coach steps and planner tasks appear in sequence, like a
   lesson being written rather than a poster being unrolled. JS adds the
   data attributes only when motion is welcome, so reduced-motion readers
   and no-JS readers always see the finished page. */
@media (prefers-reduced-motion: no-preference) {
  [data-rv] { opacity: 0; transform: translateY(14px); }
  [data-rv].is-in { animation: rv-rise .55s cubic-bezier(.2,.7,.25,1) forwards;
    animation-delay: var(--rv, 0s); }
  @keyframes rv-rise { to { opacity: 1; transform: none; } }

  .mode-block[data-scene] :is(.w3-board > *, .w3-intake, .w3-pill) {
    opacity: 0; transform: translateY(8px); }
  .mode-block.is-live :is(.w3-board > *, .w3-intake, .w3-pill) {
    animation: rv-rise .45s ease forwards; }
  .mode-block.is-live .w3-board > :nth-child(2) { animation-delay: .28s; }
  .mode-block.is-live .w3-board > :nth-child(3) { animation-delay: .56s; }
  .mode-block.is-live .w3-board > :nth-child(4) { animation-delay: .84s; }
  .mode-block.is-live .w3-intake:nth-of-type(2) { animation-delay: .22s; }
  .mode-block.is-live .w3-intake:nth-of-type(3) { animation-delay: .44s; }
  .mode-block.is-live .w3-pill:nth-child(2) { animation-delay: .2s; }
  .mode-block.is-live .w3-pill:nth-child(3) { animation-delay: .4s; }

  [data-scene-planner] .pl-task { opacity: 0; transform: translateY(10px); }
  [data-scene-planner].is-live .pl-task { animation: rv-rise .5s ease forwards; }
  [data-scene-planner].is-live .pl-task:nth-of-type(2) { animation-delay: .18s; }
  [data-scene-planner].is-live .pl-task:nth-of-type(3) { animation-delay: .36s; }
}

/* The real product speaks the card and offers a sentence — the preview
   shows both, honestly inert. */
.w3-cardtop { display: flex; align-items: center; }
.w3-cardtop > em { margin-left: auto; }
.w3-speak { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #14B8A6; color: #06251F; display: inline-flex;
  align-items: center; justify-content: center; margin-left: 10px; }
.w3-sentence { display: flex; align-items: center; justify-content: center;
  min-height: 38px; margin-top: 8px; border-radius: 11px;
  border: 1.5px solid #8E86E8; color: #B9B2F5;
  font-family: inherit; font-weight: 600; font-size: 13.5px; }

/* ---------- the preview chrome: greeting, ask bar, toolbar ----------
   The parts of the real product a parent recognises instantly: the buddy’s
   greeting, the Hint/Explain/Check pills with their icons, the ask bar and
   the little toolbar. All of it inert — a faithful photograph, not a demo. */
.w3-greet { display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; max-width: 92%;
  background: #232A3F; border: 1px solid #333C58; border-radius: 14px;
  border-top-left-radius: 5px; padding: 5px 10px; font-size: 12px;
  color: #DEE5F2; }
.w3-greet .w3-mini { color: #8FA0BF; }
.w3-mini { display: inline-flex; }
.w3-intro { border: 1px solid #3A3660; border-left: 3px solid var(--acc, #8E86E8);
  background: #232A46; border-radius: 12px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 7px; }
.w3-introlabel { display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .14em; color: var(--acc, #B9B2F5); font-weight: 700; }
.w3-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc, #8E86E8); }
.w3-intro p { margin: 0; font-size: 12.8px; line-height: 1.55; color: #C9D2E6; }
.w3-arrow { font-size: 12px; font-weight: 700; color: #EAF0FA; }
.w3-btns--foot { margin-top: auto; }
.w3-btn .w3-mini { margin-right: 6px; color: currentColor; opacity: .9; }
.w3-askbar { display: flex; align-items: center; gap: 9px; color: #8FA0BF; min-width: 0; }
.w3-askfield { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; min-height: 32px; display: flex; align-items: center;
  padding: 0 13px; border-radius: 999px; background: #1B2236;
  border: 1px solid #2C3550; color: #93A1BE; font-size: 12.5px; }
.w3-ask { width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; font-family: inherit;
  background: var(--acc, #2FBFA4); color: #10131C; }
.w3-toolbar { display: flex; align-items: center; gap: 12px;
  color: #7E8CA8; padding-top: 2px; }
.w3-langpill { font-style: normal; font-size: 10px; font-weight: 700;
  border: 1px solid #3A4560; border-radius: 999px; padding: 2px 7px;
  color: #C7D1E6; }
.w3-settings { margin-left: auto; display: inline-flex; align-items: center;
  gap: 6px; font-size: 11px; font-weight: 600; color: #C7D1E6;
  background: #202944; border: 1px solid #313C5C; border-radius: 999px;
  padding: 6px 12px; }

/* ==========================================================================
   RESTORED SECTIONS — 2026-08-29
   Copy that was written, translated and reviewed, and then left unreferenced
   by any template. The rules below were deleted with the sections they
   styled, so bringing the copy back means authoring them again. Everything
   here is used by src/pages/index.mjs only.
   ========================================================================== */

/* .fine is --ink-faint, which is a 4.6:1 grey chosen for the dark ground and
   about 2.7:1 on the cream. Nothing used it on paper before; about's privacy
   note does now. */
.paper .fine { color: var(--ink-dark-faint); }

/* ---- a denser .ticks, for "title + sentence" pairs rather than one-liners
        (families' privacy promises, the schools "built" list) ---- */
.ticks--tight { gap: 14px; }
.ticks--tight li {
  display: grid; grid-template-columns: 6px minmax(0, 1fr);
  gap: 3px 11px; align-items: start; font-size: 13.5px;
}
.ticks--tight li::before { grid-column: 1; grid-row: 1 / span 2; margin-top: 7px; }
.ticks--tight li b {
  grid-column: 2; color: var(--ink); font-size: 13.5px;
  font-weight: var(--weight-label);
}
.ticks--tight li span {
  grid-column: 2; color: var(--ink-muted); font-size: 13px; line-height: 1.55;
}

/* ---- a plain bulleted list: what is not built yet, and the video's
        on-page text alternative ---- */
.dots { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dots li {
  position: relative; padding-left: 17px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-muted);
}
.dots li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint);
}
.alt-h {
  margin: 18px 0 0; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: var(--weight-label);
  color: var(--ink-muted);
}

/* ---- schools: what exists beside what does not. The two lists carry the
        whole honesty of the section, so they sit side by side and are never
        allowed to read as one list. ---- */
.stagger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin-top: 28px; align-items: start;
}
.stage-col {
  min-width: 0; border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 19px 21px;
}
.stage-col > b {
  display: block; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: var(--weight-label);
  color: var(--brand-1); margin-bottom: 13px;
}
.stage-col--next { border-style: dashed; border-color: var(--line); }
.stage-col--next > b { color: var(--violet); }
.stage-lede { margin: -6px 0 0; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 860px) { .stagger { grid-template-columns: 1fr; gap: 16px; } }