/* CatchFolder "Mailroom" design system. Fonts: Instrument Serif + IBM Plex Mono (SIL OFL, self-hosted). */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--desk:#e8d3a2;--desk2:#d6b977;--manila:#f1e2bc;--paper:#fbf8f1;--white:#fffdf8;--ink:#1d1912;--muted:#574a35;--red:#b0281c;--red2:#8f1f15;--green:#2d5a34;--amber:#7a5200;--rule:#cdbb93;
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--desk);-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.62 var(--sans);color:var(--ink);background:var(--desk) radial-gradient(rgba(29,25,18,.07) .8px,transparent .9px) 0 0/6px 6px}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red2)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;font:700 13px var(--mono);z-index:10}
.skip:focus{top:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,82px);margin:.1em 0 .25em}
h1 em,h2 em{color:var(--red);font-style:italic}
h2{font-size:clamp(31px,3.8vw,46px);margin:1.4em 0 .35em}
h3{font:700 15px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.05em;margin:2em 0 .5em}
p,li{max-width:70ch}
.mono,.small.mono{font-family:var(--mono)}
.small{font-size:14px;color:var(--muted)}
.sub{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:36em}

/* header = the drawer front; nav links are folder tabs */
header.site{background:var(--desk2);border-bottom:2px solid var(--ink)}
header.site .wrap{display:flex;align-items:flex-end;justify-content:space-between;min-height:68px;gap:12px}
.logo{display:flex;gap:10px;align-items:center;font:400 30px/1 var(--serif);color:var(--ink);text-decoration:none;padding:0 0 12px}
.logo i{color:var(--red)}
.logo svg{width:34px;height:34px;flex:none}
nav{display:flex;gap:6px}
nav a{display:block;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink);text-decoration:none;background:var(--manila);border:2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;padding:11px 14px 12px;margin-bottom:-2px}
nav a:hover{background:var(--paper);color:var(--ink)}
nav a:nth-child(3){background:var(--paper)}

/* buttons = label-maker tape */
.btn{display:inline-block;background:var(--red);color:#fff;font:700 14px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:15px 20px 14px;border:0;border-radius:3px;cursor:pointer;text-decoration:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.2);transition:transform .15s}
.btn:hover{color:#fff;background:var(--red2);transform:rotate(-1.2deg)}
.btn.ghost{background:var(--ink);color:var(--paper)}
.btn.ghost:hover{background:#000;color:var(--paper)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 12px}

/* every inner page is a sheet in a folder; the breadcrumb is the tab */
main>.wrap.narrow{max-width:880px;background:var(--paper);margin:64px auto 0;padding:30px clamp(20px,5.5vw,64px) 52px;border:2px solid var(--ink);border-radius:0 6px 6px 6px;position:relative;box-shadow:9px 9px 0 -2px var(--white),9px 9px 0 0 var(--ink)}
main>.wrap.narrow>.crumbs:first-child,main>.wrap.narrow:not(:has(>.crumbs))::before{position:absolute;top:-40px;left:-2px;height:40px;margin:0;background:var(--paper);border:2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;padding:10px 18px 0;font:700 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px)}
main>.wrap.narrow:not(:has(>.crumbs))::before{content:"CatchFolder / file copy"}
.crumbs a{color:var(--ink);text-decoration-thickness:1.5px}
main>.wrap.narrow>h1{font-size:clamp(38px,5.4vw,62px);margin-top:.15em}
main>.wrap.narrow>h1+.small{font-family:var(--mono);font-size:12.5px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:7px 0;max-width:none}
main>.wrap.narrow h2{border-top:1px dashed var(--rule);padding-top:.6em}

/* tables = ledger */
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--white);margin:1em 0}
th,td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
th{font:700 12px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--manila);border:1.5px solid var(--ink)}
tr:nth-child(even) td{background:#f8f2e4}
.toc{background:var(--white);border:1.5px solid var(--ink);border-top:6px solid var(--red);padding:12px 20px}

/* callouts = a note taped on the page */
.inline-cta,.note{position:relative;background:#fff6cf;border:1px solid #d9c27a;padding:18px 22px 16px;margin:34px 0;transform:rotate(-.4deg);box-shadow:0 12px 18px -14px rgba(60,40,0,.55)}
.inline-cta::before,.note::before{content:"";position:absolute;top:-11px;left:50%;width:96px;height:22px;background:rgba(176,40,28,.22);transform:translateX(-50%) rotate(-2.5deg)}
.note{font-size:15px;transform:rotate(.3deg)}

/* tools = a manila folder with a FREE TOOL tab */
.tool{position:relative;background:var(--manila);border:2px solid var(--ink);border-radius:0 6px 6px 6px;padding:26px clamp(16px,3vw,28px);margin:56px 0 24px}
.tool::before{content:"Free tool / runs in your browser";position:absolute;top:-32px;left:-2px;height:32px;background:var(--manila);border:2px solid var(--ink);border-bottom:0;border-radius:7px 7px 0 0;padding:7px 14px 0;font:700 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tool label{font-weight:600}
input,textarea,select,button{font:inherit}
input[type=url],input[type=email],input[type=text],input[type=number],textarea,select{padding:11px 12px;border:2px solid var(--ink);border-radius:3px;background:var(--white);color:var(--ink)}
input[type=url],input[type=email],textarea,select{width:100%}
.result{margin-top:18px;padding:16px 18px;display:none;border:2px solid var(--ink);background:var(--white);position:relative}
.result.ok{display:block;border-color:var(--green);background:#eef4ea}
.result.bad{display:block;border-color:var(--red);background:#fbeeea}
.result.meh{display:block;border-color:var(--amber);background:#fbf3dc}
code{font:500 .86em var(--mono);background:#efe4c8;padding:1px 5px;border-radius:3px}
pre.code{background:var(--ink);color:#f4ead3;padding:1.1em;border-radius:4px;overflow:auto;font:500 13px/1.55 var(--mono)}
pre.code code{background:none;padding:0;color:inherit}
.shot{border:2px dashed var(--rule);background:var(--white);padding:.7em 1em;margin:.7em 0;font:500 13px/1.5 var(--mono);color:var(--muted)}

/* FAQ = index cards */
.faq details{background:var(--white);border:1.5px solid var(--ink);margin:12px 0;padding:0 20px;box-shadow:3px 3px 0 var(--rule)}
.faq summary{font:400 22px/1.25 var(--serif);cursor:pointer;padding:14px 0;list-style:none;display:flex;gap:14px;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 18px/1.4 var(--mono);color:var(--red);flex:none}
.faq details[open] summary{border-bottom:2px solid var(--red)}
.faq details[open] summary::after{content:"\2212"}
.faq details>*:not(summary){margin:14px 0 16px}

/* cards & plans (used on inner pages) */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{border:1.5px solid var(--ink);padding:18px 20px;background:var(--white)}
.price{font:400 52px/1 var(--serif)}.price small{font:500 13px var(--mono);color:var(--muted)}

/* footer = back of the filing cabinet */
footer.site{margin-top:90px;background:var(--ink);color:#d9cba9;padding:44px 0 30px;font-size:14px}
footer.site a{color:#f6ecd5}
footer.site .wrap>a{display:inline-block;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid #6e624c;padding:8px 10px;margin:0 6px 8px 0;text-decoration:none}
footer.site .wrap>a:hover{background:var(--paper);color:var(--ink)}
footer.site .small{color:#d9cba9}
footer.site p{max-width:none}
.featured{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin:1.2em 0}
.featured img{display:block}
.foot-mark{font:400 clamp(44px,8vw,96px)/1 var(--serif);color:#f6ecd5;margin:0 0 .35em}
.foot-mark i{color:#e0604f}

/* ---------- landing ---------- */
.desk-hero{padding:46px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.tape{display:inline-block;background:var(--ink);color:var(--paper);font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;padding:7px 12px;transform:rotate(-1.5deg);margin:0 0 10px;max-width:none}
.desk-hero h1{font-size:clamp(50px,7.6vw,104px);line-height:.94}
.folder{position:relative;width:min(440px,100%);aspect-ratio:11/10;margin:0 auto}
.f-back{position:absolute;inset:16% 0 0 0;background:#cfa956;border:2px solid var(--ink);border-radius:4px 10px 4px 4px}
.f-tab{position:absolute;top:-38px;right:14px;height:38px;background:#cfa956;border:2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;padding:9px 14px 0;font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.f-sheet{position:absolute;left:13%;width:62%;height:52%;background:var(--white);border:1.5px solid var(--ink);padding:12px 14px;font:500 12.5px/1.4 var(--mono);display:flex;justify-content:space-between;gap:8px;background-image:repeating-linear-gradient(transparent 0 46px,#e2d6bd 46px 47px,transparent 47px 58px);animation:drop .75s cubic-bezier(.3,1.35,.5,1) both}
.f-sheet b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-sheet span{color:var(--muted);flex:none}
.s1{top:5%;left:3%;transform:rotate(-6deg);animation-delay:.15s}
.s2{top:15%;left:20%;transform:rotate(4deg);animation-delay:.45s}
.s3{top:25%;left:9%;transform:rotate(-1.5deg);animation-delay:.75s}
.f-front{position:absolute;left:-2%;right:-2%;bottom:0;height:52%;background:#e6c372;border:2px solid var(--ink);border-radius:4px;transform:perspective(600px) rotateX(9deg);transform-origin:bottom;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:14px 18px 16px}
.f-word{font:italic 400 clamp(34px,4.4vw,52px)/1 var(--serif);color:var(--ink);opacity:.82}
.f-label{background:var(--white);border:1.5px solid var(--ink);font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:7px 10px}
.stamp{position:absolute;right:-3%;top:44%;z-index:2;border:3px solid var(--red);color:var(--red);font:700 20px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;padding:9px 12px 8px;border-radius:4px;transform:rotate(-13deg);background:rgba(251,248,241,.55);animation:thunk .35s cubic-bezier(.2,1.6,.4,1) 1.3s both}
@keyframes drop{from{opacity:0;translate:0 -170px}to{opacity:1;translate:0 0}}
@keyframes thunk{from{opacity:0;scale:1.8}to{opacity:1;scale:1}}

/* sections are folders in a drawer: each tab sits further right */
.drawer{position:relative;background:var(--paper);border-top:2px solid var(--ink);margin-top:58px;padding:30px 0 64px}
.drawer.alt{background:var(--manila)}
.drawer>.dtab{position:absolute;top:-40px;left:max(22px,calc((100% - 1120px)/2 + 22px + var(--x,0%)));height:40px;background:inherit;border:2px solid var(--ink);border-bottom:0;border-radius:9px 9px 0 0;padding:10px 18px 0;font:700 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.drawer.alt>.dtab{background:var(--manila)}
.drawer h2{margin-top:.3em}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.two>.side{position:sticky;top:24px}
.memo{position:relative;background:var(--white);border:1.5px solid var(--ink);padding:24px 28px 70px;box-shadow:7px 7px 0 -1.5px var(--paper),7px 7px 0 0 var(--ink)}
.memo-head{font:500 12.5px/1.7 var(--mono);border-bottom:1.5px solid var(--ink);padding-bottom:8px;margin:0 0 16px;max-width:none}
.memo blockquote{font:italic 400 clamp(24px,2.6vw,32px)/1.15 var(--serif);margin:0 0 18px;padding:0}
.memo ol{padding-left:1.3em;margin:0}.memo li{margin:.5em 0}
.memo .stamp{top:auto;bottom:16px;right:14px;font-size:14px;transform:rotate(-8deg);animation:none;background:rgba(255,253,248,.8)}
.slip{background:var(--white);border:2px solid var(--ink)}
.slip th{background:var(--desk)}
.slip td:first-child{font:700 14px var(--mono);white-space:nowrap}
.slip td:nth-child(2){font:500 13px/1.5 var(--mono);white-space:nowrap}
.slip tr.struck td{color:var(--muted)}
.slip s{text-decoration-color:var(--red);text-decoration-thickness:2px}
.routing-head{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.07em;margin:0 0 6px;color:var(--muted)}
.carbon{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);background:var(--white)}
.carbon>div{padding:6px 22px 18px}
.carbon>div+div{border-left:2px dashed var(--ink);background:#f6efdf}
.carbon h3{margin-top:1em}
.carbon ul{padding-left:1.1em;margin:0}
.receipts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;max-width:820px;margin:26px 0 30px}
.receipt{--z:7px;background:var(--white);padding:34px 26px 34px;font:500 14px/1.55 var(--mono);-webkit-mask:radial-gradient(var(--z) at 50% 0,#0000 97%,#000) 50% 0/calc(2*var(--z)) 51% repeat-x,radial-gradient(var(--z) at 50% 100%,#0000 97%,#000) 50% 100%/calc(2*var(--z)) 51% repeat-x;mask:radial-gradient(var(--z) at 50% 0,#0000 97%,#000) 50% 0/calc(2*var(--z)) 51% repeat-x,radial-gradient(var(--z) at 50% 100%,#0000 97%,#000) 50% 100%/calc(2*var(--z)) 51% repeat-x}
.receipt:nth-child(1){transform:rotate(-1deg)}.receipt:nth-child(2){transform:rotate(.8deg)}
.r-head{text-align:center;font-weight:700;letter-spacing:.12em;border-bottom:1.5px dashed var(--ink);padding-bottom:12px;margin:0 0 10px}
.r-line{display:flex;justify-content:space-between;gap:10px;margin:3px 0;max-width:none}
.r-line span:last-child{text-align:right}
.r-total{display:flex;justify-content:space-between;border-top:1.5px dashed var(--ink);border-bottom:3px double var(--ink);margin:14px 0 6px;padding:8px 0;font:700 15px var(--mono);max-width:none}
.r-total b{font:400 44px/1 var(--serif)}
.r-foot{text-align:center;font-size:12px;color:var(--muted);margin:0 0 18px}
.receipt .btn{display:block;text-align:center}
.final{text-align:center;padding:10px 0 0}
.final h2{font-size:clamp(36px,5vw,60px)}

@media(max-width:860px){
 .hero-grid,.two{grid-template-columns:1fr;gap:26px}
 .two>.side{position:static}
 .folder{width:min(340px,92%)}
 .carbon{grid-template-columns:1fr}.carbon>div+div{border-left:0;border-top:2px dashed var(--ink)}
 .drawer>.dtab{left:calc(16px + var(--x,0%) / 2)}
}
@media(max-width:640px){
 body{font-size:16.5px}
 header.site .wrap{padding:0 12px}
 .logo{font-size:25px}.logo svg{width:28px;height:28px}
 nav a{padding:10px 9px 11px;font-size:11px;letter-spacing:.04em}
 nav .hide-sm{display:none}
 main>.wrap.narrow{margin:56px 10px 0;box-shadow:5px 5px 0 -2px var(--white),5px 5px 0 0 var(--ink)}
 table{display:block;overflow-x:auto}
 .slip td:nth-child(2){white-space:normal}
 .btn{width:100%;text-align:center}
 .desk-hero{padding-top:28px}
 .inline-cta,.note{transform:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.btn:hover{transform:none}}
@media print{body{background:#fff}header.site nav,footer.site .featured{display:none}}
.h1-sub{display:block;font-size:max(.3em,22px);line-height:1.2;margin-top:.45em;color:var(--muted);letter-spacing:0}