:root {
  --silver: #EDF0F1;
  --ink: #24343B;
  --petrol: #176475;
  --line: #B9C9CF;
  --chalk: #FCFDFD;
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: var(--chalk); font-family: var(--body); font-size: 18px; line-height: 1.6; }
button, input { font: inherit; }
a { color: var(--petrol); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--petrol); outline-offset: 5px; }
button { cursor: pointer; border-radius: 0; }
input { border-radius: 0; }
img, svg { max-width: 100%; height: auto; }
p { margin: 0 0 1.15rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.8rem, 4.35vw, 4.8rem); max-width: 22ch; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 2.7vw, 3rem); max-width: 24ch; }
h3 { font-size: 1.55rem; }
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 5; padding: .7rem 1rem; background: var(--chalk); }
.skip:focus { top: 1rem; }
.workbench { background: var(--silver); border-bottom: 1px solid var(--line); }
.bench-inner { max-width: 1512px; margin: auto; padding: 25px 4vw; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.signature { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.signature svg { width: 38px; height: 44px; color: var(--petrol); }
.signature span { font-family: var(--display); font-size: 23px; line-height: 1.08; }
.signature strong { display: block; font-weight: 500; font-size: 29px; }
.input-workbench { display: flex; align-items: center; gap: 1rem; margin: 0; }
.input-label { line-height: 1.3; font-size: 17px; max-width: 11ch; }
.currency-input { display: flex; align-items: center; gap: .6rem; border-bottom: 3px solid var(--petrol); background: var(--chalk); padding: 5px 12px; }
.currency-input span { font-size: 16px; }
.currency-input input { min-width: 0; width: 130px; border: 0; color: var(--ink); background: transparent; font-family: var(--display); font-size: 30px; padding: 0; }
.calculate { background: var(--petrol); color: var(--chalk); border: 2px solid var(--petrol); min-height: 48px; padding: 8px 18px; font-size: 17px; }
.bench-note { font-size: 17px; margin: 0; }
.workspace { display: grid; grid-template-columns: 215px minmax(0, 1fr); column-gap: clamp(32px, 5.5vw, 90px); max-width: 1512px; margin: auto; padding: 45px 4vw 80px; }
.workings-index { align-self: start; position: sticky; top: 32px; font-size: 16px; }
.index-label { display: block; font-family: var(--display); font-size: 23px; margin-bottom: 20px; }
.workings-index ol { padding: 0; margin: 0; list-style: none; }
.workings-index li { margin-bottom: 14px; }
.workings-index a { text-decoration: none; display: grid; grid-template-columns: 26px 1fr; line-height: 1.35; }
.workings-index a span { color: var(--ink); font-family: var(--display); font-size: 16px; }
.workings-index a:hover, .workings-index a[aria-current='page'] { text-decoration: underline; }
.index-questions { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.index-questions a { display: block; margin: 0 0 12px 26px; font-size: 16px; }
.index-foot { margin-top: 28px; padding-left: 26px; color: var(--ink); font-size: 16px; }
.sheet { min-width: 0; }
.eyebrow { color: var(--petrol); font-size: 17px; margin: 0 0 12px; }
.lead { max-width: 65ch; font-size: 20px; margin-top: 22px; line-height: 1.5; }
.home-title { margin-bottom: 30px; }
.calculation-sheet { background: var(--silver); padding: 27px 30px 20px; margin-left: -30px; }
.calculation { position: relative; }
.calculation + .calculation { margin-top: 24px; border-top: 2px solid var(--line); padding-top: 20px; }
.offer-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.offer-code { font-family: var(--display); font-size: 32px; font-weight: 500; user-select: text; -webkit-user-select: text; letter-spacing: .025em; }
.offer-rate { font-family: var(--display); font-size: 23px; color: var(--petrol); }
.copy { background: transparent; border: 1px solid var(--petrol); color: var(--petrol); min-height: 44px; padding: 6px 12px; display: inline-flex; gap: 7px; align-items: center; margin-left: auto; font-size: 16px; }
.copy-icon { display: block; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: url('https://cdn.jsdelivr.net/npm/lucide-static@0.468.0/icons/copy.svg') center / contain no-repeat; mask: url('https://cdn.jsdelivr.net/npm/lucide-static@0.468.0/icons/copy.svg') center / contain no-repeat; }
.eligibility { font-size: 17px; margin: 5px 0 14px; }
.arithmetic-and-photo { display: grid; grid-template-columns: minmax(0, 1fr) 154px; gap: 24px; align-items: center; }
.equation { display: flex; align-items: flex-start; gap: clamp(10px, 1.3vw, 24px); padding-top: 3px; padding-bottom: 12px; }
.eq-term { display: flex; flex-direction: column; min-width: 0; }
.eq-term > a { font-family: var(--display); font-size: clamp(2.6rem, 5.8vw, 6.2rem); line-height: 1.15; letter-spacing: -.04em; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.eq-term > a:hover { color: var(--petrol); }
.eq-term:first-child > a { border-bottom: 3px solid var(--ink); }
.eq-term:nth-child(3) > a { color: var(--petrol); border-bottom: 3px solid var(--petrol); }
.eq-term:last-child > a { color: var(--petrol); }
.eq-term small { display: block; font-size: 15px; line-height: 1.3; margin-top: 8px; max-width: 12ch; }
.operator { font-family: var(--display); color: var(--petrol); font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.5; }
.calculation + .calculation .eq-term > a { font-size: clamp(2.4rem, 4.4vw, 4.5rem); }
.calculation + .calculation .operator { font-size: clamp(1.8rem, 3.4vw, 3.5rem); }
.calculation.wide-amount .eq-term > a { font-size: clamp(1.75rem, 3.8vw, 3.8rem); }
.calculation.wide-amount .operator { font-size: 2rem; }
.calculation.long-amount .eq-term > a { font-size: clamp(1.3rem, 2.8vw, 3rem); }
.calculation.long-amount .operator { font-size: 2rem; }
.calculation.long-amount .arithmetic-and-photo { grid-template-columns: minmax(0, 1fr); }
.calculation.long-amount .small-photo { display: none; }
.small-photo { margin: 0; width: 154px; }
.small-photo img { width: 154px; height: 110px; object-fit: cover; display: block; }
.small-photo figcaption { font-size: 14px; line-height: 1.4; margin-top: 7px; }
.measure-fallback { display: block; background: var(--chalk); width: 100%; height: 100%; }
.small-photo .measure-fallback { height: 110px; }
.calculator-note { margin: 16px 0 0; font-size: 16px; max-width: 75ch; }
.calculator-note p { margin-bottom: .5rem; }
.input-message { font-size: 15px; margin-top: 14px; }
.status { font-size: 15px; min-height: 1.6em; margin: 10px 0 0; }
.calculation-sheet .status:empty { margin: 0; min-height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.record { font-size: 16px; margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.record time { color: var(--petrol); }
.chapter { margin-top: 54px; max-width: 76ch; }
.chapter h2 { margin-bottom: 22px; }
.chapter h3 { margin: 32px 0 14px; }
.chapter p { max-width: 65ch; }
.threshold { margin: 27px 0 30px; }
.threshold-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; border-bottom: 5px solid var(--petrol); padding-bottom: 14px; }
.threshold-line span { font-family: var(--display); font-size: 27px; }
.threshold-line strong { font-family: var(--display); font-size: 54px; font-weight: 500; line-height: 1; }
.threshold-line span:last-child { text-align: right; }
.threshold figcaption { margin-top: 12px; font-size: 16px; }
.remedy { border-left: 5px solid var(--petrol); padding-left: 28px; margin-top: 54px; }
.remedy h2 { max-width: 25ch; }
.question-link { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
.opening { border-bottom: 2px solid var(--petrol); padding-bottom: 28px; margin-bottom: 36px; }
.inner .opening .lead { margin-bottom: 0; }
.inner .chapter { margin-top: 35px; }
.formula { font-family: var(--display); font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1.3; margin: 25px 0 14px; color: var(--petrol); }
.formula a { text-decoration: none; border-bottom: 2px solid var(--line); }
.formula-caption { font-size: 16px; }
.working-example { margin: 30px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.working-example .formula { margin: 0 0 12px; }
.working-example p:last-child { margin-bottom: 0; }
.inner-photo { float: right; width: 235px; margin: 8px -10px 24px 35px; }
.inner-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.inner-photo .measure-fallback { height: 176px; }
.inner-photo figcaption { font-size: 15px; line-height: 1.4; margin-top: 9px; }
.inner-photo::after { content: ''; display: block; width: 40px; height: 4px; background: var(--petrol); margin-top: 16px; }
.faq-item { padding: 27px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
.faq-item h2 { font-size: 29px; margin: 0 0 17px; max-width: 35ch; }
.faq-item p { max-width: 65ch; margin-bottom: 0; }
.steps { padding-left: 1.6rem; max-width: 65ch; }
.steps li { margin: 0 0 24px; padding-left: 12px; }
.steps li::marker { font-family: var(--display); color: var(--petrol); font-size: 24px; }
.steps strong { display: block; margin-bottom: 6px; }
.footer { border-top: 2px solid var(--ink); max-width: 1392px; margin: 0 auto; padding: 30px 0 40px; display: grid; grid-template-columns: 215px 1fr; gap: clamp(32px, 5.5vw, 90px); }
.footer p { font-size: 16px; margin: 0 0 8px; max-width: 70ch; }
.footer .footer-name { font-family: var(--display); font-size: 22px; }
.footer a { font-size: 16px; }
.footer-links { display: flex; gap: 25px; flex-wrap: wrap; }
.not-found { min-height: 60vh; }
@media (min-width: 1600px) { .footer { max-width: 1392px; } }
@media (max-width: 1510px) { .footer { margin-inline: 4vw; } }
@media (max-width: 1120px) {
  .workspace { grid-template-columns: 170px minmax(0, 1fr); column-gap: 35px; }
  .arithmetic-and-photo { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
  .small-photo { width: 112px; }
  .small-photo img { width: 112px; height: 100px; }
  .small-photo .measure-fallback { height: 100px; }
  .eq-term > a { font-size: 5.6vw; }
  .footer { grid-template-columns: 170px 1fr; gap: 35px; }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .bench-inner { padding: 20px 22px; display: block; }
  .signature { margin-bottom: 22px; gap: 11px; }
  .signature span { font-size: 21px; }
  .signature strong { font-size: 26px; }
  .signature svg { width: 31px; height: 36px; }
  .input-workbench { gap: 9px; flex-wrap: wrap; }
  .input-label { font-size: 16px; width: 75px; }
  .currency-input { gap: 6px; padding: 4px 8px; flex: 1; }
  .currency-input input { width: 75px; font-size: 28px; }
  .currency-input span { font-size: 14px; }
  .calculate { padding: 7px 10px; font-size: 16px; }
  .bench-note { font-size: 16px; }
  .workspace { display: flex; flex-direction: column; padding: 27px 22px 48px; }
  .workings-index { position: static; order: 2; width: 100%; margin-top: 45px; padding: 24px 0 0; border-top: 2px solid var(--ink); }
  .workings-index ol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .workings-index li { margin: 0; }
  .index-label { margin-bottom: 17px; }
  .index-questions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; padding-top: 18px; }
  .index-questions a { margin: 0; }
  .index-foot { padding: 0; margin: 18px 0 0; }
  h1 { font-size: 39px; max-width: 18ch; letter-spacing: -.02em; }
  .lead { font-size: 18px; margin-top: 16px; }
  .home-title { margin-bottom: 23px; }
  .eyebrow { font-size: 16px; margin-bottom: 9px; }
  .calculation-sheet { margin-inline: -22px; padding: 20px 22px 18px; }
  .offer-code { font-size: 28px; }
  .offer-rate { font-size: 20px; }
  .offer-top { gap: 12px; }
  .copy { font-size: 16px; padding: 5px 9px; }
  .eligibility { font-size: 16px; margin-bottom: 12px; }
  .arithmetic-and-photo { display: block; }
  .equation { gap: 10px; }
  .eq-term > a { font-size: 48px; }
  .operator { font-size: 32px; }
  .eq-term small { font-size: 13px; max-width: 11ch; margin-top: 7px; }
  .calculation + .calculation .eq-term > a { font-size: 44px; }
  .calculation + .calculation .operator { font-size: 30px; }
  .calculation.wide-amount .eq-term > a { font-size: 28px; }
  .calculation.wide-amount .operator { font-size: 24px; }
  .calculation.wide-amount .equation { gap: 8px; }
  .calculation.long-amount .eq-term > a { font-size: 20px; }
  .calculation.long-amount .operator { font-size: 20px; }
  .calculation.long-amount .equation { gap: 6px; }
  .small-photo { display: none; }
  .calculator-note { font-size: 16px; }
  .record { font-size: 16px; }
  .chapter { margin-top: 37px; }
  .chapter h2 { margin-bottom: 17px; }
  .threshold-line { gap: 10px; }
  .threshold-line span { font-size: 22px; }
  .threshold-line strong { font-size: 46px; }
  .remedy { padding-left: 20px; }
  .inner-photo { width: 135px; margin: 6px 0 15px 18px; }
  .inner-photo .measure-fallback { height: 102px; }
  .inner-photo figcaption { font-size: 14px; }
  .faq-item h2 { font-size: 27px; }
  .footer { display: block; margin-inline: 22px; padding-top: 24px; }
  .footer-name { margin-bottom: 16px !important; }
  .footer-links { gap: 20px; margin-top: 18px; }
}
@media (max-width: 370px) {
  .bench-inner { padding-inline: 16px; }
  .workspace { padding-inline: 16px; }
  .calculation-sheet { margin-inline: -16px; padding-inline: 16px; }
  .eq-term > a { font-size: 41px; }
  .calculation + .calculation .eq-term > a { font-size: 39px; }
  .equation { gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .calculate, .copy { transition: background-color 120ms ease; }
}