/* Shared with the running app: Fredoka/Nunito and pastel-ui.css tokens. */
:root{--paper:#fff6e7;--panel:#fff0d2;--primary:#d2e58f;--ink:#76523e;--muted:#92745b;--line:#dcc5a3;--sage:#8da455;--shadow:#b3bf83;--title:'Fredoka','Nunito',sans-serif;--body:'Nunito',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:600 15px/1.65 var(--body)}a{color:inherit}a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--sage);outline-offset:4px}.wrap{max-width:1160px;margin:auto;padding-left:32px;padding-right:32px}.header{display:flex;align-items:center;gap:30px;min-height:92px}.brand{display:flex;align-items:center;gap:10px;font:600 29px/1 var(--title);text-decoration:none;letter-spacing:-.5px}.brand img{border-radius:12px}.header nav{display:flex;gap:24px;margin-left:auto;font-size:13px}.header nav a{text-decoration:none}.header nav a:hover,.header nav a[aria-current]{color:#69823c;text-decoration:underline;text-underline-offset:5px}.nav-download{display:inline-flex;gap:14px;background:var(--primary);border:2px solid #a8b77b;box-shadow:0 3px 0 var(--shadow);border-radius:17px;padding:8px 18px;text-decoration:none;color:#586336;font:500 14px var(--title)}h1,h2{font-family:var(--title);font-weight:600;line-height:1.12;margin:0}h1{font-size:57px;letter-spacing:-1px}h1 span{color:#8da455}h2{font-size:22px}em{font-style:normal;color:var(--sage)}.hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;align-items:center;padding-top:35px;padding-bottom:44px}.cozy-label{display:inline-block;background:#e7edcf;color:#73814e;border:1px solid #c6d39e;border-radius:14px;padding:5px 13px;margin-bottom:20px;font:500 12px var(--title)}.intro{font-size:15px;line-height:1.75;color:var(--muted);max-width:335px;margin:22px 0}.store-badge{display:inline-block;line-height:0;padding:8px 0;text-decoration:none}.store-badge img{display:block;width:180px;height:60px}.store-badge:hover{opacity:.88}.platform{font-size:11px;color:var(--muted);margin:5px 0 0}.screens-panel{min-width:0;background:#f6eccf;border:2px solid var(--line);border-radius:27px;padding:18px 14px 12px;box-shadow:0 5px 0 #e5d5b7}.screenshot-rail{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b5c088 transparent;padding-bottom:10px}.screenshot-rail img{flex:0 0 46%;width:46%;height:auto;align-self:flex-start;scroll-snap-align:start;border-radius:16px;display:block}.screens-hint{font-size:10px;color:#9a805e;text-align:center;margin:4px 0 0}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding-bottom:38px}.benefits article{background:#fff0d2;border:1px solid var(--line);border-radius:18px;padding:17px 20px}.benefits h2{font-size:17px;font-weight:500}.benefits p{font-size:12px;color:var(--muted);margin:6px 0 0}.footer{display:flex;align-items:center;gap:25px;flex-wrap:wrap;padding-top:22px;padding-bottom:24px;border-top:1px solid var(--line)}.footer .brand{font-size:22px}.footer nav{display:flex;gap:22px;font-size:12px;margin-left:auto}.footer nav a{text-decoration:none}.footer small{width:100%;font-size:9px;color:#a28d76}.skip{position:absolute;top:-100px;left:20px;padding:10px;background:white;z-index:5}.skip:focus{top:10px}.legal{max-width:830px;margin:20px auto 40px;background:var(--paper);border:2px solid var(--line);border-radius:25px;padding:30px 35px;box-shadow:0 4px 0 #e5d5b7}.eyebrow{font:500 11px var(--title);letter-spacing:1.3px;color:var(--sage);margin:0 0 13px}.legal h1{font-size:35px;margin-bottom:18px}.legal h2{font-size:20px;font-weight:500;margin:27px 0 8px}.legal p,.legal li{font-size:14px;color:var(--muted);line-height:1.8}.legal .date{font-size:11px}.legal a{text-underline-offset:4px}.legal-callout{background:#e7edcf;padding:15px 20px;border:1px solid #c6d39e;border-radius:15px}.legal details{border-bottom:1px solid var(--line);padding:14px 0}.legal summary{cursor:pointer;font:500 16px var(--title)}.legal details p{margin-bottom:0}.text-link{text-underline-offset:4px}@media(max-width:900px){.header{gap:20px}.header nav{gap:15px}.hero{gap:24px}h1{font-size:40px}.benefits article{padding:15px}.benefits h2{font-size:16px}}@media(max-width:650px){.wrap{padding-left:22px;padding-right:22px}.header{min-height:100px;flex-wrap:wrap;padding-top:18px;padding-bottom:15px;gap:13px}.brand{font-size:25px}.header .nav-download{margin-left:auto;font-size:12px;padding:8px 14px}.header nav{order:3;width:100%;justify-content:space-between;margin:0;font-size:12px}.hero{grid-template-columns:1fr;padding-top:23px;padding-bottom:26px;gap:26px}.hero-copy{text-align:center}.cozy-label{margin-bottom:15px;font-size:11px}h1{font-size:43px;line-height:1.12}h1 br:nth-of-type(2){display:none}.intro{margin:15px auto;font-size:14px;max-width:330px}.screens-panel{padding:13px 10px 9px;border-radius:22px}.screenshot-rail img{flex-basis:44%;width:44%;border-radius:11px}.benefits{grid-template-columns:1fr;gap:9px;padding-bottom:25px}.benefits article{padding:12px 17px;display:flex;align-items:center;justify-content:space-between;gap:15px}.benefits h2{font-size:14px;max-width:125px}.benefits p{font-size:11px;max-width:160px;margin:0}.footer{gap:17px}.footer nav{margin-left:auto;gap:15px;font-size:11px}.footer .brand{font-size:20px}.legal{margin:14px 16px 30px;padding:24px 22px;border-radius:20px}.legal h1{font-size:31px}.legal p{font-size:13px}.legal h2{font-size:18px}.legal summary{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Separate, full-width screenshot row requested 2026-10-26. */
.hero{display:block;text-align:center;padding-top:38px;padding-bottom:30px}
.hero-copy{max-width:650px;margin:auto}
.hero h1{font-size:48px;line-height:1.15}
.hero h1 br{display:none}
.hero h1 br:after{content:" "}
.hero h1 span{display:block}
.hero .intro{max-width:470px;margin:15px auto}
.cozy-label{margin-bottom:14px}
.screens-section{padding:6px 0 30px}
.screens-panel{max-width:none;background:none;border:0;box-shadow:none;border-radius:0;padding:0}
.screenshot-rail{gap:18px;padding:6px max(24px,calc((100vw - 1096px)/2)) 16px;scroll-padding-left:max(24px,calc((100vw - 1096px)/2))}
.screenshot-rail img{flex:0 0 200px;width:200px;border-radius:16px}
.screens-hint{margin:5px 0 0}
.benefits{padding-top:8px}
@media(max-width:650px){
 .hero{padding-top:28px;padding-bottom:24px}
 .hero h1{font-size:36px;letter-spacing:0}
 .hero h1 br{display:none}
 .hero .intro{max-width:330px;margin:13px auto}
 .screenshot-rail{gap:13px;padding-left:22px;padding-right:22px;scroll-padding-left:22px}
 .screenshot-rail img{flex-basis:180px;width:180px;border-radius:13px}
 .screens-section{padding-bottom:23px}
}

/* Keep the screenshot scroller aligned with the page content. */
.screens-section{max-width:1160px;width:100%;margin:0 auto;padding:6px 32px 30px;min-width:0}
.screens-panel{width:100%;min-width:0;overflow:hidden}
.screenshot-rail{width:100%;max-width:100%;min-width:0;padding:6px 0 16px;scroll-padding-left:0}
@media(max-width:650px){.screens-section{padding:6px 22px 23px}.screenshot-rail{padding-left:0;padding-right:0;scroll-padding-left:0}}

.screens-panel{position:relative;overflow:visible}
.screenshot-rail{scrollbar-width:none;-ms-overflow-style:none}
.screenshot-rail::-webkit-scrollbar{display:none}
.carousel-controls{position:absolute;inset:0 -22px 45px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}
.carousel-arrow{pointer-events:auto;width:42px;height:42px;border:2px solid #c6d39e;border-radius:50%;background:#e7edcf;color:#73814e;box-shadow:0 3px 0 #b3bf83;display:grid;place-items:center;cursor:pointer;padding:0}
.carousel-arrow:hover{background:#d2e58f}.carousel-arrow:active{transform:translateY(2px);box-shadow:0 1px 0 #b3bf83}
.carousel-arrow:focus-visible,.carousel-play:focus-visible{outline:3px solid #8da455;outline-offset:4px}
.carousel-footer{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:8px}
.carousel-footer .screens-hint{margin:0}
.carousel-play{font:600 10px var(--body);color:#92745b;border:0;background:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:5px}
@media(max-width:650px){.carousel-controls{inset:0 -13px 45px}.carousel-arrow{width:34px;height:34px}.screens-section{padding-left:27px;padding-right:27px}}