/* einvoicesorted — fiscal desk: sprocket-hole stationery, wax seal, rubber stamp */
:root{
  --paper:#F3E7C9;
  --paper-2:#E9D9A8;
  --ink:#1A140C;
  --muted:#5C5143;
  --rule:#C4B48A;
  --wax:#9B1D2E;
  --wax-dark:#6E1020;
  --ledger:#1F5C4D;
  --gold:#C9A227;
  --valid:#1F5C4D;
  --warn:#9B1D2E;
  --card:#FFF8E8;
  --shadow:#1A140C;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1C1812; --paper-2:#15120E; --ink:#F3E7C9; --muted:#B7A888;
    --rule:#3A3326; --card:#241F16; --shadow:#000;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 "Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
body{
  background-image:
    repeating-linear-gradient(90deg,transparent 0 18px, var(--paper-2) 18px 22px, transparent 22px 28px);
  background-size:28px 100%;
  background-repeat:repeat-y;
  min-height:100vh;
}
a{color:var(--wax)} a:hover{color:var(--wax-dark)}
.wrap{max-width:920px;margin:0 auto;padding:20px 24px 80px 52px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0 20px;
  border-bottom:3px double var(--ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.seal{width:52px;height:52px;border-radius:50%;background:var(--wax);color:#F3E7C9;
  display:grid;place-items:center;font:700 11px/1 "Courier New",ui-monospace,monospace;
  letter-spacing:.04em;text-align:center;box-shadow:0 4px 0 var(--wax-dark), 0 0 0 3px var(--gold);
  transform:rotate(-8deg)}
.wordmark{font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1}
.wordmark span{display:block;font:400 11px/1.2 "Courier New",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
nav a{margin-left:16px;font:600 13px/1 "Courier New",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--wax)}
h1{font-size:clamp(40px,7vw,78px);line-height:.9;letter-spacing:-.04em;margin:28px 0 12px;font-weight:800}
.lede{font-size:20px;max-width:38rem;margin:0 0 28px}
.tray{background:var(--card);border:2px solid var(--ink);border-radius:4px 18px 4px 4px;
  box-shadow:8px 8px 0 var(--shadow);padding:28px;position:relative;min-height:200px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.tray:hover{transform:translate(-1px,-1px);box-shadow:9px 9px 0 var(--shadow)}
.tray:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.tray h2{margin:0 0 8px;font-size:28px}
.tray p{margin:0;color:var(--muted)}
.tray input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;justify-content:center}
button, .btn{
  appearance:none;font:700 14px/1 "Courier New",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:14px 18px;min-height:44px;
  box-shadow:0 4px 0 var(--wax);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  color:var(--paper)
}
button.ghost, a.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 4px 0 var(--ink)}
button:hover, .btn:hover{transform:translateY(-2px)}
button:active, .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wax)}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:36px 0}
.price{background:var(--card);border:1.5px solid var(--ink);padding:16px 18px;position:relative}
.price strong{display:block;font-size:28px;letter-spacing:-.03em}
.price .ksh{font:600 13px/1.3 "Courier New",ui-monospace,monospace;color:var(--muted)}
.price .plan{font:700 12px/1 "Courier New",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.stamp{position:absolute;right:-8px;top:-10px;border:3px solid var(--valid);color:var(--valid);
  font:800 11px/1 "Courier New",ui-monospace,monospace;letter-spacing:.08em;padding:6px 8px;transform:rotate(12deg);
  background:var(--card);animation:thump .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes thump{from{transform:rotate(12deg) scale(2.4);opacity:0}to{transform:rotate(12deg) scale(1);opacity:1}}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 28px}
.formats a{border:1.5px solid var(--ink);padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;
  text-decoration:none;color:var(--ink);font:600 13px/1 "Courier New",ui-monospace,monospace;background:var(--card)}
.formats a:hover{background:var(--gold);transform:translateY(-3px)}
#result{margin-top:32px;display:none}
#result.show{display:block}
.ticket{background:var(--card);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--shadow);padding:24px 24px 8px;position:relative}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 24px}
.meta dt{font:700 11px/1 "Courier New",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.meta dd{margin:4px 0 0;font-size:18px;font-weight:700}
table.lines{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 20px}
table.lines th,table.lines td{border-bottom:1px solid var(--rule);padding:8px 6px;text-align:left}
table.lines th{font:700 11px/1 "Courier New",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
table.lines td.num,table.lines th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:ui-monospace,"Courier New",monospace}
.totals{margin-left:auto;width:min(320px,100%);font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;padding:4px 0}
.totals .pay{border-top:2px solid var(--ink);font-weight:800;font-size:20px;margin-top:6px;padding-top:8px}
.checks{margin:18px 0;padding:0;list-style:none}
.checks li{padding:6px 0 6px 28px;position:relative}
.checks li:before{content:"✓";position:absolute;left:0;color:var(--valid);font-weight:800}
.checks li.bad:before{content:"!";color:var(--warn)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--paper);
  padding:12px 18px;font:700 13px/1 "Courier New",ui-monospace,monospace;opacity:0;transition:transform .3s,opacity .3s;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{margin-top:64px;background:var(--ink);color:var(--paper);padding:28px 24px 40px 52px}
footer .wrap{padding:0}
footer a{color:var(--gold)}
.fine{font:13px/1.45 "Courier New",ui-monospace,monospace;color:var(--muted)}
.prose h1{font-size:clamp(36px,6vw,64px)}
.prose h2{font-size:28px;margin-top:32px}
.prose p,.prose li{max-width:40rem}
@media (max-width:640px){
  body{background-image:none}
  .wrap{padding:16px 16px 72px}
  .meta{grid-template-columns:1fr}
  nav a{margin-left:10px}
  footer{padding:24px 16px 40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media print{
  body{background:#fff;color:#000}
  header.top,footer,.btns,.tray,nav,.formats,.prices{display:none!important}
  .wrap{padding:0;max-width:none}
  #result, #result.show{display:block!important}
  .ticket{box-shadow:none;border:0;padding:0}
}