/* Keptsheet. The idea: a duplicate book. You fill in the white top sheet; what you keep is written through, in carbon
   blue, onto the yellow copy that stays with you. The dark theme is the carbon paper itself, with the yellow as ink.
   The statement is set the way an accountant would: charges in an inner column, subtotals in an outer one, one rule
   before a sum, a double rule under the total. Rules only appear where they mean something. */

@font-face { font-family: "Eczar"; src: url("fonts/eczar.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --sheet: #fdfdfb; --sheet-ink: #1b2a6b; --sheet-soft: #48537f; --sheet-rule: #c6cadc; --hover: #f2f3f8; --field-on: #fbf6cf;
  --copy: #f7efae; --copy-ink: #1b2a6b; --copy-soft: #47507a; --copy-rule: #c9bd6a;
  --loss-sheet: #a81d16; --loss-copy: #a01a13; --focus: #0b4fd6;
  --display: "Eczar", Georgia, "Times New Roman", serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(1rem, calc(50vw - 37rem));
  --bg: var(--sheet); --ink: var(--sheet-ink); --soft: var(--sheet-soft); --rule: var(--sheet-rule); --loss: var(--loss-sheet);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sheet: #1a2350; --sheet-ink: #eef0f8; --sheet-soft: #b6bcd8; --sheet-rule: #3d4778; --hover: #222c60; --field-on: #2a3468;
    --copy: #10173a; --copy-ink: #f7efae; --copy-soft: #cfcaa0; --copy-rule: #4b4f6e;
    --loss-sheet: #ffb3a6; --loss-copy: #ffa899; --focus: #f7efae;
  }
}
.side, .example-panel { --bg: var(--copy); --ink: var(--copy-ink); --soft: var(--copy-soft); --rule: var(--copy-rule); --loss: var(--loss-copy); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--sheet); color: var(--sheet-ink); font: 400 1rem/1.5 var(--text); overflow-wrap: break-word; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.15; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: 0.5rem; z-index: 10; padding: 0.5rem 0.75rem; background: var(--sheet); }
[hidden] { display: none !important; }

/* Letterhead: the wordmark carries the double rule that closes every statement. */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding: 0.7rem var(--gutter) 0; }
.brand { font: 700 1.3rem/1.2 var(--display); color: var(--sheet-ink); text-decoration: none; border-bottom: 3px double currentColor; }
.top h1 { font: 500 0.95rem/1.3 var(--text); color: var(--sheet-soft); }

/* ---- The calculator. On a phone: switch, result (sticks while you type), form, statement. ---- */
.calc { display: flex; flex-direction: column; margin-top: 0.5rem; }
.work, .side { display: contents; }
.modes { order: 1; }
.keep { order: 2; }
.sheet { order: 3; }
.receipt { order: 4; }
.no-js { order: 0; margin: 0.75rem var(--gutter) 0.25rem; }
.no-js strong { color: var(--loss-sheet); }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.modes { display: flex; gap: 1rem; padding: 0 var(--gutter); }
.modes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.modes label { display: flex; align-items: flex-end; min-height: 2.75rem; padding-bottom: 0.3rem; font: 500 1.03rem/1.15 var(--display); color: var(--sheet-soft); border-bottom: 1px solid var(--sheet-rule); cursor: pointer; transition: border-color 120ms ease-out; }
.modes label:hover { color: var(--sheet-ink); }
.modes input:checked + label { color: var(--sheet-ink); font-weight: 700; border-bottom: 3px solid var(--sheet-ink); padding-bottom: calc(0.3rem - 2px); }
.modes input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

.keep { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 1rem; margin-top: 0.75rem; padding: 0.4rem var(--gutter) 0.5rem; background: var(--copy); color: var(--copy-ink); border-bottom: 3px double var(--copy-ink); }
.keep-label { font: 500 1.05rem/1.2 var(--display); }
.keep-value { font: 700 2.15rem/1.1 var(--display); letter-spacing: -0.01em; text-align: right; overflow-wrap: anywhere; }
/* Sub and flag share one slot, so a loss replaces the margin line instead of pushing the page down. */
.keep-sub, .keep-flag { grid-column: 1 / -1; grid-row: 2; align-self: start; min-height: 1.3em; font-size: 0.875rem; line-height: 1.3; }
.keep-sub { color: var(--copy-soft); }
.keep-flag { visibility: hidden; font-weight: 600; color: var(--loss-copy); }
[data-state="loss"] .keep-sub, [data-state="even"] .keep-sub, [data-state="none"] .keep-sub { visibility: hidden; }
[data-state="loss"] .keep-flag, [data-state="even"] .keep-flag, [data-state="none"] .keep-flag { visibility: visible; }
[data-state="even"] .keep-flag { color: var(--copy-ink); }
[data-state="empty"] .keep-value { color: var(--copy-soft); font-weight: 500; }
[data-state="loss"] .keep-value, [data-state="loss"] .keep-label { color: var(--loss-copy); }
[data-state="loss"] .keep { border-bottom-color: var(--loss-copy); }

/* The form: printed fields on the white sheet. Boxless, a rule to write on, yellow where the pen is. */
.sheet { padding: 0.75rem var(--gutter) 1.5rem; }
.lede { font-size: 0.875rem; color: var(--sheet-soft); margin-bottom: 0.65rem; }
.cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1rem; margin-top: 0.9rem; }
.cells legend { padding: 0; margin-bottom: 0.4rem; font: 600 1.05rem/1.2 var(--display); }
.wide { grid-column: 1 / -1; }
.row { display: grid; align-content: end; gap: 0.15rem; }
label { font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.amt { position: relative; }
.sym { position: absolute; left: 0.1rem; bottom: 0.72rem; font-size: 0.9375rem; color: var(--sheet-soft); pointer-events: none; }
input[type="text"], select { width: 100%; min-height: 2.75rem; padding: 0.35rem 0.25rem; font: 500 1.125rem/1.3 var(--text); font-variant-numeric: tabular-nums; color: var(--sheet-ink); background: transparent; border: 0; border-bottom: 2px solid var(--sheet-ink); border-radius: 0; transition: background-color 120ms ease-out; touch-action: manipulation; }
input[type="text"] { text-align: right; }
input[type="text"]:focus-visible, select:focus-visible { outline-offset: 0; }
input[type="text"]:hover, select:hover { background: var(--hover); }
input[type="text"]:focus, select:focus { background: var(--field-on); }
input[aria-invalid="true"] { border-bottom-color: var(--loss-sheet); border-bottom-width: 3px; }
select { padding-right: 1.5rem; font-size: 1rem; appearance: none; background-repeat: no-repeat; background-position: right 0.3rem center; background-size: 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b2a6b' stroke-width='2'/%3E%3C/svg%3E"); }
select option { background: var(--sheet); color: var(--sheet-ink); }
@media (prefers-color-scheme: dark) {
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23eef0f8' stroke-width='2'/%3E%3C/svg%3E"); }
}
.err { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--loss-sheet); }
.hint { font-size: 0.8125rem; font-weight: 400; line-height: 1.35; color: var(--sheet-soft); }
.tick { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.tick input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--sheet-ink); }
.tick label { font-size: 0.9375rem; cursor: pointer; }
.tick .hint { display: block; }

.rates { margin-top: 0.9rem; border-top: 1px solid var(--sheet-rule); border-bottom: 1px solid var(--sheet-rule); }
.rates summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; font: 600 1.05rem/1.2 var(--display); cursor: pointer; list-style: none; }
.rates summary::-webkit-details-marker { display: none; }
.rates summary::after { content: "+"; font: 400 1.25rem/1 var(--text); color: var(--sheet-soft); }
.rates[open] summary::after { content: "\2212"; }
.now { margin-left: auto; font: 400 0.875rem/1.2 var(--text); font-variant-numeric: tabular-nums; color: var(--sheet-soft); }
.rates > .hint { margin: 0.35rem 0 0.25rem; }
.rates .cells { margin: 0.5rem 0 1rem; }

/* The statement on the yellow copy. Not a card: it runs to the edge of the screen. */
.receipt { padding: 1rem var(--gutter) 1.75rem; background: var(--copy); color: var(--copy-ink); --bg: var(--copy); }
.receipt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.receipt h3 { font-size: 1.15rem; }
#copy-link { min-height: 2.75rem; padding: 0; font: 500 0.875rem/1.2 var(--text); color: inherit; background: none; border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; }
#copy-link:hover { text-decoration-thickness: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
th, td { padding: 0.28rem 0; vertical-align: baseline; font-weight: 400; }
th { text-align: left; padding-right: 0.75rem; }
td { text-align: right; white-space: nowrap; }
td:nth-child(2):not(:last-child) { min-width: 4.5rem; }
td:last-child { min-width: 5.5rem; padding-left: 1rem; }
.detail { display: block; font-size: 0.8125rem; line-height: 1.25; color: var(--soft); }
tr.group th { padding-top: 0.75rem; font: 600 1rem/1.2 var(--display); }
tr.sum th, tr.sum td { padding-bottom: 0.4rem; }
tr.sum td:nth-child(2) { border-top: 1px solid currentColor; }
tr.sum td:last-child { font-weight: 600; }
tr.net th, tr.net td { padding: 0.5rem 0 0.45rem; font: 700 1.3rem/1.1 var(--display); border-top: 1px solid currentColor; border-bottom: 4px double currentColor; }
tr.net td { padding-left: 1rem; }
tr.margin th, tr.margin td { padding-top: 0.5rem; }
[data-state="loss"] tr.net th, [data-state="loss"] tr.net td { color: var(--loss-copy); }
.small { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.4; color: var(--soft); }
.small p + p { margin-top: 0.45rem; }
.small a { color: inherit; }

/* ---- Reading pages and everything below the calculator ---- */
.after { padding: 1.5rem var(--gutter) 0; }
.product { max-width: 42rem; margin-bottom: 2.75rem; }
.product-main { font: 500 1.2rem/1.35 var(--display); }
.product-sub { margin-top: 0.3rem; font-size: 0.9375rem; color: var(--sheet-soft); }
.band { margin-bottom: 2.5rem; }
h2 { font-size: clamp(1.5rem, 4.5vw, 1.9rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; }
.fee { padding: 0.75rem 0; }
.fee h3 { margin-bottom: 0.2rem; }
.fee p, .prose > p, details p, .plain, .letter p { max-width: 40rem; }
.band details { max-width: 40rem; border-bottom: 1px solid var(--rule); }
.band details:first-of-type { border-top: 1px solid var(--rule); }
.band summary { position: relative; padding: 0.75rem 2rem 0.75rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.band summary::-webkit-details-marker { display: none; }
.band summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.6rem; font-size: 1.25rem; font-weight: 400; color: var(--soft); }
.band details[open] summary::after { content: "\2212"; }
.band details p { padding-bottom: 1rem; }
.plain { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.plain li { margin-bottom: 0.45rem; padding-left: 0.2rem; }
#assumptions h3 { margin: 1.25rem 0 0.5rem; }
.foot { padding: 1.25rem var(--gutter) 2.5rem; font-size: 0.875rem; color: var(--sheet-soft); border-top: 4px double var(--sheet-ink); }
.foot p { max-width: 40rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 0.5rem; }
.foot a { display: inline-block; padding: 0.5rem 0; color: var(--sheet-ink); }

/* Country pages: same two sheets. Worked example on the yellow copy, prose on the white. */
.split { display: flex; flex-direction: column; }
.intro { padding: 1rem var(--gutter) 1.25rem; }
.intro h1 { font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.1; margin-bottom: 0.6rem; }
.intro .lede { margin: 0; max-width: 38rem; font-size: 1.0625rem; line-height: 1.5; color: var(--sheet-soft); }
.split > .band { padding: 0 var(--gutter); }
.example-panel { margin-bottom: 2.5rem; padding: 1.25rem var(--gutter) 1.75rem; background: var(--copy); color: var(--copy-ink); }
.example-panel .receipt { padding: 0; }
.example-panel > p { margin-bottom: 0.9rem; }
.example-panel h2 { margin-bottom: 0.5rem; }
.receipt.example { margin-bottom: 1.1rem; }
.example h3 { margin: 1rem 0 0.35rem; }
.example td:last-child { padding-left: 1rem; }
.go { display: inline-block; padding: 0.7rem 1rem; font-weight: 600; color: var(--copy); background: var(--copy-ink); text-decoration: none; }
.go:hover { text-decoration: underline; }
.letter h2 { margin: 1.75rem 0 0.5rem; font-size: 1.35rem; }
.letter h2:first-child { margin-top: 0; }
.letter p + p { margin-top: 0.75rem; }
.facts table { font-size: 1rem; }
.facts th, .facts td { padding: 0.4rem 0; }
.facts td { padding-left: 1rem; white-space: normal; font-weight: 500; }
.facts tr:last-child th, .facts tr:last-child td { padding-bottom: 0.6rem; border-bottom: 4px double currentColor; }
.example-panel .band-note { margin-top: 1.75rem; }
.example-panel .band-note h2 { font-size: 1.35rem; }

@media (scripting: none) { .modes, #copy-link { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ---- Wide enough for two sheets side by side ---- */
@media (min-width: 60rem) {
  :root { --gutter: max(2rem, calc(50vw - 37rem)); }
  .top { width: 50%; padding-right: 2.5rem; min-height: 3.25rem; }
  .calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; align-items: stretch; }
  .work { display: block; padding-right: 2.5rem; }
  .side { display: block; margin-top: -3.25rem; background: var(--copy); padding-right: var(--gutter); }
  .no-js { margin: 0.5rem 0 0.75rem var(--gutter); }
  .modes { padding: 0 0 0 var(--gutter); gap: 1.5rem; }
  .modes label { font-size: 1.25rem; }
  .sheet { padding: 0.9rem 0 2rem var(--gutter); }
  .keep { margin: 0 0 0 2.5rem; padding: 1.6rem 0 0.6rem; }
  .keep-label { font-size: 1.4rem; }
  .keep-value { font-size: clamp(3rem, 5vw, 4rem); }
  .keep-sub, .keep-flag { font-size: 0.9375rem; }
  .receipt { padding: 0.9rem 0 2rem 2.5rem; }
  .detail { display: inline; margin-left: 0.45rem; }
  .after { padding-top: 2.5rem; }
  .fee { display: grid; grid-template-columns: 12rem minmax(0, 40rem); gap: 1.5rem; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(9, min-content) 1fr; }
  .split > * { grid-column: 1; min-width: 0; }
  .split > .intro { padding: 1rem 2.5rem 1.75rem var(--gutter); }
  .split > .band { padding: 0 2.5rem 0 var(--gutter); }
  .split .fee { display: block; }
  .example-panel { grid-column: 2; grid-row: 1 / -1; margin: -3.25rem 0 2.5rem; padding: 1.5rem var(--gutter) 2rem 2.5rem; }
}