/* Doodelybeep 2026 product system: calm for grown-ups, lively for learners. */
:root {
  --ink: #18201f;
  --ink-soft: #34413f;
  --muted: #697471;
  --line: #d9ddda;
  --line-strong: #b9c1bd;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --cloud: #f1f4f2;
  --mint: #dcefe7;
  --teal: #087b6d;
  --teal-dark: #075c53;
  --coral: #f06445;
  --yellow: #f3ca52;
  --green: #55a46b;
  --blue: #5477d8;
  --violet: #7968c9;
  --shadow: 0 18px 48px rgba(29, 44, 40, 0.1);
  --shadow-soft: 0 8px 24px rgba(29, 44, 40, 0.07);
  --radius: 12px;
  --radius-lg: 20px;
  --content: 1240px;
  --display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
  --body: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
  font-family: var(--body);
}

html { scroll-padding-top: 5.5rem; }

body {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.role-parent { background: #f3f5f4; }
body.role-child { background: #f4f1e9; }

/* Product surfaces use solid color, typography, borders, and illustration for hierarchy. */
main, main * { background-image: none; }

h1, h2, h3, h4, strong { font-family: var(--display); }
h1, h2, h3, p { text-wrap: pretty; }

a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }

::selection { background: #bde3d6; color: var(--ink); }

.skip-link:focus {
  z-index: 1000;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
}

.topbar {
  min-height: 4.65rem;
  padding: 0.7rem max(1rem, calc((100vw - var(--content)) / 2));
  background: rgba(251, 250, 246, 0.96);
  border-bottom: 1px solid rgba(24, 32, 31, 0.11);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.role-parent .topbar { background: rgba(255,255,255,.96); }
.role-child .topbar { background: rgba(244,241,233,.96); }

.brand { min-height: 2.75rem; gap: .72rem; font-size: 1.05rem; letter-spacing: -.03em; }
.brand-mark {
  position: relative;
  width: 2.2rem;
  border-radius: 10px 10px 10px 3px;
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--yellow);
  font-weight: 900;
}
.brand-mark span { transform: rotate(-5deg); }
.brand-name { font-weight: 850; }
.brand-name > span, .footer-brand strong > span { color: var(--coral); }

.topnav { gap: clamp(.8rem, 2.2vw, 1.75rem); font-size: .9rem; }
.topnav a { position: relative; padding: .65rem 0; color: var(--ink-soft); font-weight: 650; }
.topnav a::after {
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: 160ms ease;
}
.topnav a:hover::after, .topnav a:focus-visible::after, .topnav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.topnav a:hover, .topnav a:focus-visible, .topnav a[aria-current="page"] { color: var(--ink); }

.nav-action { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.nav-action form { margin: 0; }
.nav-login { color: var(--ink-soft); font-size: .9rem; font-weight: 750; }

.nav-button, .primary-button, .secondary-button, .ghost-button, .danger-button {
  min-height: 2.85rem;
  border-radius: 9px;
  padding: .72rem 1.05rem;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 780;
  line-height: 1.1;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.primary-button {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 3px 3px 0 rgba(240, 100, 69, .65);
  color: #fff;
}
.primary-button:hover, .primary-button:focus-visible {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  box-shadow: 4px 4px 0 var(--yellow);
  transform: translate(-1px, -1px);
}
.secondary-button, .nav-button, .ghost-button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.secondary-button:hover, .secondary-button:focus-visible, .nav-button:hover, .nav-button:focus-visible, .ghost-button:hover, .ghost-button:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; gap: .45rem; border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 780; }
.text-link span { transition: transform 140ms ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(4px); }

.eyebrow {
  margin-bottom: .55rem;
  color: var(--teal-dark);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

input, select, textarea {
  min-height: 2.9rem;
  border-color: var(--line-strong);
  border-radius: 9px;
  padding: .72rem .8rem;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 6rem; }
label { color: var(--ink-soft); font-size: .84rem; font-weight: 720; }
input:hover, select:hover, textarea:hover { border-color: #8e9a95; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(8, 123, 109, .24);
  outline-offset: 2px;
}

.flash {
  position: relative;
  z-index: 3;
  width: min(760px, calc(100% - 2rem));
  margin: 1rem auto 0;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.flash.error { border-left-color: #b43f39; }

/* Public landing */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  width: min(var(--content), calc(100% - 2.5rem));
  min-height: min(780px, calc(100vh - 4.65rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.landing-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.25rem, 6.4vw, 6.7rem);
  font-weight: 820;
  letter-spacing: -.075em;
  line-height: .91;
}
.landing-hero-copy h1 em { color: var(--teal); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-lede { max-width: 660px; margin: 1.65rem 0 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.68; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; margin-top: 2rem; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin: 2.3rem 0 0; padding: 0; color: var(--muted); font-size: .82rem; font-weight: 700; list-style: none; }
.hero-assurances li::before { margin-right: .42rem; color: var(--teal); content: "✓"; font-weight: 900; }

.product-window {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  box-shadow: 18px 20px 0 #d9eae4, var(--shadow);
  transform: rotate(1.2deg);
}
.product-window-bar { display: flex; align-items: center; gap: .38rem; min-height: 2.7rem; padding: 0 .9rem; border-bottom: 1px solid var(--line); background: #f5f5f2; }
.product-window-bar span { width: .62rem; height: .62rem; border-radius: 50%; background: #c8cfcb; }
.product-window-bar span:first-child { background: var(--coral); }
.product-window-bar span:nth-child(2) { background: var(--yellow); }
.product-window-bar span:nth-child(3) { background: var(--green); }
.product-window-bar strong { margin-left: .45rem; color: var(--muted); font-size: .68rem; }
.product-window-body { display: grid; grid-template-columns: 92px minmax(0,1fr); min-height: 455px; }
.product-mini-nav { display: grid; align-content: start; gap: .6rem; padding: 1.1rem .65rem; border-right: 1px solid var(--line); background: #f6f7f4; }
.product-mini-nav > span:not(.mini-brand) { padding: .5rem .55rem; border-radius: 6px; color: var(--muted); font-size: .64rem; font-weight: 800; }
.product-mini-nav .is-active { background: var(--mint); color: var(--teal-dark) !important; }
.mini-brand { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0 auto 1rem; border-radius: 8px 8px 8px 2px; background: var(--ink); color: #fff; font-weight: 900; }
.product-preview-main { display: grid; align-content: start; gap: 1.25rem; padding: clamp(1rem, 2vw, 1.8rem); background: #fbfaf6; }
.preview-greeting { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.preview-greeting small, .preview-greeting strong { display: block; }
.preview-greeting small { color: var(--muted); font-size: .66rem; }
.preview-greeting strong { font-size: 1.2rem; }
.preview-greeting > span { padding: .35rem .55rem; border-radius: 999px; background: #fff0c7; color: #725711; font-size: .62rem; font-weight: 800; }
.preview-mission { display: grid; grid-template-columns: 1fr 120px; min-height: 225px; overflow: hidden; border: 1px solid #aaccc2; border-radius: 12px; background: #dcefe7; }
.preview-mission > div { padding: 1.35rem; }
.preview-mission small { color: var(--teal-dark); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.preview-mission strong { display: block; margin-top: .5rem; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.05; }
.preview-mission p { margin: .65rem 0 1rem; color: #3c6259; font-size: .76rem; }
.preview-mission .preview-action { display: inline-flex; align-items: center; min-height: 2rem; border: 0; border-radius: 6px; padding: .45rem .75rem; background: var(--ink); color: #fff; font-size: .65rem; font-weight: 800; }
.preview-mission img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.preview-rail { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); gap: .6rem; align-items: center; }
.preview-rail strong { font-size: .72rem; }
.preview-rail span { min-height: 4.7rem; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft); font-size: .67rem; font-weight: 800; }

.proof-strip { border-block: 1px solid var(--line); background: var(--ink); color: #fff; }
.proof-strip p { width: min(var(--content), calc(100% - 2.5rem)); margin: 0 auto; padding: 1.15rem 0; color: #cbd3d0; font-size: .9rem; text-align: center; }
.proof-strip strong { margin-right: .35rem; color: #fff; }

.future-section, .explore-section, .maker-feature, .parent-feature, .safety-section, .pricing-section, .faq-section {
  width: min(var(--content), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.future-section { padding-bottom: clamp(3rem, 6vw, 5rem); }
.explore-section { padding-top: clamp(3rem, 6vw, 5rem); }
.section-kicker { display: flex; align-items: center; gap: .75rem; }
.section-kicker > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: .65rem; font-weight: 850; }
.section-kicker .eyebrow { margin: 0; }
.future-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.65fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; margin-top: 1.6rem; }
.future-heading h2, .explore-intro h2, .maker-copy h2, .parent-copy h2, .safety-statement h2, .pricing-section h2, .faq-section h2, .closing-cta h2 {
  margin: 0;
  font-size: clamp(2.65rem, 5.2vw, 5.25rem);
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: .98;
}
.future-heading > p, .explore-intro > p, .maker-copy > p, .parent-copy > p, .safety-statement > p, .pricing-section > div > p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.future-pillars { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; margin-top: clamp(3rem,7vw,6rem); border-top: 1px solid var(--ink); }
.future-pillars article { display: grid; grid-template-columns: 74px 1fr; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.future-pillars article > span { color: var(--coral); font-family: Georgia, serif; font-size: 1.1rem; font-style: italic; }
.future-pillars h3 { margin: 0 0 .45rem; font-size: 1.22rem; }
.future-pillars p { margin: 0; color: var(--muted); font-size: .92rem; }

.explore-section { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: clamp(3rem,8vw,8rem); border-top: 1px solid var(--line); }
.explore-intro { position: sticky; top: 7rem; align-self: start; }
.explore-intro h2 { margin-top: 1.5rem; }
.explore-intro h2 em { color: var(--coral); font-family: Georgia, serif; font-weight: 500; }
.explore-intro > p { margin-top: 1.5rem; }
.experience-list { border-top: 1px solid var(--ink); }
.experience-list > a { display: grid; grid-template-columns: 34px 1fr 62px; gap: 1rem; align-items: center; padding: 1.6rem .2rem; border-bottom: 1px solid var(--line); transition: padding 150ms ease, background 150ms ease; }
.experience-list > a:hover, .experience-list > a:focus-visible { padding-inline: .8rem; background: #fff; }
.experience-index { color: var(--muted); font-size: .72rem; font-weight: 800; }
.experience-list small { color: var(--teal-dark); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.experience-list h3 { margin: .1rem 0 .25rem; font-size: 1.45rem; letter-spacing: -.025em; }
.experience-list p { margin: 0; color: var(--muted); font-size: .86rem; }
.experience-list > a > strong { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; font-size: 1rem; transform: rotate(-5deg); }
.experience-list > a:nth-child(2n) > strong { background: #fff0c7; transform: rotate(5deg); }
.experience-list > a:nth-child(3n) > strong { background: var(--mint); }

.maker-feature { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(460px,1.25fr); gap: clamp(3rem,8vw,8rem); align-items: center; }
.maker-feature, .safety-section { width: auto; max-width: none; padding-inline: max(1.25rem, calc((100vw - var(--content)) / 2)); background: #e5eee9; }
.maker-copy h2 { margin-top: .8rem; }
.maker-copy > p { margin-top: 1.3rem; }
.maker-copy ul { display: grid; gap: .55rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.maker-copy li::before { margin-right: .55rem; color: var(--teal); content: "●"; font-size: .55rem; }
.book-preview { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 460px; border: 1px solid rgba(24,32,31,.28); border-radius: 8px 18px 18px 8px; background: #fff; box-shadow: 14px 16px 0 rgba(24,32,31,.11); transform: rotate(1deg); }
.book-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 2rem; border-radius: 7px 0 0 7px; background: #1f3659; color: #fff; }
.book-cover small { color: #bdd5ef; font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.book-cover strong { position: relative; z-index: 1; max-width: 220px; font-family: Georgia, serif; font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; line-height: .95; }
.book-cover > span { position: relative; z-index: 1; color: #bdd5ef; font-size: .72rem; }
.cover-orbit { position: absolute; right: -4rem; bottom: 2rem; width: 14rem; height: 14rem; border: 24px solid rgba(243,202,82,.8); border-radius: 50%; box-shadow: 0 0 0 22px rgba(240,100,69,.48); }
.book-page { display: flex; flex-direction: column; padding: clamp(2rem,5vw,4.5rem); border-left: 1px solid var(--line); background: #fffefa; }
.book-page > span { color: var(--coral); font-family: Georgia, serif; font-size: .85rem; font-style: italic; }
.book-page h3 { margin: 1.4rem 0 2rem; font-family: Georgia, serif; font-size: clamp(1.8rem,3vw,2.7rem); font-weight: 500; line-height: 1; }
.book-page p { color: #444c49; font-family: Georgia, serif; line-height: 1.8; }
.book-page small { margin-top: auto; color: var(--muted); }

.parent-feature { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); gap: clamp(3rem,8vw,8rem); align-items: center; }
.parent-console-preview { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.parent-console-preview header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.35rem; border-bottom: 1px solid var(--line); }
.parent-console-preview header small, .parent-console-preview header strong { display: block; }
.parent-console-preview header small { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.parent-console-preview header strong { margin-top: .25rem; font-size: 1.18rem; }
.parent-console-preview header > span { align-self: center; padding: .35rem .55rem; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: .68rem; font-weight: 800; }
.console-summary { display: grid; grid-template-columns: repeat(3,1fr); background: #f5f6f4; }
.console-summary > div { padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.console-summary > div:last-child { border-right: 0; }
.console-summary small, .console-summary strong { display: block; }
.console-summary small { color: var(--muted); font-size: .65rem; }
.console-summary strong { margin-top: .25rem; font-size: .95rem; }
.parent-console-preview article { display: grid; grid-template-columns: 42px 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem 1.35rem; border-top: 1px solid var(--line); }
.avatar-dot { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #dcefe7; color: var(--teal-dark); font-weight: 900; }
.avatar-dot.alt { background: #fff0c7; color: #735713; }
.parent-console-preview article strong, .parent-console-preview article span { display: block; }
.parent-console-preview article span { color: var(--muted); font-size: .72rem; }
.parent-console-preview article progress { display: block; width: 100%; height: 5px; margin: .5rem 0 0; border: 0; border-radius: 5px; overflow: hidden; background: #e7eae8; }
.parent-console-preview article progress::-webkit-progress-bar { background: #e7eae8; }
.parent-console-preview article progress::-webkit-progress-value { background: var(--teal); }
.parent-console-preview article progress::-moz-progress-bar { background: var(--teal); }
.parent-console-preview article .preview-action { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: max-content; min-height: 2.1rem; border: 1px solid var(--line-strong); border-radius: 6px; padding: .35rem .55rem; background: #fff; font-size: .67rem; font-weight: 800; white-space: nowrap; }
.parent-copy h2 { margin-top: 1.5rem; }
.parent-copy > p { margin-top: 1.35rem; }
.parent-capabilities { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 1.3rem; margin-top: 1.7rem; border-top: 1px solid var(--line); }
.parent-capabilities span { padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .8rem; font-weight: 750; }
.parent-capabilities span::before { margin-right: .5rem; color: var(--teal); content: "✓"; }

.safety-section { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: clamp(3rem,8vw,8rem); background: var(--ink); color: #fff; }
.safety-statement .eyebrow { color: #8dd5c2; }
.safety-statement > p { margin-top: 1.4rem; color: #bdc7c3; }
.safety-statement .text-link { margin-top: 1rem; border-bottom-color: #fff; color: #fff; }
.safety-ledger { border-top: 1px solid #58625f; }
.safety-ledger > div { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid #58625f; }
.safety-ledger > div > strong { color: #8dd5c2; font-size: .75rem; }
.safety-ledger span { color: #bdc7c3; font-size: .88rem; }
.safety-ledger b { display: block; margin-bottom: .25rem; color: #fff; font-size: 1rem; }

.pricing-section { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(360px,1.1fr); column-gap: clamp(3rem,8vw,8rem); row-gap: 0; align-items: start; border-bottom: 1px solid var(--line); }
.pricing-section > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
.pricing-section h2 { margin-top: .8rem; }
.pricing-section > div > p { max-width: 530px; margin-top: 1.2rem; }
.price-line { display: grid; grid-column: 2; grid-row: 1; grid-template-columns: minmax(0,1fr) auto; gap: .35rem 1rem; align-items: center; align-self: start; padding: 1.35rem; border: 1px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 8px 8px 0 var(--yellow); }
.price-line > span { grid-column: 1; font-weight: 850; }
.price-line > strong { grid-column: 1; font-size: 2.7rem; letter-spacing: -.05em; }
.price-line > strong small { color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: 0; }
.price-line > em { grid-column: 1; color: var(--muted); font-size: .8rem; }
.price-line .primary-button { grid-column: 2; grid-row: 1 / span 3; }
.pricing-section > ul { display: grid; grid-column: 2; grid-row: 2; grid-template-columns: repeat(2,1fr); gap: .65rem 1.2rem; margin: 1.35rem 0 0; padding: 0; align-self: start; list-style: none; transform: none; }
.pricing-section > ul li { color: var(--ink-soft); font-size: .78rem; }
.pricing-section > ul li::before { margin-right: .4rem; color: var(--teal); content: "✓"; }

.faq-section { display: grid; grid-template-columns: minmax(260px,.6fr) minmax(0,1.4fr); gap: clamp(3rem,8vw,8rem); }
.faq-section h2 { margin-top: .8rem; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.35rem 3rem 1.35rem 0; cursor: pointer; font-family: var(--display); font-size: 1rem; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 1.2rem; right: .5rem; content: "+"; color: var(--teal); font-size: 1.5rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 700px; margin: -.45rem 0 1.4rem; color: var(--muted); }

.closing-cta { padding: clamp(5rem,12vw,10rem) 1.25rem; background: var(--coral); color: #fff; text-align: center; }
.closing-cta .eyebrow { color: #fff; }
.closing-cta h2 { max-width: 900px; margin: .7rem auto 2rem; font-size: clamp(3rem,7vw,7rem); }
.closing-cta .primary-button { border-color: #fff; background: #fff; box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }

/* Account and legal flows */
.auth-band { min-height: calc(100vh - 4.65rem); padding: clamp(2.5rem,7vw,6rem) 1.25rem; background: #f1f4f2; }
.login-split { gap: 1rem; width: min(900px,100%); }
.login-heading { grid-column: 1/-1; max-width: 760px; margin-bottom: 1rem; }
.login-heading h1 { margin: 0; font-size: clamp(2.7rem,6vw,4.8rem); letter-spacing: -.06em; line-height: .96; }
.login-heading > p:last-child { margin: .7rem 0 0; color: var(--muted); }
.auth-card {
  gap: 1rem;
  width: min(540px,100%);
  padding: clamp(1.5rem,4vw,2.5rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.login-split .auth-card { width: auto; }
.child-login-card { border-top-color: var(--coral); }
.auth-card h1, .auth-card h2 { margin: -.2rem 0 .4rem; font-size: clamp(2rem,5vw,3.2rem); letter-spacing: -.05em; line-height: 1; }
.auth-card.wide { width: min(760px,100%); }
.small-copy { color: var(--muted); font-size: .82rem; }
.small-copy a, .consent-list a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.consent-list { gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #f7f8f6; }
.form-error { border-radius: 7px; border-left: 4px solid #b43f39; background: #fff3f1; }

.legal-band { background: var(--paper); }
.legal-shell { max-width: 840px; border: 0; box-shadow: none; }
.legal-shell h1 { font-size: clamp(2.5rem,6vw,4.8rem); letter-spacing: -.06em; }

/* Parent console */
.dashboard-band { min-height: calc(100vh - 4.65rem); background: #f3f5f4; }
.dashboard-console { width: min(var(--content),calc(100% - 2rem)); gap: .9rem; padding: 2rem 0 5rem; }
.console-top { align-items: center; padding: .5rem 0 1.25rem; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.console-top h1 { font-size: clamp(2rem,4vw,3.4rem); letter-spacing: -.05em; }
.console-top p:last-child { margin-top: .3rem; font-size: .82rem; }
.console-tabs { position: sticky; top: 4.65rem; z-index: 5; width: 100%; gap: .2rem; padding: .4rem 0; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: rgba(243,245,244,.96); backdrop-filter: blur(14px); scrollbar-width: none; }
.console-tabs::-webkit-scrollbar { display: none; }
.console-tabs a { flex: 0 0 auto; padding: .65rem .8rem; border-radius: 7px; font-size: .82rem; }
.console-tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.console-tabs a:hover, .console-tabs a:focus-visible { background: #e5e9e7; color: var(--ink); }
.console-tabs a[aria-current="page"]:hover { background: var(--ink); color: #fff; }
.console-panel { gap: 1.2rem; padding: clamp(1.1rem,2.5vw,2rem); border-color: var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(24,32,31,.03); }
.panel-title-row { padding-bottom: 1rem; }
.panel-title-row h2 { font-size: clamp(1.35rem,3vw,2rem); letter-spacing: -.035em; }
.summary-strip, .billing-overview { border-radius: 9px; }
.empty-console { padding: 1.3rem; border-style: dashed; background: #f8f9f7; }
.child-editor, .activity-review-child { border-radius: 9px; box-shadow: none; }
.child-editor > summary, .activity-review-child > summary { min-height: 4.25rem; background: #f7f8f6; }
.child-editor > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; }
.child-summary-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--teal-dark) !important; font-size: .9rem !important; font-weight: 900 !important; }
.child-summary-name strong, .child-summary-name small, .child-summary-control strong, .child-summary-control small { display: block; }
.child-summary-name small, .child-summary-control small { color: var(--muted); font-size: .66rem; }
.child-summary-control { text-align: right; }
.child-summary-control strong { font-size: .78rem; }
.child-summary-action { padding: .35rem .5rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink) !important; font-size: .65rem !important; font-weight: 850 !important; }
.settings-form { border-radius: 9px; background: #fff; box-shadow: none; }
.control-stack > div { background: #f7f8f6; }
.topic-strip label { border-radius: 7px; background: #f6f7f5; }
.topic-strip label:has(input:checked) { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }
.history-switch > span { flex: 0 0 auto; }
.family-overview { display: grid; gap: 1.25rem; }
.overview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0 1.6rem; }
.overview-heading h2 { margin: 0; font-size: clamp(2rem,4vw,3.25rem); letter-spacing: -.055em; line-height: 1; }
.overview-heading p:last-child { margin: .5rem 0 0; color: var(--muted); }
.health-status { padding: .45rem .7rem; border: 1px solid #acd1c3; border-radius: 999px; background: var(--mint); color: var(--teal-dark); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.health-status.needs-attention { border-color: #e0c274; background: #fff2c9; color: #6c5311; }
.overview-metrics { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.overview-metrics > div { padding: 1.15rem; border-right: 1px solid var(--line); }
.overview-metrics > div:last-child { border-right: 0; }
.overview-metrics span, .overview-metrics strong, .overview-metrics small { display: block; }
.overview-metrics span { color: var(--muted); font-size: .68rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.overview-metrics strong { margin: .3rem 0; font-size: 1.7rem; letter-spacing: -.04em; }
.overview-metrics small { color: var(--muted); font-size: .68rem; }
.overview-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 1rem; align-items: start; }
.overview-children, .overview-next, .overview-empty { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.overview-section-title { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.overview-section-title h3, .overview-next h3 { margin: 0; font-size: 1rem; }
.overview-section-title a { color: var(--teal-dark); font-size: .75rem; font-weight: 800; }
.overview-child-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; gap: 1rem; align-items: center; padding: 1.15rem; border-bottom: 1px solid var(--line); }
.overview-child-row:last-child { border-bottom: 0; }
.overview-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--teal-dark); font-weight: 900; }
.overview-child-main > div { display: flex; align-items: baseline; gap: .6rem; }
.overview-child-main > div > span { color: var(--teal-dark); font-size: .65rem; font-weight: 800; }
.overview-child-main p { margin: .18rem 0; color: var(--muted); font-size: .72rem; }
.overview-time { display: block; width: min(230px,100%); height: 4px; overflow: hidden; border: 0; border-radius: 4px; background: #e5e9e7; }
.overview-time::-webkit-progress-bar { background: #e5e9e7; }
.overview-time::-webkit-progress-value { background: var(--teal); }
.overview-time::-moz-progress-bar { background: var(--teal); }
.overview-child-main small { color: var(--muted); font-size: .62rem; }
.overview-child-signals { display: flex; gap: .8rem; }
.overview-child-signals span { color: var(--muted); font-size: .65rem; text-align: center; }
.overview-child-signals strong { display: block; color: var(--ink); font-size: .85rem; }
.overview-child-row .secondary-button { min-height: 2.3rem; padding: .5rem .65rem; font-size: .7rem; }
.overview-next { overflow: hidden; }
.overview-next h3 { padding: 1rem 1.05rem; border-bottom: 1px solid var(--line); }
.overview-next a { display: grid; gap: .15rem; padding: 1rem 1.05rem; border-bottom: 1px solid var(--line); }
.overview-next a:last-child { border-bottom: 0; }
.overview-next a:hover { background: #f7f8f6; }
.overview-next a span { color: var(--teal-dark); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.overview-next a strong { font-size: .82rem; }
.overview-empty { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 1.3rem; }
.overview-empty > div { padding: 1rem; border-right: 1px solid var(--line); }
.overview-empty > div:nth-child(3) { border-right: 0; }
.overview-empty > div > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-bottom: .7rem; border-radius: 50%; background: var(--mint); color: var(--teal-dark); font-size: .68rem; font-weight: 900; }
.overview-empty p { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; }
.overview-empty > .primary-button { grid-column: 1/-1; justify-self: start; }

/* Allowlist-protected operations console */
.operations-band { min-height: calc(100vh - 4.65rem); padding: 2rem 1rem 5rem; background: #eef1f0; }
.operations-shell { display: grid; gap: 1rem; width: min(var(--content),100%); margin: 0 auto; }
.operations-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--line-strong); }
.operations-header h1 { margin: 0; font-size: clamp(2.4rem,5vw,4.2rem); letter-spacing: -.06em; line-height: .95; }
.operations-header p:last-child { margin: .55rem 0 0; color: var(--muted); }
.operations-header > span { padding: .45rem .65rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--muted); font-size: .68rem; font-weight: 800; }
.operations-metrics { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.operations-metrics > div { padding: 1.2rem; border-right: 1px solid var(--line); }
.operations-metrics > div:last-child { border-right: 0; }
.operations-metrics span, .operations-metrics strong, .operations-metrics small { display: block; }
.operations-metrics span { color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.operations-metrics strong { margin: .25rem 0; font-size: 1.8rem; letter-spacing: -.04em; }
.operations-metrics small { color: var(--muted); font-size: .68rem; }
.operations-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(290px,.7fr); gap: 1rem; }
.operations-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.operations-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.operations-panel > header h2 { margin: 0; font-size: 1rem; }
.operations-panel > header .eyebrow { margin-bottom: .2rem; font-size: .6rem; }
.operations-panel > header > span { color: var(--muted); font-size: .68rem; }
.usage-chart { display: grid; grid-template-columns: repeat(7,1fr); gap: 1rem; height: 260px; padding: 1.5rem; }
.usage-chart > div { display: grid; grid-template-rows: 1fr auto auto; gap: .25rem; min-width: 0; text-align: center; }
.usage-chart progress { align-self: end; width: 100%; height: 140px; border: 0; background: #edf0ee; writing-mode: vertical-lr; direction: rtl; }
.usage-chart progress::-webkit-progress-bar { background: #edf0ee; }
.usage-chart progress::-webkit-progress-value { background: var(--teal); }
.usage-chart progress::-moz-progress-bar { background: var(--teal); }
.usage-chart strong { font-size: .68rem; }
.usage-chart small { color: var(--muted); font-size: .62rem; }
.check-list { display: grid; }
.check-list > div { display: grid; grid-template-columns: 10px 1fr auto; gap: .65rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.check-list > div:last-child { border-bottom: 0; }
.check-list strong { font-size: .78rem; }
.check-list small { color: var(--muted); font-size: .68rem; text-align: right; }
.check-dot { width: 8px; height: 8px; border-radius: 50%; background: #cc8a32; }
.check-dot.ok { background: var(--green); }
.family-panel { grid-column: 1; }
.operations-table-wrap { overflow-x: auto; }
.operations-table { width: 100%; min-width: 650px; border-collapse: collapse; }
.operations-table th, .operations-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .72rem; text-align: left; }
.operations-table th { color: var(--muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.operations-table td strong, .operations-table td small { display: block; }
.operations-table td strong { color: var(--ink); font-size: .76rem; }
.operations-table td small { color: var(--muted); }
.safety-panel { grid-column: 2; grid-row: 2; }
.safety-signals { display: grid; grid-template-columns: repeat(2,1fr); }
.safety-signals > div { padding: 1.2rem; border-right: 1px solid var(--line); }
.safety-signals > div:nth-child(2) { border-right: 0; }
.safety-signals strong, .safety-signals span { display: block; }
.safety-signals strong { font-size: 1.6rem; }
.safety-signals span { color: var(--muted); font-size: .68rem; }
.safety-signals p { grid-column: 1/-1; margin: 0; padding: 1rem 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }

/* Child learning surfaces */
.learning-home { min-height: calc(100vh - 4.65rem); background: #f4f1e9; }
.learning-shell { display: grid; gap: 2rem; width: min(var(--content),calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.5rem,4vw,3rem) 0 5rem; }
.learning-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-strong); }
.learning-welcome h1 { margin: 0; font-size: clamp(2.5rem,5.8vw,5rem); letter-spacing: -.065em; line-height: .96; }
.learning-welcome > div > p:last-child { margin: .55rem 0 0; color: var(--muted); }
.learner-status { display: grid; grid-template-columns: repeat(3,1fr); min-width: 280px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.learner-status > div { padding: .75rem .9rem; border-right: 1px solid var(--line); text-align: center; }
.learner-status > div:last-child { border-right: 0; }
.learner-status span, .learner-status strong { display: block; }
.learner-status span { color: var(--muted); font-size: .6rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.learner-status strong { margin-top: .15rem; font-size: 1.25rem; }
.mission-feature { display: grid; grid-template-columns: minmax(0,1fr) 290px; overflow: hidden; border: 1px solid #a9ccc1; border-radius: 15px; background: var(--mint); box-shadow: 8px 8px 0 rgba(8,123,109,.13); }
.mission-copy { padding: clamp(1.5rem,4vw,3rem); }
.mission-label { color: var(--teal-dark); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mission-copy h2 { max-width: 760px; margin: .5rem 0; font-size: clamp(2rem,4.8vw,4.2rem); letter-spacing: -.06em; line-height: .98; }
.mission-copy > p { max-width: 680px; margin: .8rem 0 1.4rem; color: #355e55; font-size: 1rem; }
.mission-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.level-track { max-width: 560px; margin-top: 2rem; }
.level-track > div { display: flex; justify-content: space-between; gap: 1rem; color: #355e55; font-size: .65rem; }
.level-track progress { display: block; width: 100%; height: 7px; margin: .35rem 0 0; overflow: hidden; border: 0; border-radius: 7px; background: rgba(255,255,255,.72); }
.level-track progress::-webkit-progress-bar { background: rgba(255,255,255,.72); }
.level-track progress::-webkit-progress-value { background: var(--teal); }
.level-track progress::-moz-progress-bar { background: var(--teal); }
.mission-helper { display: grid; grid-template-rows: minmax(0,1fr) auto auto; padding: 1.1rem; border-left: 1px solid #a9ccc1; background: rgba(255,255,255,.54); }
.mission-helper img { width: 100%; height: 100%; min-height: 210px; border-radius: 10px; object-fit: cover; }
.mission-helper > div { padding: .8rem .25rem .25rem; }
.mission-helper span, .mission-helper strong, .mission-helper small { display: block; }
.mission-helper span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.mission-helper strong { font-size: 1.1rem; }
.mission-helper small { color: var(--muted); }
.mission-helper > a { justify-self: start; margin: .5rem .25rem 0; color: var(--teal-dark); font-size: .7rem; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.learning-section, .learning-progress { display: grid; gap: 1.3rem; padding-top: 1rem; }
.learning-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.learning-section-head h2 { margin: 0; font-size: clamp(2rem,4vw,3.3rem); letter-spacing: -.055em; line-height: 1; }
.learning-section-head > div:first-child > p:last-child { margin: .5rem 0 0; color: var(--muted); }
.time-chip { flex: 0 0 auto; padding: .65rem .85rem; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
.time-chip span, .time-chip strong { display: block; }
.time-chip span { color: var(--muted); font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.time-chip strong { font-size: .78rem; }
.experience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.experience-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; min-height: 260px; overflow: hidden; padding: 1.25rem; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; transition: transform 150ms ease, box-shadow 150ms ease; }
.experience-card:hover { box-shadow: 5px 6px 0 rgba(24,32,31,.12); transform: translate(-2px,-2px); }
.experience-card.is-featured { grid-column: span 2; grid-template-columns: 82px 1fr; grid-template-rows: 1fr auto; background: #fff; }
.experience-card.is-featured .experience-mark { grid-row: 1/3; align-self: start; width: 4.6rem; height: 4.6rem; font-size: 1.3rem; }
.experience-card small { color: var(--teal-dark); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.experience-card h3 { margin: .15rem 0 .35rem; font-size: 1.35rem; letter-spacing: -.025em; }
.experience-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.experience-card > a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .78rem; font-weight: 850; }
.experience-card > a span { font-size: 1.1rem; }
.experience-mark { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 1px solid rgba(24,32,31,.15); border-radius: 50%; background: var(--mint); font-family: var(--display); font-weight: 900; transform: rotate(-4deg); }
.tone-yellow .experience-mark { background: #fff0c1; }
.tone-coral .experience-mark { background: #ffe0d9; }
.tone-blue .experience-mark { background: #dee6ff; }
.learning-progress { margin-top: 2rem; padding: clamp(1.3rem,3vw,2rem); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.collection-progress { flex: 0 0 180px; }
.collection-progress strong, .collection-progress span { display: block; }
.collection-progress strong { font-size: 1.3rem; }
.collection-progress span { color: var(--muted); font-size: .67rem; }
.collection-progress progress { display: block; width: 100%; height: 6px; margin: .4rem 0 0; overflow: hidden; border: 0; border-radius: 6px; background: #e7eae8; }
.collection-progress progress::-webkit-progress-bar { background: #e7eae8; }
.collection-progress progress::-webkit-progress-value { background: var(--coral); }
.collection-progress progress::-moz-progress-bar { background: var(--coral); }
.badge-collection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.collection-badge { display: grid; grid-template-columns: 58px 1fr; gap: .8rem; align-items: center; min-height: 120px; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fafbf9; }
.collection-badge.is-locked { opacity: .52; filter: grayscale(.75); }
.collection-medal { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 3px 3px 0 rgba(24,32,31,.16); font-weight: 900; }
.badge-theme-ai .collection-medal, .badge-theme-prompt .collection-medal { background: #dee6ff; }
.badge-theme-shield .collection-medal, .badge-theme-lab .collection-medal { background: var(--mint); }
.badge-theme-word .collection-medal, .badge-theme-story .collection-medal { background: #ffe0d9; }
.collection-badge small, .collection-badge strong { display: block; }
.collection-badge small { color: var(--teal-dark); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.collection-badge strong { margin-top: .08rem; font-size: .85rem; }
.collection-badge p { margin: .25rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.35; }
.progress-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.progress-summary strong { color: var(--ink); }
.helper-onboarding { display: grid; gap: 2rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; }
.onboarding-intro { max-width: 760px; }
.onboarding-intro h1 { margin: 0; font-size: clamp(2.7rem,6vw,5.4rem); letter-spacing: -.065em; line-height: .95; }
.onboarding-intro > p:last-child { color: var(--muted); font-size: 1rem; }
.helper-choice-scroll { gap: .8rem; }
.helper-card { position: relative; min-width: min(250px,72vw); padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: #fafbf9; }
.helper-card.is-selected, .helper-card:has(input:checked) { border: 2px solid var(--teal); background: #f3fbf8; box-shadow: 5px 5px 0 var(--mint); }
.helper-card .helper-portrait { border-radius: 8px; }
.helper-card p { margin: .35rem 0 0; color: var(--muted); font-size: .72rem; }
.helper-check { position: absolute; top: 1rem; right: 1rem; display: none; padding: .3rem .45rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .55rem; font-weight: 850; }
.helper-card:has(input:checked) .helper-check { display: block; }
.kid-room-band, .word-builder-band, .word-game-band, .word-adventure-band, .number-quest-band, .fact-lab-band, .story-starter-band, .idea-studio-band, .quiet-corner-band, .course-band, .coach-band, .coach-workspace-band, .break-band {
  min-height: calc(100vh - 4.65rem);
  background: #f4f1e9;
}
.kid-room-shell, .word-builder-shell, .word-game-shell, .word-adventure-shell, .number-quest-shell, .fact-lab-shell, .story-starter-shell, .idea-studio-shell, .quiet-corner-shell, .course-shell, .coach-shell, .coach-workspace {
  width: min(var(--content),calc(100% - 2rem));
  margin-inline: auto;
}
.kid-hero, .word-game-hero, .number-quest-hero, .fact-lab-hero, .story-hero, .idea-hero, .quiet-hero, .course-hero {
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kid-hero h1, .word-game-hero h1, .number-quest-hero h1, .fact-lab-hero h1, .story-hero h1, .idea-hero h1, .quiet-hero h1, .course-hero h1 {
  letter-spacing: -.055em;
}
.kid-room-limit, .story-hero-badge, .idea-hero-badge { border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; box-shadow: none; }
.kid-today { overflow: hidden; border: 1px solid #a8cbc0; border-radius: 14px; background: #dcefe7; box-shadow: 7px 7px 0 rgba(8,123,109,.14); }
.today-main, .today-helper { background: transparent; }
.kid-topic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.kid-topic-grid article { position: relative; min-height: 230px; padding: 1.2rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; box-shadow: none; transition: transform 150ms ease, box-shadow 150ms ease; }
.kid-topic-grid article:hover { box-shadow: 5px 5px 0 rgba(24,32,31,.12); transform: translate(-2px,-2px); }
.kid-topic-grid article > span { color: var(--teal-dark); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.kid-topic-grid article > strong { font-size: 1.3rem; }
.progress-panel { padding: clamp(1.2rem,3vw,2rem); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.kid-badge { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: none; }
.kid-badge.is-locked { opacity: .58; filter: grayscale(.65); }
.kid-badge-medal { box-shadow: 3px 3px 0 rgba(24,32,31,.14); }
.helper-fab { box-shadow: 5px 6px 0 rgba(24,32,31,.18); }
.helper-drawer { border-left: 1px solid var(--line-strong); box-shadow: -14px 0 40px rgba(24,32,31,.16); }

.word-game-stage, .number-quest-stage, .fact-lab-stage, .story-library, .story-editor, .idea-home, .idea-workspace, .quiet-mode-card, .course-mission, .coach-shell {
  border-color: var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.word-game-stats, .number-quest-stats, .fact-lab-stats, .story-stats, .idea-stats { border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.story-question-card, .idea-question-card { border-left: 4px solid var(--coral); border-radius: 0 8px 8px 0; background: #f7f8f6; }
.story-stepper, .idea-stepper { border-bottom-color: var(--line); background: #fff; }
.story-stepper button[aria-current="step"], .idea-stepper button[aria-current="step"] { color: var(--teal-dark); }
.story-stepper button[aria-current="step"] span, .idea-stepper button[aria-current="step"] span { background: var(--ink); color: #fff; }
.story-field-grid, .story-outline-grid { gap: .9rem; }
.story-chapter-shell { border-color: var(--line); border-radius: 9px; }
.story-cover-preview { border-radius: 8px; }
.story-workspace { grid-template-columns: 255px minmax(0,1fr); gap: .85rem; }
.story-library { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); align-self: start; }
.story-editor { min-width: 0; }
.story-big-idea { max-width: 760px; color: var(--ink); font-size: .9rem; }
.story-big-idea textarea { min-height: 145px; padding: 1rem; border: 2px solid var(--line-strong); background: #fff; font-size: 1.05rem; line-height: 1.6; }
.story-options { margin-top: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fafbf9; }
.story-options > summary { padding: .8rem 1rem; cursor: pointer; color: var(--ink-soft); font-size: .78rem; font-weight: 850; }
.story-options > p { margin: -.15rem 1rem .8rem; color: var(--muted); font-size: .72rem; }
.story-options > .story-field-grid, .story-options > .story-outline-grid, .story-options > label { margin: 0; padding: 0 1rem 1rem; }
.story-arc { margin-top: 1.2rem; }
.story-step-panel { padding: clamp(1rem,3vw,2rem); }
.story-prompt-row { margin-top: 1rem; }
.story-draft-tools { padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #f7f8f6; }
.story-revision-tool { border-radius: 8px; background: #f7f8f6; }
.story-chapter-editor > textarea { min-height: 460px; font-family: Georgia,"Times New Roman",serif; font-size: 1rem; line-height: 1.8; }
.story-export-card { border-radius: 9px; background: #f7f8f6; }
.idea-workspace { grid-template-columns: 240px minmax(0,1fr); gap: .85rem; }
.idea-gallery { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.idea-home, .idea-editor { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.idea-mode-launcher { grid-template-columns: repeat(2,minmax(0,1fr)); }
.idea-mode-launch { min-height: 190px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fafbf9; box-shadow: none; }
.idea-mode-launch:hover { border-color: var(--ink); box-shadow: 4px 5px 0 rgba(24,32,31,.12); transform: translate(-1px,-1px); }
.idea-big-prompt { max-width: 760px; color: var(--ink); font-size: .9rem; }
.idea-big-prompt textarea { min-height: 145px; padding: 1rem; border: 2px solid var(--line-strong); font-size: 1.05rem; line-height: 1.6; }
.idea-options { margin-top: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fafbf9; }
.idea-options > summary { padding: .8rem 1rem; cursor: pointer; color: var(--ink-soft); font-size: .78rem; font-weight: 850; }
.idea-options > label, .idea-options > .idea-polish-box { padding: 0 1rem 1rem; }
.idea-mode-panel .idea-mode-intro { padding: .2rem 1rem .8rem; }
.idea-mode-panel .idea-detail-grid { padding: 0 1rem 1rem; }
.idea-form { grid-template-columns: minmax(0,1fr) minmax(260px,340px); gap: 1rem; }
.idea-preview { position: sticky; top: 6rem; align-self: start; }
.idea-preview-card { border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 6px 7px 0 rgba(24,32,31,.12); }
.idea-delete-box { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.idea-delete-box summary { padding: .8rem 0; color: #88403b; cursor: pointer; font-size: .72rem; font-weight: 800; }
.idea-delete-box p { color: var(--muted); font-size: .72rem; }
.number-quest-grid, .fact-lab-grid, .word-game-grid { gap: .85rem; }
.number-quest-side, .fact-lab-side, .word-game-side { border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: none; }
.number-quest-helper, .fact-lab-helper, .word-game-helper { border-radius: 9px; background: var(--mint); }
.number-world-map, .fact-world-map { gap: .45rem; }
.number-world-map button, .fact-world-map button { border: 1px solid var(--line); border-radius: 8px; background: #fafbf9; box-shadow: none; }
.number-world-map button:hover, .fact-world-map button:hover, .number-world-map button[aria-current="true"], .fact-world-map button[aria-current="true"] { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }
.number-world-map button.is-locked { opacity: .5; background: #f1f2f0; }
.number-start-panel, .fact-start-panel { border: 1px solid var(--line); border-radius: 10px; background: #f7f8f6; }
.number-machine, .fact-lab-machine { border-radius: 9px; background: var(--ink); }
.number-machine span, .fact-lab-machine span { border-radius: 6px; background: #fff; color: var(--ink); }
.number-question-card, .fact-question-card, .fact-research-card, .fact-fact-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: none; }
.number-playfield button, .fact-choice-grid button { border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; box-shadow: none; }
.number-playfield button:hover, .fact-choice-grid button:hover { border-color: var(--ink); transform: translateY(-1px); }
.fraction-parts-1 { --fraction-parts: 1; } .fraction-parts-2 { --fraction-parts: 2; } .fraction-parts-3 { --fraction-parts: 3; }
.fraction-parts-4 { --fraction-parts: 4; } .fraction-parts-5 { --fraction-parts: 5; } .fraction-parts-6 { --fraction-parts: 6; }
.fraction-parts-7 { --fraction-parts: 7; } .fraction-parts-8 { --fraction-parts: 8; } .fraction-parts-9 { --fraction-parts: 9; }
.fraction-parts-10 { --fraction-parts: 10; } .fraction-parts-11 { --fraction-parts: 11; } .fraction-parts-12 { --fraction-parts: 12; }
.grid-cols-1 { --grid-cols: 1; } .grid-cols-2 { --grid-cols: 2; } .grid-cols-3 { --grid-cols: 3; }
.grid-cols-4 { --grid-cols: 4; } .grid-cols-5 { --grid-cols: 5; } .grid-cols-6 { --grid-cols: 6; }
.grid-cols-7 { --grid-cols: 7; } .grid-cols-8 { --grid-cols: 8; } .grid-cols-9 { --grid-cols: 9; }
.grid-cols-10 { --grid-cols: 10; } .grid-cols-11 { --grid-cols: 11; } .grid-cols-12 { --grid-cols: 12; }
.activity-ai-panel { border: 1px solid #b7cec6; border-radius: 9px; background: #eef7f3; box-shadow: none; }
.number-quest-progress, .fact-lab-progress { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; scrollbar-width: thin; }
.number-quest-progress > div, .fact-lab-progress > div { min-width: 135px; }
.course-hero { margin-top: 1.5rem; padding: 1.5rem 0; }
.course-progress-panel { border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: none; }
.course-steps { display: grid; gap: .75rem; }
.course-step { grid-template-columns: 110px minmax(0,1fr) minmax(190px,.65fr) auto; gap: 1rem; align-items: center; padding: 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: none; }
.course-step.is-locked { opacity: .55; background: #f1f2f0; }
.course-step.is-complete { border-left: 4px solid var(--teal); }
.course-status { border-right: 1px solid var(--line); }
.course-tip { padding: .75rem; border: 0; border-radius: 8px; background: #f7f8f6; }

/* The coach is a focused workspace, not a novelty chat bubble. */
.coach-workspace { min-height: calc(100vh - 4.65rem); padding-block: 1.4rem 2.5rem; }
.coach-header { border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: none; }
.coach-chat-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; box-shadow: none; }
.coach-messages { background: #f7f8f6; }
.coach-message { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.coach-message.assistant { background: #fff; }
.coach-message.child { border-color: var(--teal-dark); background: var(--teal-dark); color: #fff; }
.coach-message.child * { color: inherit; }
.coach-input { border-top: 1px solid var(--line); background: #fff; box-shadow: none; }
.coach-more-panel, .coach-mode-row, .coach-attachment { border: 1px solid var(--line); background: #f7f8f6; box-shadow: none; }
.coach-more-panel::after { display: none; }

.kid-dock { display: none; }
.break-shell { display: grid; justify-items: center; width: min(620px,calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem,10vw,8rem) 0; text-align: center; }
.break-shell img { width: 150px; aspect-ratio: 1; margin-bottom: 1rem; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; box-shadow: 7px 7px 0 var(--yellow); }
.break-shell h1 { margin: 0; font-size: clamp(2.6rem,7vw,5rem); letter-spacing: -.06em; line-height: .95; }
.break-shell > p:not(.eyebrow) { max-width: 540px; color: var(--ink-soft); font-size: 1.05rem; }
.break-actions { display: grid; gap: .8rem; justify-items: center; margin-top: 1rem; }
.break-actions span { color: var(--muted); font-size: .8rem; }

/* Footer */
.footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding: 3rem max(1.25rem,calc((100vw - var(--content))/2)); border-top: 1px solid var(--line); background: #f4f4f0; color: var(--ink); }
.footer-brand strong { font-size: 1.2rem; }
.footer-brand p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.footer nav { display: flex; gap: 1.2rem; font-size: .78rem; font-weight: 700; }
.footer nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: .25rem; }
.footer small { grid-column: 1/-1; color: var(--muted); font-size: .68rem; }
.footer-compact { padding-block: 1.5rem; }

@media (max-width: 1080px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-hero-copy { max-width: 820px; }
  .product-window { width: min(760px,100%); justify-self: center; }
  .future-heading { grid-template-columns: 1fr; }
  .explore-section, .maker-feature, .parent-feature, .safety-section, .pricing-section, .faq-section { grid-template-columns: 1fr; }
  .explore-intro { position: static; }
  .maker-copy, .parent-copy, .safety-statement, .pricing-section > div:first-child, .faq-section > div:first-child { max-width: 760px; }
  .parent-console-preview { order: 2; }
  .pricing-section { row-gap: 2rem; }
  .pricing-section > div:first-child, .price-line, .pricing-section > ul { grid-column: 1; grid-row: auto; }
  .pricing-section > ul { margin: 0; }
  .kid-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .overview-layout { grid-template-columns: 1fr; }
  .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .badge-collection { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-workspace { grid-template-columns: 210px minmax(0,1fr); }
  .idea-workspace { grid-template-columns: 200px minmax(0,1fr); }
  .operations-grid { grid-template-columns: 1fr; }
  .family-panel, .safety-panel { grid-column: 1; grid-row: auto; }
}

@media (max-width: 780px) {
  html { scroll-padding-top: 4.4rem; }
  body.role-child { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .topbar { min-height: 4.25rem; grid-template-columns: 1fr auto; padding: .55rem 1rem; }
  .menu-toggle { display: grid; grid-column: 2; grid-row: 1; width: 2.65rem; border-radius: 9px; }
  .topnav { position: absolute; top: 100%; right: .75rem; left: .75rem; display: none; max-height: calc(100vh - 5rem); overflow-y: auto; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
  .topnav.is-open, body.menu-open .topnav { display: grid; }
  .topnav a { padding: .7rem .8rem; border-radius: 7px; }
  .topnav a::after { display: none; }
  .topnav a[aria-current="page"] { background: var(--cloud); }
  .nav-action { display: none; grid-column: 1/-1; }
  body.menu-open .topbar .nav-action { display: flex; padding: .6rem 0 .25rem; }
  .role-child .topnav a[href="/story-starter/"], .role-child .topnav a[href="/idea-studio/"] { display: none; }
  .landing-hero { width: min(100% - 1.5rem,var(--content)); padding-block: 3.4rem 4.5rem; }
  .landing-hero-copy h1 { font-size: clamp(3rem,14vw,5.3rem); }
  .product-window { box-shadow: 8px 10px 0 #d9eae4; transform: none; }
  .product-window-body { grid-template-columns: 1fr; min-height: 400px; }
  .product-mini-nav { display: none; }
  .preview-mission { grid-template-columns: 1fr 95px; }
  .preview-rail { grid-template-columns: repeat(3,1fr); }
  .preview-rail strong { grid-column: 1/-1; }
  .future-section, .explore-section, .parent-feature, .pricing-section, .faq-section { width: min(100% - 1.5rem,var(--content)); }
  .future-section { padding-bottom: 2.75rem; }
  .explore-section { padding-top: 2.75rem; }
  .future-pillars { grid-template-columns: 1fr; }
  .future-pillars article { grid-template-columns: 56px 1fr; }
  .maker-feature, .safety-section { padding-inline: .75rem; }
  .book-preview { min-height: 360px; }
  .book-cover, .book-page { padding: 1.25rem; }
  .parent-capabilities { grid-template-columns: 1fr; }
  .price-line { grid-template-columns: 1fr; }
  .price-line > span, .price-line > strong, .price-line > em, .price-line .primary-button { grid-column: 1; grid-row: auto; }
  .price-line .primary-button { margin-top: .45rem; }
  .pricing-section > ul { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .footer nav { flex-wrap: wrap; }
  .footer small { grid-column: auto; }
  .dashboard-console { width: min(100% - 1rem,var(--content)); padding-top: 1rem; }
  .console-top { padding-inline: .5rem; }
  .console-tabs { top: 4.25rem; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .child-editor > summary { grid-template-columns: 38px minmax(0,1fr) auto; }
  .child-summary-control { grid-column: 2; text-align: left; }
  .child-summary-action { grid-column: 3; grid-row: 1/3; }
  .overview-heading { align-items: flex-start; flex-direction: column; }
  .overview-metrics { grid-template-columns: repeat(2,1fr); }
  .overview-metrics > div:nth-child(2) { border-right: 0; }
  .overview-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .overview-child-row { grid-template-columns: 42px minmax(0,1fr); }
  .overview-child-signals, .overview-child-row .secondary-button { grid-column: 2; justify-self: start; }
  .overview-empty { grid-template-columns: 1fr; }
  .overview-empty > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .learning-welcome, .learning-section-head { align-items: flex-start; flex-direction: column; }
  .mission-feature { grid-template-columns: minmax(0,1fr) 240px; }
  .story-workspace { grid-template-columns: 1fr; }
  .story-library { position: static; max-height: none; }
  .story-list { display: flex; overflow-x: auto; }
  .story-list-item { flex: 0 0 min(240px,80vw); }
  .idea-workspace { grid-template-columns: 1fr; }
  .idea-gallery { position: static; max-height: none; }
  .idea-gallery-list { display: flex; overflow-x: auto; }
  .idea-gallery-item { flex: 0 0 min(240px,80vw); }
  .idea-form { grid-template-columns: 1fr; }
  .idea-preview { position: static; order: -1; }
  .course-step { grid-template-columns: 80px minmax(0,1fr); }
  .course-tip, .course-step > button { grid-column: 2; }
  .operations-header { align-items: flex-start; flex-direction: column; }
  .operations-metrics { grid-template-columns: repeat(2,1fr); }
  .operations-metrics > div:nth-child(2) { border-right: 0; }
  .operations-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kid-room-shell, .word-builder-shell, .word-game-shell, .word-adventure-shell, .number-quest-shell, .fact-lab-shell, .story-starter-shell, .idea-studio-shell, .quiet-corner-shell, .course-shell, .coach-shell, .coach-workspace { width: min(100% - 1rem,var(--content)); }
  .kid-topic-grid { grid-template-columns: 1fr; }
  .kid-topic-grid article { min-height: 190px; }
  .kid-dock { position: fixed; z-index: 30; right: .5rem; bottom: max(.5rem,env(safe-area-inset-bottom)); left: .5rem; display: grid; grid-template-columns: repeat(4,1fr); padding: .35rem; border: 1px solid rgba(24,32,31,.16); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(24,32,31,.18); backdrop-filter: blur(16px); }
  .kid-dock a { display: grid; gap: .05rem; justify-items: center; padding: .42rem .2rem; border-radius: 9px; color: var(--muted); font-size: .62rem; }
  .kid-dock a:hover, .kid-dock a:focus-visible { background: var(--mint); color: var(--teal-dark); }
  .kid-dock span { font-size: .72rem; font-weight: 900; }
  .kid-dock strong { font-size: .62rem; }
}

@media (max-width: 520px) {
  .brand-name { font-size: .95rem; }
  .landing-hero-copy h1 { font-size: clamp(2.7rem,14vw,4.2rem); }
  .hero-assurances { display: grid; grid-template-columns: repeat(2,1fr); }
  .product-window-bar strong { display: none; }
  .product-preview-main { padding: .8rem; }
  .preview-mission { grid-template-columns: 1fr; }
  .preview-mission img { display: none; }
  .future-heading h2, .explore-intro h2, .maker-copy h2, .parent-copy h2, .safety-statement h2, .pricing-section h2, .faq-section h2 { font-size: clamp(2.35rem,12vw,3.5rem); }
  .experience-list > a { grid-template-columns: 28px 1fr; }
  .experience-list > a > strong { display: none; }
  .book-preview { grid-template-columns: 1fr; }
  .book-page { display: none; }
  .book-cover { min-height: 360px; border-radius: 7px; }
  .console-summary { grid-template-columns: 1fr; }
  .console-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .parent-console-preview article { grid-template-columns: 38px 1fr; }
  .parent-console-preview article .preview-action { grid-column: 2; justify-self: start; }
  .story-stats, .idea-stats, .word-game-stats, .number-quest-stats, .fact-lab-stats { grid-template-columns: repeat(2,1fr); }
  .form-actions-row { align-items: stretch; flex-direction: column; }
  .learner-status { width: 100%; min-width: 0; }
  .mission-feature { grid-template-columns: 1fr; }
  .mission-helper { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; border-top: 1px solid #a9ccc1; border-left: 0; }
  .mission-helper img { grid-row: 1/3; min-height: 72px; height: 72px; }
  .experience-grid { grid-template-columns: 1fr; }
  .experience-card.is-featured { grid-column: auto; grid-template-columns: 64px 1fr; }
  .experience-card.is-featured .experience-mark { width: 3.5rem; height: 3.5rem; }
  .badge-collection { grid-template-columns: 1fr; }
  .collection-progress { flex-basis: auto; width: 100%; }
  .number-quest-grid, .fact-lab-grid, .word-game-grid { grid-template-columns: 1fr; }
  .number-quest-side, .fact-lab-side, .word-game-side { position: static; }
  .course-step { grid-template-columns: 1fr; }
  .course-status, .course-tip, .course-step > button { grid-column: 1; }
  .course-status { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
}

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