@font-face{font-family:Vollkorn;src:url('/VollkornRegular-51aXv.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Vollkorn;src:url('/VollkornMedium-jEVry.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Vollkorn;src:url('/VollkornSemibold-6Yay1.ttf') format('truetype');font-weight:600;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#111;color:#f5f5f2;font:17px/1.55 Vollkorn,Georgia,serif;color-scheme:dark;overflow-x:hidden}
a{color:inherit;text-underline-offset:4px}
a:hover{color:#c8c8c3}
a:focus-visible{outline:2px solid #fff;outline-offset:5px}
img{max-width:100%}
.wrap{max-width:1120px;padding:0 32px;margin:auto}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:24px}
header{min-height:92px}
header a,footer a{padding:10px 0}
.wordmark{text-decoration:none;font-size:21px}
h1{font-weight:400;font-size:clamp(40px,5.6vw,66px);line-height:1.06;letter-spacing:-.035em;margin:0 0 22px}
h2{font-weight:400;font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h3{font-weight:500;font-size:19px;line-height:1.3;margin:0 0 6px}
p{color:#aaa;margin:0 0 16px}
.lead{font-size:20px;max-width:560px;margin-bottom:28px}
.small{font-size:14px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border:1px solid #fff;border-radius:6px;background:#fff;color:#111;text-decoration:none;font-size:18px;font-weight:500}
.cta:hover{background:#ddd;color:#111}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.actions .alt{color:#ddd}
.note{margin:14px 0 0;font-size:14px;color:#8f8f8a}
section{padding:76px 0 0}
.section-intro{max-width:640px;margin-bottom:30px}
figure{margin:0;min-width:0}
figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#191919;border-radius:6px}
figcaption{padding:8px 0 0;color:#8f8f8a;font-size:13px}
.hero{display:grid;gap:44px;align-items:center;padding:40px 0 8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero .pair{grid-template-columns:.62fr 1fr;align-items:end}
.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:30px}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:block;color:#777;font-size:15px;margin-bottom:6px}
.steps p{margin:0}
.examples{display:grid;gap:40px 36px}
.example h3{font-size:16px;color:#ddd;font-weight:400;margin-bottom:10px}
.organise{display:grid;gap:34px;align-items:center}
.screen{border-radius:8px;overflow:hidden;background:#191919}
.screen img{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:0}
.checks{list-style:none;padding:0;margin:0 0 8px}
.checks li{color:#aaa;padding:0 0 8px 20px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:#777}
.pricing{display:grid;gap:22px;max-width:880px}
.price{font-size:20px;color:#f5f5f2;margin:0 0 4px}
.closing{padding:88px 0 70px;max-width:680px}
.provenance{margin:0 0 40px;color:#8f8f8a}
.provenance summary{cursor:pointer;padding:8px 0}
.provenance p{color:#8f8f8a}
footer{border-top:1px solid #2a2a2a;padding:14px 0 26px;font-size:14px;flex-wrap:wrap}
.guide{max-width:780px}
.page-intro{padding:40px 0 8px}
.guide .examples{grid-template-columns:1fr;gap:28px}
.guide h1{font-size:clamp(38px,5vw,56px)}
.guide section{padding-top:52px}
.guide ul{color:#aaa;padding-left:20px;margin:0 0 16px}
.guide li{margin-bottom:8px}
strong{font-weight:600;color:#ddd}
.document{max-width:740px}.document main{padding:35px 0}.document h1{font-size:48px}.document h2{font-size:23px;font-weight:400;margin:30px 0 8px}.document p{margin:0 0 16px}
@media(min-width:860px){
.hero{grid-template-columns:1.05fr 1fr;padding:56px 0 20px}
.steps{grid-template-columns:repeat(3,1fr);gap:36px}
.examples{grid-template-columns:1fr 1fr}
.organise{grid-template-columns:.8fr 1.2fr;gap:52px}
.pricing{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
body{font-size:16px}
.wrap{padding:0 20px}
header{min-height:72px}
.wordmark{font-size:18px}
.hero{padding:18px 0 0;gap:30px}
.lead{font-size:18px;margin-bottom:24px}
.cta{width:100%}
.actions{gap:14px 22px}
section{padding-top:60px}
.examples{gap:32px}
.pair{gap:10px}
.screen{max-width:290px;margin:0 auto;border-radius:18px}
.closing{padding:64px 0 52px}
.document h1{font-size:38px}
footer{gap:6px 18px}
}