:root{
  --ground:#f4f6f1; --surface:#fffefb; --ink:#172019; --ink-soft:#5a655d; --line:#d6dcd3;
  --cobalt:#1f7a4a; --cobalt-bg:#e2f0e6; --mustard:#c9a227; --mustard-bg:#faf1d6;
  --red:#a63a2b; --red-bg:#f6e0dc; --ok:#1f6b3a; --ok-bg:#dcefe2;
  --money:#1f7a4a; --housing:#8c5a3c; --ins:#8a5a0a; --pump:#e2a13a; --phone:#7a3f8f; --bills:#1f7a76; --subs:#454a9e; --grocery:#2f6e4f; --ai:#c9a227;
  --display:'Familjen Grotesk','Segoe UI',sans-serif; --body:'Instrument Sans','Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);line-height:1.55;font-size:15px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.pill{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.red{background:var(--red-bg);color:var(--red)} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.gold{background:var(--mustard-bg);color:var(--ins)} .pill.gray{background:var(--cobalt-bg);color:var(--cobalt)}
.btn{background:var(--cobalt);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--cobalt);border:1px solid var(--line)}
.btn.small{padding:6px 10px;font-size:13px}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}

nav.top{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px}
.brand{font-family:var(--display);font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px;text-decoration:none;letter-spacing:-.01em}
.brand .mark{width:22px;height:22px;border-radius:5px;background:var(--cobalt);position:relative}
.brand .mark::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:3px;background:var(--mustard);border-radius:2px}
.brand .q{color:var(--cobalt);margin-left:-8px}
.brand .qi{margin-left:0;margin-right:-8px}
.brand .logo{width:32px;height:32px;display:block;border-radius:7px}
.qg{display:inline-block;width:.44em;height:.83em;vertical-align:-.09em}
.brand .qg{margin-left:-7px}
.hero-logo{width:.9em;height:.9em;border-radius:22%;vertical-align:-.12em;margin-right:.18em}
.pages{display:flex;gap:8px;margin-left:auto}
.pages a{padding:9px 16px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.pages a.go{background:var(--cobalt);color:#fff}
.pages a.won{color:var(--cobalt);border:2px solid var(--cobalt);background:var(--surface)}
@media (max-width:640px){ .pages a{padding:8px 12px;font-size:14px} }
.mine{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.mine a{color:var(--cobalt)}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs a{padding:6px 9px;border-radius:6px;font-size:13px;font-weight:500;color:var(--ink-soft);text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tabs a .dot{width:7px;height:7px;border-radius:50%}

.hero{padding:44px 24px 32px;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start}
.hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:700;line-height:1.03;margin-top:10px}
.hero h1 em{font-style:normal;color:var(--cobalt)}
.hero h1 .sub{display:block;font-size:.6em;font-weight:500;color:var(--ink-soft);margin-top:6px}
.hero p{color:var(--ink-soft);max-width:48ch;margin:14px 0 0;font-size:16px}
.rules{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rules span{font-family:var(--mono);font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}

.drop{margin-top:22px;border:2px dashed var(--cobalt);border-radius:12px;background:var(--surface);padding:22px;transition:background .15s}
.drop.over{background:var(--cobalt-bg)}
.drop-in{display:flex;flex-direction:column;gap:6px}
.drop-in strong{font-family:var(--display);font-size:18px}
.drop-in span{color:var(--ink-soft);font-size:14px}
.drop-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.manual{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.manual-row{display:grid;grid-template-columns:150px 1fr 110px auto;gap:8px;margin-top:8px}
.manual input,.manual select,.profile input{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}

.audit{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;position:sticky;top:74px}
.audit-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.audit .big{font-family:var(--mono);font-size:40px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums;line-height:1;margin-top:8px}
.audit .big small{font-size:14px;color:var(--ink-soft);font-weight:400;margin-left:6px}
.audit .sub{font-family:var(--mono);font-size:12.5px;color:var(--ok);margin-top:6px}
.rows{margin-top:14px}
.rows .empty{color:var(--ink-soft);font-size:13.5px;padding:10px 0}
.row{display:grid;grid-template-columns:12px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px dashed var(--line);font-size:13.5px}
.row .sw{width:10px;height:10px;border-radius:50%}
.row .t{font-weight:600;text-decoration:none;color:var(--ink)}
.row .t:hover{color:var(--cobalt)}
.row .d{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.row .fix{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.row .fix a{font-size:12.5px;color:var(--cobalt)}
.row .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.row .amt.zero{color:var(--ok);font-weight:500}
.row .amt small{display:block;font-weight:400;color:var(--ink-soft);font-size:11px}
.row.done .t{text-decoration:line-through;color:var(--ink-soft)}
.row label.tick{font-size:12px;color:var(--ink-soft);display:flex;gap:4px;align-items:center;cursor:pointer}
.spanel{grid-column:1/-1;margin-top:8px;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.stabs{display:flex;gap:6px;margin-bottom:8px}
.stabs button{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.stabs button.on{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.stabs .copy{margin-left:auto}
.spanel pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap}
.cat .d{font-size:12.5px;color:var(--ink-soft);margin:0}
.fixlist{display:flex;flex-direction:column;gap:10px}
.fixrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.fixrow .t{font-weight:600;font-family:var(--display);font-size:16px}
.fixrow .d{color:var(--ink-soft);font-size:13.5px;margin-top:2px}
.fixrow .fix{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.fixrow .fix a{color:var(--cobalt);font-size:13px}
.fixrow .amt{font-family:var(--mono);font-weight:600;text-align:right}
.fixrow .amt small{display:block;font-weight:400;color:var(--ink-soft);font-size:11px}
.fixrow.done{opacity:.55}
.fixrow.done .t{text-decoration:line-through}
.tick.big input{width:20px;height:20px;margin-top:4px}
.rows .more{display:block;width:100%;margin-top:8px;background:var(--cobalt-bg);color:var(--cobalt);border:0;border-radius:8px;padding:8px;font-weight:600;cursor:pointer}
.audit .foot{margin-top:12px;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:10px}

section{padding:36px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head h2{font-size:21px}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.profile-grid label{font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.profile-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.cat .sw{width:32px;height:7px;border-radius:4px}
.cat h3{font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cat p{margin:0;font-size:13px;color:var(--ink-soft)}
.cat .num{font-family:var(--mono);font-size:13px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
.cat .num b{color:var(--red)}
.srow{border-top:1px dashed var(--line);padding:9px 0;font-size:13.5px}
.srow-top{display:flex;justify-content:space-between;gap:10px}
.srow .t{font-weight:600}
.srow .amt{font-family:var(--mono);font-weight:600;white-space:nowrap}
.srow .amt.zero{color:var(--ok);font-weight:500}
.srow .d{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.srow .fix{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
.srow.done .t{text-decoration:line-through;color:var(--ink-soft)}
.cat a{font-size:12.5px;color:var(--cobalt)}

.script{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:260px 1fr;gap:20px}
.script h3{font-size:17px;margin-bottom:6px}
.script p{margin:0;font-size:14px;color:var(--ink-soft)}
.script pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre-wrap;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:14px;color:var(--ink-soft)}
.how-grid div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.how-grid b{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:22px 24px 40px;font-size:13px;color:var(--ink-soft);text-align:center}
footer .fine{font-family:var(--mono);font-size:11.5px;margin-top:6px}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:28px}
  .audit{position:static}
  .tabs{display:none}
  .fixrow{grid-template-columns:auto 1fr}
  .fixrow .amt{grid-column:2;text-align:left}
  .manual-row{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:1fr}
  .script{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
}
@media (max-width:520px){ .profile-grid,.cats{grid-template-columns:1fr} .audit .big{font-size:34px} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .drop{transition:none} }

/* unmatched charges */
.unmatched{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.urow{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 12px }
.urow .t{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.urow .d{ font-family:var(--mono); font-size:12px; color:var(--ink-soft) }
.urow select{ font:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--line); border-radius:8px; background:var(--ground) }
.amt.zero{ font-size:12px }
@media (max-width:720px){ .unmatched{ grid-template-columns:1fr } }

/* affiliate label, only appears when a link in reference.js is flagged */
.aff{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:1px 7px; margin-left:4px; vertical-align:middle }
.doc{ max-width:760px }
.doc h2{ margin-top:34px }
.doc p, .doc li{ font-size:16px; line-height:1.6 }
.doc .label{ margin-top:6px }
.doc table{ width:100%; border-collapse:collapse; font-size:14px; margin:12px 0 }
.doc th, .doc td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top }
.doc th{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500 }

/* share row: plain links, no third-party scripts */
.share{ max-width:1180px; margin:8px auto 0; padding:14px 24px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px }
.share .label{ margin:0 }
.share a{ color:var(--cobalt) }
.share .linkish{ background:none; border:0; padding:0; font:inherit; color:var(--cobalt); text-decoration:underline; cursor:pointer }
.share .fine{ flex-basis:100%; }

.tip{ margin-top:8px; color:var(--ink) }

.urow select optgroup{ font-family:var(--mono); font-size:11px }
.urow .t{ cursor:default }

/* audit-align: on the audit page the card matches the left column, footnote pinned to the bottom */
body[data-page="audit"] .hero{ align-items:stretch }
body[data-page="audit"] .audit{ display:flex; flex-direction:column; position:static }
body[data-page="audit"] .audit .foot{ margin-top:auto }

/* audit-h1-line: heading on one line, card top drops to the heading's top */
body[data-page="audit"] .hero h1{ font-size:clamp(28px,3.4vw,40px); white-space:nowrap }
body[data-page="audit"] .audit{ margin-top:30px }
@media (max-width:720px){ body[data-page="audit"] .hero h1{ white-space:normal } body[data-page="audit"] .audit{ margin-top:0 } }

/* feedback form, Netlify handled, no script */
.fb{ margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; max-width:720px }
.fb-q{ display:block; font-family:var(--display); font-weight:600; font-size:16px; margin-bottom:8px }
.fb textarea{ width:100%; font:inherit; font-size:14px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--ground); resize:vertical }
.fb-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px }
.fb-row input[type=email]{ flex:1 1 220px; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--ground) }
.fb-row .tick{ font-size:12px; color:var(--ink-soft) }

/* your month */
.month{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px }
.mbars{ display:grid; gap:10px }
.mtop{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px }
.mtop .mono{ font-family:var(--mono); font-size:12px; color:var(--ink-soft) }
.mtrack{ height:10px; background:var(--ground); border-radius:999px; overflow:hidden }
.mfill{ height:100%; border-radius:999px }
.mline{ margin:12px 0 0; font-size:15px }
.month .fine{ margin-top:10px }

.howfind{ margin-top:10px; font-size:13px; line-height:1.6; color:var(--ink-soft); text-align:left; background:var(--ground); border-radius:8px; padding:10px 12px }
.howfind b{ color:var(--ink); display:inline-block; min-width:110px; margin-right:6px }

.row .t small{ color:var(--ink-soft); font-weight:400; font-size:12px; margin-left:4px }

.profile-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.profile-actions .danger{ margin-left:auto }
.btn.danger{ background:transparent; color:var(--red); border:1.5px solid var(--red) }
.btn.danger:hover{ background:var(--red-bg) }
#clearNote{ margin-top:8px; text-align:right }
@media (max-width:640px){ .profile-actions .danger{ margin-left:0 } #clearNote{ text-align:left } }

/* PC width: three section cards across on wide screens, two on tablets, one on phones */
@media (min-width:1200px){ .cats{grid-template-columns:repeat(3,1fr)} .hero{gap:40px} }

/* responsive pass 2026-09-05 */
/* tablets: two section cards across, hero keeps two columns down to 760px */
@media (min-width:600px) and (max-width:880px){ .cats{grid-template-columns:1fr 1fr} .unmatched{grid-template-columns:1fr 1fr} }
@media (min-width:760px) and (max-width:880px){ .hero{grid-template-columns:1.05fr .95fr;padding-top:36px} .audit{position:sticky;top:70px} }
/* phones: labels never under 12px, tick boxes are a real tap target */
@media (max-width:520px){ .label{font-size:12px;letter-spacing:.08em} .pill{font-size:11px} footer .fine{font-size:12px} .tick.big input{width:22px;height:22px} .fixrow .tick.big{padding:6px} }

.got{ margin-top:8px; font-size:13px; color:var(--ink-soft) }
.got .cur{ color:var(--ink); font-family:var(--mono) }
.got input{ width:74px; font-family:var(--mono); font-size:14px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink) }
.fixrow.done{ opacity:1 }
.fixrow.done .t{ text-decoration:none; color:var(--ink-soft) }
.fixrow.done .amt{ color:var(--ok) }

.keep{ margin-top:12px; padding:10px 12px; background:var(--cobalt-bg); border-radius:8px; font-size:13.5px; line-height:1.5 }
.keep b{ color:var(--ink) }
.keep .btn.small{ padding:5px 10px; font-size:13px; margin-left:6px }
.linkish{ background:none; border:0; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font:inherit; font-size:12.5px; margin-left:6px }

footer .family,.family{text-align:center;margin-top:8px;font-size:12px;color:#6b7280}.family a{color:#1f7a4a;text-decoration:none}