/* ===========================================================================
   InvestVerdict — the written half of a calculator page
   ---------------------------------------------------------------------------
   Below every calculator sits a long article: how the thing is worked out, the
   rates it uses, worked examples, and the questions people actually ask. This
   styles that article on all five, from one file.

   IT IS ORDINARY, READABLE TEXT — ON PURPOSE
     There is no hidden text here, no white-on-white, no keyword block folded
     behind a display:none. Those tricks are the specific thing Google's spam
     policy names, and the penalty is not "this page ranks lower", it is the
     whole domain losing trust. Everything written here is meant to be read by
     a person; the ranking follows from that or it does not come at all.

   THE MEASURE IS DELIBERATELY NARROW
     Body text caps at ~72 characters. Long lines lose the reader at the line
     break — the eye has to hunt for the start of the next one — and this is
     text somebody is meant to read to the end, not skim.
   =========================================================================== */

.seo {
  background: #FAFAF9;
  border-top: 1px solid #E7E5E4;
  padding: 64px 0 20px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #292524;
}
.seo-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ── section rhythm ───────────────────────────────────────────────────── */
.seo section { padding: 34px 0; border-top: 1px solid #E7E5E4; }
.seo section:first-of-type { border-top: 0; padding-top: 0; }

.seo h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 8px;
}
.seo h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1C1917;
  margin: 26px 0 8px;
  letter-spacing: -0.01em;
}
.seo h4 { font-size: 14.5px; font-weight: 700; color: #292524; margin: 18px 0 6px; }

.seo p, .seo li {
  font-size: 15px;
  line-height: 1.78;
  color: #44403C;
  max-width: 72ch;
}
.seo p { margin: 0 0 14px; }
.seo ul, .seo ol { margin: 0 0 16px; padding-left: 22px; }
.seo li { margin-bottom: 8px; }
.seo strong { color: #1C1917; font-weight: 700; }
.seo a { color: #B45309; text-decoration: underline; text-underline-offset: 2px; }
.seo a:hover { color: #92400E; }

.seo .lede { font-size: 16.5px; line-height: 1.75; color: #292524; max-width: 74ch; }
.seo .kick {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B45309; margin-bottom: 10px;
}

/* ── tables: the rate cards that do the long-tail work ────────────────── */
.seo-tw { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
.seo table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; }
.seo th, .seo td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #E7E5E4; }
.seo th {
  background: #F5F5F4; font-weight: 700; color: #1C1917;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  position: sticky; top: 0;
}
.seo td { color: #44403C; }
.seo td.num, .seo th.num { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.seo tbody tr:hover td { background: #FFFBEB; }
.seo caption {
  caption-side: bottom; text-align: left; font-size: 12px; color: #78716C;
  padding-top: 10px; line-height: 1.6;
}

/* ── the FAQ ──────────────────────────────────────────────────────────── */
.seo-faq { border: 1px solid #E7E5E4; border-radius: 14px; overflow: hidden; background: #fff; }
.seo-faq details { border-bottom: 1px solid #E7E5E4; }
.seo-faq details:last-child { border-bottom: 0; }
.seo-faq summary {
  padding: 15px 46px 15px 18px;
  font-size: 14.5px; font-weight: 600; color: #1C1917;
  cursor: pointer; position: relative; list-style: none;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: #B45309; line-height: 1;
}
.seo-faq details[open] summary::after { content: '−'; }
.seo-faq summary:hover { background: #FFFBEB; }
.seo-faq .a { padding: 0 18px 16px; }
.seo-faq .a p { margin: 0 0 10px; font-size: 14.5px; }
.seo-faq .a p:last-child { margin: 0; }

/* ── callouts ─────────────────────────────────────────────────────────── */
.seo-note {
  border-left: 3px solid #F59E0B; background: #FFFBEB;
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0 0 18px;
}
.seo-note p:last-child { margin: 0; }
.seo-note.warn { border-left-color: #F43F5E; background: #FFF1F2; }

/* ── the example ledger ───────────────────────────────────────────────── */
.seo-eg { background: #fff; border: 1px solid #E7E5E4; border-radius: 14px; padding: 20px 22px; margin: 0 0 18px; }
.seo-eg h4 { margin-top: 0; }
.seo-eg dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; }
.seo-eg dt, .seo-eg dd {
  padding: 8px 0; border-bottom: 1px solid #F5F5F4; margin: 0; font-size: 14px;
}
.seo-eg dt { color: #57534E; }
.seo-eg dd { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; color: #1C1917; }
/* A total is a <div> wrapping its own dt and dd so the pair can be styled as
   one row. But the <dl> is a two-column grid, so that div became a single grid
   ITEM — it took one cell, stacked its label above its figure, and two totals
   in a row sat side by side instead of one under the other. `display:contents`
   dissolves the wrapper for layout while keeping it for styling, so the dt and
   dd land in the grid's own columns where they belong. */
.seo-eg .tot { display: contents; }
.seo-eg .tot dt, .seo-eg .tot dd { font-weight: 700; color: #1C1917; border-bottom: 0; border-top: 2px solid #292524; }
/* A second total straight after the first would otherwise draw a heavy rule
   between two lines that belong together. */
.seo-eg .tot + .tot dt, .seo-eg .tot + .tot dd { border-top: 1px solid #E7E5E4; }

/* ── steps ────────────────────────────────────────────────────────────── */
.seo-steps { list-style: none; padding: 0; counter-reset: s; }
.seo-steps li {
  counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 16px; max-width: 72ch;
}
.seo-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: #1C1917; color: #FCD34D;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ── the other calculators ────────────────────────────────────────────── */
.seo-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.seo-rel a {
  display: block; padding: 18px; border: 1px solid #E7E5E4; border-radius: 14px;
  background: #fff; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.seo-rel a:hover { border-color: #F59E0B; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.seo-rel .t { font-size: 15px; font-weight: 700; color: #1C1917; margin-bottom: 5px; }
.seo-rel .d { font-size: 13px; line-height: 1.6; color: #78716C; }

/* ── glossary ─────────────────────────────────────────────────────────── */
.seo-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 28px; }
.seo-gloss div { max-width: 46ch; }
.seo-gloss dt { font-size: 14px; font-weight: 700; color: #1C1917; margin-bottom: 3px; }
.seo-gloss dd { margin: 0; font-size: 13.5px; line-height: 1.7; color: #57534E; }

.seo-upd { font-size: 12.5px; color: #78716C; padding: 20px 0 0; border-top: 1px solid #E7E5E4; }

@media (max-width: 900px) {
  .seo { padding-top: 44px; }
  .seo-in { padding: 0 20px; }
  .seo p, .seo li { font-size: 14.5px; }
}

/* The article is the part worth printing; the rate tables especially. */
@media print {
  .seo { background: #fff; }
  .seo-faq details { display: block; }
  .seo-faq .a { display: block !important; }
}