:root{--paper:#fff;--ink:#0A0A0A;--grey:#5F5F5F;--line:#E6E6E6;--wash:#F4F4F2;--lemon:#F5FF7A;--coral:#FF7A59;--lilac:#D9CCFF;--mint:#B8F5C4}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 Geist,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* top bar */
.top{border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:36px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:8px}
.links{display:flex;gap:28px;font-size:16px}
.links a:hover{text-decoration:underline;text-underline-offset:5px}
.top .btn{margin-left:auto}
.btn{display:inline-block;background:var(--ink);color:#fff;font-weight:500;font-size:16px;padding:13px 20px;border-radius:10px;white-space:nowrap}
.btn:hover{background:#2b2b2b}
.btn.big{font-size:18px;padding:17px 26px;border-radius:12px}

/* hero collage */
.hero{position:relative;padding:44px 0 0;overflow:hidden}
.row{display:flex;justify-content:center;align-items:flex-start;gap:22px}
.tile{flex:none;width:clamp(170px,23vw,340px);overflow:hidden}
.tile.a{background:var(--coral);height:clamp(250px,33vw,470px);margin-top:5vw;padding:7%;display:flex;flex-direction:column;justify-content:space-between}
.tile.b{background:var(--wash);height:clamp(300px,41vw,590px);margin-top:1.5vw;padding:7% 7% 0}
.tile.c{background:var(--lilac);height:clamp(330px,46vw,660px);padding:8%}
.tile.d{background:var(--lemon);height:clamp(300px,41vw,590px);margin-top:1.5vw;padding:7%;display:flex;flex-direction:column;justify-content:space-between}
.tile.e{background:var(--ink);height:clamp(250px,33vw,470px);margin-top:5vw;padding:8% 8% 0}
.tile.b img,.tile.e img{box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.14)}
.chunk{font-family:"Bricolage Grotesque",Geist,sans-serif;font-weight:800;font-size:clamp(22px,3.3vw,50px);line-height:.95;letter-spacing:-.03em}
.tile small{display:block;font-size:clamp(11px,1vw,14px);font-weight:500}
.serif{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(24px,3.4vw,52px);line-height:1;letter-spacing:-.01em;margin-bottom:8%}
.pairs{display:grid;gap:clamp(8px,1.1vw,16px);font-size:clamp(11px,1.05vw,15px);line-height:1.3}
.pairs div{border-top:1px solid rgba(0,0,0,.25);padding-top:clamp(6px,.8vw,12px)}
.pairs b{display:block;font-weight:600}
.card{position:relative;z-index:2;width:min(1080px,calc(100% - 40px));margin:clamp(-250px,-17vw,-110px) auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.10);padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px)}
.who{display:block;color:var(--grey);font-size:15px;margin-bottom:2px}
.line{font-weight:500;font-size:clamp(30px,5.3vw,78px);line-height:1.02;letter-spacing:-.04em;min-height:1.04em}
.line.they{color:#9A9A9A;margin-bottom:clamp(10px,1.2vw,18px)}
.caret::after{content:"";display:inline-block;width:.045em;height:.86em;margin-left:.04em;background:var(--ink);vertical-align:-.06em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(18px,2.2vw,30px);flex-wrap:wrap}
.card-foot p{color:var(--grey);max-width:520px}
.card-foot p b{color:var(--ink);font-weight:500}

/* sections */
.sec{padding:120px 0 0}
h1{font-weight:500;font-size:clamp(40px,6.2vw,88px);line-height:1;letter-spacing:-.04em}
h2{font-weight:500;font-size:clamp(32px,4.4vw,60px);line-height:1.02;letter-spacing:-.035em}
h3{font-weight:500;font-size:22px;letter-spacing:-.01em}
.lead{color:var(--grey);font-size:20px;line-height:1.45;max-width:520px;margin-top:20px}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.buy{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap}
.price{font-weight:500;font-size:34px;letter-spacing:-.03em}
.small{color:var(--grey);font-size:14px;margin-top:14px}
.k{color:var(--grey);font-size:15px}
.pages{background:var(--wash);padding:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pages img{box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 30px rgba(0,0,0,.10)}
.rows{border-top:1px solid var(--ink);margin-top:44px}
.rows div{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.rows b{font-weight:500;font-size:clamp(36px,4.2vw,56px);letter-spacing:-.04em;line-height:1}
.rows span{font-size:20px;max-width:620px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:44px;border-top:1px solid var(--ink);padding-top:28px}
.steps p{color:var(--grey);margin-top:8px}
.soon{margin-top:44px;border-top:1px solid var(--ink)}
.soon div{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.soon span{color:var(--grey)}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:44px;border-top:1px solid var(--ink);padding-top:28px}
.fit ul{padding-left:20px;margin-top:14px;color:var(--grey);font-size:18px}.fit li{margin-bottom:8px}
details{border-bottom:1px solid var(--line);padding:22px 0}
details:first-of-type{border-top:1px solid var(--ink);margin-top:44px}
summary{cursor:pointer;font-weight:500;font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:1;font-weight:400}
details[open] summary::after{content:"–"}
details p{color:var(--grey);margin-top:10px;max-width:640px;font-size:18px}
.close{margin-top:120px;background:var(--lemon);padding:clamp(40px,6vw,88px) 28px}
.close .wrap{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;padding:0}
.close h2{max-width:700px}
.cover-tile{background:var(--lemon);padding:11% 16% 0;overflow:hidden}
.cover-tile img{box-shadow:0 24px 60px rgba(0,0,0,.28)}
footer{margin-top:96px;border-top:1px solid var(--line);padding:28px 0 56px;color:var(--grey);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:860px){.links{display:none}.wrap{padding:0 18px}.top .wrap{height:64px}.row{gap:12px}.tile.a,.tile.e{display:none}.tile{width:38vw}.tile.b,.tile.d{height:62vw}.tile.c{height:70vw}.card{margin-top:-22vw}.split,.fit{grid-template-columns:1fr;gap:36px}.pages{padding:18px;gap:10px}.steps{grid-template-columns:1fr;gap:26px}.rows div{grid-template-columns:84px 1fr}.rows span{font-size:17px}.sec{padding-top:80px}.close{margin-top:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.caret::after{animation:none}}

.tile img{width:100%}
