@font-face{font-family:"Permanent Marker";src:url(fonts/permanent-marker-400-sub.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
/* L115 layout: the hero is Bob's to-do list on kraft paper with jobs crossed off in red */
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:26px;font-size:14px}
:root{--kraft:#d3b483;--kraft-2:#c4a170;--ink:#141414;--red:#b3202a;--paper:#f5efe4;--white:#fff;--muted:#4a4339;
--head:"Permanent Marker","Comic Sans MS",cursive;--body:"Barlow",ui-sans-serif,system-ui,sans-serif}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55}
main{overflow-x:clip}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.logo{font-family:var(--head);font-size:32px;line-height:1;transform:rotate(-2deg)}
.nav{display:flex;gap:28px;font-weight:600;font-size:16px}
.call{display:flex;align-items:center;gap:16px}
.num{font-weight:600;font-size:20px}
.btn{display:inline-block;background:var(--ink);color:var(--white);font-weight:600;font-size:16px;padding:13px 22px;border-radius:4px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:48px 80px}
.hero>*{min-width:0}
h1{font-family:var(--head);font-weight:400;font-size:clamp(46px,5.4vw,78px);line-height:1.02}
h1 span{display:block;color:var(--red)}
.lede{font-size:20px;color:var(--muted);margin:22px 0 28px;max-width:34ch}
.paper{position:relative;background:var(--kraft);padding:34px 34px 30px;transform:rotate(1.5deg);box-shadow:0 24px 40px -20px rgba(20,20,20,.5);
 background-image:repeating-linear-gradient(180deg,transparent 0 47px,rgba(20,20,20,.16) 47px 48px);background-position:0 70px}
.paper::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(245,239,228,.85);transform:rotate(-3deg)}
.pt{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#3b3125;margin-bottom:12px}
.paper ul{display:grid}
.paper li{font-family:var(--head);font-size:26px;line-height:48px;position:relative;width:max-content;max-width:100%}
.paper li::before{content:"\2610";margin-right:12px;font-family:var(--body)}
.paper li.done::before{content:"\2611"}
.paper li.done::after{content:"";position:absolute;left:30px;right:-6px;top:52%;height:4px;background:var(--red);border-radius:2px;transform:rotate(-1.5deg)}
.sig{font-family:var(--head);font-size:24px;color:var(--red);text-align:right;margin-top:10px;transform:rotate(-3deg)}
.kit{background:var(--ink);color:var(--paper)}
.kit-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:72px}
.taped{position:relative;transform:rotate(-1.5deg);background:var(--white);padding:12px}
.taped::before,.taped::after{content:"";position:absolute;width:90px;height:26px;background:rgba(211,180,131,.9)}
.taped::before{top:-10px;left:-18px;transform:rotate(-30deg)}.taped::after{bottom:-8px;right:-18px;transform:rotate(-30deg)}
h2{font-family:var(--head);font-weight:400;font-size:clamp(34px,3.8vw,50px);line-height:1.05;margin-bottom:18px}
.things{display:grid;gap:10px}
.things li{padding-left:30px;position:relative;font-size:19px}
.things li::before{content:"\2713";position:absolute;left:0;color:var(--kraft);font-weight:600}
.how{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding-block:72px}
.how img{border-radius:4px}
.how ol{display:grid;gap:16px;counter-reset:s}
.how li{counter-increment:s;position:relative;padding-left:52px;font-size:19px;color:var(--muted)}
.how li::before{content:counter(s);position:absolute;left:0;top:-8px;font-family:var(--head);font-size:36px;color:var(--red)}
.how b{color:var(--ink)}
.foot{color:var(--muted);border-top:2px solid var(--ink)}
@media (max-width:1000px){.nav{display:none}}
@media (max-width:900px){
 .logo{font-size:26px}
 .call .btn{display:none}.num{background:var(--ink);color:var(--white);padding:7px 12px;border-radius:4px;font-size:18px}
 .hero{grid-template-columns:1fr;gap:36px;padding-block:24px 56px}
 .paper{padding:28px 20px 22px;transform:rotate(.8deg)}
 .paper ul{min-width:0}.paper li{font-size:17px;line-height:40px;width:auto}
 .paper{background-image:repeating-linear-gradient(180deg,transparent 0 39px,rgba(20,20,20,.16) 39px 40px);background-position:0 62px}
 .kit-in{grid-template-columns:1fr;gap:36px;padding-block:52px}
 .how{grid-template-columns:1fr;gap:28px;padding-block:48px}
}