:root {
  --navy:#243B64; --teal:#1F7A78; --amber:#D6A84F; --coral:#C96C5B; --slate:#98A2B3;
  --ink:#1B2433; --body:#3D4759; --muted:#667085;
  --bg:#FFFFFF; --panel:#F6F8FB; --line:#E3E8EF; --field:#FFFFFF;
  --radius:10px;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#EAEEF5; --body:#C3CBD9; --muted:#9AA5B8;
    --bg:#141922; --panel:#1C232F; --line:#2C3542; --field:#10151D;
    --navy:#8FB0E6; --teal:#5CC3BF; --slate:#7A8699;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--body);
  font:16px/1.65 var(--sans);
}
.wrap { max-width:820px; margin:0 auto; padding:0 20px; }
h1,h2,h3 { color:var(--ink); line-height:1.25; margin:2em 0 .5em; font-weight:650; }
h1 { font-size:2rem; margin-top:1.2em; letter-spacing:-.015em; }
h2 { font-size:1.35rem; }
h3 { font-size:1.08rem; }
p, li { margin:0 0 1em; }
a { color:var(--teal); text-underline-offset:2px; }
a:hover { color:var(--navy); }
code { font:.92em var(--mono); background:var(--panel); padding:.12em .35em; border-radius:4px; }

/* --- chrome ---------------------------------------------------------------- */
header.site {
  border-bottom:1px solid var(--line); background:var(--panel);
}
header.site .wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.brand { font-weight:700; color:var(--ink); text-decoration:none; font-size:1.05rem; letter-spacing:-.01em; }
.brand span { color:var(--teal); }
header.site nav { margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; }
header.site nav a { color:var(--body); text-decoration:none; font-size:.93rem; }
header.site nav a:hover { color:var(--teal); text-decoration:underline; }
footer.site { border-top:1px solid var(--line); margin-top:64px; padding:28px 0 44px; color:var(--muted); font-size:.88rem; }
footer.site a { color:var(--muted); }

/* --- the direct answer an engine extracts ---------------------------------- */
.answer {
  border-left:3px solid var(--teal); background:var(--panel);
  padding:14px 18px; margin:0 0 28px; border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink); font-size:1.06rem;
}
.answer p:last-child { margin-bottom:0; }
.updated { color:var(--muted); font-size:.85rem; margin:-.4em 0 1.6em; }

/* --- calculator ------------------------------------------------------------ */
.calc { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:28px 0; }
.calc h2 { margin-top:0; }
.field { margin:0 0 16px; }
.field label { display:block; font-weight:600; color:var(--ink); font-size:.93rem; margin-bottom:4px; }
.field .hint { display:block; color:var(--muted); font-size:.84rem; margin-bottom:6px; }
.field input, .field select {
  width:100%; padding:9px 11px; font:inherit; color:var(--ink);
  background:var(--field); border:1px solid var(--line); border-radius:7px;
}
.field input:focus, .field select:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 18px; }
/* Hints wrap to different line counts, which otherwise leaves the inputs in a row sitting
   at different heights. Bottom-align them instead of trimming the hints. */
.grid2 .field { display:flex; flex-direction:column; }
.grid2 .field input, .grid2 .field select { margin-top:auto; }
.result { border-top:1px solid var(--line); margin-top:6px; padding-top:18px; }
.readout { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.readout .big { font-size:2.4rem; font-weight:700; color:var(--navy); line-height:1; letter-spacing:-.02em; }
.readout .lab { color:var(--muted); font-size:.9rem; }
.bar { height:9px; background:var(--line); border-radius:99px; overflow:hidden; margin:12px 0; }
.bar > i { display:block; height:100%; background:var(--teal); width:0; border-radius:99px; transition:width .2s ease; }
.pill { display:inline-block; padding:3px 11px; border-radius:99px; font-size:.85rem; font-weight:600; }
.pill.ok   { background:rgba(31,122,120,.14); color:var(--teal); }
.pill.warn { background:rgba(214,168,79,.18); color:#8A6A22; }
.pill.bad  { background:rgba(201,108,91,.16); color:var(--coral); }
@media (prefers-color-scheme: dark) { .pill.warn { color:var(--amber); } }
.rows { width:100%; border-collapse:collapse; margin:14px 0 0; font-size:.94rem; }
.rows th, .rows td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
.rows th { color:var(--muted); font-weight:600; }
.rows td.num { text-align:right; font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; }

/* --- offer ----------------------------------------------------------------- */
.offer {
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:36px 0;
  background:var(--bg);
}
.offer h2 { margin-top:0; font-size:1.15rem; }
.offer ul { margin:0 0 16px; padding-left:20px; }
.offer li { margin-bottom:.35em; }
.btn {
  display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
  padding:11px 20px; border-radius:8px; font-weight:600; font-size:.96rem;
}
.btn:hover { background:var(--teal); color:#fff; }
@media (prefers-color-scheme: dark) { .btn { color:#111821; } .btn:hover { color:#111821; } }

/* --- faq ------------------------------------------------------------------- */
.faq h3 { margin-bottom:.2em; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:24px 0; padding:0; list-style:none; }
.cards li { margin:0; }
.card {
  display:block; height:100%; padding:18px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
}
.card:hover { border-color:var(--teal); }
.card strong { display:block; color:var(--ink); margin-bottom:6px; font-size:1.02rem; }
.card span { color:var(--body); font-size:.91rem; }
noscript .answer { border-left-color:var(--amber); }