/* Layout: a working "statement of account" — tool panel first, plain-language guide below, ledger-style results */
:root{
  --bg:#f3f5f6; --surface:#ffffff; --ink:#15212b; --muted:#5a6873; --line:#d6dde2;
  --accent:#0f5c4d; --accent-soft:#e2efeb; --warn:#8a5a00; --warn-soft:#fbf1dc;
  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10171c; --surface:#172229; --ink:#e4eaee; --muted:#9aa8b2; --line:#2b3a44;
  --accent:#5cc2aa; --accent-soft:#183a33; --warn:#e8b759; --warn-soft:#3a2f17; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10171c; --surface:#172229; --ink:#e4eaee; --muted:#9aa8b2; --line:#2b3a44;
  --accent:#5cc2aa; --accent-soft:#183a33; --warn:#e8b759; --warn-soft:#3a2f17; color-scheme:dark}

body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);padding-inline:16px;padding-block:0 48px}
.wrap{max-width:980px;margin:0 auto}
header.site{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-block:20px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-weight:650;font-size:1.25rem;letter-spacing:-.01em}
.brand span{color:var(--accent)}
nav.site{display:flex;gap:20px;flex-wrap:wrap;font-size:.9rem}
nav.site a{color:var(--muted);text-decoration:none}
nav.site a:hover,nav.site a:focus-visible{color:var(--accent)}
.intro{padding-block:36px 24px;max-width:44rem}
h1{font-family:var(--display);font-weight:650;font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.15;margin:0 0 12px;text-wrap:balance;letter-spacing:-.015em}
.intro p{color:var(--muted);margin:0;font-size:1.05rem}
.ad{border:1px dashed var(--line);border-radius:6px;color:var(--muted);font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;display:grid;place-items:center;min-height:90px;margin-block:20px}

.tool{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tabs button{flex:1 0 auto;white-space:nowrap;appearance:none;border:0;background:none;color:var(--muted);font:600 .95rem var(--body);padding:16px 12px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
@media (max-width:760px){.panel{grid-template-columns:minmax(0,1fr)}}
.inputs{padding:24px;display:grid;gap:16px;align-content:start;border-right:1px solid var(--line)}
@media (max-width:760px){.inputs{border-right:0;border-bottom:1px solid var(--line)}}
.field{display:grid;gap:6px}
.field label{font-size:.85rem;font-weight:500}
.field small{color:var(--muted);font-size:.78rem;line-height:1.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.inbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inbox span{padding:0 10px;color:var(--muted);font:500 .9rem var(--mono)}
.inbox input,select{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:500 1rem var(--mono);padding:10px;outline:none;font-variant-numeric:tabular-nums}
select{border:1px solid var(--line);border-radius:6px;background:var(--bg);font-family:var(--body);font-size:.95rem}
select:focus-visible{outline:2px solid var(--accent)}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{flex:1;appearance:none;border:0;background:var(--bg);color:var(--muted);font:500 .9rem var(--body);padding:9px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--surface)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.results{padding:24px;display:grid;gap:18px;align-content:start}
.eyebrow{font:500 .72rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.big{font:500 clamp(2rem,5vw,2.6rem)/1.1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums;margin-top:4px}
.big small{font:500 .9rem var(--body);color:var(--muted)}
.ledger{border-top:1px solid var(--line)}
.ledger div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dotted var(--line);font-size:.92rem}
.ledger dt{color:var(--muted)}
.ledger dd{margin:0;font:500 .95rem var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.ledger .win dd{color:var(--accent)}
.note{background:var(--warn-soft);color:var(--ink);border-radius:6px;padding:12px 14px;font-size:.84rem;line-height:1.5}
.note b{color:var(--warn)}
.verdict{background:var(--accent-soft);border-radius:6px;padding:12px 14px;font-size:.9rem}

.guide{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;margin-top:40px}
@media (max-width:860px){.guide{grid-template-columns:minmax(0,1fr)}}
.guide article{max-width:65ch}
h2{font-family:var(--display);font-weight:650;font-size:1.55rem;line-height:1.25;margin:32px 0 10px;text-wrap:balance}
h2:first-child{margin-top:0}
h3{font-size:1.02rem;margin:22px 0 6px}
.guide p,.guide li{color:var(--ink)}
.formula{font:500 .9rem var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px;overflow-x:auto;white-space:nowrap}
aside .ad{min-height:250px;margin-top:0}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 0;border-bottom:1px dotted var(--line);font-variant-numeric:tabular-nums}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-family:var(--mono)}
.tbl td:nth-child(2),.tbl th:nth-child(2){text-align:right;padding-right:12px;font-family:var(--mono)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--muted)}
.deadline-date{font-family:var(--display);font-weight:650;font-size:clamp(1.6rem,4vw,2.1rem);line-height:1.15;color:var(--accent)}
aside .card{border:1px solid var(--line);border-radius:8px;padding:18px;background:var(--surface);font-size:.9rem}
aside .card h3{margin-top:0;font-family:var(--display);font-size:1.1rem}
aside ul{padding-left:18px;margin:8px 0 0}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;display:grid;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.big{transition:color .2s}}

a{color:var(--accent)}
.brand{text-decoration:none;color:var(--ink)}
.crumbs{font-size:.82rem;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
.intro.tool-intro{padding-block:12px 20px}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;margin-block:8px 32px}
.hub a{display:grid;gap:6px;padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink)}
.hub a:hover,.hub a:focus-visible{border-color:var(--accent)}
.hub strong{font-family:var(--display);font-size:1.15rem;font-weight:650}
.hub span{color:var(--muted);font-size:.9rem}
.related{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.faq details{border-bottom:1px solid var(--line);padding-block:12px}
.faq summary{font-weight:600;cursor:pointer}
.faq p{margin:8px 0 0}
.prose{max-width:65ch;padding-block:8px 24px}
.prose h1{margin-top:12px}
.lede{font-size:1.12rem;color:var(--muted)}
.prose ol,.prose ul{padding-left:22px}
.prose li{margin-block:4px}
.reviewed{font-size:.82rem;color:var(--muted)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}
@media (max-width:860px){.article-grid{grid-template-columns:minmax(0,1fr)}}