@font-face{font-family:Space;src:url('assets/space-grotesk-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:DM;src:url('assets/dm-sans.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#fcfbf7;--ink:#252d47;--blue:#3157cf;--yellow:#f6e98a;--muted:#616779;--line:#e4e5df;--display:Space,sans-serif;--body:DM,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased;scrollbar-color:var(--blue) var(--paper)}
::selection{background:#eee395;color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
a{color:inherit;text-underline-offset:5px}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.wrap{max-width:1264px;margin:auto;padding-inline:42px}
.skip{position:absolute;top:-60px;left:15px;background:var(--yellow);padding:12px;z-index:10}
.skip:focus{top:10px}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:36px;padding-bottom:26px}
.brand{display:flex;gap:12px;align-items:center;font-family:var(--display);font-size:19px;line-height:1.03;text-decoration:none;letter-spacing:-.6px}
.brand svg{width:30px;height:35px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.brand-dot{color:var(--blue)}
.byline{font-size:14px;color:var(--muted)}
.byline strong{color:var(--ink)}
.hero{display:grid;grid-template-columns:1.13fr 1fr;gap:47px;align-items:center;min-height:720px;padding-top:42px;padding-bottom:76px}
.hero-copy{position:relative;z-index:1}
h1{font-family:var(--display);font-size:clamp(48px,5vw,68px);font-weight:700;line-height:1.1;letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
.highlight{position:relative;display:inline-block;isolation:isolate}
.highlight:before,.highlight:after{content:'';position:absolute;z-index:-1;left:-.07em;right:-.08em;background:var(--yellow);border-radius:7% 4% 8% 3% / 22% 35% 16% 28%;height:.69em;bottom:.03em;transform:rotate(-2deg)}
.highlight:after{height:.48em;opacity:.42;left:-.1em;right:-.035em;bottom:.11em;transform:rotate(1deg)}
.sharing{font-family:var(--display);font-size:31px;font-weight:700;line-height:1.25;letter-spacing:-.025em;color:var(--blue);margin:0 0 29px}
.intro{max-width:518px;font-size:17px;line-height:1.85;margin:0 0 30px;color:#535b6f}
.inline-highlight{background:linear-gradient(transparent 60%,#e5ecfd 60%,#e5ecfd 96%,transparent 96%);color:var(--ink)}
.signup{max-width:565px}
label{display:block;font-size:14px;margin-bottom:11px;color:var(--ink)}
.form-row{display:flex;gap:9px}
input{min-width:0;flex:1;width:100%;border:1px solid #aab0bd;border-radius:8px;padding:18px 16px;background:white;color:var(--ink);caret-color:var(--blue);transition:border-color .2s}
input:hover{border-color:var(--blue)}
input::placeholder{color:#6b7180}
button{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--blue);color:white;border:0;border-radius:8px;font-size:14px;font-weight:700;padding:18px 20px;white-space:nowrap;transition:background .2s,transform .2s}
button:hover{background:#2243af;transform:translateY(-2px)}
button:active{transform:translateY(0)}
button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.fine{font-size:13px;color:var(--muted);margin:14px 0 0}
.status{font-size:14px;line-height:1.5;color:var(--ink);padding:12px 0;margin:10px 0 0}
/* Each divider belongs to the notebook, so labels follow the same rotation. */
.art{position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:490/555;margin:0;min-width:0;max-width:500px;justify-self:end}
.margin-note{position:absolute;top:4%;left:18%;font-family:var(--body);font-size:clamp(12px,3cqw,15px);line-height:1.6;color:var(--muted)}
.curved-arrow{position:absolute;top:1%;right:12%;width:19%;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.notebook{position:absolute;left:6%;top:17%;width:68%;height:74%;transform:rotate(-7deg);isolation:isolate;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.art:hover .notebook{transform:rotate(-5deg) translateY(-4px)}
.stack-sheet{position:absolute;inset:0;border-radius:3px 11px 11px 3px}
.stack-blue{background:#cbd9e9;transform:translate(-8px,16px) rotate(-5deg);z-index:-4;box-shadow:0 23px 30px #373d4d15}
.stack-peach{background:#ead5c2;transform:translate(9px,12px) rotate(4deg);z-index:-3}
.page-edges{position:absolute;inset:7px -7px -7px 7px;background:repeating-linear-gradient(to bottom,#eeece1 0,#eeece1 2px,#d8d5c9 2px,#d8d5c9 3px);border-radius:4px 10px 10px 4px;z-index:-1;box-shadow:2px 6px 9px #4c473014}
.book-cover{position:absolute;inset:0;background:#f7e88b;border-radius:3px 10px 10px 3px;padding:9% 8% 8% 11%;display:flex;flex-direction:column;box-shadow:4px 6px 16px #45402e12}
.book-cover:before{content:'';position:absolute;left:5%;top:0;bottom:0;width:1px;background:#c9b95670;box-shadow:3px 0 7px #a99b3730}
.book-top{font-family:var(--display);font-size:2.05cqw;line-height:1.55;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between}
.book-top svg{width:6.2cqw;height:6.2cqw;fill:none;stroke:var(--ink);stroke-width:1.6}
.book-title{font-family:var(--display);font-size:8.9cqw;letter-spacing:-.04em;line-height:1.05;margin-top:15%;position:relative}
.book-title span{position:relative;isolation:isolate}
.book-title span:after{content:'';position:absolute;bottom:.04em;height:.12em;background:#faf5cb;left:0;right:-.03em;z-index:-1;transform:rotate(-2deg)}
.book-note{position:absolute;left:11%;bottom:23%;font-family:var(--body);font-size:3cqw;line-height:1.55;color:#514928}
.book-bottom{margin-top:auto;padding-top:6%;border-top:1px solid #8f834955;display:flex;justify-content:space-between;align-items:center;font-size:2.35cqw;line-height:1.5}
.signature{font-family:var(--display);font-size:3.2cqw;letter-spacing:-.02em}
.chapter-tabs{position:absolute;inset:0;z-index:-2}
.chapter-tab{position:absolute;left:95%;height:9.4%;width:36%;border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:flex-end;padding-right:10%;font-family:var(--display);font-size:2.35cqw;color:#30374a;box-shadow:2px 3px 5px #28304a0b;white-space:nowrap}
.strategy{top:6%;background:#c9d9eb;transform:rotate(1deg)}
.create{top:18%;background:#e6c9bd;left:96%}
.titles{top:30%;background:#d2dfb9;transform:rotate(-1deg)}
.thumbnails{top:42%;background:#d8cce8;left:96%;width:39%;padding-right:5%}
.script{top:54%;background:#f0d8a6;transform:rotate(.5deg)}
.record{top:66%;background:#bddcd7;left:96%}
.editing{top:78%;background:#e8c4ce;transform:rotate(-1deg)}
.closing{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:34px}
.closing p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}
.closing p:first-child{font-size:22px;font-family:var(--display);color:var(--ink);line-height:1.3;letter-spacing:-.03em}
.closing strong{font-family:var(--display);font-size:22px;font-weight:700;color:var(--blue)}
.closing a{font-size:14px;font-weight:bold;white-space:nowrap}
.closing a span{display:inline-block;margin-left:8px;font-size:21px}
.footer{display:flex;justify-content:space-between;padding-block:23px 30px;color:var(--muted);font-size:12px}
@media(min-width:1500px){.hero{min-height:760px}}
@media(max-width:1100px){.hero{gap:24px;grid-template-columns:1.15fr 1fr}h1{font-size:56px}.sharing{font-size:28px}.form-row{flex-direction:column}.intro{font-size:16px}.closing p:nth-child(2){max-width:270px}}
@media(max-width:850px){.wrap{padding-inline:26px}h1{font-size:47px}.sharing{font-size:24px}.hero{gap:20px;padding-top:32px;padding-bottom:50px}.art{align-self:center}.closing p:nth-child(2){max-width:220px}.byline{font-size:13px}}
@media(max-width:700px){.wrap{padding-inline:24px}.header{padding-block:25px}.brand{font-size:17px}.brand svg{width:26px}.byline{font-size:12px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:27px;padding-bottom:48px;gap:38px;min-height:auto}h1{font-size:clamp(40px,10.9vw,64px);line-height:1.12;margin-bottom:21px}.sharing{font-size:clamp(23px,6.8vw,31px);margin-bottom:26px}.intro{font-size:16px;line-height:1.85;margin-bottom:25px}.form-row{flex-direction:column;gap:10px}.fine{text-align:center}.art{width:100%;max-width:460px;align-self:center;aspect-ratio:490/560}.notebook{left:6%;top:17%}.book-top{font-size:2.5cqw}.chapter-tab{font-size:2.7cqw;padding-right:8%}.thumbnails{font-size:2.5cqw;padding-right:3%}.book-bottom{font-size:2.8cqw}.closing{flex-direction:column;align-items:flex-start;gap:17px;padding-block:29px}.closing p:nth-child(2){max-width:none}.closing p:nth-child(2) br{display:none}.footer{font-size:11px;gap:18px;padding-bottom:28px}.footer span:last-child{text-align:right}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}