/* Goodnight Good — shared website design system.
   Tokens → foundations → components → page composition → responsive rules.
   Keep app illustration internals in app-preview.css. */
:root {
  --cream:#faf7ed; --plum:#35172f; --rust:#9e3d24; --muted:#695962;
  --line:#ded7cb; --sage:#e4e8dd; --butter:#f5efcf; --rose:#f1e2d8;
  --surface:#f2ece1; --on-action:#fffaf2; --action-hover:#512541;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:Georgia,"Times New Roman",serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;
  --content:1120px; --reading:680px; --gutter:clamp(24px,5vw,64px);
  --section-space:clamp(64px,8vw,112px);
  --radius-sm:12px; --radius-card:24px; --radius-panel:32px;
  --text-sm:14px; --text-body:17px; --text-lead:clamp(18px,1.8vw,21px);
  --type-h1:clamp(44px,5.4vw,72px); --type-h2:clamp(34px,3.8vw,52px);
  --type-h3:clamp(24px,2.3vw,30px); --control:52px;
  --ease:cubic-bezier(.22,1,.36,1); --duration:220ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--plum);font-family:var(--font-body);font-size:var(--text-body);line-height:1.55;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{max-width:100%;height:auto}a{color:inherit;text-underline-offset:4px}button{color:inherit}main{overflow:clip}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;margin:0}
h1{font-size:var(--type-h1)}h2{font-size:var(--type-h2)}h3{font-size:var(--type-h3);line-height:1.16;letter-spacing:-.025em}
p{margin:0;line-height:1.6;text-wrap:pretty}
:where(a,button,summary,input):focus-visible{outline:3px solid var(--rust);outline-offset:5px}
.eyebrow{display:block;color:var(--rust);font-size:11px;line-height:1.5;font-weight:650;letter-spacing:.16em;text-transform:uppercase}
.small{font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
.skip-link{position:fixed;z-index:100;top:-100px;left:var(--gutter);padding:var(--space-3) var(--space-5);background:var(--plum);color:var(--cream);border-radius:var(--radius-sm)}.skip-link:focus{top:12px}
/* One content edge for navigation, sections, and footer. */
body>header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:16px max(var(--gutter),calc((100% - var(--content))/2));min-height:80px;border-bottom:1px solid #35172f0d;background:#faf7edf5;position:relative;z-index:40;backdrop-filter:blur(16px)}
body>header.has-returned{position:fixed;inset:0 0 auto;animation:header-return var(--duration) var(--ease)}
@keyframes header-return{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:22px/1.2 var(--font-display);letter-spacing:1px;white-space:nowrap;min-height:44px}
.brand-moon{display:block;width:30px;height:30px;flex:none;object-fit:contain}
.nav{display:flex;align-items:center;gap:var(--space-5)}
.pill,.soon{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control);padding:14px 24px;border:1px solid transparent;border-radius:100px;background:var(--plum);color:var(--on-action);font:600 15px/1.35 var(--font-body);text-align:center;text-decoration:none;transition:background-color var(--duration),opacity var(--duration)}
.pill.secondary{background:transparent;border-color:#35172f40;color:var(--plum)}
.nav .pill{min-height:44px;padding:11px 20px;font-size:13px}
.download-apple,.pill .download-apple,.soon .download-apple{display:block;width:17px;height:20px;object-fit:contain;flex:none;margin:0;border-radius:0}
.pill .download-apple,.soon .download-apple{filter:brightness(0) invert(1)}
.pill:active{opacity:.8}.soon:disabled{opacity:1;cursor:default}
@media(hover:hover){.pill:hover{background:var(--action-hover)}.pill.secondary:hover{background:#35172f08;border-color:#35172f70}.sample-link:hover{color:var(--plum)}}
.sample-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:15px;color:var(--muted)}
/* Section rhythm: 24px eyebrow-to-heading; 24px heading-to-copy; 48px to content. */
.hero,.section{width:calc(100% - 2*var(--gutter));max-width:var(--content);margin-inline:auto;padding-block:var(--section-space)}
.section-heading{max-width:var(--reading);margin:0 auto var(--space-7);text-align:center}
.section-heading .eyebrow{margin-bottom:var(--space-4)}
.section-heading p{margin:var(--space-5) auto 0;font-size:var(--text-lead);color:var(--muted);max-width:48ch}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-8);padding-block:clamp(64px,7vw,96px) var(--section-space)}
.hero h1{max-width:10ch;margin:var(--space-5) 0}
.hero .intro{font-size:var(--text-lead);line-height:1.55;max-width:35ch;color:var(--muted)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-6)}
.hero .small{margin-top:var(--space-4)}
.hero-art{position:relative;text-align:center;max-width:500px;justify-self:center;width:100%}
.hero-art>img{display:block;width:100%;mix-blend-mode:multiply;border-radius:50%}
.caption{font:italic 17px/1.5 var(--font-display);color:var(--muted);margin:var(--space-5) 0 0}
.science-stamp{position:absolute;z-index:1;right:12px;bottom:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:104px;height:104px;padding:18px;background:#dce3d0;color:#35452c;border:1.5px solid #526347;outline:1px solid #758367;outline-offset:-7px;border-radius:50%;text-decoration:none;transform:rotate(5deg)}
.science-stamp span{white-space:nowrap;flex-shrink:0;font:600 8px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase}.science-stamp strong{font:700 18px/1.1 var(--font-display);letter-spacing:-.02em}.science-stamp svg{width:16px;height:16px;flex-shrink:0}
.science-stamp:hover strong{text-decoration:underline}.science-stamp:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
#how-it-works{border-top:1px solid var(--line)}
.overview-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.overview-steps article{display:flex;flex-direction:column;text-align:center;padding:var(--space-6);background:var(--surface);border-radius:var(--radius-card)}
.overview-steps img,.turn-visual,.save-visual{display:flex;align-items:center;justify-content:center;object-fit:contain;width:100%;height:144px;margin:var(--space-4) 0;gap:var(--space-3);mix-blend-mode:multiply}
.turn-visual span{display:grid;place-items:center;width:64px;height:64px;background:var(--sage);border-radius:50%;font:20px var(--font-display)}.turn-visual span:last-child{background:var(--butter)}.turn-visual b{font-weight:400}
.save-visual{flex-direction:column;gap:var(--space-2)}.save-visual span{font:56px/1 var(--font-display);color:var(--rust)}.save-visual b{font:18px var(--font-display)}
.overview-steps img{width:144px;max-width:100%;border-radius:50%;margin-inline:auto}
.overview-steps h3{font-size:26px;min-height:2.32em;margin-bottom:var(--space-3)}.overview-steps p{font-size:16px;line-height:1.55;color:var(--muted);max-width:26ch;margin-inline:auto}
.interactive-details{border:0;margin-top:var(--space-6);padding:0}.interactive-details>summary{width:fit-content;margin:auto;min-height:44px;padding:10px 4px;font:500 15px/1.5 var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:5px}
/* A quiet, aligned grid. Every question has the same visual field. */
.card-explorer{background:var(--surface);padding:var(--section-space) max(var(--gutter),calc((100% - var(--content))/2));text-align:center}
.card-carousel{width:100%;margin-inline:auto}.card-spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);padding:4px;margin:0;overflow:visible;min-height:0;align-items:stretch}
.sample-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);min-width:0;margin:0;padding:var(--space-5);background:var(--card-color);border:2px solid #fffaf0;border-radius:var(--radius-card);color:var(--plum);text-align:center;box-shadow:none;transform:none;transition:transform var(--duration) var(--ease)}
.sample-card img{display:block;width:100%;height:160px;object-fit:contain;mix-blend-mode:darken;pointer-events:none}
.card-question{display:block;max-width:20ch;font:700 24px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.card-genre{display:table;font:500 11px/1.5 var(--font-body);padding:4px 12px;background:#ffffff40;border-radius:100px;margin-top:auto;color:#624d52}
.sample-card[aria-pressed=true]{border-color:#fffaf0}
@media(hover:hover){.sample-card:hover{transform:translateY(-4px)}}
.carousel-arrow{display:none}.chosen-card{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.card-explorer #next-card{margin-top:var(--space-6)}.card-explorer>.small{margin-top:var(--space-4)}
/* Alternating compositions share the same grid and type measure. */
.parent-note{text-align:center;max-width:var(--reading)}.parent-note h2{margin:var(--space-4) 0 var(--space-5)}.parent-note p{color:var(--muted);font-size:var(--text-lead)}.parent-note p.small{font-size:var(--text-body);margin-top:var(--space-4)}
.memory{background:var(--rose)}.memory-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-8)}.copy{max-width:460px}.copy h2{margin:var(--space-4) 0 var(--space-5)}.copy p{font-size:var(--text-lead);color:var(--muted);max-width:34ch}
.playback-visual{width:min(100%,280px);margin:0 auto}.playback-visual img{display:block;width:100%;border:4px solid var(--plum);border-radius:32px;box-shadow:0 16px 40px #35172f0d}.playback-visual figcaption{font-size:var(--text-sm);text-align:center;margin-top:var(--space-5);color:var(--muted)}
.editorial{background:var(--butter)}.editorial-heading{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-7);align-items:start;margin-bottom:var(--space-8)}.editorial-heading>.eyebrow{padding-top:8px}.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}.editorial-grid article{border-top:1px solid #35172f26;padding-top:var(--space-5)}.editorial-number{font-size:11px;letter-spacing:.12em;color:var(--rust);text-transform:uppercase}.editorial-grid h3{margin:var(--space-5) 0 var(--space-4)}.editorial-grid p{color:var(--muted);font-size:16px}
.science{background:var(--sage)}.science-simple{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-8);align-items:start}.research-art{width:112px;mix-blend-mode:multiply;grid-column:1/-1}.science-simple h2{margin-top:var(--space-4)}.science-simple p{font-size:var(--text-lead);color:var(--muted);margin-bottom:var(--space-5);max-width:40ch}.science-simple p.small{font-size:var(--text-body)}.science-simple a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500}
/* FAQ row height stays generous; each answer uses a readable line length. */
.section.details{max-width:800px}.details .section-heading{margin-bottom:var(--space-7)}.details details{padding:var(--space-5) 0;border-bottom:1px solid var(--line)}.details details:first-of-type{border-top:1px solid var(--line)}
.details summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);font:500 19px/1.45 var(--font-body);cursor:pointer;list-style:none}.details summary::-webkit-details-marker{display:none}.details summary::after{content:"";width:8px;height:8px;flex:0 0 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:5px 4px;transition:transform var(--duration)}.details details[open] summary::after{transform:rotate(225deg)}.details details p{font-size:17px;line-height:1.65;max-width:62ch;color:var(--muted);margin:var(--space-4) var(--space-7) 0 0}.faq-answer{display:flow-root}
.launch{text-align:center;background:var(--butter);padding:var(--section-space) var(--gutter)}.launch>img{display:block;width:80px;height:80px;border-radius:20px;margin:0 auto var(--space-6)}.launch h2{max-width:16ch;margin:auto}.launch p{font-size:var(--text-lead);color:var(--muted);margin:var(--space-5) auto;max-width:40ch}.launch p.small{font-size:var(--text-sm);margin:var(--space-4) auto 0}
body>footer{width:calc(100% - 2*var(--gutter));max-width:var(--content);margin:auto;padding:var(--space-6) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);font-size:12px;color:var(--muted)}.footer-brand{display:inline-flex;align-items:center;gap:var(--space-3)}footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}footer a:hover{text-decoration:underline}
/* Dialogs keep comfortable controls without competing primary buttons. */
dialog{color:var(--plum);background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-panel);box-shadow:0 24px 80px #35172f30}dialog::backdrop{background:#35172f80;backdrop-filter:blur(4px)}
#card-sample{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;text-align:center;padding:var(--space-6)}.sample-close,.mobile-menu-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--plum);font:28px var(--font-body)}.sample-close{position:absolute;top:8px;right:8px}
#card-sample>.eyebrow{margin-top:var(--space-2)}.sample-app-card{background:var(--butter);border:2px solid #fffaf0;border-radius:var(--radius-card);padding:var(--space-5);max-width:320px;margin:var(--space-5) auto}.sample-app-card #sample-art{display:block;width:100%;height:176px;object-fit:contain;mix-blend-mode:darken;margin:0 auto var(--space-5)}.sample-app-card h2{font-size:30px;line-height:1.15;margin-bottom:var(--space-5)}#sample-genre{display:inline-block;padding:4px 12px;font-size:12px;background:#ffffff40;border-radius:100px}#sample-guidance{font-size:15px;color:var(--muted)}.sample-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-5)}.sample-actions .pill{width:100%}.sample-finish{background:transparent;border:0;min-height:44px;padding:8px 16px;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px}
body:has(dialog[open]){overflow:hidden}.mobile-menu-toggle{display:none}#mobile-menu{width:min(400px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:12px 12px auto auto;padding:var(--space-5)}.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--space-5)}.mobile-menu-heading h2{font:24px var(--font-display);letter-spacing:0}#mobile-menu nav{display:flex;flex-direction:column;gap:var(--space-2)}#mobile-menu nav>a:not(.pill){display:flex;align-items:center;min-height:48px;padding:10px 12px;text-decoration:none;border-radius:var(--radius-sm)}#mobile-menu nav>a:not(.pill):hover{background:var(--sage)}#mobile-menu .small{margin:0 0 12px;text-align:center}#mobile-menu .menu-account{border-top:1px solid var(--line)}
/* Interactive preview is an inset product panel, with a stable visual column. */
.ritual-demo{margin-top:var(--space-5);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-panel)}.demo-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.demo-steps button{min-width:0;padding:14px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font:500 14px/1.4 var(--font-body);background:transparent;color:var(--plum)}.demo-steps button span{font:500 11px var(--font-body);margin-bottom:var(--space-2)}.demo-steps button[aria-selected=true]{background:var(--plum);color:var(--cream);border-color:var(--plum)}.demo-track{display:block;overflow:visible}.demo-track .demo-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--space-8);padding:var(--space-7) 0 0;min-height:0;width:100%}.demo-explanation{min-height:0;text-align:left}.demo-explanation h3{font-size:34px;margin:var(--space-4) 0 var(--space-5)}.demo-explanation p{font-size:17px;color:var(--muted);margin-bottom:var(--space-4)}.demo-explanation .pill{margin-top:var(--space-3)}
.demo-visual .app-preview-frame{width:292px;height:632px;max-width:100%;margin:auto;border:4px solid var(--plum);border-radius:32px;overflow:hidden;background:var(--cream);box-shadow:0 16px 40px #35172f0d}.app-preview-frame .pick-phone,.app-preview-frame .stars-phone{height:100%;width:100%;padding:0 16px 12px;margin:0;border:0;border-radius:0}.app-preview-frame .preview-safe-top{height:12px}.app-preview-frame .phone-brand{font-size:18px;padding:12px 0 20px;letter-spacing:1px}.app-preview-frame .phone-question-card{min-height:330px;padding:12px 12px 20px;gap:8px}.app-preview-frame .phone-question-card img{height:155px}.app-preview-frame .phone-question-card #demo-question{font-size:27px;line-height:1.15}.app-preview-frame .phone-use{margin-bottom:16px}.app-preview-frame .phone-bottom-nav{width:calc(100% + 32px);margin-inline:-16px}.app-preview-frame .phone-bottom-nav>span{font-size:11px}.app-preview-frame .star-sky{height:210px}.demo-visual .app-preview-frame img.screen{width:100%;height:100%;object-fit:contain}.phone-question-card #demo-genre{background:#ffffff40;border-radius:100px;align-self:center;text-transform:none}.app-preview-frame .phone-use{gap:8px}
/* Research page shares the same scale, with a narrower reading measure. */
.reading{width:calc(100% - 2*var(--gutter));max-width:800px;margin:auto;padding-block:var(--section-space)}.reading h1{font-size:var(--type-h1);margin:var(--space-5) 0 var(--space-6)}.reading h2{font-size:34px;margin:var(--space-8) 0 var(--space-5);text-wrap:balance}.reading h3{font-size:25px;margin-bottom:var(--space-4)}.reading p,.reading li{max-width:var(--reading);margin-bottom:var(--space-5);color:var(--muted);font-size:17px;line-height:1.7}.reading .lead{font-size:var(--text-lead)}.reading ul{padding-left:20px}.reading a:not(.pill){text-decoration-thickness:1px}.age-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-block:var(--space-6)}.age-guides article{padding:var(--space-5);background:var(--surface);border-radius:var(--radius-card)}.age-guides p{font-size:16px;margin:0}.age-guides h3{margin-top:var(--space-4)}.limit{background:var(--sage);border-radius:var(--radius-card);padding:var(--space-6);margin-top:var(--space-8)}.limit h2{margin-top:0}.limit p:last-child{margin-bottom:0}.research-sources{margin-top:var(--space-7);border-top:1px solid var(--line);padding-top:var(--space-5)}.research-sources summary{font-weight:600;cursor:pointer;min-height:44px;padding:8px 0}.study{padding-block:var(--space-5);border-bottom:1px solid var(--line)}
@media(max-width:900px){
  .hero{gap:var(--space-6)}.overview-steps article{padding:var(--space-5)}
  .card-question{font-size:22px}.sample-card img{height:128px}.sample-card{padding:20px}
  .memory-layout,.science-simple{column-gap:var(--space-7)}.editorial-grid{gap:var(--space-6)}
  .demo-track .demo-panel{gap:var(--space-6)}.demo-explanation h3{font-size:30px}
}
@media(max-width:700px){
  :root{--gutter:24px;--section-space:64px;--type-h1:44px;--type-h2:36px;--text-lead:18px}
  body>header{min-height:72px;padding-block:12px;gap:12px}.wordmark{font-size:20px;letter-spacing:.7px}.wordmark .brand-moon{width:28px;height:28px}.nav{display:none}.mobile-menu-toggle{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--plum)}
  .hero{grid-template-columns:1fr;gap:var(--space-7);padding-block:48px 64px;text-align:center}.hero h1{max-width:11ch;margin-inline:auto}.hero .intro{margin-inline:auto;max-width:32ch}.actions{justify-content:center;gap:var(--space-4);margin-top:var(--space-5)}.hero .actions .pill{min-width:220px}.hero-art{max-width:320px}.hero-art .caption{font-size:16px}.science-stamp{width:92px;height:92px;bottom:36px;right:8px}.science-stamp strong{font-size:16px}.science-stamp span{font-size:8px}.science-stamp svg{width:14px;height:14px}
  .section-heading{margin-bottom:var(--space-6)}.section-heading p{margin-top:var(--space-4)}
  .overview-steps{grid-template-columns:1fr;gap:var(--space-4)}.overview-steps article{display:grid;grid-template-columns:80px minmax(0,1fr);text-align:left;column-gap:var(--space-5);padding:var(--space-5)}.overview-steps .eyebrow{grid-column:2;font-size:10px}.overview-steps img,.turn-visual,.save-visual{grid-column:1;grid-row:1/4;width:80px;height:100%;min-height:96px;margin:0;gap:4px}.turn-visual span{width:34px;height:42px;font-size:13px}.turn-visual b{font-size:12px}.save-visual span{font-size:44px}.save-visual b{font-size:12px;text-align:center}.overview-steps h3{font-size:24px;min-height:0;margin:8px 0}.overview-steps p{font-size:15px;max-width:none;margin:0}.interactive-details{margin-top:var(--space-5)}
  .card-spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);padding:0}.sample-card{padding:16px 12px;gap:12px;border-radius:20px}.sample-card img{height:100px}.card-question{font-size:19px;line-height:1.22}.card-genre{font-size:10px;padding:3px 8px}
  .parent-note h2{max-width:14ch;margin-inline:auto}.memory-layout{grid-template-columns:1fr;gap:var(--space-7);text-align:center}.copy{margin:auto}.copy p{margin:auto}.playback-visual{width:250px}
  .editorial-heading{grid-template-columns:1fr;gap:var(--space-4);margin-bottom:var(--space-7)}.editorial-heading>.eyebrow{padding:0}.editorial-grid{grid-template-columns:1fr;gap:var(--space-6)}.editorial-grid h3{margin:16px 0 12px;font-size:28px}.editorial-grid p{max-width:40ch}
  .science-simple{grid-template-columns:1fr;gap:var(--space-6)}.research-art{width:96px}.science-simple h2{margin-top:16px}.science-simple p{margin-bottom:16px}
  .details summary{font-size:18px;gap:16px}.details details{padding-block:24px}.details details p{font-size:16px;margin-right:24px}.details .section-heading{margin-bottom:32px}
  .launch>img{width:72px;height:72px}.launch h2{max-width:14ch}.launch .soon{min-width:220px}
  body>footer{flex-direction:column;gap:8px;text-align:center;padding-block:24px}.footer-brand{justify-content:center}.footer-brand .brand-moon{width:24px;height:24px}
  #card-sample{padding:32px 24px 24px}.sample-app-card{padding:20px}.sample-app-card #sample-art{height:144px}.sample-app-card h2{font-size:28px}
  .ritual-demo{padding:24px 16px}.demo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-track .demo-panel{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px}.demo-explanation{text-align:center}.demo-explanation h3{font-size:28px}.demo-visual .app-preview-frame{width:260px;height:564px}.app-preview-frame .phone-question-card img{height:140px}.app-preview-frame .phone-question-card{min-height:320px}
  .reading h2{font-size:30px;margin-top:48px}.reading h1{font-size:clamp(34px,9.5vw,40px)}.age-guides{grid-template-columns:1fr;gap:16px}.limit{padding:24px}.reading p{font-size:17px}
}
@media(max-width:374px){:root{--gutter:20px;--type-h1:40px;--type-h2:32px}.wordmark{font-size:18px;gap:8px}.overview-steps article{grid-template-columns:64px minmax(0,1fr);gap:0 16px;padding:20px}.overview-steps img,.turn-visual,.save-visual{width:64px}.card-question{font-size:18px}.sample-card{padding:16px 8px}.sample-card img{height:88px}.ritual-demo{padding:20px 12px}.demo-visual .app-preview-frame{width:240px}}
/* Small hover responses do not move the layout or compete with the reading. */
.pill{transition:background-color var(--duration),box-shadow var(--duration),opacity var(--duration)}
.pill>span[aria-hidden]{display:inline-block;transition:transform var(--duration) var(--ease)}
.science-stamp{transition:transform 320ms var(--ease),box-shadow 320ms var(--ease)}
@media(hover:hover) and (pointer:fine){
  .pill:hover{box-shadow:0 5px 16px #35172f12}
  .pill:hover>span[aria-hidden]{transform:translateX(3px)}
  .science-stamp:hover{transform:rotate(0deg);box-shadow:0 5px 20px #35172f0d}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.sample-card:hover{transform:none}}

/* Keep the hero action primary until it has left the viewport. */
body:has(.hero)>header:not(.has-returned) .download-cta{visibility:hidden;pointer-events:none}
body>header .wordmark:focus:not(:focus-visible){outline:none;box-shadow:none}
body>header .wordmark:focus-visible{outline:3px solid var(--rust);outline-offset:5px}

/* Trial dialog: no decorative button outlines; keyboard focus remains visible. */
#card-sample button{border-color:transparent}
#card-sample button:focus:not(:focus-visible),#card-sample #sample-title:focus{outline:none}
#card-sample button:focus-visible{outline:3px solid var(--rust);outline-offset:5px}