/* Fam ETC public landing page — 2026 re-composition.
   Design: docs/design/landing-2026/ (canvas + IMPLEMENTATION-GUIDE.md).
   Tokens come from horizon.css — no raw hex belongs in this file.
   Variant A (no waitlist form), light theme only: the page never sets .dark,
   so the light token values resolve. */
:root {
  scroll-behavior: smooth;
  --landing-stage: 1440px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--coral)}
.skip-link{position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:40;transform:translateY(calc(-100% - 24px));border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.skip-link:focus{transform:none}
.mono,.eyebrow,.kicker,.micro,.step-label,.beat-label,.moment-time,.trust-strip,.num{font-family:"JetBrains Mono",monospace}
.eyebrow,.kicker,.micro,.step-label,.beat-label{font-size:11px;line-height:1.35;letter-spacing:0.08em;text-transform:uppercase}
.kicker{color:var(--text-2);margin:0 0 12px}
.landing-shell{min-height:100vh;overflow:clip}
.header-inner,
.section,
.footer-inner{width:min(var(--landing-stage), 100%);margin:0 auto;padding-inline:28px}
.section{padding-block:60px}
.section h2{margin:0;font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-0.025em;font-weight:700;text-wrap:balance}
.section-intro{max-width:min(100%,1040px);margin:14px 0 0;color:var(--text-2);font-size:17px;line-height:1.55;text-wrap:pretty}
.center{text-align:center}.center .section-intro{margin-inline:auto}
.panel-card,.feature-card,.cta-panel,.moment-card,.chat-phone,.homework-card,.device-frame,.step-card{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
/* header */
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.header-inner{min-height:64px;display:flex;align-items:center;gap:24px;padding-block:10px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text)}.brand:hover{color:var(--text)}
.brand-mark{display:block;width:30px;height:30px}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap}
.brand-etc{margin-left:4px;color:var(--accent);font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:0.02em}
.site-nav{display:flex;align-items:center;gap:22px;margin-left:12px;font-size:14px}
.site-nav a{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center}.site-nav a:hover{color:var(--text)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.button{min-height:44px;border-radius:12px;padding:10px 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.button-primary{background:var(--accent);color:var(--on-accent)}
.button-secondary{border-color:var(--border);background:var(--panel);color:var(--text)}
.button-large{min-height:48px;padding:13px 22px;font-size:15px}
.app-store-badge{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:7px;line-height:0;transition:opacity .16s ease}
.app-store-badge img{display:block;width:150px;height:auto}
.app-store-badge:hover{opacity:.86}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center;padding-block:56px 32px}
.hero-kicker{display:flex;align-items:center;gap:10px;color:var(--text-2);margin:0 0 20px}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block}
.hero h1{margin:0;font-size:clamp(40px,4.4vw,62px);line-height:1;letter-spacing:-0.035em;font-weight:700;text-wrap:balance}
.hero-lede{margin:20px 0 0;max-width:62ch;color:var(--text-2);font-size:18px;line-height:1.55;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.availability{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.availability a{white-space:nowrap}
.waitlist-form{display:none;margin-top:14px;gap:8px;flex-wrap:wrap}
.waitlist-form.is-open{display:flex}
.waitlist-form input{font:inherit;font-size:14px;min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:0 14px;flex:1 1 180px}
.hero-stage{position:relative}
/* The hero film is the live canvas animation (public/video/film/), not an MP4: the poster paints first and
   landing.js swaps the iframe in after load, as retireodds.com/familyoffice does. */
.hero-film{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--panel) url(/video/film/poster.webp) center/cover no-repeat;box-shadow:var(--shadow)}
.hero-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.checkbox{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--text-2);flex:none}
.checkbox.done{background:var(--c-green);border-color:var(--c-green);position:relative}
.due.today{color:var(--c-red)}
.kid-mia{color:var(--c-teal)}.kid-leo{color:var(--c-amber)}
.bg-mia{background:var(--c-teal)}.bg-leo{background:var(--c-amber)}
.bg-p{background:var(--text)}
.avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--bg);flex:none}
@keyframes famRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* trust strip */
.trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2)}
.trust-strip span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--border);margin-right:10px;vertical-align:middle}
/* before */
.before-section{padding-block:52px}
.before-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:48px;align-items:center}
.before-fragments{position:relative;height:280px}
.fragment{position:absolute;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.4;color:var(--text-2);box-shadow:var(--shadow)}
.fragment:nth-child(1){left:0;top:22px;width:240px;transform:rotate(-3deg)}.fragment:nth-child(2){left:270px;top:0;width:230px;transform:rotate(2deg)}.fragment:nth-child(3){left:130px;top:118px;width:230px;transform:rotate(-1.5deg)}.fragment:nth-child(4){left:450px;top:96px;width:220px;transform:rotate(3deg)}.fragment:nth-child(5){left:30px;top:206px;width:270px;transform:rotate(1.5deg)}
.fragment strong{display:block;color:var(--text);font-size:14px}
.fragment .unread{position:absolute;top:-8px;right:-8px;background:var(--text);color:var(--bg);font-family:"JetBrains Mono",monospace;font-size:11px;padding:2px 7px;border-radius:999px}
.fragment-slip{background:var(--panel);font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.5}
.fragment-slip em{display:inline-block;margin-top:6px;color:var(--c-red);border:1.5px solid var(--c-red);border-radius:4px;padding:1px 6px;font-style:normal;text-transform:uppercase;letter-spacing:.06em;font-size:10px;transform:rotate(-4deg)}
.fragment-board{font-style:italic;font-size:14px;line-height:1.6;background:var(--panel)}
.before-copy h2{font-size:clamp(28px,2.6vw,36px)}
.before-copy p{margin:14px 0 0;color:var(--text-2);font-size:17px;line-height:1.55}
/* pillar grid (S3) */
.pillar-grid{display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:56px;align-items:center}
.pillar-copy p{margin:14px 0 0;color:var(--text-2);font-size:17px;line-height:1.55}
.sync-items{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sync-item{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--panel)}
.sync-item strong{display:block;font-size:15px}
.sync-item span{font-size:13px;color:var(--text-2);line-height:1.45;display:block;margin-top:2px}
.sync-trust{margin-top:18px;font-size:14px;color:var(--text-2);line-height:1.55}
.pillar-visual{position:relative;min-height:520px}
.homework-card{position:absolute;inset:auto 0 0 auto;width:min(520px,100%);border-radius:20px;padding:20px 22px 18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-head strong{font-size:18px;letter-spacing:-0.01em}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--text-2);background:var(--panel-2);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%}
.kid-filter{display:flex;gap:8px;margin-top:14px}
.kid-filter .chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.hw-list{list-style:none;margin:16px 0 0;padding:0;display:grid}
.hw-list li{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border);font-size:15px}
.hw-list li:first-child{border-top:0;padding-top:4px}
.hw-list small{display:block;color:var(--text-2);font-size:13px}
.hw-list .due{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text-2);white-space:nowrap}
.hw-list .due.today{color:var(--c-red)}
.hw-list .due.done{color:var(--c-green)}
.toast{position:absolute;left:0;top:60px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:12px 14px;width:300px;font-size:14px;display:flex;gap:12px;align-items:flex-start}
.toast .eyebrow{color:var(--text-2);display:block;margin-bottom:2px}
.toast time{display:block;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text-2);margin-top:4px}
/* chat section (S4) */
.chat-section{padding-block:68px}
.chat-sequence{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start;position:relative}
.chat-beat{position:relative;transition:opacity .5s ease,transform .5s ease}
/* Hidden only once the script has run (it sets html.js) — with JS off or
   the observer unavailable, all three beats stay visible. */
html.js .chat-sequence:not(.is-in) .chat-beat{opacity:0;transform:translateY(14px)}
.chat-sequence.is-in .chat-beat,.chat-sequence.static .chat-beat{opacity:1;transform:none}
.chat-sequence.is-in .chat-beat:nth-child(2){transition-delay:.35s}
.chat-sequence.is-in .chat-beat:nth-child(3){transition-delay:.7s}
.chat-beat+.chat-beat::before{content:"";position:absolute;left:-30px;top:50%;width:20px;height:20px;border-right:2px solid var(--text-2);border-top:2px solid var(--text-2);transform:translateY(-50%) rotate(45deg);opacity:.6}
.beat-label{color:var(--text-2);margin:0 0 14px;display:flex;gap:10px}
.beat-label b{color:var(--text);font-weight:600}
.chat-phone{border-radius:24px;padding:18px 16px 16px;min-height:520px;display:flex;flex-direction:column;gap:10px}
.chat-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--border)}
.chat-head .avatars{display:flex}.chat-head .avatars .avatar{width:22px;height:22px;font-size:10px;margin-left:-6px;border:2px solid var(--panel)}
.msg{max-width:88%;font-size:14.5px;line-height:1.4}
.msg .meta{display:block;font-size:11px;color:var(--text-2);margin-bottom:3px;font-family:"JetBrains Mono",monospace}
.msg p{margin:0;background:var(--panel-2);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:9px 12px}
.msg.mine{align-self:flex-end}.msg.mine p{border-radius:14px 14px 4px 14px}
.msg.sys{align-self:center;max-width:100%;text-align:center;font-size:12px;color:var(--text-2)}
.msg.sys p{background:transparent;border:0;padding:0}
.msg.focus p{outline:2px solid var(--accent);outline-offset:2px}
.msg.dim{opacity:.45}
.composer{margin-top:auto;border:1px solid var(--border);border-radius:999px;padding:10px 14px;font-size:14px;color:var(--text-2);display:flex;justify-content:space-between}
.composer b{color:var(--accent);font-weight:600}
.action-sheet{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.action-sheet .eyebrow{color:var(--text-2);display:block;margin-bottom:10px}
.action-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.action-options span{border:1px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--text)}
.action-options span.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.action-options svg{width:20px;height:20px}
.result-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.result-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.result-head .tick{width:22px;height:22px;border-radius:50%;background:var(--c-green);color:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.result-sub{margin:4px 0 0 32px;font-size:12px;color:var(--text-2);font-family:"JetBrains Mono",monospace}
.result-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.result-list li{display:flex;align-items:center;gap:10px;font-size:14px}
.result-list .checkbox{width:18px;height:18px}
.result-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-2)}
.chat-safety{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.chat-safety div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--text-2)}
.chat-safety strong{color:var(--text);display:block}
.chat-safety svg{flex:none;width:22px;height:22px;stroke:var(--text);margin-top:2px}
/* day timeline (S5) */
.day-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:start}
.day-copy{position:sticky;top:96px}
.day-copy p{margin:14px 0 0;color:var(--text-2);font-size:17px;line-height:1.55}
.day-timeline{list-style:none;margin:0;padding:0;position:relative}
.day-timeline::before{content:"";position:absolute;left:97px;top:8px;bottom:8px;width:2px;background:var(--border)}
.moment{display:grid;grid-template-columns:76px 44px minmax(0,1fr);align-items:start;padding-block:10px}
.moment-time{font-size:15px;padding-top:14px;color:var(--text)}
.moment-dot{width:14px;height:14px;border-radius:50%;background:var(--panel);border:3px solid var(--text-2);margin:16px 0 0 15px;position:relative;z-index:1}
.moment-dot.mia{border-color:var(--c-teal)}.moment-dot.leo{border-color:var(--c-amber)}
.moment-card{border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.moment-card .kicker{margin:0 0 4px}
.moment-card strong{font-size:16px;display:block}
.moment-card p{margin:2px 0 0;color:var(--text-2);font-size:14px;line-height:1.45}
.mini{font-size:13px}
.mini .chip{font-size:12px}
.mini-bubble{background:var(--panel-2);border:1px solid var(--border);border-radius:12px 12px 12px 4px;padding:7px 10px;font-size:13px;max-width:220px}
.mini-bubble+.mini-bubble{margin-top:6px;border-radius:12px 12px 4px 12px}
.mini-list{display:flex;gap:6px}
.mini-list span{border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:12px}
.mini-poll{display:grid;gap:4px;min-width:170px}
.mini-poll div{display:flex;justify-content:space-between;font-size:12px;gap:10px}
.mini-poll i{display:block;height:4px;border-radius:2px;background:var(--text-2);margin-top:3px}
/* bento (S6) */
.bento{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:16px}
.feature-card{border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.feature-card.large{grid-column:span 2;grid-row:span 2}
.feature-card.wide{grid-column:span 2}
.feature-title{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.feature-card p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.5;max-width:40ch}
.feature-visual{margin-top:auto;padding-top:16px}
.poll{display:grid;gap:8px}
.poll div{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:14px;align-items:center}
.poll i{display:block;height:8px;border-radius:4px;background:var(--border);overflow:hidden;grid-column:1/-1}
.poll i b{display:block;height:100%;background:var(--text-2);border-radius:4px}
.poll .lead i b{background:var(--accent)}
.week-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.week-strip div{border:1px solid var(--border);border-radius:10px;padding:8px;font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--text-2);min-height:64px}
.week-strip span{display:block;margin-top:6px;font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--text);border-left:3px solid var(--border);padding-left:5px;line-height:1.3}
.week-strip .mia{border-left-color:var(--c-teal)}.week-strip .leo{border-left-color:var(--c-amber)}
.points{display:flex;gap:28px;align-items:flex-end}
.points b{font-family:"JetBrains Mono",monospace;font-size:34px;font-weight:600;line-height:1;display:block}
.points small{display:block;font-size:12px;margin-top:4px}
/* devices (S7) — real product screenshots.
   object-fit:cover + object-position:top crops the shot instead of shrinking
   it, so the UI in the image stays legible at these frame sizes. */
.device-row{margin-top:48px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;align-items:start}
.device-shot{margin:0}
.device-frame{border-radius:30px;padding:10px;background:var(--text);border-color:transparent;overflow:hidden}
.device-frame img{display:block;width:100%;border-radius:22px;background:var(--bg)}
.frame-phone img{height:560px;object-fit:cover;object-position:top}
.frame-ipad{border-radius:22px}
.frame-ipad img{height:560px;object-fit:cover;object-position:top;border-radius:14px}
.device-caption{margin-top:18px}
.device-caption strong{display:block;font-size:16px}
.device-caption span{font-size:14px;color:var(--text-2);line-height:1.45;display:block;margin-top:2px}
.store-actions{margin-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.store-note{margin:0;flex:1 1 340px;min-width:min(100%,260px);font-size:14px;color:var(--text-2);display:flex;align-items:flex-start;gap:10px}
.store-note svg{width:18px;height:18px;stroke:var(--text-2);flex:none}
/* privacy (S9) */
.privacy-band{background:var(--sidebar);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.privacy-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:56px;align-items:start}
.privacy-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.privacy-list li{display:flex;gap:14px;font-size:15px;line-height:1.5;color:var(--text-2)}
.privacy-list strong{display:block;color:var(--text)}
.privacy-list svg{flex:none;width:22px;height:22px;stroke:var(--text);margin-top:2px}
.privacy-grid p{margin:14px 0 0;color:var(--text-2);font-size:17px;line-height:1.55}
/* steps, faq, cta, footer */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.step-card{border-radius:18px;padding:22px}
.step-label{color:var(--text-2)}
.step-title{margin-top:10px;font-size:19px;font-weight:700}
.step-card p{margin:8px 0 0;color:var(--text-2);font-size:15px;line-height:1.5}
.faq-list{margin-top:32px;display:grid;gap:8px;max-width:820px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:16px}
.faq-item summary::after{content:"+";font-family:"JetBrains Mono",monospace;color:var(--text-2)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 18px 16px;color:var(--text-2);font-size:15px;line-height:1.55}
.faq-answer p{margin:0}
.cta-panel{border-radius:22px;padding:48px 44px;text-align:center}
.cta-panel h2{font-size:clamp(32px,3vw,40px)}
.cta-panel p{max-width:74ch;margin:12px auto 0;color:var(--text-2);font-size:17px;line-height:1.5}
.cta-actions{margin-top:26px;display:flex;justify-content:center}
.cta-panel .availability{text-align:center}
.site-footer{border-top:1px solid var(--border);background:var(--sidebar)}
.footer-inner{min-height:88px;display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px;padding-block:20px}
.footer-note{color:var(--text-2)}
.footer-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px;font-size:14px}
.footer-links a{min-height:44px;display:inline-flex;align-items:center}
/* focus + anchor offset (carried over from the previous landing.css — the
   reference stylesheet omits these because the canvas has no keyboard flow) */
section[id] {
  scroll-margin-top: 88px;
}
.button:focus-visible,
a:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* demo video */
.video-frame{margin:40px auto 0;max-width:1040px;border-radius:22px;overflow:hidden;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);line-height:0}
.video-frame video{display:block;width:100%;height:auto;background:var(--bg)}

/* ── motion ────────────────────────────────────────────────────────────────
   Rules of the road for this page:
   - Nothing here carries information. Every section is complete and legible
     with JavaScript off and with reduced motion on.
   - Hidden-until-revealed states are gated on html.js, so a script that never
     runs cannot leave content invisible.
   - Hover states belong to things you can actually press. Content cards get
     no hover lift: a card that rises under the cursor claims to be a link.
   - The landing carries no gradients; the hero film brings the colour. */

/* Hero: the copy settles in on load, one line at a time. */
html.js .hero-copy > *{animation:famRise .62s cubic-bezier(.2,.7,.2,1) both}
html.js .hero-copy > *:nth-child(1){animation-delay:.04s}
html.js .hero-copy > *:nth-child(2){animation-delay:.10s}
html.js .hero-copy > *:nth-child(3){animation-delay:.17s}
html.js .hero-copy > *:nth-child(4){animation-delay:.24s}
html.js .hero-copy > *:nth-child(5){animation-delay:.30s}

/* Scroll reveal. [data-reveal] is observed by landing.js; the "stagger"
   variant fades its own children in sequence (--i set by the script).
   The transition is declared ONLY on the revealed state. Declaring it on the
   base rule made entering the hidden state animate too, so every section
   painted visible and then faded itself out — a flash of content on load. */
html.js [data-reveal="stagger"]:not(.is-in) > *{opacity:0;transform:translateY(14px)}
[data-reveal="stagger"].is-in > *{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 65ms)}

/* The timeline rail draws downward as the day scrolls into view, so the
   sequence reads as a sequence. */
.day-timeline::before{transform-origin:top}
html.js [data-reveal="stagger"]:not(.is-in) .day-timeline::before{transform:scaleY(0)}
[data-reveal="stagger"].is-in .day-timeline::before{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* Poll bars grow from zero once the tile is on screen. scaleX leaves the
   inline width untouched, so the static state is still correct. */
.poll i b{transform-origin:left}
html.js [data-reveal="stagger"]:not(.is-in) .poll i b{transform:scaleX(0)}
[data-reveal="stagger"].is-in .poll i b{transform:none;transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s}

/* Controls. */
.button{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
.button-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--accent-soft)}
.button-secondary:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--border));color:var(--accent)}
.button:active{transform:translateY(0) scale(.985)}

.site-nav a{position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.footer-links a{transition:color .16s ease}

/* Sticky header earns a shadow only once the page has moved under it. */
.site-header{transition:box-shadow .28s ease}
.site-header.is-scrolled{box-shadow:var(--shadow)}
#scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}

/* FAQ: a real control, so it gets a real hover. The answer animates in on
   open only — <details> does not render its content while closed, so there is
   nothing to animate on close and pretending otherwise stutters. */
.faq-item summary{border-radius:14px;transition:background-color .16s ease}
.faq-item summary:hover{background:var(--panel-2)}
.faq-item summary::after{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item[open] .faq-answer{animation:faqIn .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* motion fallback */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .chat-beat { opacity: 1 !important; transform: none !important; transition: none; }
  /* Every reveal must resolve to its final, readable frame — not to its
     hidden one. Anything animated above is listed here. */
  html.js .hero-copy > * { animation: none; }
  [data-reveal="stagger"] > *,
  html.js [data-reveal="stagger"]:not(.is-in) > * { opacity: 1 !important; transform: none !important; transition: none; }
  .day-timeline::before,
  html.js [data-reveal="stagger"]:not(.is-in) .day-timeline::before { transform: none !important; transition: none; }
  .poll i b,
  html.js [data-reveal="stagger"]:not(.is-in) .poll i b { transform: none !important; transition: none; }
  .button, .button:hover, .button:active { transform: none !important; transition: none; }
  .site-nav a::after { transition: none; }
  .faq-item[open] .faq-answer { animation: none; }
  .faq-item summary::after { transition: none; }
}
/* breakpoints */
@media (max-width:1024px){
 .hero{grid-template-columns:1fr;gap:40px;padding-block:48px 24px}
 .hero-stage{max-width:820px}
 .site-nav{display:none}
 .pillar-grid,.day-grid,.privacy-grid,.before-grid{grid-template-columns:1fr;gap:40px}
 .pillar-visual{min-height:0;padding-top:70px}
 .homework-card{position:relative;inset:auto;width:100%}
 .toast{top:0}
 .day-copy{position:static}
 .device-row{gap:40px}
}
@media (max-width:768px){
 .section{padding-block:48px}
 .chat-sequence{grid-template-columns:1fr;gap:44px;max-width:420px;margin-inline:auto}
 .chat-beat+.chat-beat::before{left:50%;top:-32px;transform:translateX(-50%) rotate(135deg)}
 .chat-safety{grid-template-columns:1fr;gap:18px}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps-grid{grid-template-columns:1fr}
 .privacy-list{grid-template-columns:1fr}
 .device-row{grid-template-columns:1fr;justify-items:center}
 .device-shot{max-width:420px;width:100%}
 .frame-phone img,.frame-ipad img{height:440px}
 .before-fragments{height:240px}
}
@media (max-width:520px){
 .header-inner,.section,.footer-inner{padding-inline:20px}
 .header-create{display:none}
 .hero h1{font-size:clamp(36px,10.5vw,44px)}
 .hero-actions .button,.cta-actions .button{width:100%}
 .sync-items{grid-template-columns:1fr}
 .bento{grid-template-columns:minmax(0,1fr)}
 .feature-card.large,.feature-card.wide{grid-column:auto;grid-row:auto}
 .moment{grid-template-columns:56px 28px 1fr}
 .day-timeline::before{left:69px}
 .moment-dot{margin-left:7px}
 .moment-card{grid-template-columns:1fr}
 .trust-strip{justify-content:flex-start;flex-direction:column;gap:8px}
 .before-fragments{height:auto;display:grid;gap:10px}
 .fragment{position:static;width:auto;transform:none}
 .fragment:nth-child(odd){transform:rotate(-1deg)}.fragment:nth-child(even){transform:rotate(1deg)}
 .week-strip div{padding:6px 4px;font-size:10px}.week-strip span{font-size:11px}
 .footer-links{margin-left:0}
 .section h2{font-size:30px}
}
/* Back-compat anchor: /#moodle was the school-sync section id before the 2026
   re-composition. External links (school newsletters) still point at it. */
.legacy-anchor { display: block; scroll-margin-top: 88px; }