@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:light;--cream:#f7f1e6;--ink:#26372c;--moss:#365243;--muted:#57655a;--line:#d8cdbc;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:1rem/1.55 var(--sans)}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #997044;outline-offset:4px}
.masthead,.hero,.launch,footer{width:min(1280px,100% - 3rem);margin-inline:auto}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.masthead a{text-decoration:none;font-weight:700}
.brand{display:flex;align-items:center;gap:.75rem;font-size:clamp(.9rem,2vw,1.15rem)}
.mark{background:var(--moss);color:#fff8eb;border-radius:.3rem;padding:.12em .33em;font:1.85rem var(--serif)}
.hero{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:clamp(1.4rem,4.5vw,5rem);padding:clamp(3rem,8vw,7rem) 0}
h1,h2,h3,p{margin:0}
.intro h1,.launch h2{font:400 clamp(3.45rem,7.25vw,7rem)/.91 var(--serif);letter-spacing:-.035em}
.intro em{color:#67503a}
.intro p{margin:1.55rem 0;color:var(--muted);max-width:35ch;font-size:clamp(1rem,1.5vw,1.2rem)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1rem;border:1px solid transparent;border-radius:.4rem;background:var(--moss);color:white;text-decoration:none;font-weight:700}
.button:hover{background:#263e31}
.button:disabled{opacity:.65;cursor:wait}
.stage{position:relative;aspect-ratio:1.26;display:grid;place-items:center;isolation:isolate;overflow:hidden;border-radius:1rem;background:radial-gradient(ellipse at 48% 36%,#ebd9b9,#bba17c);box-shadow:inset 0 0 0 1px #a78d6e}
.dashboard,.book{width:87%;position:absolute}
.dashboard{font-size:clamp(.65rem,1.2vw,.95rem);padding:4%;border-radius:.75rem;background:#fafbf7;box-shadow:0 1rem 2rem #2f2c2333;border:1px solid #e2e6dd}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:1em}
.dash-head strong{font-size:1.4em}.dash-head small{color:#56665c}
.stats,.dash-body{display:grid;gap:.55em}
.stats{grid-template-columns:repeat(3,1fr);margin-bottom:.65em}
.stats>div,.dash-body>div{border:1px solid #e0e7dd;border-radius:.4rem;background:#fff;padding:.65em}
.stats strong{display:block;font-size:1.45em}
.dash-body{grid-template-columns:1.3fr 1fr}
.dash-body h2{font-size:1em;margin-bottom:.35em}
.dash-body p{display:flex;justify-content:space-between;gap:.35em;border-top:1px solid #e9eee8;padding:.28em 0}
.book{visibility:hidden;aspect-ratio:1.48;perspective:1400px;transform:rotate(-5deg);background:#664734;border-radius:.45rem;padding:1%;box-shadow:.5rem 1.2rem 2rem #41280d66}
.paper{position:absolute;inset:1.6% 50% 1.6% 1.2%;padding:7%;overflow:hidden;color:#54422e;background:repeating-linear-gradient(0deg,transparent 0 1.35em,#8c694824 1.35em 1.42em),linear-gradient(106deg,#e2caa0,#f9eccd 10%,#f3e1bf 85%,#c6a87c);font-size:clamp(.59rem,1.4vw,1rem);border-radius:.2rem}
.paper.right{inset:1.6% 1.2% 1.6% 50%;background-color:#eddbb9}
.paper h2{font:italic 400 2.25em/.95 var(--serif);margin:.4em 0}
.folio{font-size:.68em;letter-spacing:.11em;font-weight:700}
.entry{display:flex;justify-content:space-between;gap:.25em;border-bottom:1px solid #99764e55;padding:.28em 0}
.ledger-total{margin-top:.65em;font-style:italic}
.beds{display:grid;grid-template-columns:1fr 1fr;gap:.24em;margin-bottom:.4em}
.beds span{background:#c3c395;border:1px dashed #78855e;padding:.18em;text-align:center}
.leaf{position:absolute;inset:1.6% 1.2% 1.6% 50%;transform-origin:left center;transform-style:preserve-3d}
.leaf .paper{inset:0;backface-visibility:hidden;padding:14%}
.leaf .back{transform:rotateY(180deg)}
.first{z-index:2}.second{z-index:1}
.playing .book{visibility:visible;animation:book-out 6.9s both}
.playing .dashboard{animation:dash-in 6.9s both}
.playing .first{animation:flip 2.05s 1.25s both}
.playing .second{animation:flip 2.05s 3.35s both}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}
@keyframes book-out{0%,78%{opacity:1}100%{opacity:0;visibility:hidden;transform:rotate(-2deg) scale(.95)}}
@keyframes dash-in{0%,78%{opacity:0;transform:translateY(.65rem) scale(.97)}100%{opacity:1;transform:none}}
.replay{position:absolute;bottom:.45rem;right:.6rem;border:0;border-radius:.3rem;background:#fff9e9;color:#393226;padding:.25rem .45rem;font-size:.75rem}
.launch{border-top:1px solid var(--line);padding:clamp(2.4rem,5vw,4.5rem) 0;scroll-margin-top:1rem}
.launch h2{font-size:clamp(3.1rem,5vw,5.5rem)}
.launch>p{margin:.65rem 0 1.4rem;color:var(--muted)}
.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
form{background:#fffbf2;border:1px solid var(--line);padding:clamp(1rem,3vw,2rem);border-radius:.65rem}
form h3{font:400 2.15rem/1 var(--serif)}
form p,form label{display:block;margin:.45rem 0;color:var(--muted)}
form label{font-size:.9rem;font-weight:700;margin-top:1rem}
.fields{display:flex;gap:.5rem;flex-wrap:wrap}
input[type=email]{flex:1;min-width:min(100%,11rem);border:1px solid #b8b4a6;border-radius:.4rem;background:white;padding:.65rem .75rem;color:var(--ink)}
.result:empty{display:none}
.trap{position:absolute;left:-10000px;width:1px;height:1px}
footer{border-top:1px solid var(--line);padding:1.2rem 0;color:var(--muted)}
@media(max-width:780px){.hero,.signup-grid{grid-template-columns:1fr}.hero{padding-top:2.7rem}.stage{max-width:37rem;width:100%;margin-inline:auto}.paper{font-size:clamp(.62rem,2.1vw,1rem)}.dashboard{font-size:clamp(.64rem,2.25vw,.95rem)}}
@media(max-width:400px){.masthead,.hero,.launch,footer{width:calc(100% - 2rem)}.masthead>a:last-child{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.playing .book{visibility:hidden;animation:none}.playing .dashboard,.playing .leaf{animation:none}}