@font-face{font-family:Caprasimo;src:url(/assets/fonts/caprasimo_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree_semibold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree_bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{--ground:#F5EAD8;--surface:#FFFDF7;--sunk:#EEE7DB;--ink:#201E1D;--soft:#5E574D;--line:rgba(32,30,29,.14);--accent:#C67139;--accent-ink:#9C5528;--sage:#7A8A5E;--harbor:#0F6C74;--device:#161513;--shadow:0 30px 70px rgba(32,30,29,.18);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#1A1817;--surface:#24211F;--sunk:#2D2A27;--ink:#F5EAD8;--soft:#C0B6A5;--line:rgba(245,234,216,.14);--accent:#E8A36F;--accent-ink:#E8A36F;--sage:#A9B98C;--harbor:#6FB7BC;--device:#000;--shadow:0 30px 70px rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{--ground:#1A1817;--surface:#24211F;--sunk:#2D2A27;--ink:#F5EAD8;--soft:#C0B6A5;--line:rgba(245,234,216,.14);--accent:#E8A36F;--accent-ink:#E8A36F;--sage:#A9B98C;--harbor:#6FB7BC;--device:#000;--shadow:0 30px 70px rgba(0,0,0,.45);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:18px/1.65 Figtree,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-underline-offset:5px}
header,main,footer{max-width:1180px;margin:auto;padding-left:40px;padding-right:40px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
.brand{display:flex;align-items:center;gap:12px;font:400 28px/1 Caprasimo,Georgia,serif;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:11px}
.brand small{display:block;font:600 11px/1 Figtree,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--soft);margin-top:5px}
nav{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:600}
nav a{text-decoration:none;color:var(--soft)}
nav a:hover{color:var(--ink)}
nav .button{margin:0;padding:11px 20px;color:var(--surface);white-space:nowrap}
.brand>span{white-space:nowrap}
h1,h2,h3{font-family:Caprasimo,Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1.06;margin:0}
h1{font-size:clamp(46px,7vw,86px)}
h2{font-size:clamp(34px,4.6vw,56px)}
.eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin:0 0 16px}
.intro{font-size:clamp(19px,2.1vw,23px);color:var(--soft);max-width:560px;margin:26px 0 0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:var(--surface);padding:16px 28px;border-radius:999px;text-decoration:none;font-weight:700;font-size:17px;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease}
.button:hover{transform:translateY(-1px)}
.button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.play-badge{display:inline-block;line-height:0;margin:-13px -12px;border-radius:12px}
.play-badge img{height:76px;width:auto}
.plan .play-badge{align-self:center}
.legal{flex-basis:100%;font-size:13px;margin:0}
.textlink{color:var(--accent-ink);font-weight:700}
.small{font-size:15px;color:var(--soft)}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:50px 0 70px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:38px}
.hero-art{position:relative;height:640px}
.hero-art .paper{position:absolute;width:62%;height:auto;left:2%;top:70px;transform:rotate(-7deg);border-radius:6px;box-shadow:var(--shadow)}
.hero-art .device{position:absolute;right:4%;top:0;width:min(300px,58%)}

.device{margin:0;background:var(--device);padding:10px;border-radius:44px;box-shadow:var(--shadow)}
.device img{display:block;width:100%;height:auto;border-radius:35px}

.proof{list-style:none;margin:0;padding:34px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof strong{display:block;font:400 24px/1.2 Caprasimo,Georgia,serif}
.proof span{font-size:15px;color:var(--soft)}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:64px 0}
.feature.flip{grid-template-columns:1fr 1fr}
.stage{border-radius:36px;padding:56px 0 0;display:flex;justify-content:center;overflow:hidden;height:560px}
.stage .device{width:300px;border-radius:44px 44px 0 0;padding-bottom:0;box-shadow:0 20px 50px rgba(32,30,29,.22)}
.stage .device img{border-radius:35px 35px 0 0}
.stage.mid{align-items:center;padding:0}
.stage.mid .device{border-radius:44px;padding-bottom:10px;width:350px;flex:none}
.stage.mid .device img{border-radius:35px}
.stage.sage{background:color-mix(in srgb,var(--sage) 24%,var(--ground))}
.stage.harbor{background:color-mix(in srgb,var(--harbor) 18%,var(--ground))}
.stage.terracotta{background:color-mix(in srgb,var(--accent) 20%,var(--ground))}
.feature.flip .feature-copy{order:2}
.feature-copy{max-width:540px}
.feature-copy p:not(.eyebrow){font-size:19px;color:var(--soft);margin:22px 0 0}

.pricing{padding:110px 0;text-align:center}
.pricing h2{max-width:760px;margin:0 auto}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:28px;margin:50px 0 28px;text-align:left}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column}
.plan.featured{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow)}
.plan h3{font-size:30px}
.price{font:400 54px/1 Caprasimo,Georgia,serif;margin:16px 0 8px}
.price span{font:600 18px Figtree,sans-serif;color:var(--soft)}
.plan ul{list-style:none;padding:0;margin:18px 0 30px;flex:1}
.plan li{padding:9px 0 9px 32px;position:relative;border-top:1px solid var(--line)}
.plan li::before{content:"";position:absolute;left:4px;top:17px;width:14px;height:8px;border-left:2.5px solid var(--sage);border-bottom:2.5px solid var(--sage);transform:rotate(-45deg)}
.plan .button{align-self:stretch}
.cats{display:inline-block;margin-top:22px;padding:12px 22px;border-radius:999px;background:var(--sunk);font-size:15px}

.faq{max-width:820px;margin:auto;padding:30px 0 110px}
.faq h2{margin-bottom:30px}
details{border-top:1px solid var(--line);padding:6px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-weight:700;font-size:20px;padding:18px 40px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:28px;font-weight:400;color:var(--accent-ink)}
details[open] summary::after{content:"–"}
details p{margin:0 0 20px;color:var(--soft)}

.closing{text-align:center;padding:90px 30px;margin-bottom:60px;background:var(--surface);border-radius:40px}
.closing img{border-radius:24px}
.closing h2{margin:24px 0 34px}

footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:36px;padding-bottom:50px;border-top:1px solid var(--line);font-size:15px;color:var(--soft)}
footer p{flex:1;min-width:200px;margin:0}
footer .brand{font-size:22px}

article{max-width:760px;margin:60px auto 100px}
article h1{font-size:clamp(40px,6vw,62px)}
article h2{font-size:30px;margin-top:48px}
article p{overflow-wrap:anywhere}
.contact{font-size:16px;color:var(--soft)}
.notice{border-left:3px solid var(--accent);padding:16px 22px;background:var(--sunk);font-size:16px;border-radius:0 12px 12px 0}
.policy p{margin:28px 0}
.features{padding-left:24px}
.features li{margin:16px 0}
.account-card{padding:28px;border:1px solid var(--line);border-radius:20px;margin-top:36px;background:var(--surface)}
.account-card h2{margin:0 0 16px}
.account-card p{font-size:16px}
.account-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.account-actions button{cursor:pointer;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:999px;padding:12px 20px;background:var(--ground);color:var(--ink);margin:0;min-height:48px}
.account-actions .button{background:var(--ink);color:var(--surface)}
button:disabled{opacity:.55;cursor:wait}
[hidden]{display:none!important}

.skip{position:absolute;left:10px;top:-100px}
.skip:focus{top:10px;background:var(--surface);padding:10px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--harbor);outline-offset:5px;border-radius:6px}

@media (max-width:900px){
 header,main,footer{padding-left:16px;padding-right:16px}
 nav{gap:18px;font-size:15px}
 nav .hide-sm{display:none}
 .hero{grid-template-columns:1fr;padding:24px 0 50px}
 .hero-art{height:560px;max-width:440px;width:100%;margin:10px auto 0}
 .hero-art .device{width:230px}
 .proof{grid-template-columns:repeat(2,1fr)}
 .feature,.feature.flip{grid-template-columns:1fr;gap:32px;padding:44px 0}
 .feature.flip .feature-copy{order:0}
 .stage{height:440px;padding-top:40px;border-radius:28px}
 .stage .device{width:min(250px,72%)}
 .plans{grid-template-columns:1fr}
 .pricing{padding:80px 0}
 .closing{border-radius:28px;padding:70px 20px}
 article{margin:40px auto 70px}
}
@media (max-width:520px){
 header{padding-top:16px;padding-bottom:16px;gap:12px}
 .brand{font-size:24px}
 .brand img{width:36px;height:36px}
 .brand small{display:none}
 nav a:not(.button){display:none}
 nav .button{padding:10px 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}