/* 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); }
.section { padding-block: clamp(52px, 7vw, 92px); }
.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;
}
.eyebrow--amber  { color: var(--amber); }
.lede { color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.62; }
.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;
}

/* ---------- question picker ---------- */
.picks { display: grid; gap: 9px; margin-top: 18px; }
.pick {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.pick:hover { border-color: var(--line); }
.pick[aria-pressed="true"] { border-color: var(--line-brand); background: var(--wash-brand); }
.pick b { display: block; font-size: 10.5px; font-weight: var(--weight-label); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 5px; }
.pick span { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- "another way" ---------- */
.ways { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.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); }

.bars { display: flex; gap: 8px; margin-top: 16px; }
.bars .bar { flex: 1; height: 32px; border-radius: 7px; border: 1px solid rgba(126,212,200,0.35); background: rgba(20,184,166,0.14); }
.bars .bar--left { border-color: rgba(243,199,126,0.45); background: var(--wash-amber);
  display: flex; gap: 2px; padding: 2px; }
.bars .bar--left i { flex: 1; border-radius: 5px; background: rgba(232,163,61,0.3); display: block; }

.audio-row { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.audio-row .wave { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.audio-row .wave i { width: 3px; border-radius: 2px; background: var(--brand-2); display: block; }

/* ---------- 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; }

.note-amber {
  margin-top: 20px; padding: 15px 17px;
  border: 1px solid rgba(243, 199, 126, 0.28);
  background: var(--wash-amber);
  border-radius: var(--radius);
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
}

.lang-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.lang-list li {
  font-size: 14px; color: var(--ink-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  padding: 8px 16px;
}

/* 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; }
.legal-pending {
  display: inline-block; margin-bottom: 8px;
  font-size: 10.5px; font-weight: var(--weight-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}

/* 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; }
.ghost-control {
  font-size: 12.5px; padding: 11px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-faint);
}

[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; }

/* ---------- The Guided Board, rendered as the real product ---------- */
.gb {
  background: var(--gb-chrome);
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.gb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--gb-surface);
  border-bottom: 1px solid var(--gb-line);
}
.gb-head .mark { width: 20px; flex: none; }
.gb-title {
  font-size: 12.5px; font-weight: var(--weight-label);
  color: var(--gb-text); letter-spacing: 0.01em;
}
.gb-sub { font-size: 11.5px; color: var(--gb-muted); margin-left: auto; white-space: nowrap; }

.gb-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; }

/* the homework, as the product shows it: a card with a teal edge */
.gb-qcard {
  background: var(--gb-surface);
  border-left: 3px solid var(--gb-teal);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px; color: var(--gb-text); line-height: 1.45;
  margin-bottom: 8px;
}
.gb-qlabel {
  font-size: 11px; color: var(--gb-muted); margin-bottom: 6px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* MyHommi speaking. Lavender, left-aligned, with the squared top-left corner
   the product uses to mark the start of a turn. */
.gb-coach {
  align-self: flex-start;
  max-width: 97%;
  background: var(--gb-lav-soft);
  border-radius: 17px; border-top-left-radius: 5px;
  padding: 10px 13px;
  font-size: 14px; line-height: 1.5; color: var(--gb-text);
}
.gb-coach[data-refused="true"] {
  background: rgba(240, 183, 94, 0.16);
  box-shadow: inset 3px 0 0 var(--gb-amber);
  border-top-left-radius: 5px;
}
.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;
}

/* the chip row: hint / explain / another way — equal width, as in the product */
.gb-chips { display: flex; gap: 8px; margin-top: 12px; }
.gb-chip {
  flex: 1; min-width: 0; padding: 10px 6px;
  border-radius: 12px; border: 1px solid var(--gb-line);
  background: var(--gb-surface-2); color: var(--gb-text);
  font-size: 12.5px; font-weight: 500; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: border-color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.gb-chip:hover:not(:disabled) { border-color: var(--gb-line-ctl); background: var(--gb-surface); }
.gb-chip[data-accent="cheat"] { border-style: dashed; color: var(--gb-amber); border-color: rgba(240,183,94,0.5); }
.gb-chip[data-accent="cheat"]:hover { border-style: solid; border-color: var(--gb-amber); }

/* step controls, centred, with the counter the product shows */
.gb-steps {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gb-line);
}
.gb-step-btn {
  padding: 8px 15px; border-radius: 10px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--gb-line); background: var(--gb-surface-2); color: var(--gb-text);
}
.gb-step-btn:hover:not(:disabled) { border-color: var(--gb-line-ctl); }
.gb-step-btn--next { background: var(--gb-teal); border-color: var(--gb-teal); color: #06231e; font-weight: 600; }
.gb-step-btn--next:hover { filter: brightness(1.06); }
.gb-counter { font-size: 12px; color: var(--gb-muted); min-width: 62px; text-align: center; }

/* the composer strip, as the product has it */
.gb-compose {
  display: flex; gap: 8px; padding: 11px 14px;
  border-top: 1px solid var(--gb-line); background: var(--gb-actions);
}
.gb-compose input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px;
  color: var(--gb-text); background: var(--gb-surface);
  border: 1px solid var(--gb-line); border-radius: 12px; padding: 10px 13px;
}
.gb-compose input::placeholder { color: var(--gb-muted); }
.gb-compose input:focus-visible { border-color: var(--gb-teal); outline-offset: 0; }
.gb-send {
  border: 0; border-radius: 12px; padding: 0 16px;
  background: var(--gb-teal); color: #06231e; font-weight: 700; font-size: 13px;
}
.gb-send:hover { filter: brightness(1.06); }
.gb-hint { padding: 0 14px 12px; font-size: 12px; color: var(--gb-muted); background: var(--gb-actions); }
.gb-hint[data-state="checked"] { color: var(--gb-teal); }

.gb-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px;
  font-size: 12px; color: var(--ink-muted);
}
.gb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.gb-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: none; }

@media (max-width: 640px) {
  .gb-chips { flex-wrap: wrap; }
  .gb-chip { flex: 1 1 44%; }
  .gb-counter { min-width: 0; }
}

/* 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--bottom { border-bottom: 1px solid var(--paper-line); }
.paper + .paper { border-top: 0; padding-top: 0; }
.h2--paper   { color: var(--ink-dark); }
.h3--paper   { color: var(--ink-dark); font-size: 23px; }
.lede--paper { color: var(--ink-dark-soft); }
.fine--paper { color: var(--ink-dark-faint); }
.eyebrow--paper        { color: var(--brand-on-paper); }
.eyebrow--violet-paper { color: var(--violet-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); }
.btn--paper {
  border-color: var(--brand-on-paper); color: var(--brand-on-paper);
  background: rgba(10, 107, 96, 0.06);
}
.btn--paper:hover { background: rgba(10, 107, 96, 0.12); }

/* ---- 2. the recognition moment ---- */
.says { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-inline: auto; }
.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; }

/* ---- editorial scenes ---- */
.scene-wrap { margin: 0; }
.scene {
  display: block; width: 100%; height: auto;
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
}
.scene-wrap--dark .scene { background: var(--ground-raised); border-color: var(--line-soft); }
.scene-wrap figcaption { margin-top: 12px; font-size: 12px; color: var(--ink-dark-faint); }

/* ---- 3. the reasons, as a list with a rule rather than four boxes ---- */
.reasons { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.reasons li {
  padding: 15px 0 15px 20px; border-left: 2px solid var(--paper-rule);
  transition: border-color var(--motion) var(--ease);
}
.reasons li:hover { border-left-color: var(--brand-on-paper); }
.reasons b { display: block; font-size: 15.5px; color: var(--ink-dark); margin-bottom: 4px; font-weight: var(--weight-label); }
.reasons span { font-size: 14.5px; color: var(--ink-dark-soft); line-height: 1.6; }

/* ---- 6. how it works: numbered, not carded ---- */
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.steps li { display: grid; gap: 7px; align-content: start; }
.steps-n {
  font-size: 34px; font-weight: var(--weight-heading); line-height: 1;
  /* was opacity 0.5, which measured 2.19:1 on the cream — under the 3:1 that
     large text needs. A muted teal instead of a faded one: still recedes,
     still legible at 3.2:1. */
  color: #4E938C;
}
.steps b { font-size: 16.5px; color: var(--ink-dark); font-weight: var(--weight-label); }
.steps-d { font-size: 14.5px; color: var(--ink-dark-soft); line-height: 1.6; }

.snap-flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.snap-flow li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink-dark-soft);
}
.snap-flow b {
  font-size: 11px; letter-spacing: 0.1em; color: var(--brand-on-paper);
  border: 1px solid var(--paper-line); border-radius: var(--radius-pill);
  padding: 5px 10px; flex: none; background: var(--paper-2);
}

/* ---- 7. what's inside: outcome first, feature name as a tag ---- */
.depth { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px; margin-top: 36px; }
.depth-h { font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: var(--weight-label); margin-bottom: 18px; }
.depth-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.depth-col li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.depth-out { font-size: 16px; color: var(--ink-dark); line-height: 1.4; flex: 1 1 100%; }
.depth-feat {
  font-size: 11.5px; font-weight: var(--weight-label); letter-spacing: 0.06em;
  border: 1px solid; border-radius: var(--radius-pill); padding: 4px 11px;
}

/* ---- 9. families: controls and the three promises ---- */
.controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 36px; margin-top: 30px; }
.controls > div { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.controls dt { font-size: 15px; color: var(--ink); font-weight: var(--weight-label); margin-bottom: 5px; }
.controls dd { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.6; }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 26px; }
.promise {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 20px; background: var(--ground-raised);
  border-top: 2px solid var(--brand-2);
}
.promise b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 7px; }
.promise p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

/* ---- 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; }
.gb-kicker {
  font-size: 11.5px; font-weight: var(--weight-label);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gb-teal); margin: 0;
}
.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); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .depth { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .controls { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .promises { grid-template-columns: minmax(0, 1fr); }
  /* the illustration follows the words on a narrow screen */
  .stack--art > figure { order: 2; }
}

/* A hint is help, not the coach talking and not a refusal. Teal, because the
   board is offering something you can act on. */
.gb-coach[data-hinted="true"] {
  background: rgba(87, 201, 182, 0.13);
  box-shadow: inset 3px 0 0 var(--gb-teal);
  border-top-left-radius: 5px;
}
.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,
  .scene-wrap, .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; }
  .gb-coach { background: #f4f4f4 !important; }
  .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; }
/* Renamed from .promise: the privacy cards already owned that name, 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);
}
.hero-flow {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center;
}
.hero-flow li {
  font-size: 12.5px; color: var(--ink-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  padding: 6px 12px; background: var(--ground-raised);
}
.hero-flow li + li::before {
  content: "\2192"; color: var(--brand-2); margin-right: 9px; margin-left: -4px;
}

.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); }
.before { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; margin-top: 34px; }
.before-group { border-top: 2px solid var(--paper-rule); padding-top: 16px; }
.before-who {
  margin: 0 0 14px; font-size: 11.5px; font-weight: var(--weight-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dark-faint);
}
.before-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.before-lines li {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.4; color: var(--ink-dark);
  padding-left: 22px; position: relative; text-wrap: pretty;
}
.before-lines li::before {
  content: "\201C"; position: absolute; left: 0; top: -2px;
  font-size: 28px; line-height: 1; color: var(--paper-rule);
}
.before-lines li::after { content: "\201D"; color: var(--paper-rule); }
@media (max-width: 720px) {
  .before { grid-template-columns: minmax(0,1fr); gap: 30px; }
}

/* 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;
}
.board--preview { border-color: var(--gb-line); }

/* 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; }
.split-h { font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: var(--weight-label); margin: 0 0 16px; }
.split-h--now  { color: var(--brand-on-paper); }
.split-h--next { color: var(--ink-dark-faint); }
.split-now dl { margin: 0; display: grid; gap: 0; }
.split-now dl > div { padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
.split-now dt { font-size: 15px; font-weight: var(--weight-label); color: var(--ink-dark); margin-bottom: 4px; }
.split-now dd { margin: 0; font-size: 14px; color: var(--ink-dark-soft); line-height: 1.6; }
.split-next {
  border: 1px dashed var(--paper-rule); border-radius: var(--radius-lg);
  padding: 20px; background: rgba(200, 185, 162, 0.12);
}
.split-warn { margin: 0 0 14px; font-size: 13px; color: var(--amber-on-paper); font-weight: var(--weight-label); }
.split-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.split-next li { font-size: 14px; color: var(--ink-dark-soft); padding-left: 20px; position: relative; line-height: 1.55; }
.split-next li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 2px; background: var(--paper-rule); }
.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, so it belongs on the page without the
   photo itself being altered. */
.portrait { margin: 0; }
.portrait img {
  display: block; width: 100%; height: auto; max-width: 560px;
  border-radius: var(--radius-lg);
}
.portrait figcaption {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-dark-faint); max-width: 560px;
}

/* ---------- Inside MyHommi: the three modes ---------- */
.modes { margin-top: 34px; }
.modes-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.modes-tab {
  text-align: left; padding: 15px 17px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--ground-raised);
  transition: border-color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.modes-tab b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.modes-tab span { display: block; font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.modes-tab:hover { border-color: var(--line); }
.modes-tab[aria-selected="true"] { background: var(--ground-sunk); }
.modes-tab[aria-selected="true"][data-accent="teal"]   { border-color: var(--gb-teal); }
.modes-tab[aria-selected="true"][data-accent="violet"] { border-color: var(--gb-lavender); }
.modes-tab[aria-selected="true"][data-accent="amber"]  { border-color: var(--gb-amber); }
.modes-tab[aria-selected="true"][data-accent="teal"]   b { color: var(--gb-teal); }
.modes-tab[aria-selected="true"][data-accent="violet"] b { color: var(--gb-lavender); }
.modes-tab[aria-selected="true"][data-accent="amber"]  b { color: var(--gb-amber); }

.modes-panel { margin-top: 22px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 34px; align-items: start; }
.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-today {
  font-size: 10.5px; color: var(--gb-amber); border: 1px solid rgba(240,183,94,0.5);
  border-radius: var(--radius-pill); padding: 3px 9px;
}
.mp-head .preview-tag { margin-left: auto; }
.mp-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--gb-line); }
.mp-tab {
  text-align: center; padding: 11px 6px; font-size: 11.5px;
  font-weight: var(--weight-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gb-muted); border-bottom: 2px solid transparent;
}
.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-solving {
  border: 1px solid rgba(87,201,182,0.45); border-radius: 10px;
  background: var(--gb-teal-soft); padding: 11px 13px;
}
.mp-solving b {
  display: block; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gb-teal); margin-bottom: 6px;
}
.mp-solving p { margin: 0; font-size: 13.5px; color: var(--gb-text); line-height: 1.5; }
.mp-greet {
  margin: 0; align-self: start; justify-self: start;
  background: var(--gb-surface); border-radius: 15px; border-top-left-radius: 5px;
  padding: 9px 13px; font-size: 13px; color: var(--gb-text);
}
.mp-actions { display: flex; gap: 8px; padding: 0 14px 15px; }
.mp-chip {
  flex: 1; text-align: center; font-size: 12px; font-weight: 500;
  padding: 10px 6px; border-radius: 11px;
  border: 1px solid var(--gb-line); background: var(--gb-surface-2); color: var(--gb-text);
}
.mp-chip[data-accent="amber"]  { color: var(--gb-amber); }
.mp-chip[data-accent="violet"] { color: var(--gb-lavender); }
.mp-chip[data-accent="teal"]   { color: var(--gb-teal); }

.mp-quote {
  margin: 0; padding: 13px 15px; border-radius: 12px;
  background: var(--gb-lav-soft); box-shadow: inset 3px 0 0 var(--gb-lavender);
  font-size: 13.5px; line-height: 1.6; color: var(--gb-text);
}
.mp-ways { display: grid; gap: 8px; }
.mp-way {
  display: block; border: 1px solid var(--gb-line); border-radius: 11px;
  padding: 10px 12px; background: var(--gb-surface-2);
}
.mp-way b  { display: block; font-size: 13px; color: var(--gb-text); }
.mp-way em { font-style: normal; font-size: 11.5px; color: var(--gb-muted); }

.mp-words, .mp-card {
  border: 1px solid var(--gb-line); border-radius: 12px;
  padding: 13px; background: var(--gb-surface-2);
}
.mp-pill {
  font-size: 10.5px; color: var(--gb-amber); border: 1px solid rgba(240,183,94,0.5);
  border-radius: var(--radius-pill); padding: 3px 9px;
}
.mp-learning { margin: 10px 0 2px; font-size: 19px; font-weight: var(--weight-heading); color: var(--gb-text); }
.mp-set { margin: 0 0 10px; font-size: 11.5px; color: var(--gb-muted); }
.mp-chipline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-chipline span {
  font-size: 11.5px; color: var(--gb-text); border: 1px solid var(--gb-line);
  border-radius: var(--radius-pill); padding: 5px 11px;
}
.mp-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.mp-act {
  font-size: 12px; font-weight: 500; padding: 9px 14px; border-radius: 11px;
  border: 1px solid var(--gb-line); color: var(--gb-text);
}
.mp-act.is-on { background: var(--gb-amber); border-color: var(--gb-amber); color: #2A1B02; font-weight: 600; }
.mp-card { text-align: center; }
.mp-dir { font-size: 10.5px; color: var(--gb-muted); letter-spacing: 0.08em; }
.mp-card b { display: block; font-size: 26px; font-weight: var(--weight-heading); color: var(--gb-text); margin: 10px 0 4px; }
.mp-card em { font-style: normal; font-size: 11.5px; color: var(--gb-muted); display: block; margin-bottom: 12px; }
.mp-card .mp-acts { justify-content: center; }
.mp-card .mp-act.is-on { background: var(--gb-teal); border-color: var(--gb-teal); color: #06231e; }

@media (max-width: 900px) {
  .modes-tabs { grid-template-columns: minmax(0,1fr); }
  .modes-panel { grid-template-columns: minmax(0,1fr); gap: 22px; }
}

/* ---------- 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-status {
  margin-top: 18px; padding: 11px 15px; border-radius: var(--radius);
  border: 1px solid rgba(243,199,126,0.4); background: var(--wash-amber);
  font-size: 12.5px; font-weight: var(--weight-label); letter-spacing: 0.04em;
  color: var(--amber);
}
.doc-review { margin-top: 14px; font-size: 13px; color: var(--ink-muted); }
.doc-ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  color: var(--amber); border: 1px dashed rgba(243,199,126,0.5);
  border-radius: 5px; padding: 1px 7px;
}
.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-h3 { font-size: 16px; margin-top: 26px; color: var(--ink); }
.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); } }

.portrait-slot .scene { border-style: dashed; }

/* 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; }
  .scene-wrap .scene { max-height: 210px; object-fit: contain; }
  .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) {
  /* the demo's three question cards are the tallest block on a phone */
  .picks .pick { padding: 10px 12px; }
  .picks .pick span { font-size: 13px; }
  .gb-body { padding: 12px; gap: 8px; }
  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); }

.planner-ways { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.planner-ways span {
  font-size: 11.5px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 11px;
}
.mp-bank {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gb-amber); font-weight: var(--weight-label); margin-right: 8px;
}