:root { --ink:#171717; --paper:#f6f1e7; --white:#fffdf8; --blue:#2441c4; --coral:#f0563b; --yellow:#f2c84b; --muted:#676158; --line:rgba(23,23,23,.23); --serif:"Newsreader",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 var(--sans); }
img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:.3em; }
a:focus-visible, summary:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
.skip { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.7rem 1rem; background:var(--ink); color:white; }
.skip:focus { top:1rem; }
.wrap { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.eyebrow { margin:0 0 1rem; font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:.85rem 1.35rem; border:2px solid var(--ink); background:var(--coral); color:white; box-shadow:5px 5px 0 var(--ink); text-decoration:none; font-size:.92rem; font-weight:700; transition:background .18s,transform .18s; }
.button:hover { background:#b62f20; transform:translate(2px,2px); }
.button.light { background:var(--white); color:var(--ink); }
.button.light:hover { background:var(--yellow); }
header { border-bottom:1px solid var(--ink); background:var(--paper); }
nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-grid; text-decoration:none; line-height:1; }
.brand strong { font:600 1.55rem var(--serif); }
.brand span { margin-top:.48rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap; font-size:.86rem; font-weight:700; }
.nav-links a:not(.button) { text-decoration:none; }
.nav-links a:not(.button):hover { text-decoration:underline; }
.hero { border-bottom:1px solid var(--ink); }
.hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(3.4rem,6vw,6rem); }
.hero h1 { max-width:620px; margin:0 0 1.5rem; font:500 clamp(3.5rem,6vw,6.5rem)/.94 var(--serif); letter-spacing:-.045em; }
.hero h1 em { color:var(--blue); font-weight:500; }
.hero-lead { max-width:560px; margin:0 0 2rem; color:#48433c; font-size:1.1rem; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.hero-actions .text-link { font-weight:700; }
.hero-art { padding:clamp(1.3rem,3vw,3rem); border:2px solid var(--ink); background:var(--blue); box-shadow:10px 10px 0 var(--ink); }
.hero-art .pages { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:center; }
.hero-art img { width:100%; aspect-ratio:2/3; object-fit:contain; background:white; box-shadow:0 12px 25px rgba(0,0,0,.2); }
.hero-art figcaption { margin-top:1rem; color:#dfe5ff; font-size:.8rem; }
.hero-art figure { margin:0; }
.proof-strip { border-bottom:1px solid var(--ink); background:var(--ink); color:white; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.proof-grid p { margin:0; padding:1.4rem 2rem; border-right:1px solid rgba(255,255,255,.25); font-size:.86rem; font-weight:700; }
.proof-grid p:first-child { padding-left:0; }
.proof-grid p:last-child { border-right:0; }
.section { padding:clamp(4rem,7vw,6rem) 0; border-bottom:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:.56fr 1.44fr; gap:3rem; margin-bottom:2.5rem; }
.section-head h2, .wide-heading { margin:0; max-width:850px; font:500 clamp(2.7rem,5vw,5.1rem)/.97 var(--serif); letter-spacing:-.035em; }
.section-head p:not(.eyebrow) { max-width:660px; margin:1rem 0 0; color:#48433c; }
.format-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--ink); background:var(--ink); }
.format-card { padding:clamp(1.6rem,4vw,3.2rem); background:var(--white); }
.format-card:nth-child(2) { background:#e0e6ff; }
.format-card h3 { margin:0 0 1rem; font:500 clamp(2rem,3.5vw,3.3rem)/1 var(--serif); }
.format-card p { margin:0 0 1.3rem; max-width:47ch; }
.format-card ul { margin:0; padding-left:1.2rem; }
.format-card li + li { margin-top:.55rem; }
.note { max-width:780px; margin:1.5rem 0 0 auto; color:var(--muted); font-size:.9rem; }
.samples { background:var(--blue); color:white; }
.samples .section-head p:not(.eyebrow) { color:#d7dcff; }
.sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.sample { margin:0; border:1px solid var(--ink); background:var(--white); color:var(--ink); }
.sample-image { display:grid; place-items:center; height:430px; padding:1.3rem; background:#e8e0d1; }
.sample img { height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.2)); }
.sample figcaption { min-height:105px; padding:1.2rem; border-top:1px solid var(--ink); }
.sample h3 { margin:0; font:600 1.35rem/1.2 var(--serif); }
.sample p { margin:.4rem 0 0; color:var(--muted); font-size:.84rem; }
.sample-more { margin:1.7rem 0 0; font-weight:700; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.step { padding-top:1rem; border-top:1px solid var(--ink); }
.step b { color:var(--blue); font:500 1.5rem var(--serif); }
.step h3 { margin:.8rem 0; font:500 1.7rem/1.1 var(--serif); }
.step p { margin:0; color:#48433c; }
.pricing { background:var(--white); }
.price-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,6vw,7rem); }
.price-grid h2 { margin:0 0 1rem; font:500 clamp(2.8rem,4.6vw,4.8rem)/.98 var(--serif); }
.price-grid p { margin:0 0 1.4rem; color:#48433c; }
.price-list { border-top:1px solid var(--ink); }
.price-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.price-row strong { font:600 1.24rem var(--serif); }
.price-row span { white-space:nowrap; font-weight:700; }
.price-note { padding:1.25rem; margin:1.5rem 0 0; border-left:4px solid var(--yellow); background:var(--paper); }
.price-note p { margin:0; }
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:3rem; }
.faq-grid h2 { margin:0; font:500 clamp(2.8rem,5vw,4.8rem)/.98 var(--serif); }
details { border-top:1px solid var(--ink); }
details:last-child { border-bottom:1px solid var(--ink); }
summary { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0; cursor:pointer; list-style:none; font:500 1.27rem/1.2 var(--serif); }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font:700 1rem var(--sans); }
details[open] summary::after { content:'−'; }
details p { margin:0 0 1.3rem; max-width:60ch; color:#48433c; }
.closing { padding:clamp(4rem,7vw,6rem) 0; border-top:1px solid var(--ink); background:var(--coral); color:white; }
.closing-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:end; }
.closing h2 { margin:0; font:500 clamp(3rem,6vw,6rem)/.9 var(--serif); }
.closing p { max-width:450px; margin:0 0 1.5rem; }
.closing a:not(.button) { font-weight:700; }
footer { padding:2.7rem 0; background:var(--ink); color:var(--paper); }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:3rem; }
.footer-name { font:500 clamp(2rem,5vw,4rem)/1 var(--serif); }
.footer-name span { display:block; margin-top:.7rem; color:#aaa297; font:400 .7rem var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1.2rem; font-size:.8rem; }
.footer-links a { color:#d1c9bd; }
.copyright { margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.15); color:#aaa297; font-size:.72rem; }
@media(max-width:940px) { .hero-grid, .section-head, .price-grid, .faq-grid, .closing-grid { grid-template-columns:1fr; } .hero-art { max-width:670px; } .proof-grid p { padding-inline:1rem; } .sample-image { height:330px; } }
@media(max-width:680px) { nav { padding-block:1rem; } .nav-links { justify-content:flex-end; gap:.65rem 1rem; } .nav-links .button { display:none; } .hero-grid { padding-block:3rem; } .format-grid, .sample-grid, .steps { grid-template-columns:1fr; } .sample-image { height:400px; } .proof-grid { grid-template-columns:1fr; } .proof-grid p { padding:1rem 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.25); } .proof-grid p:last-child { border-bottom:0; } .footer-grid { grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } }
@media(max-width:440px) { nav { display:block; } .nav-links { justify-content:flex-start; margin-top:1rem; } .hero h1 { font-size:3.2rem; } .price-row { display:block; } .price-row span { display:block; margin-top:.4rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }