.moments{padding-top:110px;padding-bottom:110px}.moments-intro{margin-bottom:75px}.moments-intro h2{margin:22px 0 0;font-size:clamp(38px,5vw,58px);line-height:1.06;letter-spacing:-.045em}
.moment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:84px;align-items:center;padding:105px 0;border-top:1px solid #e4e5e1;scroll-margin-top:100px}.moment-reverse .moment-copy{order:2}.moment-reverse .moment-visual{order:1}.moment-index{font:11px Mono,monospace;letter-spacing:.09em;color:#747973;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.beta-tag{padding:5px 8px;border:1px solid #cbd0ed;color:#3546d6;border-radius:5px;font-size:9px}.moment h3{font-size:clamp(35px,4vw,48px);font-weight:500;line-height:1.08;letter-spacing:-.04em;margin:28px 0}.moment-copy>p,.timer-story p{font-size:16px;line-height:1.7;color:#6e736e;max-width:410px}.moment-copy strong{font-weight:500;color:#252925}.moment-copy>.text-link{margin-top:22px}.moment-visual{padding:36px 27px;background:#f0f1ee;border-radius:28px;min-width:0}.plan-visual{background:#eceef6}.log-visual{background:#f0f0ed}.progress-visual{background:#eef1ed}.moment-device{max-width:360px;margin:auto;border:5px solid #44484c;border-radius:27px;overflow:hidden;background:#eee;box-shadow:0 24px 35px -17px #10182850,0 5px 9px #1018281a}.moment-device .native-tour-window{border-radius:21px}.ai-path{list-style:none;margin:27px 0 0;padding:0;counter-reset:route}.ai-path li{counter-increment:route;position:relative;padding:15px 0 15px 32px;border-top:1px solid #e4e5e1}.ai-path li:before{content:counter(route,decimal-leading-zero);position:absolute;left:0;top:18px;font:10px Mono,monospace;color:#3546d6}.ai-path b{font-size:15px;font-weight:500;display:block;margin-bottom:5px}.ai-path span{font-size:14px;line-height:1.6;color:#727771;display:block}.moment-view-switch{display:flex;justify-content:center;gap:6px;margin-top:24px}.moment-view-switch button{border:0;background:transparent;border-radius:25px;padding:10px 12px;font:12px inherit;cursor:pointer;color:#666}.moment-view-switch button[aria-pressed=true]{background:white;color:#3546d6;box-shadow:0 3px 9px #252b4310}.timer-story{margin-top:44px;padding-top:28px;border-top:1px solid #e4e5e1}.moment-mini-label{font:10px Mono,monospace;letter-spacing:.08em;color:#747973}.timer-story p{font-size:14px;margin:12px 0 20px}.timer-device{border:5px solid #33373c;border-radius:24px;overflow:hidden;box-shadow:0 12px 20px -12px #1c202e70;background:#b62c24}.timer-device .native-tour-window{border-radius:18px}.moment-note{padding-top:15px}.moment .demo-controls{gap:10px;flex-wrap:wrap;margin-top:18px}.timer-story .demo-controls{display:none}
@media(max-width:800px){.moment{gap:36px;padding:75px 0}.moment-visual{padding:26px 16px}.moment h3{font-size:36px}}
@media(max-width:620px){.moments{padding-top:65px;padding-bottom:55px}.moments-intro{margin-bottom:48px}.moment{grid-template-columns:1fr;gap:32px;padding:60px 0}.moment-reverse .moment-copy,.moment-reverse .moment-visual{order:initial}.moment h3{font-size:38px;margin:22px 0}.moment-copy>p{max-width:none}.moment-visual{padding:30px 22px}.moment-device{max-width:330px}.timer-story{margin-top:30px}.timer-device{max-width:400px}.moment-index{font-size:10px}}

.moment-copy{min-width:0}.timer-device{width:100%}.moment-visual .demo-controls{font-size:10px}

/* Proximity snapping lets long sections remain freely scrollable on small screens. */
html{scroll-snap-type:y proximity;scroll-padding-top:24px}
.hero,.leave-out,.moments-intro,.moment,.timer-story,.long-game,.personality,.faq,.closing{scroll-snap-align:start;scroll-snap-stop:normal}
html:has(dialog[open]){scroll-snap-type:none}
.manual-steps{list-style:none;margin:30px 0 0;padding:0;counter-reset:step}
.manual-steps li{counter-increment:step;padding:16px 0 16px 38px;position:relative;border-top:1px solid #e4e5e1}
.manual-steps li:before{content:'(' counter(step) ')';position:absolute;left:0;top:18px;font:13px Mono,monospace;color:#3546d6}
.manual-steps b{display:block;font-size:16px;font-weight:500;margin-bottom:5px}.manual-steps span{font-size:15px;line-height:1.65;color:#6e736e;display:block}
.ai-path li:before{content:'(' counter(route) ')'}
.recorded-screen{display:block;width:100%;height:auto;object-fit:contain;background:#eee;cursor:pointer}
.recorded-screen:focus-visible{outline:3px solid #3546d6;outline-offset:-3px}
.hero-stage.hero-journey{flex-direction:column;align-items:center}
.hero-phone-viewport .recorded-screen{width:100%;height:100%;object-fit:cover}
.hero-stage>.demo-controls{margin-top:20px}
.recorded-modal{margin-top:24px;max-height:65vh;overflow:auto;border-radius:20px}.recorded-modal video{width:100%;height:auto}
.moment>.timer-story{grid-column:1/-1;margin-top:0;padding:42px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:40px;align-items:center}
.timer-story>.moment-mini-label{grid-column:1;grid-row:1;align-self:end;font-size:11px}.timer-story>p{grid-column:1;grid-row:2;align-self:start;font-size:16px;margin:16px 0 0}.timer-story>.timer-device{grid-column:2;grid-row:1/4;max-width:none;border:0;border-radius:24px;box-shadow:none;background:#f5f5f2;overflow:hidden}
.timer-story>.demo-controls{display:flex;grid-column:2;grid-row:4}
@media(max-width:620px){html{scroll-padding-top:18px}.moment>.timer-story{display:block;padding-top:32px}.timer-story>p{margin:15px 0 22px}.timer-story .demo-controls{display:flex}.manual-steps{margin-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none;scroll-behavior:auto}}

/* Entire phones, their screens and shadows are baked into the media. */
.moment-visual{background:#f5f5f2;padding:18px 20px 25px}
.moment-device{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;max-width:360px}
.recorded-screen{background:#f5f5f2}
.hero-recording{width:min(400px,100%);border-radius:24px;overflow:hidden}
.recorded-modal{max-height:65vh;overflow:hidden;background:#f5f5f2}
.recorded-modal video{height:65vh;width:100%;object-fit:contain}
.demo-controls button{min-height:44px;padding:9px 13px;border-radius:22px}
@media(max-width:620px){.moment-visual{padding:12px 8px 20px}.hero-recording{width:100%}}

/* The current recording stage receives a calm blue numeral and text emphasis. */
.import-steps li{border-radius:8px;transition:background .25s ease,color .25s ease;padding-right:12px}
.import-steps li:before{color:#949791;transition:color .25s ease;font-size:15px}
.import-steps li[aria-current="step"]{background:#3546d60a}
.import-steps li[aria-current="step"]:before{color:#3546d6;font-weight:700}
.import-steps li[aria-current="step"] b{color:#3546d6}
@media(prefers-reduced-motion:reduce){.import-steps li,.import-steps li:before{transition:none}}

.import-stage-caption{display:none}
@media(max-width:760px){.import-stage-caption{display:block;margin:0 0 12px;text-align:center;color:#3546d6;font-size:16px;font-weight:500}}

/* Numbered text is the playback control. Solid counters follow the supplied reference. */
.chapter-steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:none;width:100%}
.chapter-steps li{border-top:1px solid #e1e3df}
.chapter-steps button{appearance:none;border:0;background:transparent;display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;padding:18px 10px 18px 0;color:#222622;font:inherit;cursor:pointer;border-radius:10px;transition:background .2s}
.chapter-number{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#080808;color:white;font:400 27px/1 Arial,sans-serif;transition:box-shadow .2s}
.chapter-copy{display:block;min-width:0;padding-top:1px}.chapter-copy b{display:block;font-size:16px;line-height:1.4;font-weight:500}.chapter-copy>span{display:block;font-size:14px;line-height:1.6;color:#70756f;margin-top:4px}
.chapter-steps button[aria-pressed=true]{background:#3546d608}.chapter-steps button[aria-pressed=true] .chapter-number{box-shadow:0 0 0 3px #f5f5f2,0 0 0 5px #3546d6}.chapter-steps button[aria-pressed=true] b{color:#3546d6}
.chapter-steps button:hover{background:#3546d60b}.chapter-steps button:focus-visible{outline:2px solid #3546d6;outline-offset:4px}
.chapter-caption{font-size:13px;text-align:center;color:#3546d6;margin:8px 0 10px;line-height:1.4}
.moment-reverse .moment-copy{order:0}.moment-reverse .moment-visual{order:1}
.timer-story>.chapter-steps{grid-column:1;grid-row:3;align-self:start;margin-top:20px}.timer-story>.chapter-caption{grid-column:2;grid-row:1;align-self:start;z-index:1;font-size:13px;line-height:1.4;color:#3546d6;text-align:center;max-width:none;margin:18px 20px 10px}
.hero-copy .chapter-steps{max-width:400px}.hero-copy .chapter-copy>span{display:none}.hero-copy .chapter-steps button{align-items:center;padding:12px 8px}.hero-copy .chapter-number{width:32px;height:32px;font-size:22px}
.recorded-modal~.chapter-caption{display:none}dialog .chapter-steps{display:flex;gap:8px;margin:16px 0}dialog .chapter-steps li{flex:1;border:0}dialog .chapter-steps button{padding:8px;gap:7px}dialog .chapter-copy>span{display:none}dialog .chapter-copy b{font-size:12px}dialog .chapter-number{width:26px;height:26px;font-size:18px}
@media(max-width:620px){.chapter-number{width:36px;height:36px;font-size:25px}.chapter-steps button{gap:14px}.timer-story>.chapter-steps{margin-bottom:24px}.moment-reverse .moment-visual{order:1}}
@media(prefers-reduced-motion:reduce){.chapter-steps button,.chapter-number{transition:none}}