/* Generated by site/gen.mjs from site/site.css. Edit it there. */
:root{--desk:#F2F4F7;--paper:#F2F4F7;--card:#FFFFFF;--panel:#E4E8EE;--pressed:#D8DEE6;--fill:#FFFFFF;--thumb:#FFFFFF;--rule:#E3E7ED;--ink:#14181E;--ink2:#485160;--ink3:#5A6575;--acc:#0B6A6F;--accInk:#FFFFFF;--accFill:#0B6A6F;--accFillInk:#FFFFFF;--accSoft:#E1EFEF;--danger:#A8331F;--ct-fuel:#D9EAFC;--ch-fuel:#0070C2;--ct-food:#FBE0E2;--ch-food:#AE284A;--ct-subs:#D2EDF4;--ch-subs:#00869D;--ct-dine:#F6E4D3;--ch-dine:#8B5200;--ct-alc:#F7E0EC;--ch-alc:#C9549D;--ct-other:#EBE4F9;--ch-other:#9867D9;--ct-big:#E4E6FC;--ch-big:#554DBD;--ct-invest:#DBEEDD;--ch-invest:#049438;--ct-ptax:#EAE9D3;--ch-ptax:#777000;--ct-tds:#D4EFE7;--ch-tds:#00836E;--ct-inc:#F8E0EB;--ch-inc:#D2008A;--ct-gains:#D6EFE3;--ch-gains:#007D5A;--ct-direct:#F9E3D6;--ch-direct:#CE6000;--inv:#20262E;--invInk:#F2F4F7;--toastAcc:#7EDCD0;--scrim:rgba(15,20,27,.4);--sh-thumb:0 1px 3px rgba(20,24,30,.14),0 1px 1px rgba(20,24,30,.04);--sh-sheet:0 -8px 24px rgba(20,24,30,.16);--sh-toast:0 8px 24px rgba(20,24,30,.24);--sh-nav:0 -1px 0 var(--rule),0 -8px 24px rgba(20,24,30,.06);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--r1:4px;--r2:8px;--r3:12px;--r4:16px;--r5:24px;--rf:999px;--div:linear-gradient(var(--rule),var(--rule));--ease:cubic-bezier(.2,0,0,1);--sans:"Public Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--desk:#0F1319;--paper:#0F1319;--card:#171C24;--panel:#222934;--pressed:#2C3441;--fill:#222934;--thumb:#333C4A;--rule:#2A3240;--ink:#E9EDF2;--ink2:#B1BBC8;--ink3:#909CAC;--acc:#4FD1C1;--accInk:#062522;--accFill:#4FD1C1;--accFillInk:#062522;--accSoft:#15302F;--danger:#F0765F;--ct-fuel:#1A2A3B;--ch-fuel:#B5D9FF;--ct-food:#392124;--ch-food:#FF9BA8;--ct-subs:#0F2D34;--ch-subs:#00AFCB;--ct-dine:#362514;--ch-dine:#FFCB9A;--ct-alc:#36212D;--ch-alc:#CE6AA7;--ct-other:#2C2438;--ch-other:#C8A4FF;--ct-big:#25263B;--ch-big:#7E7FE1;--ct-invest:#1C2E1E;--ch-invest:#58B768;--ct-ptax:#2B2A13;--ch-ptax:#D5CE51;--ct-tds:#112F28;--ch-tds:#009C84;--ct-inc:#37212B;--ch-inc:#FFD8E9;--ct-gains:#152F24;--ch-gains:#8DFFD1;--ct-direct:#382317;--ch-direct:#D06E2E;--inv:#E9EDF2;--invInk:#14181E;--toastAcc:#0B6A6F;--scrim:rgba(0,0,0,.6);--sh-thumb:0 1px 2px rgba(0,0,0,.4);--sh-sheet:0 -8px 32px rgba(0,0,0,.5);--sh-toast:0 8px 24px rgba(0,0,0,.4);--sh-nav:0 -1px 0 var(--rule);color-scheme:dark}}
:root[data-theme="dark"]{--desk:#0F1319;--paper:#0F1319;--card:#171C24;--panel:#222934;--pressed:#2C3441;--fill:#222934;--thumb:#333C4A;--rule:#2A3240;--ink:#E9EDF2;--ink2:#B1BBC8;--ink3:#909CAC;--acc:#4FD1C1;--accInk:#062522;--accFill:#4FD1C1;--accFillInk:#062522;--accSoft:#15302F;--danger:#F0765F;--ct-fuel:#1A2A3B;--ch-fuel:#B5D9FF;--ct-food:#392124;--ch-food:#FF9BA8;--ct-subs:#0F2D34;--ch-subs:#00AFCB;--ct-dine:#362514;--ch-dine:#FFCB9A;--ct-alc:#36212D;--ch-alc:#CE6AA7;--ct-other:#2C2438;--ch-other:#C8A4FF;--ct-big:#25263B;--ch-big:#7E7FE1;--ct-invest:#1C2E1E;--ch-invest:#58B768;--ct-ptax:#2B2A13;--ch-ptax:#D5CE51;--ct-tds:#112F28;--ch-tds:#009C84;--ct-inc:#37212B;--ch-inc:#FFD8E9;--ct-gains:#152F24;--ch-gains:#8DFFD1;--ct-direct:#382317;--ch-direct:#D06E2E;--inv:#E9EDF2;--invInk:#14181E;--toastAcc:#0B6A6F;--scrim:rgba(0,0,0,.6);--sh-thumb:0 1px 2px rgba(0,0,0,.4);--sh-sheet:0 -8px 32px rgba(0,0,0,.5);--sh-toast:0 8px 24px rgba(0,0,0,.4);--sh-nav:0 -1px 0 var(--rule);color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{background:var(--desk);color:var(--ink);font-family:"Public Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;padding:0 16px 56px}
main,.top,.foot{max-width:680px;margin:0 auto}
/* The one accent, on what can be acted on: links, the button, focus rings.
   Never on a figure (ADR 0013) — every number below is ink or ink2. */
a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Anything that navigates is a thumb-sized target, as in the app. Links inside
   running prose are the one exception — a 44px line box in a paragraph is not a
   readable paragraph — so the rule is applied to the header, the footer and the
   link lists, which is everywhere a link stands on its own. */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--rule)}
.top a{display:flex;align-items:center;min-height:52px;text-decoration:none}
.mark{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--ink3)}
.open{font-size:15px;font-weight:600}
/* Type: the heading asks, the figure answers, the lede explains. */
h1{font-size:28px;line-height:1.2;font-weight:700;margin:36px 0 22px;letter-spacing:-.01em}
h2{font-size:20px;line-height:1.3;font-weight:700;margin:40px 0 12px}
h3{font-size:16px;line-height:1.35;font-weight:600;margin:22px 0 6px}
p{margin:0 0 14px;color:var(--ink2)}
b{font-weight:700}
.answer{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--rule)}
.answer .fig{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-weight:600;font-size:52px;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.answer .of{font-size:16px;line-height:1.45;color:var(--ink2);max-width:36em}
.lede{font-size:18px;color:var(--ink);margin-bottom:22px}
.plain{font-size:17px;color:var(--ink);margin:0 0 22px}
/* Tables: two or three columns, so a 360px phone reads them without scrolling. */
table.fig{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:15px}
table.fig caption{text-align:left;font-size:13px;line-height:1.45;color:var(--ink3);padding-bottom:10px}
table.fig th,table.fig td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:400;color:var(--ink2);vertical-align:top}
table.fig th[scope=row]{padding-right:12px}
table.fig thead th{font-size:13px;color:var(--ink3);padding-top:0}
table.fig thead th:not(:first-child){text-align:right}
table.fig td{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);white-space:nowrap;padding-left:12px}
table.fig tr.hi th,table.fig tr.hi td{color:var(--ink)}
table.fig tr.tot th,table.fig tr.tot td{font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink)}
/* The calculator: a panel, quieter than the answer, louder than the CTA. */
.calc{background:var(--panel);border-radius:12px;padding:20px 18px;margin:8px 0 36px}
.calc h2{margin:0 0 12px;font-size:18px}
.calc label{display:block;font-size:14px;color:var(--ink2);margin-bottom:8px}
.calc input{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:20px;-moz-appearance:textfield}
.calc input::-webkit-outer-spin-button,.calc input::-webkit-inner-spin-button{-webkit-appearance:none}
.calc .out{margin:14px 0 0;color:var(--ink);font-size:17px;min-height:1.6em}
.calc .out b{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-weight:600}
.faq h2{margin-top:36px}
.faq .qa{border-top:1px solid var(--rule);padding-top:16px;margin-top:16px}
.faq .qa h3{margin-top:0}
.faq .qa p{margin-bottom:6px}
.src{font-size:13px;line-height:1.5;color:var(--ink3);border-top:1px solid var(--rule);padding-top:14px;margin-top:28px}
/* The CTA is the calmest box on the page: a rule, a sentence, one button. */
.cta{border:1px solid var(--rule);border-radius:12px;padding:20px 18px;margin:32px 0}
.cta h2{margin:0 0 8px;font-size:18px}
.cta p{font-size:15px;margin-bottom:16px}
.btn{display:block;text-align:center;background:var(--accFill);color:var(--accFillInk);text-decoration:none;font-weight:700;font-size:16px;padding:15px 18px;border-radius:10px;min-height:52px}
/* Link lists: the whole row is the target; the label is the link and the figure
   it leads to sits on the right, in mono, in ink — never in the accent. */
.related ul,.list{list-style:none;font-size:16px;margin:0 0 6px}
.related li,.list li{border-bottom:1px solid var(--rule)}
.related li a,.list li a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:8px 0;text-decoration:none}
.related li a .l,.list li a .l{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.related li a .n,.list li a .n{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink2);text-align:right;flex:none;white-space:nowrap;line-height:1.35}
.related h2{margin-top:8px}
.related h3{color:var(--ink3);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:26px 0 2px}
.grp{margin-top:44px}
.grp h2{margin-top:0}
.grp p{margin-bottom:6px}
.grp h3{margin:26px 0 2px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--rule);border-radius:22px;text-decoration:none;font-size:15px;font-weight:600}
.prose h2{margin-top:32px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:15px;color:var(--ink3);border-top:1px solid var(--rule);margin-top:40px}
.foot a{display:flex;align-items:center;min-height:48px}
@media (min-width:560px){h1{font-size:36px}.answer .fig{font-size:60px}.list{column-width:300px;column-gap:28px}.list li{break-inside:avoid}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}