@font-face {
  font-family:"Nunito Local";
  src:url("/fonts/nunito-latin.woff2") format("woff2-variations");
  font-weight:400 800;
  font-display:swap
}

@font-face {
  font-family:"Source Sans Local";
  src:url("/fonts/source-sans-3-latin.woff2") format("woff2-variations");
  font-weight:400 700;
  font-display:swap
}

:root {
  --ink:#1e2942;
  --paper:#fffdf7;
  --white:#fff;
  --sky:#d7f0fb;
  --sky-strong:#7ccae5;
  --teal:#17766f;
  --teal-dark:#105a55;
  --coral:#c64f3c;
  --coral-dark:var(--coral);
  --yellow:#f6c947;
  --line:#cbd5dc;
  --muted:#596579;
  --ink-soft:var(--muted);
  --shadow:0 24px 70px rgba(30,41,66,.13);
  --display:"Nunito Local",sans-serif;
  --body:"Source Sans Local",sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.55 var(--body)
}

.shell {
  width:min(1210px,calc(100% - 48px));
  margin:auto
}

a {
  color:inherit
}

.skip-link {
  position:absolute;
  left:-999px
}

.skip-link:focus {
  left:1rem;
  top:1rem;
  z-index:9;
  background:var(--white);
  padding:.5rem
}

.resume {
  padding:.7rem;
  background:var(--teal);
  color:#fff;
  text-align:center
}

.site-header {
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

.nav-shell,.footer-layout {
  min-height:76px;
  display:flex;
  align-items:center;
  gap:25px
}

.brand {
  font:900 1.15rem var(--display);
  text-decoration:none
}

.site-header nav {
  display:flex;
  gap:20px;
  margin-left:auto
}

.site-header nav a,.footer-layout nav a {
  text-decoration:none;
  font-size:.9rem
}

.button {
  display:inline-block;
  min-height:38px;
  border:0;
  border-radius:9px;
  padding:12px 18px;
  font:800 .9rem var(--display);
  text-decoration:none;
  cursor:pointer
}

.button-ink {
  background:var(--ink);
  color:var(--white)
}

.button-coral {
  background:var(--coral);
  color:#fff
}

h1,h2,h3 {
  font-family:var(--display);
  line-height:1.05;
  margin:.2em 0 .35em
}

h1 {
  font-size:clamp(3.2rem,7vw,6.4rem);
  letter-spacing:-.06em
}

h1 em {
  color:var(--teal);
  font-style:normal
}

h2 {
  font-size:clamp(2.2rem,3.4vw,3.8rem);
  letter-spacing:-.05em
}

h3 {
  font-size:1.45rem
}

.hero {
  background:var(--sky);
  padding-bottom:0
}

.hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:90px 0 60px
}

.kicker,.section-label,.story-tag {
  font:900 .75rem var(--display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-dark)
}

.hero-lede {
  max-width:620px;
  font-size:1.18rem
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin-top:28px
}

.text-link {
  font-weight:800
}

.hero-note {
  font-size:.88rem
}

.routine-board,.choice-board,.parent-board,.support-preview {
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:12px 14px 0 var(--sky-strong);
  padding:24px
}

.routine-board {
  min-height:360px;
  transform:rotate(1deg)
}

.board-topline {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:15px
}

.task-list {
  min-height:170px
}

.routine-task {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  text-align:left
}

.routine-task[data-complete=true] {
  opacity:.62
}

.routine-task[data-complete=true]>span:first-child::after {
  content:" ✓"
}

.routine-task small {
  display:block;
  color:var(--muted);
  font-size:.8rem
}

.routine-task[data-complete-task] {
  cursor:pointer;
  border:2px solid var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 20%,transparent)
}

.routine-action {
  margin-left:auto;
  font:800 .7rem var(--display);
  text-align:right
}

.first-then {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  padding:14px;
  background:var(--sky);
  border-radius:12px
}

.first-then small,.visible-plan small {
  display:block;
  font-weight:900;
  font-size:.7rem;
  color:var(--teal-dark)
}

.demo-hint {
  font-size:.85rem
}

.promise-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:var(--white)
}

.promise-row span {
  padding:16px;
  text-align:center;
  font:800 .8rem var(--display);
  border-right:1px solid var(--line)
}

section {
  padding:110px 0
}

.split-heading,.section-title-row,.fit-layout,.choice-layout,.principles-layout,.parent-layout,.faq-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}

.reminder-loop {
  background:var(--white)
}

.loop-stage {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;
  align-items:center;
  margin-top:55px
}

.loop-before span {
  display:block;
  width:max-content;
  max-width:100%;
  margin:11px;
  padding:10px 15px;
  background:#f4e4c5;
  border-radius:12px
}

.loop-arrow {
  font:800 .8rem var(--display);
  text-align:center
}

.visible-plan {
  display:flex;
  gap:15px;
  align-items:center;
  padding:22px;
  background:var(--sky);
  border:2px solid var(--ink);
  border-radius:15px
}

.feature-story {
  background:#f3f1ff
}

.story-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:44px
}

.story-card {
  padding:28px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px
}

.story-card:last-child {
  grid-column:1/-1
}

.picture-sequence,.focus-demo,.timer-demo {
  margin-top:25px;
  padding:18px;
  background:var(--sky);
  border-radius:12px;
  font-weight:800
}

.fit-section {
  background:var(--ink);
  color:var(--white)
}

.fit-section .section-label {
  color:var(--sky-strong)
}

.support-controls fieldset {
  border:0;
  padding:0;
  margin:20px 0
}

.support-controls button,.economy-switch button {
  min-height:38px;
  margin:4px;
  padding:10px 13px;
  background:transparent;
  color:inherit;
  border:1px solid currentColor;
  border-radius:8px;
  font-weight:700
}

.support-controls button[aria-pressed=true],.economy-switch button[aria-pressed=true] {
  background:var(--yellow);
  color:var(--ink)
}

.preview-screen {
  margin-top:14px;
  padding:24px;
  background:var(--paper);
  color:var(--ink);
  border-radius:13px
}

.preview-screen>div {
  margin-top:12px;
  padding:13px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:9px
}

.preview-screen[data-mode=focus]>div:not(:nth-of-type(2)) {
  display:none
}

.preview-screen[data-celebration=quiet] p {
  visibility:hidden
}

.preview-screen[data-celebration=bright] p {
  background:var(--yellow);
  padding:10px;
  border-radius:8px
}

.choice-section {
  background:var(--sky)
}

.choice-task,.reward-shelf {
  margin-top:13px;
  padding:15px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px
}

.reward-shelf {
  background:#fff4d6
}

.choice-board[data-economy=off] .choice-task,.choice-board[data-economy=off] .reward-shelf {
  display:none
}

.principles-section {
  background:var(--teal-dark);
  color:#fff
}

.principles-section .section-label {
  color:var(--yellow)
}

.principle-list article {
  display:grid;
  grid-template-columns:45px 1fr;
  gap:16px;
  padding:25px 0;
  border-bottom:1px solid #77aaa4
}

.parent-board {
  transform:rotate(1deg)
}

.idea-card {
  padding:16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px
}

.parent-board button {
  min-height:38px;
  margin:16px 0;
  padding:10px;
  background:var(--ink);
  color:var(--white);
  border:0;
  border-radius:8px;
  font-weight:800
}

.check-list {
  padding:0;
  list-style:none;
  font-weight:700
}

.start-section {
  background:#f3f1ff
}

.start-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  padding:0;
  list-style:none;
  border-top:2px solid var(--ink)
}

.start-steps li {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:14px;
  padding:28px;
  border-left:1px solid var(--line)
}

.start-steps span {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:var(--ink);
  color:var(--white);
  border-radius:50%;
  font-weight:900
}

.faq-list {
  border-top:2px solid var(--ink)
}

details {
  border-bottom:1px solid var(--line)
}

summary {
  cursor:pointer;
  padding:20px 0;
  font:800 1.05rem var(--display);
  list-style:none;
  display:flex;
  justify-content:space-between
}

summary::-webkit-details-marker {
  display:none
}

summary::after {
  content:"+"
}

details[open] summary::after {
  content:"−"
}

.body {
  padding-bottom:20px;
  color:var(--muted)
}

.provider-note {
  padding:55px 0;
  background:var(--yellow);
  border-block:2px solid var(--ink)
}

.provider-layout {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:35px;
  align-items:center
}

.provider-copy p {
  margin:.4rem 0
}

.final-cta {
  position:relative;
  overflow:hidden;
  background:var(--sky);
  text-align:center
}

.final-layout {
  position:relative;
  z-index:1;
  max-width:760px;
  margin:auto
}

.final-sun {
  position:absolute;
  inset:-160px 50% auto auto;
  width:560px;
  height:560px;
  border:2px solid #73b7b2;
  border-radius:50%;
  transform:translateX(50%)
}

.final-sun:after,.final-sun:before {
  content:"";
  position:absolute;
  inset:70px;
  border:2px solid #93c9c5;
  border-radius:50%
}

.final-sun:after {
  inset:140px
}

footer {
  padding:35px 0;
  background:var(--ink);
  color:var(--white)
}

.footer-layout nav {
  margin-left:auto;
  display:flex;
  gap:16px
}

.footer-layout>p {
  color:#c5cedd;
  font-size:.86rem
}

@media(max-width:800px) {
  .site-header nav {
    display:none
  }

  .hero-layout,.split-heading,.section-title-row,.fit-layout,.choice-layout,.principles-layout,.parent-layout,.faq-layout {
    grid-template-columns:1fr;
    gap:38px
  }

  .hero-layout {
    padding:60px 0
  }

  .loop-stage,.provider-layout {
    grid-template-columns:1fr
  }

  .story-grid,.start-steps {
    grid-template-columns:1fr
  }

  .story-card:last-child {
    grid-column:auto
  }

  .promise-row {
    grid-template-columns:1fr 1fr
  }

  .footer-layout {
    align-items:flex-start;
    flex-direction:column
  }

  .footer-layout nav {
    margin:0
  }

}

/* Spec 037 visual-reference amendment.  The page keeps the locale-aware
   production template above; these rules restore the reviewed composition
   from concepts/landing-page-evaluation without introducing a second page. */
body { font:18px/1.55 var(--body); }

.brand { align-items:center; display:inline-flex; }
.site-brand__lockup { display:inline-flex; align-items:center; gap:12px; color:var(--ink); font:900 1.15rem/1 var(--display); }
.site-brand__mark-set { display:block; width:38px; height:38px; flex:none; }
.site-brand__mark { display:block; width:38px; height:38px; }
.site-brand__mark--light,footer .site-brand__mark--full { display:none; }
footer .site-brand__mark--light { display:block; }
footer .site-brand__lockup { color:var(--white); }
footer .footer-layout nav a { color:#c5cedd; }
footer .footer-layout nav a:hover { color:#fff; }

.site-header { position:relative; z-index:4; border-bottom:0; box-shadow:0 2px 0 var(--yellow); }
.nav-shell,.footer-layout { min-height:104px; gap:28px; }
.site-header nav a,.footer-layout nav a { font:800 1rem var(--display); color:var(--ink-soft); }
.site-header nav a:hover,.footer-layout nav a:hover { color:var(--ink); }
.button { min-height:54px; border:2px solid var(--ink); border-radius:14px; padding:14px 24px; font-size:1rem; box-shadow:0 6px 0 rgba(30,41,66,.16); transition:transform .16s ease,box-shadow .16s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 0 rgba(30,41,66,.18); }
.button:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(30,41,66,.16); }
.button-coral { border-color:var(--coral-dark); color:#fff; }
.language-link { flex:none; font:800 .86rem var(--display); }

.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--sky); }
.hero::before,.hero::after { content:""; position:absolute; border:2px solid rgba(23,118,111,.16); border-radius:50%; pointer-events:none; }
.hero::before { width:720px; height:720px; right:-145px; top:90px; box-shadow:0 0 0 92px rgba(255,255,255,.12),0 0 0 184px rgba(255,255,255,.08); }
.hero::after { width:330px; height:330px; right:-110px; top:20%; border:42px solid rgba(255,255,255,.42); }
.hero-layout { position:relative; z-index:1; min-height:720px; grid-template-columns:minmax(0,1fr) minmax(480px,.88fr); gap:74px; padding:92px 0 70px; }
.kicker,.section-label,.story-tag { font-size:.78rem; letter-spacing:.095em; line-height:1.3; }
.kicker span { margin-right:7px; color:var(--coral); }
h1 { max-width:720px; margin:0; font-size:clamp(3.25rem,5vw,5.6rem); font-weight:920; line-height:1.03; letter-spacing:-.065em; }
h1 em { position:relative; z-index:0; color:var(--teal-dark); }
h1 em::after { content:""; position:absolute; z-index:-1; right:-.08em; bottom:.03em; left:-.02em; height:.2em; background:var(--yellow); transform:rotate(-1deg); }
.hero-lede { max-width:600px; margin:30px 0 0; color:#394860; font-size:clamp(1.12rem,1.7vw,1.35rem); line-height:1.5; }
.hero-actions { gap:26px; margin-top:34px; }
.hero-note { margin:21px 0 0; color:var(--ink-soft); font-size:.91rem; font-weight:650; }

.demo-wrap { position:relative; padding:22px 0 34px; transform:rotate(1.2deg); }
.demo-shadow { position:absolute; inset:40px -18px 8px 18px; background:var(--teal-dark); border:2px solid var(--ink); border-radius:30px; opacity:.42; transform:rotate(2deg); }
.routine-board { position:relative; z-index:1; min-height:596px; overflow:hidden; border-radius:27px; padding:28px; box-shadow:var(--shadow); }
.board-topline { position:relative; z-index:2; align-items:center; gap:20px; padding-bottom:20px; border-bottom:0; }
.board-person { display:flex; align-items:center; gap:12px; }
.board-person > span:last-child { display:grid; gap:1px; }
.board-person small { color:var(--ink-soft); font-size:.85rem; }
.avatar { width:46px; height:46px; display:grid; place-items:center; color:var(--ink); background:var(--lilac,#d6d2f3); border:2px solid var(--ink); border-radius:50%; font:900 1.05rem var(--display); }
.coin-chip { display:inline-flex; gap:7px; align-items:center; padding:8px 12px; border:1.5px solid var(--ink); border-radius:999px; background:var(--yellow); font:900 .9rem var(--display); }
.routine-path { position:absolute; z-index:0; inset:92px 6px 70px; opacity:.55; }
.routine-path svg { width:100%; height:100%; }
.routine-path path { fill:none; stroke:var(--sky-strong); stroke-width:3; stroke-dasharray:8 12; }
.task-list { position:relative; z-index:1; min-height:300px; padding:24px 0 12px; }
.routine-task { position:relative; min-height:74px; margin:12px 0; padding:13px 16px; border:2px solid var(--ink); border-radius:16px; background:var(--white); box-shadow:3px 4px 0 var(--line); }
.routine-task > span:first-child { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:12px; background:var(--sky); font-size:1.35rem; }
.routine-task strong { font:900 1rem var(--display); }
.routine-task small { margin-top:2px; color:var(--ink-soft); }
.routine-task[data-complete=true] { opacity:1; background:#edf7f5; }
.routine-task[data-complete=true] > span:first-child { color:#fff; background:var(--teal); }
.routine-task[data-complete-task] { border-color:var(--coral-dark); box-shadow:0 0 0 4px rgba(240,111,88,.22),3px 4px 0 var(--line); }
.routine-action { color:var(--teal-dark); font-size:.75rem; }
.first-then { position:relative; z-index:1; gap:14px; padding:16px 18px; background:var(--yellow); border:1.5px solid var(--ink); border-radius:16px; }
.first-then span:last-child { text-align:right; }
.first-then small { color:var(--teal-dark); }
.demo-hint { position:relative; z-index:1; margin:13px 0 0; color:var(--teal-dark); font:800 .85rem var(--display); }
.promise-row { position:relative; z-index:2; border:2px solid var(--ink); box-shadow:0 7px 0 var(--yellow); }
.promise-row span { padding:18px 14px; font-size:.84rem; }

section { padding:124px 0; }
.reminder-loop { background:var(--white); }
.split-heading,.section-title-row,.fit-layout,.choice-layout,.principles-layout,.parent-layout,.faq-layout { gap:96px; }
.section-intro,.split-heading > p,.section-title-row > p { max-width:530px; color:var(--ink-soft); font-size:1.16rem; }
.loop-stage { margin-top:65px; }
.loop-before span { border:1.5px solid var(--ink); box-shadow:3px 4px 0 var(--yellow); }
.loop-arrow { color:var(--teal-dark); }
.visible-plan { border:2px solid var(--ink); box-shadow:0 8px 0 var(--yellow); }
.story-card { border-radius:20px; border:2px solid var(--ink); box-shadow:var(--shadow); }
.story-card:nth-child(1) { background:#fff6d7; }
.story-card:nth-child(2) { background:var(--sky); }
.story-card:nth-child(3) { background:#d6d2f3; }
.fit-section { background:#f7fafb; }
.support-preview,.choice-board,.parent-board { border-radius:24px; border:2px solid var(--ink); box-shadow:var(--shadow); }
.support-controls button,.economy-switch button { border-radius:999px; }
.choice-section { background:var(--white); }
.principles-section { background:var(--teal-dark); color:#fff; }
.principles-section .section-label { color:var(--yellow); }
.principle-list article { border-color:rgba(255,255,255,.32); }
.parent-section { background:#f7fafb; }
.start-section { background:var(--white); }
.start-steps li { border-left:2px solid var(--ink); }
.facts-section { padding:34px 0; background:var(--yellow); border-block:2px solid var(--ink); }
.faq-section { background:#f7fafb; }
.faq-list details { border-radius:16px; box-shadow:3px 4px 0 var(--line); }
.provider-note { border-block:2px solid var(--ink); }
.final-cta { overflow:hidden; background:var(--sky); }
.final-layout { position:relative; }
.final-sun { border:2px solid var(--ink); background:var(--yellow); }
footer { border-top:2px solid var(--ink); }

@media(min-width:761px) {
  .site-header { position:sticky; top:0; z-index:10; }
}

@media(max-width:1020px) {
  .nav-shell,.footer-layout { min-height:82px; gap:16px; }
  .site-header nav { gap:13px; }
  .hero-layout { min-height:auto; grid-template-columns:1fr; gap:36px; padding-top:70px; }
  .hero-copy { max-width:720px; }
  .demo-wrap { width:min(630px,100%); margin:auto; }
  .routine-board { min-height:510px; }
  .split-heading,.section-title-row,.fit-layout,.choice-layout,.principles-layout,.parent-layout,.faq-layout { gap:54px; }
}

@media(max-width:760px) {
  .shell { width:min(100% - 32px,1120px); }
  .site-header { box-shadow:0 2px 0 var(--yellow); }
  .nav-shell { min-height:74px; flex-wrap:wrap; padding:12px 0; }
  .site-header nav { order:3; width:100%; margin-left:0; justify-content:space-between; }
  .site-header nav a { font-size:.84rem; }
  .nav-shell > [hreflang] { margin-left:auto; font-size:.85rem; }
  .nav-shell .button { min-height:42px; padding:10px 12px; font-size:.82rem; }
  .hero-layout { padding:52px 0 30px; }
  h1 { font-size:clamp(3.05rem,13vw,4.75rem); }
  .hero-lede { margin-top:22px; font-size:1.08rem; }
  .hero-actions { align-items:flex-start; gap:16px; }
  .hero-actions .button { width:100%; text-align:center; }
  .routine-board { min-height:470px; padding:19px; border-radius:20px; }
  .demo-shadow { inset:31px -8px 5px 9px; }
  .task-list { min-height:270px; padding-top:17px; }
  .promise-row { grid-template-columns:1fr 1fr; }
  .promise-row span { padding:13px 8px; font-size:.72rem; }
  section { padding:82px 0; }
  .split-heading,.section-title-row,.fit-layout,.choice-layout,.principles-layout,.parent-layout,.faq-layout { gap:30px; }
  .loop-stage { margin-top:42px; }
  .story-grid { gap:20px; }
  .facts-section { padding:24px 0; }
  .footer-layout { min-height:auto; padding:36px 0; }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    animation:none!important
  }

  html {
    scroll-behavior:auto
  }

}

/* Keyboard focus remains visible across public surfaces. */
:focus-visible {
  outline:3px solid var(--white);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--ink)
}

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

@media(max-width:800px) {
  .nav-shell {
    min-height:auto;
    flex-wrap:wrap;
    gap:10px;
    padding:12px 0
  }

  .final-sun {
    display:none
  }

}

.final-sun {
  pointer-events:none
}

/* The visual reference uses real miniature interfaces, not text summaries.
   These production-only structures mirror those reviewed compositions. */
:root { --lilac:#d6d2f3; }

.demo-hint {
  width:max-content;
  margin:16px 8px 0 auto;
  padding:8px 13px;
  background:var(--yellow);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:8px;
  box-shadow:2px 3px 0 rgba(30,41,66,.14);
  transform:rotate(-2deg)
}

.reminder-loop { background:var(--white); }
.loop-stage { min-height:370px; grid-template-columns:1fr 180px 1fr; gap:32px; margin-top:62px; }
.loop-before,.loop-after { position:relative; min-height:330px; padding:34px; border:1.5px solid var(--line); border-radius:24px; }
.loop-before { background:#f0f2f3; }
.loop-after { display:flex; flex-direction:column; justify-content:center; background:var(--sky); border-color:var(--sky-strong); }
.loop-before p,.loop-after>p { position:absolute; bottom:22px; margin:0; color:var(--ink-soft); font-size:.84rem; }
.speech { position:absolute; width:max-content; margin:0!important; padding:13px 18px!important; background:var(--white)!important; color:var(--ink); border:1.5px solid var(--ink); border-radius:16px 16px 16px 3px!important; box-shadow:3px 4px 0 var(--line)!important; font:750 1rem var(--display); }
.speech-one { left:32px; top:36px; transform:rotate(-2deg); }
.speech-two { right:28px; top:112px; transform:rotate(1.5deg); }
.speech-three { left:72px; top:190px; transform:rotate(-1deg); }
.loop-arrow { text-align:center; }
.loop-arrow span { display:block; font:850 .77rem var(--display); }
.loop-arrow svg { width:118px; margin-top:8px; }
.loop-arrow path { fill:none; stroke:var(--teal); stroke-linecap:round; stroke-linejoin:round; stroke-width:2.5; }
.visible-plan { grid-template-columns:64px 1fr 44px; gap:16px; padding:22px; }
.plan-icon { width:60px; height:60px; display:grid; place-items:center; background:var(--sky); border-radius:12px; font-size:2rem; }
.plan-check { width:42px; height:42px; display:grid; place-items:center; background:var(--teal); color:#fff; border-radius:50%; font-weight:900; }

.feature-story { background:var(--white); border-block:1px solid var(--line); }
.story-grid { grid-template-columns:1.18fr .82fr; gap:20px; margin-top:64px; }
.story-card { min-height:410px; padding:38px; overflow:hidden; border:1.5px solid var(--line); border-radius:24px; box-shadow:none; }
.story-card h3 { max-width:520px; margin:16px 0 13px; font-size:clamp(1.7rem,2.5vw,2.4rem); }
.story-card p { max-width:540px; margin:0; color:var(--ink-soft); }
.story-steps { display:flex; flex-direction:column; justify-content:space-between; background:var(--sky)!important; }
.picture-sequence { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:15px; margin-top:40px; }
.picture-sequence span { min-height:130px; display:grid; place-items:center; align-content:center; gap:9px; background:var(--white); border:1.5px solid var(--ink); border-radius:17px; box-shadow:0 6px 0 rgba(30,41,66,.14); }
.picture-sequence b { font-size:2.25rem; }
.picture-sequence small { font-weight:750; text-align:center; }
.picture-sequence i { color:var(--teal); font-style:normal; font-weight:900; }
.story-focus { background:#f3f1ff!important; }
.focus-demo { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:42px; }
.focus-demo div { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--white); border:1.5px solid var(--ink); border-radius:17px; text-align:center; }
.focus-demo div:first-child { box-shadow:0 6px 0 var(--lilac); }
.focus-demo small { color:var(--teal-dark); font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.focus-demo span { font-size:2rem; }
.focus-demo strong { max-width:150px; font:800 .9rem/1.2 var(--display); }
.story-time { grid-column:1/-1; min-height:290px; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; background:#fff4d6!important; border-color:#e1c46f; }
.timer-demo { display:grid; grid-template-columns:104px 1fr; gap:24px; padding:24px; background:var(--white); border:1.5px solid var(--ink); border-radius:18px; }
.timer-face { width:96px; height:96px; display:grid; place-items:center; align-content:center; background:var(--yellow); border:2px solid var(--ink); border-radius:50%; font:900 1rem/1 var(--display); }
.timer-face span { font-size:2.2rem; }
.timer-face small { margin-top:4px; font-size:.58rem; }
.timer-demo strong,.timer-demo small { display:block; }
.timer-bar { height:14px; margin:11px 0 8px; overflow:hidden; background:#dce7e9; border-radius:4px; }
.timer-bar span { display:block; width:68%; height:100%; background:var(--teal); }
.timer-demo small { color:var(--ink-soft); font-size:.75rem; }

.fit-section { background:var(--ink); color:var(--white); }
.fit-layout { grid-template-columns:.9fr 1.1fr; gap:110px; }
.fit-copy .section-label { color:var(--sky-strong); }
.fit-copy>p:not(.section-label) { color:#c5cedd; font-size:1.12rem; }
.support-controls legend { color:#c5cedd; }
.segmented { display:flex; flex-wrap:wrap; gap:8px; }
.segmented button { color:#f8fbff; border-color:#6c7890; }
.segmented button[aria-pressed=true] { background:var(--yellow); color:#1e2942; border-color:var(--yellow); }
.support-preview { padding:14px; background:#33405a; color:#f8fbff; border:1px solid #66728a; border-radius:26px; box-shadow:18px 20px 0 rgba(0,0,0,.2); transform:rotate(-1deg); }
.preview-label { display:flex; justify-content:space-between; padding:6px 9px 14px; color:#dbe2ed; font-size:.72rem; }
.preview-label span { color:var(--yellow); font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.preview-screen { min-height:470px; padding:28px; overflow:hidden; background:#f5fafb; color:#1e2942; border-radius:17px; }
.preview-screen>.mini-profile { display:flex; align-items:center; gap:12px; margin-top:0; padding:0 0 22px; background:transparent; border:0; border-bottom:1px solid #cbd8dd; border-radius:0; }
.mini-profile>span { width:40px; height:40px; display:grid; place-items:center; background:#dceff3; border:1.5px solid #1e2942; border-radius:50%; font:900 1rem var(--display); }
.mini-profile strong { font-family:var(--display); }
.preview-screen>.preview-list { display:grid; gap:12px; margin-top:24px; padding:0; background:transparent; border:0; border-radius:0; }
.preview-task { min-height:66px; display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; padding:12px 14px; background:#fff; border:1.5px solid #cbd8dd; border-radius:13px; font:750 1rem var(--display); }
.preview-task i { width:36px; height:36px; display:grid; place-items:center; background:#dceff3; border-radius:9px; font-style:normal; }
.preview-task.done { background:#e6f4ef; color:#3f5e57; }
.preview-task.done i { background:#17766f; color:#fff; }
.preview-task.current { border:2px solid #1e2942; box-shadow:0 5px 0 #f8cf58; }
.preview-task b { color:#0e5452; font-size:.72rem; text-transform:uppercase; }
.preview-list .demo-task { transform:none; box-shadow:none; }
.preview-list .demo-task.current { box-shadow:0 5px 0 #f8cf58; }
.preview-focus { min-height:310px; margin-top:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; background:#fff; color:#1e2942; border:2px solid #1e2942; border-radius:16px; box-shadow:0 7px 0 #f8cf58; }
.preview-focus[hidden],.preview-list[hidden] { display:none; }
.preview-screen[data-mode=focus]>.mini-profile { display:flex; }
.preview-screen[data-mode=focus]>.preview-focus:not([hidden]) { display:flex; }
.preview-focus small { color:#0e5452; font-size:.68rem; font-weight:900; letter-spacing:.1em; }
.preview-focus span { margin:17px 0 5px; font-size:4.2rem; }
.preview-focus strong { font:900 1.35rem var(--display); }
.preview-toast { margin:20px 0 0; padding:12px 14px; background:#17766f; color:#fff; border-radius:10px; font-size:.84rem; font-weight:750; text-align:center; }
.preview-screen[data-celebration=quiet] .preview-toast { background:#e7eef0; color:#526078; }
.preview-screen[data-celebration=bright] .preview-toast { background:#f06f58; color:#27130f; box-shadow:0 0 0 5px #f8cf58; }

.choice-section { background:var(--sky); }
.choice-layout { grid-template-columns:.82fr 1.18fr; gap:100px; }
.choice-copy>p:not(.section-label) { color:var(--ink-soft); font-size:1.1rem; }
.choice-board { padding:30px; background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:23px; box-shadow:12px 14px 0 var(--sky-strong); }
.choice-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; padding-bottom:17px; border-bottom:1px solid var(--line); font-family:var(--display); }
.choice-balance { color:#775313; font-size:.8rem; font-weight:800; }
.choice-balance i { color:var(--yellow); font-style:normal; -webkit-text-stroke:1px #9b6612; }
.choice-task { min-height:74px; display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; margin-top:12px; padding:12px 16px; background:var(--paper); border:1px solid var(--line); border-radius:13px; }
.choice-task>span { width:45px; height:45px; display:grid; place-items:center; background:var(--sky); border-radius:10px; font-size:1.55rem; }
.choice-task strong { font-family:var(--display); }
.task-value { color:var(--teal-dark); font-size:.9rem; }
.reward-shelf { display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:center; margin-top:22px; padding:20px; background:#fff4d6; border:1.5px dashed #af7f24; border-radius:14px; }
.reward-shelf>small { grid-column:1/-1; color:#775313; font-size:.66rem; font-weight:900; letter-spacing:.1em; }
.reward-shelf>span { width:52px; height:52px; display:grid; place-items:center; background:#fff; border-radius:12px; font-size:1.8rem; }
.reward-shelf strong,.reward-shelf em { display:block; }
.reward-shelf strong { font-family:var(--display); }
.reward-shelf em { margin-top:2px; color:#775313; font-size:.78rem; font-style:normal; }

.principles-layout { grid-template-columns:.8fr 1.2fr; gap:110px; }
.principles-heading p:last-child,.principle-list p { color:#bdd7d3; }
.principle-list article { grid-template-columns:64px 1fr; gap:24px; padding-block:34px; }
.principle-list article>span { width:54px; height:54px; display:grid; place-items:center; background:var(--yellow); color:#1e2942; border:2px solid #1e2942; border-radius:50%; font:900 1.35rem var(--display); }
.principle-list h3 { margin:2px 0 9px; }
.principle-list p { margin:0; }

.parent-section { background:var(--white); }
.parent-layout { grid-template-columns:1.05fr .95fr; gap:110px; }
.parent-board { padding:0; overflow:hidden; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:22px; box-shadow:13px 15px 0 var(--lilac); transform:rotate(1deg); }
.parent-window-top { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 16px; background:var(--ink); color:var(--white); }
.parent-window-top span { width:9px; height:9px; background:var(--sky-strong); border-radius:50%; }
.parent-window-top span:nth-child(2) { background:var(--yellow); }
.parent-window-top span:nth-child(3) { background:var(--coral); }
.parent-window-top small { margin-left:auto; color:#c9d1de; }
.parent-window-body { min-height:440px; padding:42px; }
.parent-window-body>p { margin:0; color:var(--teal-dark); font-size:.67rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.parent-window-body h3 { max-width:460px; margin:10px 0 28px; font-size:2.2rem; }
.idea-card { display:grid; grid-template-columns:54px 1fr; gap:15px; align-items:center; padding:18px; background:var(--white); border:1.5px solid var(--line); border-radius:14px; }
.idea-icon { width:52px; height:52px; display:grid; place-items:center; background:var(--lilac); border-radius:11px; font-size:1.8rem; }
.idea-card strong { font-family:var(--display); }
.idea-card p { margin:3px 0 0; color:var(--ink-soft); font-size:.85rem; }
.parent-window-body button { min-height:43px; margin-top:18px; padding:0 17px; background:var(--ink); color:var(--white); border:0; border-radius:9px; font-weight:800; }
.parent-window-body>small { display:block; margin-top:12px; color:var(--ink-soft); }
.parent-copy>p:not(.section-label) { color:var(--ink-soft); font-size:1.1rem; }

.final-cta { position:relative; padding-block:clamp(100px,12vw,170px); background:var(--sky); color:var(--ink); text-align:center; }
.final-layout { z-index:1; display:flex; flex-direction:column; align-items:center; }
.final-layout>p:not(.section-label) { max-width:620px; margin:22px auto 30px; color:var(--ink-soft); font-size:1.12rem; }
.final-layout small { margin-top:20px; color:var(--ink-soft); }
.final-sun { display:block; z-index:0; left:50%; top:-57px; width:600px; height:600px; background:transparent; border:2px solid rgba(23,118,111,.18); border-radius:50%; transform:translateX(-50%); }
.final-layout>:not(.final-sun) { position:relative; z-index:1; }
.final-sun:before,.final-sun:after,.final-sun span { content:""; position:absolute; border:2px solid rgba(23,118,111,.15); border-radius:50%; }
.final-sun:before { inset:70px; }
.final-sun:after { inset:140px; }
.final-sun span:nth-child(1) { inset:210px; }

@media(max-width:1020px) {
  .fit-layout,.choice-layout,.principles-layout,.parent-layout { grid-template-columns:1fr; gap:52px; }
  .loop-stage { grid-template-columns:1fr 120px 1fr; gap:18px; }
  .support-preview,.choice-board,.parent-board { width:min(660px,94%); margin-inline:auto; }
  .parent-layout .parent-board { order:2; }
}

@media(max-width:760px) {
  .demo-hint { display:none; }
  .loop-stage { grid-template-columns:1fr; }
  .loop-arrow svg { height:50px; transform:rotate(90deg); }
  .story-grid { grid-template-columns:1fr; }
  .story-time { grid-column:auto; grid-template-columns:1fr; gap:36px; }
  .story-card { min-height:auto; padding:26px; }
  .picture-sequence { grid-template-columns:1fr; }
  .picture-sequence i { text-align:center; transform:rotate(90deg); }
  .timer-demo { grid-template-columns:76px 1fr; padding:17px; }
  .timer-face { width:72px; height:72px; }
  .preview-screen { min-height:440px; padding:19px; }
  .support-preview,.choice-board,.parent-board { width:100%; }
  .choice-board { padding:19px; box-shadow:7px 9px 0 var(--sky-strong); }
  .choice-top { align-items:flex-start; flex-direction:column; gap:5px; }
  .reward-shelf { grid-template-columns:52px 1fr; }
  .parent-window-body { min-height:0; padding:26px; }
  .parent-window-body h3 { font-size:1.7rem; }
  .final-sun { display:none; }
}

@media(max-width:800px) {
  .site-header nav {
    display:flex;
    order:3;
    width:100%;
    margin:0;
    overflow-x:auto;
    justify-content:flex-start;
    gap:24px;
    padding-bottom:3px
  }

  .site-header nav a { flex:none; }
  .footer-layout nav { width:100%; flex-wrap:wrap; }
}

/* Spec 037 positive-education information architecture. */
.reading-panel,.reading-panel-row>p {
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff9e8;
  box-shadow:4px 5px 0 rgba(30,41,66,.08)
}

.route-intro {
  padding:110px 0 100px;
  background:var(--sky)
}

.route-intro .shell { max-width:900px; }
.route-intro h1 { margin-top:18px; font-size:clamp(3.1rem,5vw,5.5rem); }
.route-intro .reading-panel { max-width:720px; margin-top:28px; background:rgba(255,255,255,.7); }
.route-home { display:inline-block; margin-bottom:32px; font:800 .9rem var(--display); }

/* Spec 056: the parent-side strip. Same grid and card idiom as the principles
   section, on the page ground instead of teal, so it reads as a sibling of the
   feature story above it rather than a second dark block. */
.parent-side { padding:72px 0; background:#fff; }
.parent-side .principle-list article { border-bottom-color:rgba(31,41,55,.18); }
.parent-side .principles-heading p:last-child,.parent-side .principle-list p { color:var(--ink-soft); }
.trust-rail { padding:72px 0; background:#fff6d7; border-block:2px solid var(--ink); }
.trust-rail__layout { display:grid; grid-template-columns:1.05fr 1.3fr .75fr auto; gap:40px; align-items:center; }
.trust-rail h2 { font-size:clamp(2rem,3vw,3.2rem); }
.trust-rail p { color:var(--ink-soft); }
.trust-rail ul,.therapist-sharing ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; font:800 .92rem var(--display); }
.trust-rail li::before,.therapist-sharing li::before { content:"✓"; margin-right:9px; color:var(--teal); }

.therapist-sharing { padding:92px 0; background:#e7e3fa; }
.therapist-sharing__layout { display:grid; grid-template-columns:1.5fr .75fr auto; gap:56px; align-items:center; }
.therapist-sharing h2 { max-width:720px; font-size:clamp(2.4rem,4.2vw,4.2rem); }
.therapist-sharing p { max-width:740px; color:var(--ink-soft); font-size:1.1rem; }

.sharing-details { background:var(--white); }
.sharing-details__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px; }
.sharing-details article { min-height:260px; padding:30px; border:2px solid var(--ink); border-radius:20px; background:var(--sky); box-shadow:6px 7px 0 var(--yellow); }
.sharing-details article:nth-child(2) { background:#fff6d7; }
.sharing-details article:nth-child(3) { background:#e7e3fa; }
.sharing-details h2 { font-size:2rem; }
.sharing-details p { color:var(--ink-soft); }

/* The clinician's page (spec 043). The problem, then the reasoning, then what
   you see and what it refuses to be — the refusals earn trust but do not open.
   Same card idiom as .sharing-details throughout. */
.provider-problem { padding:56px 0 8px; background:var(--white); }
.provider-problem__layout { max-width:820px; }
.provider-problem h2 { font-size:clamp(1.9rem,3vw,2.8rem); }
.provider-problem p { margin-top:18px; color:var(--ink-soft); font-size:1.08rem; }
.provider-problem__lead { font-size:1.2rem; }

.provider-why { padding:40px 0 8px; background:var(--white); }
.provider-why__lede { max-width:820px; margin-top:6px; color:var(--ink-soft); }
.provider-why__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:28px; }
.provider-why article { padding:28px; border:2px solid var(--ink); border-radius:20px; background:var(--white); box-shadow:6px 7px 0 var(--line); }
.provider-why article:nth-child(4) { background:#fff6d7; }
.provider-why h2 { font-size:1.5rem; }
.provider-why p { margin-top:12px; color:var(--ink-soft); }
.provider-why__boundaries { max-width:900px; margin:28px 0 0; border:2px solid var(--ink); border-radius:18px; background:#fff9e8; box-shadow:5px 6px 0 var(--line); }
.provider-why__boundaries summary { padding:20px 24px; cursor:pointer; font:900 1.02rem var(--display); }
.provider-why__boundaries p { margin:0; padding:0 24px 24px; color:var(--ink-soft); }


.provider-front { padding:48px 0 88px; background:var(--white); }
.provider-front__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.provider-front article { padding:30px; border:2px solid var(--ink); border-radius:20px; background:var(--sky); box-shadow:6px 7px 0 var(--yellow); }
.provider-front article:nth-child(2) { background:#fff6d7; }
.provider-front h2 { font-size:1.9rem; }
.provider-front p { color:var(--ink-soft); }
.provider-front ul { margin:18px 0 0; padding-left:22px; display:grid; gap:10px; color:var(--ink-soft); }
.provider-front__access { margin-top:24px; padding:30px; border:2px solid var(--ink); border-radius:20px; background:#e7e3fa; box-shadow:6px 7px 0 var(--line); }
.provider-front__form { max-width:640px; margin:40px auto 0; padding:34px; border:2px solid var(--ink); border-radius:22px; background:var(--white); box-shadow:6px 7px 0 var(--line); display:grid; gap:8px; }
.provider-front__form label { margin-top:12px; font:900 .95rem var(--display); }
.provider-front__form input,.provider-front__form select,.provider-front__form textarea { padding:12px 14px; border:2px solid var(--ink); border-radius:12px; background:var(--white); font:inherit; color:inherit; }
.provider-front__form textarea { resize:vertical; }
.provider-front__form button { margin-top:22px; justify-self:start; }
.provider-front__form small { color:var(--ink-soft); }
.provider-front__status:empty { display:none; }
.provider-front__status { margin:14px 0 0; padding:12px 14px; border:2px solid var(--ink); border-radius:12px; background:#fff6d7; font-weight:700; }

.walkthrough { background:#f7fafb; }
.walkthrough__grid { display:grid; gap:24px; margin-top:40px; }
.walkthrough article { display:grid; grid-template-columns:76px 1fr; gap:26px; padding:34px; border:2px solid var(--ink); border-radius:22px; background:var(--white); box-shadow:6px 7px 0 var(--line); }
.walkthrough article:nth-child(3n+1) { background:#fff6d7; }
.walkthrough article:nth-child(3n+2) { background:var(--sky); }
.walkthrough article:nth-child(3n) { background:#e7e3fa; }
.walkthrough article>span { width:62px; height:62px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); font:900 1.3rem var(--display); }
.walkthrough h2 { font-size:clamp(2rem,3.5vw,3.5rem); }
.walkthrough p { max-width:780px; color:var(--ink-soft); font-size:1.08rem; }

.research-details { padding:48px 0 88px; background:var(--white); }
.research-details details { max-width:900px; margin:auto; border:2px solid var(--ink); border-radius:18px; background:#fff9e8; box-shadow:5px 6px 0 var(--line); }
.research-details summary { padding:22px 26px; cursor:pointer; font:900 1.05rem var(--display); }
.research-details p { margin:0; padding:0 26px 26px; color:var(--ink-soft); }

.resource-page { padding:72px 0 92px; background:#f7fafb; }
.resource-page h1 { max-width:900px; margin-top:12px; font-size:clamp(2.5rem,5vw,5rem); }
.resource-page__lede { max-width:760px; margin-top:18px; color:var(--ink-soft); font-size:1.15rem; }
.resource-page__card { max-width:760px; margin-top:34px; padding:30px; border:2px solid var(--ink); border-radius:20px; background:var(--white); box-shadow:6px 7px 0 var(--yellow); }
.resource-page__card h2 { font-size:1.7rem; }
.resource-page__card ol { display:grid; gap:14px; margin:18px 0 0; padding-left:24px; color:var(--ink-soft); }
.resource-page__cta { margin-top:30px; }
.resource-page__print-note { margin-top:24px; color:var(--ink-soft); font-weight:700; }

@media(max-width:1120px) {
  .nav-shell { flex-wrap:wrap; padding:14px 0; }
  .site-header nav { order:3; width:100%; margin:0; justify-content:space-between; }
  .trust-rail__layout,.therapist-sharing__layout { grid-template-columns:1fr 1fr; }
}

@media(max-width:760px) {
  .site-header nav { overflow-x:auto; justify-content:flex-start; gap:24px; padding-bottom:3px; }
  .site-header nav a { flex:none; }
  .nav-sharing { display:none; }
  .route-intro { padding:72px 0 64px; }
  .trust-rail__layout,.therapist-sharing__layout,.sharing-details__grid,.provider-front__grid,.provider-why__grid { grid-template-columns:1fr; }
  .walkthrough article { grid-template-columns:1fr; padding:25px; }
}

@media print {
  .site-header, .site-footer, .route-home, .resource-page__cta { display:none !important; }
  .resource-page { padding:0; background:#fff; }
  .resource-page__card { box-shadow:none; }
}