/* ============================================================
   KEEP OR SHRED — public site
   Tear Here, the same skin the app wears (theme.ts): bond stock,
   a ballpoint, a manila folder tab, past-due red for exactly one
   thing. Perforations are real dashed lines; SHRED ends in
   cross-cut strips; KEEP is a folder tab. The demo is the Home
   screen as built, not an illustration of it.
   ============================================================ */
:root{
  --bond:#FAF7F0; --ink:#1B2447; --manila:#E8C36B; --red:#C8102E; --tint:#3552A8;
  --graphite:#555B68; --crease:#D9D2C3; --stub:#F3EEE2; --ground:#E9E4D8; --night:#17212B;
  --stamp:"Archivo Black",Impact,"Arial Black",sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bond);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--tint)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--manila);outline-offset:3px}
.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}

/* perforation: the brand's one rule */
.perf{display:flex;gap:4px;height:2px;overflow:hidden}
.perf i{flex:0 0 6px;height:2px;background:var(--ink);opacity:.55}

/* nav */
nav{background:var(--bond);position:sticky;top:0;z-index:10}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .badge{background:var(--red);color:var(--bond);font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;padding:5px 7px 7px;position:relative;overflow:hidden}
.logo .badge:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--bond) 0 4px,transparent 4px 8px)}
.logo b{font-family:var(--stamp);font-weight:400;font-size:17px;letter-spacing:-.01em}
nav .links{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
nav .links a{text-decoration:none;color:var(--graphite)}
nav .links a:hover,nav .links a[aria-current]{color:var(--ink);border-bottom:2px solid var(--manila)}

/* hero */
.hero{padding:56px 0 64px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
h1{font-family:var(--stamp);font-weight:400;letter-spacing:-.02em;line-height:.98;font-size:clamp(34px,4.6vw,54px);margin:14px 0 0;text-wrap:balance}
h1 em{font-style:normal;color:var(--red)}
.sub{font-size:clamp(16px,1.7vw,19px);max-width:30em;margin:20px 0 0;line-height:1.5}
.assist{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--graphite);margin:14px 0 0}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.pill{background:var(--ink);color:var(--bond);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:13px 16px}
.cta2{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--tint)}

/* the phone: Home as it ships */
.phone{width:min(100%,360px);margin:0 auto;background:var(--bond);border:1.5px solid var(--ink);box-shadow:0 1px 0 var(--crease),0 22px 40px -28px rgba(27,36,71,.6);padding:0 0 14px;color:var(--ink)}
.phone .top{padding:12px 14px 10px}
.phone .title{font-family:var(--stamp);font-size:23px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.phone .row2{display:flex;align-items:flex-end;gap:12px;margin-top:6px}
.phone .counts{flex:1;display:flex;flex-direction:column;gap:3px}
.micro{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.phone .tools{display:flex;align-items:center;gap:12px}
.pile{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.pile i{display:block;height:1.5px;background:var(--ink)}
.chip{border:1px solid var(--ink);padding:6px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.chip.late{background:var(--red);border-color:var(--red);color:var(--bond)}
.phone .perf{margin:0 14px}
.rec{display:grid;grid-template-columns:20px 34px 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--crease);align-items:start}
.rec:last-child{border-bottom:0}
.rec .n{font-family:var(--mono);font-size:10px;color:var(--graphite);padding-top:3px;letter-spacing:.05em}
.rec .ph{width:34px;height:46px;border:1px solid var(--crease);background:
  linear-gradient(var(--ink) 0 5px,transparent 5px) 5px 6px/16px 100% no-repeat,
  linear-gradient(var(--crease) 0 2px,transparent 2px) 5px 16px/22px 100% no-repeat,
  linear-gradient(var(--crease) 0 2px,transparent 2px) 5px 22px/14px 100% no-repeat,
  linear-gradient(var(--crease) 0 2px,transparent 2px) 5px 28px/20px 100% no-repeat,var(--bond)}
.rec .t{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:800;letter-spacing:-.01em}
.rec .t .amt{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink)}
.rec .s{font-size:11.5px;line-height:15px;color:var(--graphite);margin-top:3px}
.tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.tg{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:3px 6px;color:var(--ink);background:var(--bond);position:relative;overflow:hidden}
.tg.shred{background:var(--red);border-color:var(--red);color:var(--bond);padding-bottom:6px}
.tg.shred:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--bond) 0 4px,transparent 4px 8px)}
.tg.keep{background:var(--manila);border-radius:3px 3px 0 0;border-bottom-width:2px}
.tg.keep.plain{background:var(--bond)}
.tg.recycle{border-style:dashed;border-color:var(--graphite);color:var(--graphite)}
.tg.sensitive{background:var(--tint);border-color:var(--tint);color:var(--bond)}
.tg.action{background:var(--manila)}
.tg.late{background:var(--red);border-color:var(--red);color:var(--bond)}
.phone .bar{margin:12px 14px 0}
.btn{display:block;text-align:center;background:var(--ink);color:var(--bond);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:13px 14px;border:1px solid var(--ink)}
.btn.plain{background:var(--bond);color:var(--ink);margin-top:8px}
.democap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-top:14px;text-align:center}

/* sections */
section{padding:48px 0}
h2{font-family:var(--stamp);font-weight:400;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;line-height:1.05;margin:0 0 20px;text-wrap:balance}
.lede{font-size:17px;max-width:38em;margin:-6px 0 26px;color:var(--ink)}
.does{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:var(--stub);border:1px solid var(--ink);padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.card h3{font-family:var(--stamp);font-weight:400;font-size:17px;margin:0;letter-spacing:-.01em}
.card p{margin:0;font-size:14px;line-height:1.5;color:var(--graphite)}
.card .draw{margin-top:auto;padding-top:10px}
.act{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.35;padding:6px 0;border-bottom:1px solid var(--crease)}
.act:last-child{border-bottom:0}
.act .punch{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink);flex:none;margin-top:2px;background:var(--bond)}
.act .punch.done{background:var(--crease);border-color:var(--crease)}
.act.done span{text-decoration:line-through;color:var(--graphite)}
.contact{display:flex;gap:6px}
.contact div{flex:1;border:1px solid var(--ink);background:var(--bond);padding:7px 8px;min-width:0}
.contact .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.contact .v{font-size:12px;font-weight:700;color:var(--tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week{display:flex;gap:3px}
.week div{flex:1;height:44px;border:1px solid var(--crease);background:var(--bond);display:flex;flex-direction:column;align-items:center;padding-top:4px;gap:2px}
.week .d{font-family:var(--mono);font-size:7px;letter-spacing:.08em;color:var(--graphite)}
.week .num{font-size:12px;font-weight:800}
.week .dot{width:5px;height:5px;border-radius:50%}
.week .today{border:1.5px solid var(--ink)}
.week .sel{background:var(--manila)}
.verdict{border:1px solid var(--ink);background:var(--bond);padding:12px 12px 16px;position:relative;overflow:hidden}
.verdict .word{font-family:var(--stamp);font-size:34px;line-height:1;letter-spacing:-.02em}
.verdict .why{font-size:12px;margin-top:6px;color:var(--graphite)}
.verdict .strips{position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(90deg,var(--red) 0 6px,transparent 6px 12px)}

.privacy{background:var(--night);color:var(--bond)}
.privacy h2{color:var(--bond)}
.privacy p{max-width:44em;font-size:15.5px;color:#DCE1E8}
.privacy b{color:var(--manila);font-weight:600}
.privacy .k{color:var(--manila)}

/* cheat sheet page */
.sheethead{padding:52px 0 8px}
.search{display:flex;gap:12px;align-items:center;margin:22px 0 6px;max-width:560px}
.search input{flex:1;font-family:var(--sans);font-size:16px;padding:12px 14px;border:1.5px solid var(--ink);background:var(--bond);color:var(--ink)}
#count{font-family:var(--mono);font-size:11px;color:var(--graphite);white-space:nowrap}
.doc{background:var(--stub);border:1px solid var(--ink);padding:14px 18px;margin:10px 0;max-width:760px}
.doc-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.doc h3{font-family:var(--sans);font-weight:800;font-size:16px;margin:0;letter-spacing:-.01em}
.doc p{margin:6px 0 0;font-size:14px;color:var(--graphite);max-width:56em}
.verdict-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;white-space:nowrap;border:1px solid var(--ink);color:var(--ink);background:var(--bond);position:relative;overflow:hidden}
.verdict-tag.shred{background:var(--red);border-color:var(--red);color:var(--bond);padding-bottom:7px}
.verdict-tag.shred:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--bond) 0 4px,transparent 4px 8px)}
.verdict-tag.recycle{border-style:dashed;border-color:var(--graphite);color:var(--graphite)}
.verdict-tag.keep1{border-radius:3px 3px 0 0;border-bottom-width:2px}
.verdict-tag.keep7,.verdict-tag.forever{background:var(--manila);border-radius:3px 3px 0 0;border-bottom-width:2px}
.empty{font-style:italic;color:var(--graphite)}
.appnote{background:var(--stub);border:1px solid var(--ink);border-left:8px solid var(--manila);padding:16px 20px;margin:26px 0;max-width:760px;font-size:15px}

footer{background:var(--bond);padding:30px 0 44px;margin-top:20px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:baseline}
footer .fine{font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--graphite);max-width:60em}
footer a{color:var(--tint)}

@media (max-width:840px){
  .hero .grid{grid-template-columns:1fr}
  nav .links{gap:14px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
@media print{
  nav,.search,footer,.appnote,.ctarow{display:none}
  body{background:#fff;font-size:12px}
  .doc{break-inside:avoid;margin:6px 0;padding:8px 12px}
  .verdict-tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}