*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--text);font:400 1.0625rem/1.62 var(--sans);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:12px;background:#fff;color:#000;padding:8px 12px;z-index:9}
svg.hand{display:block;height:auto;fill:var(--ink);overflow:visible}
.typed{font-family:"Times New Roman",Times,"Liberation Serif",serif}
h1,h2,h3{text-wrap:balance}
h2{font:var(--h2);margin:0 0 .35em;letter-spacing:var(--h2-track)}
.intro{max-width:38em;color:var(--muted);margin:0 0 34px;font-size:1.12rem}
section.band{padding-block:88px}
/* ---- desk (header + hero + footer live on it) */
.desk{background:var(--desk);color:var(--desk-text);position:relative}
.desk::before{content:"";position:absolute;inset:0;background:var(--desk-texture);pointer-events:none}
.desk>*{position:relative}
header.bar .wrap{display:flex;align-items:center;gap:28px;padding-block:20px}
.wordmark{font-size:2.35rem;margin-right:auto;text-decoration:none;line-height:0}
.wordmark svg.hand{fill:var(--desk-text)}
nav.top{display:flex;gap:24px;font-size:.96rem}
nav.top a{text-decoration:none;color:var(--desk-text);opacity:.82}
nav.top a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:.5em;font:var(--btn-font);padding:1em 1.45em;border-radius:var(--r-btn);
background:var(--btn);color:var(--btn-text);text-decoration:none;border:0;cursor:pointer;box-shadow:var(--btn-shadow);
transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.small{padding:.72em 1.1em;font-size:.92rem}
.btn[aria-disabled=true]{opacity:.6;cursor:not-allowed}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
/* ---- hero: a sheet of paper on the desk */
.hero{padding-block:30px 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:center}
.sheet{position:relative;background:var(--sheet);color:var(--text);box-shadow:var(--sheet-shadow)}
.hero-sheet{padding:56px 54px 50px;transform:rotate(var(--tilt))}
.hero-sheet p{margin:0}
.hero-sheet .typed{display:inline;text-decoration:none;font-size:clamp(1.15rem,2.3vw,1.7rem);color:var(--muted)}
.hero-sheet .typed{background:linear-gradient(var(--red),var(--red)) no-repeat 0 58%/100% .13em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em}
.hero-sheet h1{margin:.38em 0 0;font-size:clamp(3.4rem,8.6vw,7.4rem);line-height:1;font-weight:400}
.hero-copy .lede{font-size:1.2rem;margin:0 0 26px;max-width:30em}
.hero-copy .ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.hero-copy .meta{margin:22px 0 0;font-size:.93rem;opacity:.8}
@media (prefers-reduced-motion:no-preference){
.hero-sheet .typed{animation:strike .7s .3s cubic-bezier(.6,.05,.3,1) both}
.hero-sheet h1 svg{animation:write 1.1s .9s cubic-bezier(.4,0,.2,1) both}
.note .handw svg{animation:write .6s cubic-bezier(.4,0,.2,1) both}
@keyframes strike{from{background-size:0 .13em}to{background-size:100% .13em}}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
}
/* ---- notes gallery */
.gallery-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:40px}
.gallery-head .intro{margin:0}
.switch{display:inline-flex;padding:4px;border-radius:999px;background:var(--switch-bg);box-shadow:inset 0 0 0 1px var(--rule)}
.switch button{font:600 .95rem/1 var(--sans);border:0;background:transparent;color:var(--muted);padding:.75em 1.15em;border-radius:999px;cursor:pointer}
.switch button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.switch button:nth-child(2)[aria-pressed=true]{font-family:"Times New Roman",Times,serif;font-weight:400;font-size:1.02rem}
.notes{columns:3 300px;column-gap:40px}
.note{break-inside:avoid;margin:0 0 46px;display:block}
.note .face{position:relative;padding:30px 26px 26px;min-height:140px;transform:rotate(var(--r,0deg));box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 30px -18px rgba(0,0,0,.45)}
.note:nth-child(4n+1){--r:-1.4deg}.note:nth-child(4n+2){--r:1.1deg}.note:nth-child(4n+3){--r:-.5deg}.note:nth-child(4n){--r:1.7deg}
.note .typed{margin:0;font-size:1.32rem;line-height:1.35;color:#1d1d1d}
.note .handw svg{font-size:2.15rem}
.note figcaption{margin:14px 6px 0;color:var(--muted);font-size:.96rem}
.notes[data-mode=hand] .typed,.notes[data-mode=typed] .handw{display:none}
.notes[data-mode=hand] .note .face::after{content:"";position:absolute;inset:0;pointer-events:none}
/* papers */
.p-index{background:linear-gradient(transparent 0 30px,#E46A6A 30px 31.5px,transparent 31.5px) no-repeat,
repeating-linear-gradient(transparent 0 31px,#B9D2EE 31px 32px) 0 32px,#fff}
.p-index{padding-top:46px!important}
.p-sticky{background:var(--sticky)}
.p-sticky::before{content:"";position:absolute;left:30%;right:30%;top:-10px;height:22px;background:rgba(255,255,255,.55);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.p-kraft{background:#D7B78C radial-gradient(rgba(120,80,30,.12) 1px,transparent 1.5px) 0 0/7px 7px}
.p-kraft::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 0 62%,rgba(0,0,0,.05) 62% 63%,transparent 63%),linear-gradient(20deg,transparent 0 62%,rgba(0,0,0,.05) 62% 63%,transparent 63%);pointer-events:none}
.p-postcard{background:#FBFAF6;padding-right:96px!important}
.p-postcard::before{content:"";position:absolute;right:18px;top:18px;width:54px;height:64px;border:2px dashed #C9C2B3}
.p-postcard::after{content:"";position:absolute;right:86px;top:22px;bottom:22px;width:1px;background:#DAD3C4}
.p-napkin{background:#fff;outline:1px dashed #E2E2E2;outline-offset:-10px}
.p-legal{background:linear-gradient(90deg,transparent 0 30px,#E08585 30px 31px,transparent 31px 34px,#E08585 34px 35px,transparent 35px),
repeating-linear-gradient(transparent 0 31px,rgba(90,140,200,.45) 31px 32px),var(--legal);padding-left:48px!important}
/* ---- how it works, with pictures */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;min-width:0}
.steps .pic{height:260px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.steps .pic img{max-height:250px;width:auto;box-shadow:0 20px 34px -18px rgba(0,0,0,.5);background:#fff}
.steps li:nth-child(1) .pic img{transform:rotate(-2.5deg)}
.steps li:nth-child(2) .pic img{transform:rotate(2deg)}
.steps h3{margin:0 0 6px;font:var(--h3)}
.steps h3::before{content:counter(s) ". ";color:var(--red)}
.steps p{margin:0;color:var(--muted)}
.word{width:100%;max-width:340px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 20px 34px -18px rgba(0,0,0,.5);border:1px solid #D9DCE2}
.word .bar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#F3F4F6;border-bottom:1px solid #E1E3E8;font:500 .72rem/1 system-ui,sans-serif;color:#333}
.word .dd{background:#fff;border:1px solid #CBD0D8;border-radius:4px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.word .dd.f{flex:1}
.word .page{padding:22px 22px 30px;min-height:170px}
.word .page svg{font-size:1.55rem}
/* ---- audience teaser band */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.teaser .card{padding:40px 38px;transform:rotate(-1.2deg)}
.teaser .card svg{font-size:clamp(2.4rem,5vw,3.6rem)}
.teaser p{font-size:1.15rem;max-width:30em}
/* ---- pricing */
.prices{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start}
.price-card{flex:1 1 330px;max-width:520px}
.price-card h3{margin:0;font:var(--h3);font-size:1.4rem}
.price-card ul{padding-left:1.15em;margin:16px 0 26px}.price-card li{margin:.35em 0}
.price-card p{margin:10px 0 0}
.amount{font:var(--price-font);color:var(--ink);line-height:1;margin:6px 0 4px}
.chartnote{margin-top:30px;color:var(--muted)}
/* ---- faq */
.faq details{border-bottom:1px solid var(--rule);padding:18px 0;max-width:800px}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--muted);max-width:42em}
/* ---- audience page blocks */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.cards3 .sheet{padding:40px 30px 28px}.cards3 .sheet.p-index{padding-top:52px}
.cards3 .sheet:nth-child(odd){transform:rotate(-.8deg)}.cards3 .sheet:nth-child(even){transform:rotate(.9deg)}
.cards3 h3{margin:0 0 12px;font:var(--h3);font-size:1.3rem}
.cards3 ul{margin:0;padding-left:1.1em}.cards3 li{margin:.45em 0}
.ladder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:center}
.ladder .sheet{padding:48px 40px 56px;min-height:250px;transform:rotate(.8deg)}
.ladder .say{display:none}.ladder .say.on{display:block}
.ladder .say svg{font-size:clamp(2.4rem,5vw,3.6rem)}
.ladder label{display:block;font-weight:700;margin-bottom:10px}
.ladder input[type=range]{width:100%;accent-color:var(--red)}
.ladder .scale{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);margin-top:6px}
/* ---- footer */
footer.desk{padding-block:56px 64px;font-size:.93rem}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:16px}
footer a{color:var(--desk-text)}
footer .fine{max-width:48em;opacity:.82;margin:0}
footer .wordmark{display:inline-block;margin-bottom:18px}
/* ---- inner pages (order, legal) */
.page{max-width:780px;margin:0 auto;padding:48px max(20px,env(safe-area-inset-right,0px)) 90px max(20px,env(safe-area-inset-left,0px))}
.page>h1{font:var(--h2);font-size:clamp(2.2rem,5vw,3rem);margin:0 0 12px;letter-spacing:var(--h2-track)}
.page h2{font:600 1.2rem/1.3 var(--sans);margin:30px 0 8px;letter-spacing:0}
.page .effective{color:var(--muted)}
form.order{display:grid;gap:22px;margin-top:20px}
.field label,.field .lab{display:block;font-weight:600;margin-bottom:6px}
.field .hint{color:var(--muted);font-size:.92rem;margin:-2px 0 8px}
input[type=text],input[type=email],textarea{width:100%;font:inherit;padding:.75em .85em;border:1px solid var(--rule-strong);border-radius:8px;background:#fff;color:#1f1f1f}
.drops{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.drop{position:relative;border:2px dashed var(--rule-strong);border-radius:10px;background:var(--sheet);aspect-ratio:3/4;max-width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;cursor:pointer;overflow:hidden}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop .t{position:relative;z-index:1;font-weight:600;background:rgba(255,255,255,.88);border-radius:6px;padding:4px 8px;color:#222}
.drop.filled{border-style:solid;border-color:var(--ink)}
.field label.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin-bottom:10px}
.check input{margin-top:.3em;width:1.15em;height:1.15em;flex:none;accent-color:var(--ink)}
.notice{padding:14px 16px;border-radius:8px;background:var(--sheet);border:1px solid var(--rule-strong)}
.notice.err,.status.err{color:var(--red)}
.notice.err{border-color:var(--red)}
.status{min-height:1.6em;font-weight:600}
.hidden{display:none!important}
@media (max-width:900px){
.hero-grid,.teaser,.ladder{grid-template-columns:minmax(0,1fr);gap:40px}
.steps{grid-template-columns:minmax(0,1fr);gap:56px}
nav.top{display:none}
}
@media (max-width:560px){
.hero-sheet{padding:40px 26px 34px}
section.band{padding-block:64px}
.note .handw svg{font-size:1.9rem}
}
:root{--desk:#B88752;--desk-text:#1A1612;
--desk-texture:radial-gradient(rgba(70,40,10,.32) 1px,transparent 1.6px) 0 0/9px 9px,radial-gradient(rgba(255,235,200,.22) 1px,transparent 1.6px) 4px 5px/11px 11px,radial-gradient(rgba(60,30,5,.18) 1.5px,transparent 2px) 2px 1px/17px 17px;
--page:#F6E98F;--sheet:#FCF4B0;--legal:#FCF4B0;--sticky:#FF9FBF;--ink:#141417;--text:#19181A;--muted:#5B532F;--red:#D2322D;--link:#141417;
--rule:#CDBC5E;--rule-strong:#A99A45;--focus:#141417;--switch-bg:#FFF9C9;
--sans:"Archivo",system-ui,sans-serif;
--h2:900 clamp(2.6rem,6.4vw,4.8rem)/.92 "Archivo",Impact,sans-serif;--h2-track:-.015em;
--h3:800 1.2rem/1.25 "Archivo",sans-serif;
--price-font:900 5.8rem/1 "Archivo",Impact,sans-serif;
--btn:#D2322D;--btn-text:#fff;--btn-font:800 1.05rem/1 "Archivo",sans-serif;--r-btn:4px;--btn-shadow:4px 4px 0 #141417;
--sheet-shadow:0 2px 0 rgba(0,0,0,.08),0 34px 50px -24px rgba(40,20,0,.75);--tilt:1.1deg}
h2,.page>h1{font-stretch:62%;text-transform:none}
.amount{font-stretch:70%}
.hero-sheet{background:linear-gradient(90deg,transparent 0 46px,#E08585 46px 47.5px,transparent 47.5px 51px,#E08585 51px 52.5px,transparent 52.5px),
repeating-linear-gradient(transparent 0 35px,rgba(90,140,200,.5) 35px 36px) 0 40px,var(--legal);padding-left:76px;padding-top:70px}
.hero-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:#7E2B25 repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px)}
.pin{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF8A80,#D2322D 55%,#8E1A16);box-shadow:3px 6px 8px rgba(0,0,0,.45);z-index:2}
.hero-copy{position:relative;background:#fff;color:var(--text);padding:40px 34px 32px;transform:rotate(-1.6deg);box-shadow:var(--sheet-shadow)}
.hero-copy .pin{top:-12px;left:calc(50% - 13px)}
.hero-copy .btn.ghost{color:var(--text)}
.teaser .card .pin,.ladder .sheet .pin,.cards3 .sheet .pin{top:-12px;left:calc(50% - 13px)}
.stamp{position:relative;background:#FFFDF0;padding:36px 34px 34px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 24px 30px -20px rgba(60,40,0,.5);border:1px solid #E7DC9A}
.stamp .tag{position:absolute;right:22px;top:26px;transform:rotate(-12deg);font:900 1.05rem/1 "Archivo",sans-serif;font-stretch:70%;letter-spacing:.06em;
color:var(--red);border:3px solid var(--red);border-radius:4px;padding:6px 10px;opacity:.86;mix-blend-mode:multiply}
.switch button[aria-pressed=true]{background:var(--red);color:#fff}
.desk nav.top a{font-weight:600}
@media (max-width:900px){.hero-copy{transform:none}}