/* Scroll follows the product: a device fan, then the skills behind daily life. */
:root { --site-canvas: 1460px; --header-top: 28px; --header-size: 66px; --outline: 3px solid var(--deep); }
.site-header, .site-header.is-scrolled {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 124px;
  padding: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header > .brand, .site-header.is-scrolled > .brand {
  position: absolute;
  top: var(--header-top);
  left: 50%;
  transform: translateX(-50%);
  height: var(--header-size);
  width: max-content;
  padding: 0;
  gap: 11px;
  white-space: nowrap;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: opacity .2s;
}
.site-header > .brand > span { font-size: 44px; line-height: 1; }
.site-header > .brand > img { width: 44px; height: 50px; }
.menu-toggle, .header-actions {
  position: fixed;
  top: var(--header-top);
  margin: 0;
  z-index: 102;
  transition: top .25s var(--ease), transform .2s, box-shadow .2s;
}
.menu-toggle { left: max(52px, calc((100vw - var(--site-canvas)) / 2 + 40px)); width: 208px; min-width: 208px; height: var(--header-size); display: flex; align-items: center; justify-content: center; padding: 0 28px; gap: 12px; box-shadow: 0 4px 0 var(--deep); }
.menu-toggle > .menu-label { display: block; font-size: 15px; line-height: 1.2; letter-spacing: .065em; font-weight: 600; }
.menu-toggle > .menu-lines, .menu-lines > i { width: 19px; }
.header-actions { right: max(52px, calc((100vw - var(--site-canvas)) / 2 + 40px)); }
.header-actions .button-small { max-width: none; min-width: 296px; height: var(--header-size); min-height: var(--header-size); padding: 0 28px; gap: 23px; box-shadow: 0 4px 0 #0b3035; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .045em; text-transform: uppercase; }
.header-actions .button-small > span:last-child { font-size: 23px; font-weight: 400; line-height: 1; }
.mobile-nav:not([hidden]) { position: fixed; top: 112px; left: max(52px, calc((100vw - var(--site-canvas)) / 2 + 40px)); right: auto; width: 440px; max-height: calc(100dvh - 140px); }
.menu-lines > i { height: 2px; }
.menu-destinations > a { border-width: 2.5px; box-shadow: 0 4px 0 #b6c8ba; }
.hero { width: min(var(--site-canvas), calc(100% - 40px)); max-width: var(--site-canvas); margin: 124px auto 0; padding-top: 24px; }
.layer-gold { top: 14px; }
.hero-panel { overflow: clip; padding-top: 48px; }
.hero-copy { padding: 0 28px 42px; }
.hero-copy .eyebrow { padding: 0; margin-bottom: 28px; border: 0; border-radius: 0; background: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { font-size: clamp(65px, 6.6vw, 96px); letter-spacing: -.065em; }
.hero-title-bottom { padding-bottom: 0; }
.hero-lede { margin-top: 30px; font-size: 19px; line-height: 1.7; }
.hero-actions { margin-top: 28px; margin-bottom: 20px; }
.hero-actions .button { min-height: 68px; }
.hero-actions .text-link { min-height: 60px; }
.reassurance-bar { padding-block: 28px; border-bottom: 0; }
.intro { position: relative; padding: 0; height: auto; --intro-progress: 1; --core-progress: 1; --node-1: 1; --node-2: 1; --node-3: 1; }
.intro-sticky { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; padding: 100px 0; min-height: 620px; }
.scroll-ready .intro { height: 1020px; }
.scroll-ready .intro-sticky { position: sticky; top: 120px; height: 610px; padding: 35px 0; }
.intro .intro-copy { transform: translateY(calc((1 - var(--intro-progress)) * 45px)); }
.intro .intro-copy .section-index { font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: .11em; color: var(--teal); margin: 0 0 28px; }
.intro h2 { font-size: clamp(45px, 4.5vw, 65px); line-height: 1.09; }
.intro .intro-copy > p:not(.section-index) { font-size: 17px; line-height: 1.8; max-width: 430px; margin: 20px 0 0; }
.intro .intro-copy h2 + p { font-size: 20px; color: var(--deep); margin-top: 28px; }
.intro-invitation { display: flex; align-items: center; gap: 18px; margin-top: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.intro-invitation > span { font-size: 23px; letter-spacing: 0; }
.everyday-map { position: relative; height: 520px; width: 100%; }
.everyday-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.everyday-connectors path { stroke: #83a391; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--intro-progress)); }
.connection-core { position: absolute; left: 16.666%; top: 50%; display: grid; place-items: center; width: 136px; height: 136px; border: 3px solid var(--deep); border-radius: 50%; background: #fff0cd; transform: translate(-50%, -50%) rotate(calc((1 - var(--intro-progress)) * -16deg)); box-shadow: 0 7px 0 #b6c8ba; }
.connection-core > img { width: 74px; height: 88px; object-fit: contain; }
.connection-node { position: absolute; left: 43%; width: 57%; min-width: 250px; min-height: 106px; display: flex; align-items: center; gap: 15px; padding: 16px; border: 2.5px solid var(--deep); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 0 #b6c8ba; text-align: left; transform-origin: left center; transition: background .2s, box-shadow .2s; will-change: transform; }
.connection-node > img { width: 57px; height: 64px; object-fit: contain; }
.connection-node > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; }
.connection-node small { font-size: 10px; letter-spacing: .015em; color: var(--soft); }
.connection-node strong { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.connection-arrow { margin-left: auto; font-size: 23px; transition: transform .2s; }
.connection-node:hover { background: #fff0cd; box-shadow: 0 8px 0 #b6c8ba; }
.connection-node:hover .connection-arrow { transform: translate(3px, -3px); }
.node-words { top: 22px; z-index: 3; opacity: calc(.35 + var(--node-1) * .65); transform: translate3d(calc((1 - var(--node-1)) * -75px), calc((1 - var(--node-1)) * 180px), 0) rotate(calc((1 - var(--node-1)) * -6deg)); }
.node-understanding { top: 207px; z-index: 2; opacity: calc(.35 + var(--node-2) * .65); transform: translate3d(calc((1 - var(--node-2)) * -75px), 0, 0); }
.node-memory { top: 392px; z-index: 1; opacity: calc(.35 + var(--node-3) * .65); transform: translate3d(calc((1 - var(--node-3)) * -75px), calc((1 - var(--node-3)) * -180px), 0) rotate(calc((1 - var(--node-3)) * 6deg)); }
.connection-node:focus-visible { opacity: 1; transform: none; z-index: 5; }
.practice-section { overflow: clip; --practice-progress: 1; --skills-progress: 1; --demo-progress: 1; }
.practice-heading { margin-bottom: 55px; }
.practice-heading h2 { font-size: clamp(42px, 4.2vw, 60px); }
.practice-section .skill-list { transform: translateX(calc((1 - var(--practice-progress)) * -65px)); }
.practice-section .practice-demo { transform: translate3d(calc((1 - var(--practice-progress)) * 65px), calc((1 - var(--practice-progress)) * 40px), 0) rotate(calc((1 - var(--practice-progress)) * 4deg)); transform-origin: right bottom; }
.live-label { text-transform: uppercase; letter-spacing: .09em; font-size: 10px; }
.practice-section .live-label .status-dot { background: var(--teal); }
.small-flower, .hero-spark, .floating-label, .theatre-note, .title-swish { display: none; }
@media (max-width: 1200px) {
  :root { --header-size: 60px; }
  .site-header > .brand > span { font-size: 38px; }
  .site-header > .brand > img { width: 40px; height: 46px; }
  .menu-toggle { left: 40px; min-width: 185px; width: 185px; padding-inline: 22px; }
  .menu-toggle > .menu-label { font-size: 13px; }
  .header-actions { right: 40px; }
  .header-actions .button-small { min-width: 250px; font-size: 12px; gap: 20px; padding-inline: 23px; }
  .mobile-nav:not([hidden]) { left: 40px; }
  .hero h1 { font-size: clamp(61px, 6.8vw, 82px); }
  .intro-sticky { gap: 25px; }
  .intro h2 { font-size: 51px; }
  .connection-node { min-width: 220px; padding: 13px; gap: 11px; }
  .connection-node > img { width: 45px; height: 54px; }
  .connection-node strong { font-size: 14px; }
  .connection-node small { font-size: 9px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  :root { --header-size: 58px; }
  .site-header > .brand > span { font-size: 32px; }
  .site-header > .brand > img { width: 34px; height: 40px; }
  .menu-toggle { left: 25px; width: 157px; min-width: 157px; padding-inline: 17px; }
  .menu-toggle > .menu-label { font-size: 11px; }
  .header-actions { right: 25px; }
  .header-actions .button-small { min-width: 205px; padding-inline: 18px; font-size: 10px; gap: 13px; }
  .hero h1 { font-size: 65px; }
  .hero-lede { font-size: 17px; }
  .intro h2 { font-size: 44px; }
  .intro .intro-copy > p:not(.section-index) { font-size: 15px; }
  .intro .intro-copy h2 + p { font-size: 17px; }
  .connection-node { min-width: 185px; padding: 11px; gap: 8px; }
  .connection-node > img { width: 35px; height: 43px; }
  .connection-node strong { font-size: 12px; }
  .connection-node small { font-size: 8px; }
  .connection-core { width: 104px; height: 104px; }
  .connection-core > img { width: 60px; height: 72px; }
}
@media (max-width: 760px) {
  :root { --header-size: 55px; }
  .site-header { height: 150px; }
  .site-header > .brand, .site-header.is-scrolled > .brand { top: 16px; height: 44px; gap: 8px; }
  .site-header > .brand > span { font-size: 35px; }
  .site-header > .brand > img { width: 37px; height: 43px; }
  .site-header.is-scrolled > .brand { opacity: 0; pointer-events: none; }
  .menu-toggle, .header-actions { top: 77px; }
  .menu-toggle { left: 18px; width: calc(50vw - 27px); min-width: 0; height: 55px; padding: 0 12px; gap: 9px; box-shadow: 0 4px 0 var(--deep); }
  .menu-toggle > .menu-label { display: block; font-size: 11px; letter-spacing: .025em; }
  .menu-toggle > .menu-lines, .menu-lines > i { width: 16px; }
  .header-actions { display: flex; right: 18px; width: calc(50vw - 27px); }
  .header-actions .button-small { width: 100%; min-width: 0; min-height: 55px; padding: 0 12px; font-size: 9px; letter-spacing: .02em; gap: 7px; box-shadow: 0 4px 0 #0b3035; }
  .header-actions .button-small > span:last-child { font-size: 20px; }
  .site-header.is-scrolled .menu-toggle, .site-header.is-scrolled .header-actions { top: 17px; }
  .mobile-nav:not([hidden]) { top: 151px; left: 15px; right: 15px; width: auto; max-height: calc(100dvh - 174px); padding: 20px; }
  .site-header.is-scrolled .mobile-nav:not([hidden]) { top: 91px; max-height: calc(100dvh - 114px); }
  .hero { width: calc(100% - 24px); margin-top: 152px; padding-top: 16px; }
  .hero-panel { padding-top: 28px; }
  .hero-layer { border-radius: 26px 26px 0 0; }
  .layer-gold { top: 8px; }
  .hero-copy { padding: 0 10px 24px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: .08em; margin-bottom: 23px; }
  .hero h1 { font-size: clamp(34px, 8.6vw, 59px); padding-inline: 0; }
  .hero-lede { font-size: 17px; padding-inline: 18px; margin-top: 24px; }
  .hero-actions { margin-top: 23px; gap: 17px; margin-bottom: 0; }
  .hero-actions .button { min-height: 64px; font-size: 14px; }
  .hero-actions .text-link { font-size: 13px; min-height: 48px; }
  .reassurance-bar { padding: 23px 0; }
  .intro { padding: 0; }
  .scroll-ready .intro { height: auto; }
  .intro-sticky, .scroll-ready .intro-sticky { position: relative; top: auto; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 38px; align-items: stretch; padding: 67px 0 65px; }
  .intro .intro-copy { transform: none; }
  .intro .intro-copy .section-index { font-size: 10px; margin-bottom: 25px; }
  .intro h2 { font-size: clamp(38px, 8.7vw, 56px); }
  .intro .intro-copy > p:not(.section-index) { font-size: 17px; line-height: 1.8; }
  .intro .intro-copy h2 + p { font-size: 20px; }
  .intro-invitation { font-size: 10px; margin-top: 22px; }
  .everyday-map { height: 459px; }
  .everyday-map:before { content: ''; position: absolute; left: 50%; top: 50px; bottom: 50px; border-left: 1.5px solid #659b8b; transform-origin: top; scale: 1 var(--intro-progress); }
  .everyday-connectors { display: none; }
  .connection-core { left: 50%; top: 48px; width: 96px; height: 96px; }
  .connection-core > img { width: 54px; height: 64px; }
  .connection-node { left: 0; width: 100%; min-width: 0; min-height: 93px; gap: 15px; padding: 15px 18px; border-radius: 15px; }
  .connection-node > img { width: 55px; height: 60px; }
  .connection-node small { font-size: 11px; }
  .connection-node strong { font-size: 17px; }
  .connection-arrow { font-size: 24px; }
  .node-words { top: 115px; transform: translateY(calc((1 - var(--node-1)) * 45px)); }
  .node-understanding { top: 230px; transform: translateY(calc((1 - var(--node-2)) * 45px)); }
  .node-memory { top: 345px; transform: translateY(calc((1 - var(--node-3)) * 45px)); }
  .practice-heading h2 { font-size: clamp(35px, 7.8vw, 49px); }
  .practice-section .skill-list { transform: none; }
  .practice-section .practice-demo { transform: translateY(calc((1 - var(--practice-progress)) * 45px)); }
}
@media (max-width: 380px) {
  .site-header > .brand > span { font-size: 31px; }
  .site-header > .brand > img { width: 34px; height: 39px; }
  .menu-toggle, .header-actions { top: 72px; }
  .menu-toggle { left: 15px; width: calc(50vw - 23px); }
  .header-actions { right: 15px; width: calc(50vw - 23px); }
  .menu-toggle > .menu-label { font-size: 10px; }
  .header-actions .button-small { font-size: 8px; gap: 5px; padding-inline: 8px; }
  .hero { margin-top: 148px; }
  .hero h1 { font-size: 29px; }
  .hero-copy .eyebrow { font-size: 8px; }
  .hero-lede { font-size: 16px; }
  .hero-actions .button { font-size: 13px; gap: 20px; padding-inline: 20px; }
  .intro h2 { font-size: 34px; }
  .connection-node strong { font-size: 15px; }
  .connection-node small { font-size: 10px; }
}
@media (max-height: 680px) and (min-width: 761px) {
  .scroll-ready .intro { height: auto; }
  .scroll-ready .intro-sticky { position: relative; top: auto; height: auto; min-height: 600px; padding-block: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-ready .intro { height: auto; }
  .scroll-ready .intro-sticky { position: relative; top: auto; height: auto; padding-block: 100px; }
  .intro .intro-copy, .connection-node, .practice-section .skill-list, .practice-section .practice-demo { transform: none; opacity: 1; }
  .connection-core { transform: translate(-50%, -50%); }
  .everyday-connectors path { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .scroll-ready .intro-sticky { padding-block: 67px 65px; }
}
/* Keep stacked cards opaque; their content should never ghost through a neighbour. */
.connection-node { opacity: 1; }
.header-start-short { display: none; }
@media (max-width: 760px) {
  .header-start-full { display: none; }
  .header-start-short { display: inline; }
  .header-actions .button-small { font-size: 12px; }
  .menu-toggle > .menu-label { font-size: 12px; }
}
@media (max-width: 380px) {
  .header-actions .button-small { font-size: 10px; }
  .menu-toggle > .menu-label { font-size: 11px; }
}
/* One scene owns the devices, the background, and their shared crop plane. */
.showcase-track { position: relative; height: calc(100svh - 120px); margin-top: -60px; }
.app-theatre {
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  height: calc(100svh - 120px);
  min-height: 0;
  margin: 0;
  --device-width: min(44vw, clamp(180px, calc((100svh - 120px) * .46 + 10px), 520px));
  --fan-distance: min(210px, calc(var(--device-width) * .5));
  --device-baseline: -35px;
  --hero-spread: .65;
  --hero-entry: 1;
}
.scroll-ready .showcase-track { height: calc(100svh - 120px + 620px); }
.scroll-ready .app-theatre { position: sticky; top: 120px; }
.device-canvas {
  position: absolute;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, var(--paper) 4%, #f2f4eb 52%, #dce8dc 100%);
}
.device-canvas > .phone {
  position: absolute;
  top: auto;
  bottom: var(--device-baseline);
  width: calc(var(--device-width) * .89);
  border: 8px solid var(--deep);
  border-radius: 43px;
  background: var(--cream);
  box-shadow: 6px 9px 0 #17485020;
  transform-origin: 50% 100%;
  will-change: transform;
}
.device-canvas > .phone-path, .motion-paused .device-canvas > .phone-path {
  left: calc(50% - var(--device-width) * .5);
  width: var(--device-width);
  z-index: 4;
  transform: translate3d(0, calc((1 - var(--hero-entry)) * 75px), 0) scale(calc(1 + var(--hero-spread) * .012));
}
.device-canvas > .phone-words, .motion-paused .device-canvas > .phone-words {
  left: calc(50% - var(--device-width) * .755);
  z-index: 2;
  transform: translate3d(calc(var(--hero-spread) * var(--fan-distance) * -1), calc((1 - var(--hero-entry)) * 120px), 0) rotate(calc(-2deg - var(--hero-spread) * 6deg));
}
.device-canvas > .phone-progress, .motion-paused .device-canvas > .phone-progress {
  left: calc(50% - var(--device-width) * .135);
  z-index: 1;
  transform: translate3d(calc(var(--hero-spread) * var(--fan-distance)), calc((1 - var(--hero-entry)) * 145px), 0) rotate(calc(2deg + var(--hero-spread) * 6deg));
}
@media (max-width: 1000px) and (min-width: 761px) {
  .device-canvas > .phone { border-width: 7px; border-radius: 37px; }
}
@media (max-width: 760px) {
  .showcase-track, .app-theatre { height: calc(100svh - 96px); }
  .app-theatre {
    --device-width: min(83vw, calc((100svh - 96px) * .46 + 10px));
    --fan-distance: clamp(40px, 13vw, 65px);
    --device-baseline: -25px;
  }
  .scroll-ready .showcase-track { height: calc(100svh - 96px + 350px); }
  .scroll-ready .app-theatre { top: 96px; }
  .device-canvas > .phone { border-width: 6px; border-radius: 35px; }
  .device-canvas > .phone-words, .motion-paused .device-canvas > .phone-words {
    transform: translate3d(calc(var(--hero-spread) * var(--fan-distance) * -1), calc((1 - var(--hero-entry)) * 75px), 0) rotate(calc(-1deg - var(--hero-spread) * 4deg));
  }
  .device-canvas > .phone-progress, .motion-paused .device-canvas > .phone-progress {
    transform: translate3d(calc(var(--hero-spread) * var(--fan-distance)), calc((1 - var(--hero-entry)) * 90px), 0) rotate(calc(1deg + var(--hero-spread) * 4deg));
  }
}
@media (max-width: 380px) {
  .device-canvas > .phone { border-width: 5px; border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-ready .showcase-track { height: calc(100svh - 120px); }
  .scroll-ready .app-theatre { position: relative; top: auto; }
  .device-canvas > .phone { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .scroll-ready .showcase-track { height: calc(100svh - 96px); }
}

/* The rest of the page shares a rhythm, with a different job for each scene. */
.practice-section {
  width: min(var(--site-canvas), calc(100% - 40px));
  margin-inline: auto;
  padding-block: 78px 68px;
  border: var(--outline);
  border-radius: 40px;
  background: #d6e6d8;
}
.practice-section .skill-list { transform: translateX(calc((1 - var(--practice-progress)) * -30px)); }
.practice-section .practice-demo { transform: translate3d(calc((1 - var(--practice-progress)) * 40px), calc((1 - var(--practice-progress)) * 24px), 0); }
.practice-heading { margin-bottom: 48px; }
.practice-demo { border-radius: 28px; box-shadow: 0 8px 0 #a4bfad; }
.skill-button { border-width: 3px; }
.skill-button.is-active { box-shadow: 0 5px 0 #a4bfad; }
.skill-button.is-active .skill-arrow { color: var(--paper); background: var(--deep); }
.skill-arrow { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.demo-option { border: 2px solid #8aa5a4; box-shadow: 0 4px 0 #d0dbcf; }
.play-icon { border: 0; background: var(--gold); color: var(--deep); }
.skill-button { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.skill-button:active { transform: translateY(2px); }
.demo-option { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.demo-option:active:not([disabled]) { transform: translateY(2px); }
.demo-disclosure { margin-top: 28px; }
.focus-grid { width: min(230px, 100%); }

/* A readable spine survives as each completed chapter recedes. */
.how-section { padding-block: 112px 108px; }
.how-heading { margin-bottom: 54px; }
.chapter-stack { gap: 44px; }
.chapter {
  --chapter-progress: 1;
  --chapter-cover: 0;
  --illustration-progress: 1;
  top: 120px;
  min-height: 540px;
  padding: 28px 46px 44px;
  gap: 60px;
  align-items: start;
  isolation: isolate;
  transform: translateY(var(--chapter-release, 0px)) scale(calc(1 - var(--chapter-cover) * .035));
  box-shadow: 0 -8px 0 var(--cream);
}
.chapter-one { z-index: 1; }
.chapter-two { top: 192px; z-index: 2; background: #cce2d2; }
.chapter-three { top: 264px; z-index: 3; background: #f5d58e; }
.chapter:after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--deep); opacity: calc(var(--chapter-cover) * .045); z-index: 4; }
.chapter:focus-within { --illustration-progress: 1 !important; transform: none; z-index: 10; }
.chapter-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.chapter-kicker .chapter-number { width: 40px; height: 40px; flex: 0 0 40px; margin: 0; font-size: 11px; border: 0; background: var(--deep); color: var(--paper); font-weight: 600; }
.chapter-kicker .eyebrow { margin: 0; font-size: 10px; line-height: 1.5; }
.chapter h3 { font-size: clamp(32px, 3.2vw, 46px); margin-bottom: 22px; }
.chapter .text-link { margin-top: 25px; }
.chapter .goal-tag, .chapter .goal-connectors path, .chapter .tile-current, .chapter .calendar-checks > span { animation: none !important; }
.goal-art, .path-art, .calendar-art { min-height: 365px; }
.chapter > .goal-art, .chapter > .path-art, .chapter > .calendar-art { align-self: center; }
.goal-center { width: 100px; height: 112px; margin-right: 12%; transform: scale(calc(.9 + var(--illustration-progress) * .1)); }
.goal-connectors path { stroke-dashoffset: calc(1 - var(--illustration-progress)); }
.goal-tag { background: #f2f0e5; border: 0; border-radius: 18px; padding: 16px 18px; gap: 10px; font-size: 13px; box-shadow: 0 5px 0 #bdcabe; transform: translate3d(calc((1 - var(--illustration-progress)) * var(--tag-x)), calc((1 - var(--illustration-progress)) * var(--tag-y)), 0) rotate(calc((1 - var(--illustration-progress)) * var(--tag-angle))); transition: background .2s, box-shadow .2s; }
.goal-tag > span { margin-left: 8px; font-size: 20px; }
.goal-tag:hover { background: #f8d993; box-shadow: 0 7px 0 #b9ab7d; }
.goal-tag-one { --tag-x: -32px; --tag-y: -20px; --tag-angle: -8deg; left: 0; top: 4px; }
.goal-tag-two { --tag-x: 32px; --tag-y: 0px; --tag-angle: 7deg; right: 0; top: 140px; }
.goal-tag-three { --tag-x: -24px; --tag-y: 20px; --tag-angle: -5deg; left: 20px; bottom: 2px; }
.path-art { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 450px; }
.lesson-path-scene { position: relative; width: min(360px, 100%); height: 420px; flex: 0 0 420px; }
.lesson-path-track { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 calc((1 - var(--illustration-progress)) * 100%) 0); }
.lesson-path-track path { stroke: #91afb0; stroke-width: 5px; stroke-linecap: round; stroke-dasharray: .5 16; vector-effect: non-scaling-stroke; }
.lesson-path-track .lesson-path-passed { stroke: #689d8d; }
.lesson-step { position: absolute; display: grid; place-items: center; width: 130px; height: 120px; left: calc(50% - 65px); top: 150px; }
.lesson-step-done { left: calc(67.77778% - 65px); top: 10px; }
.lesson-step-next { left: calc(32.22222% - 65px); top: 290px; }
.lesson-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 104px; height: 96px; border: 2px solid #cedde3; border-radius: 29px; background: linear-gradient(155deg, #fff, #f8fbfc); color: var(--ink); box-shadow: 0 5px 0 #b7cdd0, inset 0 1px 1px #fff; }
.lesson-step-done .lesson-tile { background: linear-gradient(155deg, #c7e8d9, #b3decb); border-color: #98cebb; box-shadow: 0 5px 0 #82b5a0, inset 0 1px 1px #ffffffc0; }
.lesson-step-current .lesson-tile { width: 130px; height: 120px; gap: 7px; border-radius: 32px; border-color: #e6b548; background: linear-gradient(155deg, #f9db8e, #f6cb6a); box-shadow: 0 6px 0 #bd933b, inset 0 1px 1px #fff7dc; }
.lesson-caption { font-size: 20px; font-weight: 600; line-height: 24px; }
.lesson-number { font-size: 36px; font-weight: 800; line-height: 40px; font-variant-numeric: tabular-nums; }
.lesson-step-current .lesson-number { font-size: 44px; line-height: 44px; }
.lesson-pips { display: flex; gap: 5px; height: 7px; }
.lesson-pips i { width: 11px; height: 7px; border: 1.5px solid #6d949e; border-radius: 3px; background: #e3eff0; }
.lesson-step-current .lesson-pips i { width: 13px; border-color: #ae8b3f; background: #ffedb9; }
.lesson-pips i.filled, .lesson-step-current .lesson-pips i.filled { background: var(--ink); border-color: var(--ink); }
.lesson-badge { position: absolute; top: 6px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 10px; background: #eaf2f5; }
.lesson-step-done .lesson-badge { background: #eaf8f1; }
.lesson-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lesson-step-done { transform: translateY(calc((1 - var(--illustration-progress)) * 16px)); }
.lesson-step-current { transform: translateY(calc((1 - var(--illustration-progress)) * 30px)); }
.lesson-step-next { transform: translateY(calc((1 - var(--illustration-progress)) * 44px)); }
.path-art-caption { position: relative; left: auto; bottom: auto; margin-top: 10px; font-size: 13px; transform: none; letter-spacing: 0; }
.calendar-card { width: min(370px, 100%); margin: 0; padding: 27px 24px; border: 0; border-radius: 28px; box-shadow: 0 7px 0 #c6a25b; transform: translateY(calc((1 - var(--illustration-progress)) * 28px)) rotate(calc((1 - var(--illustration-progress)) * -6deg)); }
.calendar-title { font-size: 17px; margin-bottom: 26px; }
.calendar-days, .calendar-checks { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-days > span, .calendar-checks > span { min-width: 0; width: 100%; }
.calendar-days { font-size: 11px; }
.calendar-checks > span { --day-order: 0; --day-progress: clamp(0, calc(var(--illustration-progress) * 2 - var(--day-order) * .12), 1); font-size: 16px; transform: translateY(calc((1 - var(--day-progress)) * 10px)) scale(calc(.75 + var(--day-progress) * .25)); opacity: calc(.45 + var(--day-progress) * .55); }
.calendar-checks > span:nth-child(2) { --day-order: 1; }
.calendar-checks > span:nth-child(3) { --day-order: 2; }
.calendar-checks > span:nth-child(4) { --day-order: 3; }
.calendar-checks > span:nth-child(5) { --day-order: 4; }
.calendar-checks > span:nth-child(6) { --day-order: 5; }
.calendar-checks > span:nth-child(7) { --day-order: 6; }
.calendar-today > i { width: 10px; height: 10px; border: 2px solid var(--deep); border-radius: 50%; }
.calendar-plant { right: -18px; bottom: -8px; width: 130px; height: 130px; transform: translateY(calc((1 - var(--illustration-progress)) * 20px)); }
.illustration-label { bottom: -14px; }

/* The pause in the story is carried by type, without spinning ornaments. */
.layered-interlude { --breathing-progress: 1; width: min(var(--site-canvas), calc(100% - 40px)); margin-inline: auto; padding-top: 24px; }
.interlude-layer { border-radius: 40px 40px 0 0; }
.interlude-mint { transform: translateY(calc((1 - var(--breathing-progress)) * 22px)); }
.interlude-gold { top: 14px; transform: translateY(calc((1 - var(--breathing-progress)) * 11px)); }
.breathing-room { --breathing-progress: 1; min-height: 540px; padding: 72px 28px; }
.breathing-content .eyebrow { margin: 0 0 24px; text-transform: uppercase; letter-spacing: .1em; }
.breathing-room h2 { font-size: clamp(48px, 6vw, 84px); line-height: 1.09; }
.breathing-room h2 > span { position: relative; display: inline-block; isolation: isolate; color: var(--paper); }
.breathing-room h2 > span:after { content: ''; position: absolute; left: 0; right: 0; bottom: -.045em; height: .075em; border-radius: 999px; background: var(--gold); transform: scaleX(var(--breathing-progress)); transform-origin: left; z-index: -1; }
.breathing-room p:not(.eyebrow) { margin-top: 30px; }
.motion-toggle { margin-top: 30px; min-height: 48px; border: 0; padding-inline: 21px; background: var(--paper); color: var(--deep); font-weight: 600; box-shadow: 0 4px 0 #0b3035; }

/* The photograph moves inside its frame; the reading column stays anchored. */
.family-section { --family-progress: 1; --photo-progress: 1; padding-block: 110px 112px; }
.family-grid { gap: 78px; }
.family-photo { height: 540px; overflow: clip; border: 0; border-radius: 32px; background: var(--paper); }
.family-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.9); transform: scale(calc(1.06 - var(--family-progress) * .02)) translateY(calc((.5 - var(--family-progress)) * 20px)); }
.photo-note { position: relative; display: block; bottom: auto; left: auto; transform: none; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; letter-spacing: 0; }
.family-copy h2 { font-size: clamp(40px, 4vw, 58px); }
.check-list { margin-block: 27px 32px; }
.check-list li { align-items: flex-start; line-height: 1.7; }
.check-list li:before { margin-top: 2px; }

/* Answers open in place. Scroll movement ends before the questions are used. */
.faq-section { --faq-progress: 1; grid-template-columns: .7fr 1.3fr; gap: 90px; padding-block: 82px 112px; }
.faq-heading { position: sticky; top: 150px; align-self: start; }
.faq-heading h2 { font-size: clamp(48px, 5vw, 72px); }
.faq-list { counter-reset: question; transform: translateY(calc((1 - var(--faq-progress)) * 28px)); }
.faq-list details { padding-inline: 20px; border-bottom: 2px solid #17485030; transition: background .2s; }
.faq-list details[open] { background: #e6eee2; }
.faq-list summary { display: grid; grid-template-columns: 26px 1fr 36px; gap: 16px; min-height: 94px; padding-block: 23px; font-size: 18px; line-height: 1.5; }
.faq-list summary:before { counter-increment: question; content: '0' counter(question); font-size: 10px; color: var(--teal); align-self: center; }
.faq-list summary > span { width: 36px; height: 36px; background: var(--deep); color: var(--paper); border: 0; box-shadow: none; }
.faq-list details[open] summary > span { background: var(--gold); color: var(--deep); }
.faq-answer { padding: 0 52px 28px 42px; animation: none; }
.faq-answer p { line-height: 1.85; }

/* One colored final chapter carries the invitation through to the sign-off. */
.closing-section { --closing-progress: 1; width: min(var(--site-canvas), calc(100% - 40px)); margin: 0 auto; padding: 86px 28px 68px; border-radius: 40px 40px 0 0; border-bottom: 0; background: var(--deep); color: var(--paper); transform: translateY(calc((1 - var(--closing-progress)) * 24px)); }
.closing-section > .eyebrow { color: var(--mint); margin-bottom: 28px; }
.closing-section h2 { font-size: clamp(56px, 7vw, 100px); line-height: 1.08; transform: translateY(calc((1 - var(--closing-progress)) * 18px)); }
.closing-section h2 > span { color: var(--mint); }
.closing-section > p:not(.eyebrow) { color: #dce9e2; margin-block: 28px 30px; }
.closing-section .button { min-height: 68px; }
.closing-login { color: var(--paper); margin-top: 26px; }
.site-footer { --footer-progress: 1; width: min(var(--site-canvas), calc(100% - 40px)); margin: -1px auto 20px; padding: 44px 60px 0; border: var(--outline); border-top: 0; border-radius: 0 0 40px 40px; background: var(--deep); color: var(--paper); }
.footer-top, .footer-bottom, .footer-wordmark-mask { width: min(1240px, 100%); margin-inline: auto; }
.footer-top { grid-template-columns: 1.4fr 1fr 1fr auto; gap: 50px; padding-top: 36px; border-top: 1px solid #c7e8d950; }
.footer-top .brand > span { color: var(--paper); }
.footer-top .brand > img { padding: 4px; background: var(--paper); border-radius: 50%; }
.footer-top > div:first-child > p { color: #dce9e2; }
.footer-links { font-size: 13px; gap: 14px; }
.footer-bottom { border-color: #c7e8d950; color: #dce9e2; margin-top: 40px; padding-block: 28px 34px; font-size: 11px; }
.footer-bottom > p { color: #dce9e2; }
.back-top { color: var(--deep); border: 0; background: var(--mint); }
.back-top:hover { background: var(--paper); color: var(--deep); }
.footer-wordmark-mask { overflow: clip; padding-top: 16px; }
.footer-wordmark { display: block; margin: 0; padding: 0 0 18px; font-size: clamp(44px, 16.5vw, 242px); line-height: 1; color: var(--paper); transform: translateY(calc((1 - var(--footer-progress)) * 70px)); }

@media (max-width: 1200px) and (min-width: 761px) {
  .chapter { padding-inline: 32px; gap: 32px; }
  .goal-tag { font-size: 11px; padding: 10px; gap: 8px; }
  .goal-tag > span { margin-left: 0; }
  .goal-tag img { width: 36px; height: 36px; }
  .goal-tag-three { left: 0; }
  .calendar-card { padding-inline: 18px; }
  .calendar-plant { width: 110px; height: 110px; right: -10px; }
  .family-grid { gap: 44px; }
  .family-photo { height: 500px; }
  .family-copy h2 { font-size: 43px; }
  .faq-section { gap: 45px; }
  .faq-list details { padding-inline: 14px; }
  .faq-list summary { font-size: 16px; gap: 12px; }
  .site-footer { padding-inline: 40px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .chapter { padding-inline: 26px; gap: 24px; }
  .chapter h3 { font-size: 33px; }
  .chapter-copy > p:not(.eyebrow) { font-size: 15px; }
  .chapter-kicker { gap: 10px; }
  .chapter-kicker .eyebrow { font-size: 9px; }
  .goal-tag { gap: 5px; font-size: 10px; padding: 8px; }
  .goal-tag img { width: 30px; height: 32px; }
  .goal-tag-two { top: 145px; }
  .calendar-card { padding-inline: 12px; }
  .calendar-days, .calendar-checks { gap: 4px; }
  .calendar-checks > span { font-size: 12px; }
  .calendar-title { font-size: 14px; }
  .calendar-plant { width: 90px; height: 90px; }
  .family-photo { height: 470px; }
  .family-copy h2 { font-size: 37px; }
  .faq-section { grid-template-columns: .75fr 1.25fr; gap: 30px; }
  .faq-list summary { grid-template-columns: 20px 1fr 32px; gap: 10px; font-size: 15px; }
  .faq-answer { padding-left: 30px; padding-right: 10px; }
  .footer-top { gap: 25px; }
  .site-footer { padding-inline: 32px; }
}
@media (max-width: 1000px) {
  .goal-art { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; min-height: 330px; }
  .goal-art .goal-center { width: 64px; height: 72px; margin: 0 0 4px; align-self: center; }
  .goal-connectors { display: none; }
  .goal-art .goal-tag { position: relative; top: auto; right: auto; bottom: auto; left: auto; min-height: 52px; padding: 8px 12px; font-size: 12px; gap: 10px; }
  .goal-art .goal-tag > span { margin-left: auto; }
}
@media (max-height: 780px) {
  .chapter { position: relative; top: auto; }
}
@media (max-width: 760px) {
  /* Each mobile object arrives when it is visible, rather than at the top of its long section. */
  .connection-core { transform: translate(-50%, -50%) scale(calc(.84 + var(--core-progress) * .16)) rotate(calc((1 - var(--core-progress)) * -12deg)); }
  .node-words { transform: translateY(calc((1 - var(--node-1)) * 50px)) rotate(calc((1 - var(--node-1)) * -2deg)); }
  .node-understanding { transform: translateY(calc((1 - var(--node-2)) * 50px)); }
  .node-memory { transform: translateY(calc((1 - var(--node-3)) * 50px)) rotate(calc((1 - var(--node-3)) * 2deg)); }
  .practice-section { width: calc(100% - 24px); padding-block: 42px 36px; border-radius: 28px; }
  .practice-section > .section-wrap { width: calc(100% - 32px); }
  .practice-heading { margin-bottom: 28px; }
  .practice-section .skill-list { transform: translateY(calc((1 - var(--skills-progress)) * 28px)); scroll-snap-type: x proximity; }
  .skill-button { scroll-snap-align: center; }
  .skill-arrow { display: none; }
  .practice-section .practice-demo { transform: translateY(calc((1 - var(--demo-progress)) * 42px)); padding-inline: 18px; }
  .practice-section .skill-list:has(:focus-visible), .practice-section .practice-demo:has(:focus-visible) { transform: none; }
  .demo-disclosure { margin-inline: 0; font-size: 10px; }
  .how-section { padding-block: 72px 72px; }
  .how-heading { margin-bottom: 32px; }
  .chapter-stack { gap: 24px; }
  .chapter { position: relative; top: auto; padding: 25px 24px 34px; min-height: 0; gap: 32px; align-items: stretch; transform: translateY(calc((1 - var(--chapter-progress)) * 42px)); }
  .chapter-kicker { gap: 12px; margin-bottom: 27px; }
  .chapter-kicker .chapter-number { width: 34px; height: 34px; flex-basis: 34px; }
  .chapter-kicker .eyebrow { font-size: 9px; }
  .chapter h3 { font-size: clamp(32px, 8.4vw, 42px); }
  .chapter-copy > p:not(.eyebrow) { font-size: 16px; }
  .goal-art, .path-art, .calendar-art { min-height: 310px; width: 100%; }
  .path-art { min-height: 452px; }
  .goal-center { width: 86px; height: 100px; }
  .goal-tag { font-size: 11px; padding: 10px; gap: 7px; }
  .goal-tag img { width: 35px; height: 35px; }
  .goal-tag > span { margin-left: 0; }
  .goal-tag-one { top: 0; }
  .goal-tag-two { top: 124px; right: 0; }
  .goal-tag-three { left: 0; bottom: 0; }
  .calendar-card { width: min(310px, 100%); padding-inline: 17px; }
  .calendar-title { font-size: 16px; }
  .calendar-checks > span { font-size: 14px; }
  .calendar-plant { width: 105px; height: 105px; right: -8px; bottom: -5px; }
  .layered-interlude { width: calc(100% - 24px); padding-top: 16px; }
  .interlude-layer { border-radius: 28px 28px 0 0; }
  .interlude-gold { top: 8px; }
  .breathing-room { min-height: 450px; padding: 58px 20px; border-radius: 28px; }
  .breathing-content .eyebrow { font-size: 10px; letter-spacing: .06em; }
  .breathing-room h2 { font-size: clamp(36px, 9vw, 54px); }
  .breathing-room p:not(.eyebrow) { font-size: 15px; line-height: 1.85; }
  .motion-toggle { margin-top: 26px; font-size: 11px; }
  .family-section { padding-block: 72px 76px; }
  .family-grid { gap: 34px; }
  .family-photo { height: min(108vw, 450px); border-radius: 26px; }
  .family-photo > img { transform: scale(calc(1.12 - var(--photo-progress) * .04)) translateY(calc((.5 - var(--photo-progress)) * 22px)); }
  .photo-note { margin-top: 12px; font-size: 12px; }
  .family-copy h2 { font-size: clamp(36px, 8.7vw, 52px); }
  .family-copy > p:not(.eyebrow) { font-size: 16px; }
  .faq-section { display: block; padding-block: 60px 72px; }
  .faq-heading { position: relative; top: auto; margin-bottom: 32px; }
  .faq-heading h2 { font-size: 48px; }
  .faq-list details { padding-inline: 12px; }
  .faq-list summary { grid-template-columns: 20px 1fr 32px; min-height: 88px; gap: 10px; font-size: 15px; }
  .faq-list summary > span { width: 32px; height: 32px; }
  .faq-answer { padding-left: 30px; padding-right: 5px; }
  .faq-answer p { font-size: 15px; }
  .closing-section { width: calc(100% - 24px); padding: 60px 18px 48px; border-radius: 28px 28px 0 0; }
  .closing-section > .eyebrow { font-size: 10px; margin-bottom: 24px; }
  .closing-section h2 { font-size: clamp(36px, 9.4vw, 56px); }
  .closing-section > p:not(.eyebrow) { font-size: 15px; margin-inline: auto; }
  .closing-section .button { min-height: 64px; font-size: 13px; padding-inline: 22px; }
  .closing-login { max-width: 100%; font-size: 10px; }
  .site-footer { width: calc(100% - 24px); padding: 20px 24px 0; margin-bottom: 12px; border-radius: 0 0 28px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 16px; padding-top: 30px; }
  .footer-top .brand > span { font-size: 27px; }
  .footer-top > div:first-child > p { font-size: 14px; }
  .footer-links { font-size: 12px; gap: 14px; }
  .back-top { top: 30px; width: 40px; height: 40px; }
  .footer-bottom { margin-top: 30px; padding-block: 25px 20px; font-size: 10px; }
  .footer-wordmark-mask { padding-top: 12px; }
  .footer-wordmark { font-size: 14.8vw; padding-bottom: 16px; }
}
@media (max-width: 380px) {
  .chapter { padding-inline: 20px; }
  .goal-tag { font-size: 10px; gap: 5px; padding: 8px; }
  .goal-tag img { width: 30px; height: 30px; }
  .calendar-card { padding-inline: 12px; }
  .calendar-days, .calendar-checks { gap: 4px; }
  .calendar-checks > span { font-size: 12px; }
  .tile-current { left: 30px; }
  .family-copy .button { font-size: 12px; }
  .breathing-room { padding-inline: 14px; }
  .breathing-room h2 { font-size: 31px; }
  .closing-section h2 { font-size: 32px; }
  .footer-top .brand > span { font-size: 23px; }
  .footer-top .brand > img { width: 30px; height: 36px; }
  .footer-links { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter { position: relative; top: auto; transform: none; }
  .intro .connection-node, .practice-section .skill-list, .practice-section .practice-demo { transform: none; }
  .intro .connection-core { transform: translate(-50%, -50%); }
  .goal-center, .goal-tag, .path-art .path-tile, .calendar-card, .calendar-checks > span, .calendar-plant, .interlude-layer, .family-photo > img, .faq-list, .closing-section, .closing-section h2, .footer-wordmark { transform: none; }
  .goal-connectors path { stroke-dashoffset: 0; }
  .path-art > svg { clip-path: none; }
  .lesson-path-track { clip-path: none; }
  .lesson-step-done, .lesson-step-current, .lesson-step-next { transform: none; }
  .calendar-checks > span { opacity: 1; }
  .breathing-room h2 > span:after { transform: none; }
}
.motion-paused .chapter { position: relative; top: auto; transform: none; }
.motion-paused .intro .connection-node, .motion-paused .practice-section .skill-list, .motion-paused .practice-section .practice-demo { transform: none; }
.motion-paused .intro .connection-core { transform: translate(-50%, -50%); }
.motion-paused .goal-center, .motion-paused .goal-tag, .motion-paused .path-art .path-tile, .motion-paused .calendar-card, .motion-paused .calendar-checks > span, .motion-paused .calendar-plant, .motion-paused .interlude-layer, .motion-paused .family-photo > img, .motion-paused .faq-list, .motion-paused .closing-section, .motion-paused .closing-section h2, .motion-paused .footer-wordmark { transform: none; }
.motion-paused .goal-connectors path { stroke-dashoffset: 0; }
.motion-paused .path-art > svg { clip-path: none; }
.motion-paused .lesson-path-track { clip-path: none; }
.motion-paused .lesson-step-done, .motion-paused .lesson-step-current, .motion-paused .lesson-step-next { transform: none; }
.motion-paused .calendar-checks > span { opacity: 1; }
.motion-paused .breathing-room h2 > span:after { transform: none; }
.site-header.is-on-dark .header-actions .button-dark { background: var(--paper); color: var(--deep); border-color: var(--paper); box-shadow: 0 4px 0 #0b3035; }
.site-header.is-on-dark .header-actions .button-dark:hover { background: #fff0cd; border-color: #fff0cd; }
.motion-paused .header-actions .button-small { transition: none; }