:root{
  --ground:#F6F1E8; --surface:#FFFDF9; --surface-2:#F0E9DD;
  --ink:#1F1B17; --ink-2:#5C534A; --ink-3:#8A8077; --line:#E4DACA;
  --accent:#C2530E; --accent-soft:#F7E4D4;
  --keep:#1B6E63; --keep-soft:#DCEBE7;
  --alert:#A32219; --alert-soft:#F7DFDC;
  --shadow:0 1px 2px rgba(31,27,23,.05), 0 10px 28px -16px rgba(31,27,23,.30);
  --f-display:"Bricolage Grotesque","PingFang SC","Microsoft JhengHei","Microsoft YaHei",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","PingFang SC","Microsoft JhengHei","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#15120F; --surface:#1E1A16; --surface-2:#272119;
    --ink:#F1EAE0; --ink-2:#B7AB9C; --ink-3:#8B8074; --line:#342C24;
    --accent:#F08A4B; --accent-soft:#3B2415;
    --keep:#5BC5B3; --keep-soft:#123029;
    --alert:#F0796F; --alert-soft:#3A1A17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#15120F; --surface:#1E1A16; --surface-2:#272119;
  --ink:#F1EAE0; --ink-2:#B7AB9C; --ink-3:#8B8074; --line:#342C24;
  --accent:#F08A4B; --accent-soft:#3B2415;
  --keep:#5BC5B3; --keep-soft:#123029;
  --alert:#F0796F; --alert-soft:#3A1A17;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:1080px; margin:0 auto; padding:28px 20px 40px; display:flex; flex-direction:column; gap:26px}

/* ---------- masthead ---------- */
.masthead{display:flex; gap:24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.eyebrow::after{content:""; height:1px; width:44px; background:var(--line)}
h1{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.85rem,4.4vw,2.7rem);
  line-height:1.06; margin:0; letter-spacing:-.02em; text-wrap:balance;
}
.sub{margin:10px 0 0; color:var(--ink-2); max-width:46ch; font-size:.98rem}
.mast-r{display:grid; grid-template-columns:auto minmax(150px,1fr); gap:8px 12px; align-items:center; flex-shrink:0}
.mini{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
select{
  font-family:var(--f-body); font-size:.9rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:8px 32px 8px 10px; width:100%;
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}

/* ---------- layout ---------- */
.grid{display:grid; grid-template-columns:1fr 372px; gap:22px; align-items:start}
@media (max-width:880px){ .grid{grid-template-columns:1fr} .mast-r{width:100%} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.panel{padding:22px 22px 6px}
.legend{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.legend::after{content:""; flex:1; height:1px; background:var(--line)}
.fieldset{border:0; padding:0; margin:0 0 20px}

.row{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media (max-width:520px){ .row{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:.86rem; font-weight:500; color:var(--ink-2)}
.hint{font-size:.75rem; color:var(--ink-3); line-height:1.4}
.input-wrap{display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); transition:border-color .15s, box-shadow .15s}
.input-wrap:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.affix{font-family:var(--f-mono); font-size:.85rem; color:var(--ink-3); padding:0 2px 0 11px; user-select:none}
.affix.suffix{padding:0 11px 0 2px}
input[type="number"]{
  flex:1; min-width:0; width:100%; border:0; background:transparent; color:var(--ink);
  font-family:var(--f-mono); font-size:1rem; font-variant-numeric:tabular-nums;
  padding:10px 11px 10px 4px; -moz-appearance:textfield;
}
input[type="number"]:focus{outline:none}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ---------- advanced ---------- */
details.adv{border-top:1px dashed var(--line); margin:0 -22px; padding:0 22px}
details.adv summary{
  list-style:none; cursor:pointer; padding:14px 0; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px;
}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+"; font-size:14px; line-height:1; color:var(--accent)}
details.adv[open] summary::before{content:"\2013"}
details.adv summary:hover{color:var(--accent)}
.adv-note{font-size:.78rem; color:var(--ink-3); margin:0 0 16px; max-width:62ch}

/* ---------- receipt ---------- */
.col-r{display:flex; flex-direction:column; gap:16px; position:sticky; top:20px}
@media (max-width:880px){ .col-r{position:static} }
.receipt{
  background:var(--surface); padding:24px 22px 30px; color:var(--ink); --sc:9px;
  -webkit-mask:radial-gradient(circle at 50% 0, transparent 0 5.5px, #000 6px) 50% 100%/18px var(--sc) repeat-x,
       linear-gradient(#000 0 0) 50% 0/100% calc(100% - var(--sc)) no-repeat;
  mask:radial-gradient(circle at 50% 0, transparent 0 5.5px, #000 6px) 50% 100%/18px var(--sc) repeat-x,
       linear-gradient(#000 0 0) 50% 0/100% calc(100% - var(--sc)) no-repeat;
  border-radius:14px 14px 0 0; filter:drop-shadow(0 10px 22px rgba(31,27,23,.16));
}
.r-head{text-align:center; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:16px}
.r-head h2{font-family:var(--f-display); font-size:1.05rem; margin:0; letter-spacing:.01em}
.stamp{
  display:inline-block; margin-top:9px; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:3px;
  padding:2px 8px; transform:rotate(-1.4deg);
}
.line{display:flex; align-items:baseline; gap:6px; font-size:.87rem; margin-bottom:7px}
.line .lbl{color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:66%}
.line .dots{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); min-width:10px}
.line .val{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.86rem}
.line.neg .val{color:var(--accent)}
.line.indent{padding-left:12px}
.line.indent .lbl,.line.indent .val{color:var(--ink-3); font-size:.8rem}
.line.rule{border-top:1px solid var(--line); margin-top:12px; padding-top:11px}
.line.rule .lbl{color:var(--ink); font-weight:600}
.line.rule .val{font-weight:600}
.line.hide{display:none}
.total{
  margin-top:16px; padding-top:14px; border-top:2px solid var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.total .t-lbl{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.total .t-val{
  font-family:var(--f-display); font-weight:700; font-size:2rem; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--keep); letter-spacing:-.02em;
}
.total.is-loss .t-val{color:var(--alert)}
.meta{display:flex; gap:8px; margin-top:14px}
.chip{flex:1; background:var(--surface-2); border-radius:8px; padding:8px 10px}
.chip .k{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:2px}
.chip .v{font-family:var(--f-mono); font-size:1rem; font-variant-numeric:tabular-nums; font-weight:500}
.chip.keep .v{color:var(--keep)}
.chip.take .v{color:var(--accent)}
.warn{display:none; margin-top:14px; background:var(--alert-soft); color:var(--alert); border-radius:8px; padding:10px 12px; font-size:.8rem; line-height:1.45}
.warn.show{display:block}

/* ---------- allocation ---------- */
.alloc{padding:18px 20px}
.alloc h3{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:400}
.bar{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2); gap:2px}
.bar span{transition:width .35s cubic-bezier(.4,0,.2,1); min-width:0}
.seg-keep{background:var(--keep)}
.seg-fees{background:var(--accent)}
.seg-costs{background:var(--ink-3)}
.key{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px}
.key div{display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--ink-2)}
.key i{width:9px; height:9px; border-radius:2px; flex:none}
.key b{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink)}

/* ---------- target ---------- */
.target{padding:18px 20px 20px}
.target h3{font-family:var(--f-display); font-size:1rem; margin:0 0 4px}
.target .out{margin-top:6px; background:var(--keep-soft); border-radius:10px; padding:12px 14px; font-size:.85rem; line-height:1.5}
.target .out b{font-family:var(--f-mono); font-size:1.15rem; color:var(--keep); font-variant-numeric:tabular-nums}
.target .out.bad{background:var(--alert-soft); color:var(--alert)}
.target .out.bad b{color:var(--alert)}

/* ---------- actions ---------- */
.actions{display:flex; gap:10px; flex-wrap:wrap}
button{
  font-family:var(--f-body); font-size:.85rem; font-weight:500; cursor:pointer;
  border-radius:var(--r); padding:9px 16px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); transition:background .15s,border-color .15s,color .15s;
}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primary{background:var(--ink); border-color:var(--ink); color:var(--ground)}
button.primary:hover{background:var(--accent); border-color:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- notes ---------- */
.notes{display:grid; grid-template-columns:1fr 1fr; gap:0 26px; padding:26px 24px}
@media (max-width:760px){ .notes{grid-template-columns:1fr} }
.notes h2{font-family:var(--f-display); font-size:1.25rem; margin:0 0 14px; grid-column:1/-1}
.notes h3{font-family:var(--f-body); font-size:.92rem; margin:0 0 5px; color:var(--ink)}
.notes p{margin:0 0 16px; font-size:.86rem; color:var(--ink-2); max-width:62ch}
.notes ul{margin:0 0 16px; padding-left:18px; font-size:.86rem; color:var(--ink-2)}
.notes li{margin-bottom:7px}
.notes li b{color:var(--ink); font-weight:600}
.disclaimer{grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; font-size:.76rem; color:var(--ink-3); max-width:80ch}
.adslot{border:1px dashed var(--line); border-radius:12px; padding:24px; text-align:center; color:var(--ink-3); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
footer{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); border-top:1px solid var(--line); padding-top:18px}
footer .brand{font-family:var(--f-display); font-weight:700; color:var(--ink-2); font-size:.9rem}

/* ---------- mobile dock ---------- */
.dock{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--surface); border-top:1px solid var(--line);
  padding:11px 20px calc(11px + env(safe-area-inset-bottom));
  justify-content:space-between; align-items:center; gap:12px;
  box-shadow:0 -6px 20px -12px rgba(31,27,23,.35);
}
.dock .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.dock .v{font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--keep); font-variant-numeric:tabular-nums}
.dock .v.loss{color:var(--alert)}
@media (max-width:880px){ .dock{display:flex} .page{padding-bottom:88px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- site chrome (added when the calculator became a site) ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:0 0 var(--r) 0;
  font-size:.85rem;
}
.skip:focus{left:0}
.sitebar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.sitebar a{color:inherit; text-decoration:none}
.sitebar .brand{
  font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.sitebar .brand .glyph{
  width:22px; height:22px; border-radius:5px; background:var(--accent); color:#fff;
  font-family:var(--f-mono); font-size:12px; font-weight:600; display:grid; place-items:center; flex:none;
}
.sitenav{display:flex; gap:20px; font-size:.87rem; color:var(--ink-2)}
.sitenav a:hover,.sitenav a[aria-current="page"]{color:var(--accent)}
.sitenav a[aria-current="page"]{font-weight:600}

.sitefoot{
  display:flex; justify-content:space-between; align-items:center; gap:14px 26px; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-3); border-top:1px solid var(--line); padding-top:18px;
}
.sitefoot a{color:var(--ink-2); text-decoration:none}
.sitefoot a:hover{color:var(--accent); text-decoration:underline}
.sitefoot .links{display:flex; gap:18px; flex-wrap:wrap}
.sitefoot .brand{font-family:var(--f-display); font-weight:700; color:var(--ink-2); font-size:.9rem}

/* ---------- rate provenance ---------- */
.rate-stamp{
  font-size:.75rem; color:var(--ink-3); margin:-8px 0 16px;
}
.rate-stamp a{color:var(--accent)}

/* ---------- guides ---------- */
.guides{padding:26px 24px}
.guides h2{font-family:var(--f-display); font-size:1.25rem; margin:0 0 6px}
.guides .lead{font-size:.86rem; color:var(--ink-2); margin:0 0 18px; max-width:60ch}
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:760px){ .guide-grid{grid-template-columns:1fr} }
.guide-card{
  display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:12px; padding:16px 16px 18px; background:var(--surface-2);
  transition:border-color .15s, transform .15s;
}
.guide-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.guide-card .kicker{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.guide-card h3{font-family:var(--f-body); font-weight:600; font-size:.95rem; margin:0; line-height:1.35}
.guide-card p{margin:0; font-size:.82rem; color:var(--ink-2); line-height:1.5}
.guide-card .more{font-size:.8rem; color:var(--accent); margin-top:auto; padding-top:6px}

/* ---------- long-form pages ---------- */
.prose{padding:34px 40px 40px; max-width:none}
@media (max-width:620px){ .prose{padding:26px 22px 32px} }
.prose > *{max-width:66ch}
.prose .kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.prose h1{font-size:clamp(1.6rem,3.4vw,2.1rem); margin:0 0 10px}
.prose .standfirst{font-size:1.02rem; color:var(--ink-2); margin:0 0 8px; line-height:1.6}
.prose .byline{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); margin:0 0 26px}
.prose h2{
  font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:-.01em;
  margin:34px 0 10px; text-wrap:balance;
}
.prose h3{font-family:var(--f-body); font-weight:600; font-size:1.02rem; margin:24px 0 6px}
.prose p{margin:0 0 15px; color:var(--ink-2); line-height:1.68}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--accent)}
.prose ul,.prose ol{margin:0 0 16px; padding-left:20px; color:var(--ink-2); line-height:1.65}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{
  margin:22px 0; padding:14px 18px; border-left:3px solid var(--accent);
  background:var(--surface-2); border-radius:0 8px 8px 0; color:var(--ink);
  font-size:.95rem; line-height:1.6;
}
.prose blockquote p:last-child{margin:0}
.prose .tablewrap{overflow-x:auto; margin:0 0 20px; max-width:none}
.prose table{border-collapse:collapse; width:100%; min-width:460px; font-size:.86rem}
.prose th,.prose td{text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid var(--line)}
.prose th{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; white-space:nowrap;
}
.prose td{color:var(--ink-2)}
.prose td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.prose .cta{
  display:inline-block; margin:8px 0 4px; background:var(--ink); color:var(--ground);
  text-decoration:none; border-radius:var(--r); padding:11px 20px; font-size:.88rem; font-weight:500;
}
.prose .cta:hover{background:var(--accent); color:#fff}
.prose .updated{
  margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--ink-3);
}

/* neutral sibling of .warn, for the Offsite Ads cap */
.note-box{
  display:none; margin-top:14px; background:var(--accent-soft); color:var(--accent);
  border-radius:8px; padding:10px 12px; font-size:.8rem; line-height:1.45;
}
.note-box.show{display:block}