:root{
  --bg:#f6efe6; --paper:#fffaf3; --ink:#2b1d16; --mute:#7a6a5f; --line:#e5d8c8;
  --rasp:#b3284f; --rasp-d:#8f1d3d; --pistachio:#5f7a4a; --butter:#e9b949; --late:#c0392b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);overflow-x:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:999px;font-weight:600}
button:hover{background:#000}
button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
button.ghost:hover{background:var(--ink);color:var(--paper)}
button.link,label.link{background:none;color:var(--rasp-d);padding:0;border-radius:0;text-decoration:underline;font-weight:500;cursor:pointer}
button.danger{color:var(--late)}
:focus-visible{outline:3px solid var(--butter);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:.5rem;font-family:var(--serif);font-size:1.25rem}
.brand .mark{color:var(--rasp)}
.brand .sub{font:500 .8rem var(--sans);color:var(--mute)}
.top-actions{display:flex;gap:.5rem}
.top-actions button{padding:.45rem .9rem;font-size:.85rem}
main{max-width:1120px;margin:0 auto;padding:clamp(1.25rem,4vw,3rem)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:end;margin-bottom:2rem}
.eyebrow{margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--mute);font-weight:700}
h1{font:400 clamp(2rem,5vw,3.4rem)/1.05 var(--serif);margin:0 0 .75rem;letter-spacing:-.02em}
h1 em{color:var(--rasp);font-style:italic}
.lede{margin:0;color:var(--mute);max-width:46ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.8rem}
.stat b{display:block;font:400 2rem/1 var(--serif)}
.stat span{font-size:.72rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.stat.late b{color:var(--late)}
.controls{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:.35rem .8rem;font-size:.82rem;font-weight:500}
.chip:hover{background:var(--paper);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.sel{font-size:.8rem;color:var(--mute);display:flex;align-items:center;gap:.5rem}
select,input[type=text],input:not([type]),input[type=date]{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;width:100%}
.sel select{width:auto}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.lane{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1rem;min-width:0}
.lane h2{font:400 1.25rem var(--serif);margin:0 0 .75rem;display:flex;justify-content:space-between;align-items:baseline}
.lane h2 small{font:600 .75rem var(--sans);color:var(--mute)}
.lane.late{border-color:#e0b4ac;background:linear-gradient(#fff4f1,var(--paper) 120px)}
.lane.late h2{color:var(--late)}
.empty{color:var(--mute);font-size:.9rem;margin:.5rem 0;font-style:italic}
.task{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.7rem 0;border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}
.tick{width:26px;height:26px;padding:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--mute);color:transparent;display:grid;place-items:center;margin-top:2px}
.tick:hover{background:var(--pistachio);box-shadow:none;color:#fff}
.tick.done{background:var(--pistachio);box-shadow:none;color:#fff}
.task .t{font-weight:600;overflow-wrap:anywhere;cursor:pointer}
.task .t:hover{text-decoration:underline}
.meta{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem;font-size:.75rem;color:var(--mute);align-items:center}
.tag{border-radius:6px;padding:.05rem .45rem;font-weight:600;background:#efe3d3;color:#5a4636}
.tag.Ads{background:#f7d9e0;color:#8f1d3d}.tag.Money{background:#e1ead6;color:#3f5a2e}
.tag.Compliance{background:#fbe7b5;color:#6b4d05}.tag.People{background:#dde6f0;color:#2f4a68}
.late-by{color:var(--late);font-weight:700}
.note{width:100%;color:var(--mute)}
.pro{margin-top:2rem;background:var(--ink);color:var(--paper);border-radius:22px;padding:clamp(1.25rem,3vw,2rem);display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:center}
.pro h2{font:400 1.5rem var(--serif);margin:0 0 .4rem}
.pro p{margin:0;color:#d9c9b8;max-width:46ch}
.pro-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pro button{background:var(--butter);color:var(--ink)}
.pro button.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.pro button.link{background:none;color:#d9c9b8}
.pro button.locked{opacity:.55}
.pay{background:var(--rasp);color:#fff;text-decoration:none;font-weight:700;padding:.6rem 1.1rem;border-radius:999px}
.pay:hover{background:var(--rasp-d)}
.foot{color:var(--mute);font-size:.8rem;margin-top:1.5rem}
dialog{border:0;border-radius:20px;padding:1.5rem;width:min(460px,calc(100vw - 2rem));background:var(--paper);color:var(--ink);box-shadow:0 30px 80px #0005}
dialog::backdrop{background:#2b1d1699}
dialog h3{font:400 1.5rem var(--serif);margin:0 0 1rem}
dialog label{display:block;font-size:.75rem;color:var(--mute);font-weight:600;margin-bottom:.8rem}
dialog label>*{margin-top:.25rem;display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dlg-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.grow{flex:1}
#toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;max-width:calc(100vw - 2rem);font-size:.85rem;z-index:9}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.hero,.pro{grid-template-columns:1fr}.lanes{grid-template-columns:1fr}}
@media(max-width:480px){.brand .sub{display:none}.stat b{font-size:1.6rem}.row{grid-template-columns:1fr}}
@media print{.top,.controls,.lanes,.pro,.foot,.hero{display:none}body{background:#fff}}
.brief{display:none}
@media print{.brief{display:block;font-family:var(--serif)}.brief h2{margin:1rem 0 .3rem}.brief li{margin:.2rem 0}}
