/* ─────────────────────────────────────────────────────────────────────────
   Reckon theme stylesheet. Tokens per design handoff:
   ink #14163a · accent #3358ff · page #eef1f8 · panel #f4f6fc
   Fonts: Bricolage Grotesque (display) / Space Grotesk (UI) / Newsreader (prose)
   Signature: 2px solid ink borders, sharp corners.
   ───────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #eef1f8; color: #14163a;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
input:focus { outline: none; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.wordmark { font: 800 26px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }
.wordmark span { color: #3358ff; }

.eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: #8b90b0;
}
.eyebrow .ms { font-size: 20px; color: #8b90b0; }
.eyebrow .ms.star { color: #f5a623; }
.eyebrow .ms.trend { color: #e6812b; }

/* ── Home ─────────────────────────────────────────────────────────────── */

.site-head { border-bottom: 2px solid #14163a; background: #f4f6fc; position: sticky; top: 0; z-index: 10; }
.site-head-in {
  max-width: 1140px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.lang-wrap { display: flex; align-items: center; gap: 8px; }
.lang-wrap > .ms { font-size: 20px; color: #8b90b0; }
.lang-select {
  border: 2px solid #14163a; background: #ffffff; padding: 8px 12px;
  font: 700 13px 'Space Grotesk', sans-serif; color: #14163a; cursor: pointer;
}

.home-wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

.hero { padding: 72px 0 40px; max-width: 840px; }
.tagline { font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3358ff; }
.hero h1 { margin: 16px 0 20px; font: 800 58px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; color: #14163a; }
.hero h1 .hl { background: #3358ff; color: #ffffff; padding: 0 12px; }
.hero-sub { margin: 0 0 32px; font: 400 22px/1.5 'Newsreader', serif; color: #3c4066; max-width: 620px; }

.search-bar { display: flex; align-items: center; border: 2px solid #14163a; background: #ffffff; max-width: 620px; }
.search-bar .glyph { padding: 0 6px 0 18px; font: 500 20px 'Space Grotesk', sans-serif; color: #9aa3c7; }
.search-bar input {
  flex: 1; border: none; background: transparent; padding: 16px 16px 16px 8px;
  font: 500 18px 'Space Grotesk', sans-serif; color: #14163a; width: 100%;
}
.search-count { margin-top: 14px; font: 500 14px 'Space Grotesk', sans-serif; color: #8b90b0; }

.no-results { padding: 40px 0 100px; text-align: center; }
.no-results .big { font: 800 40px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }
.no-results p { margin: 12px 0 0; font: 400 18px 'Newsreader', serif; color: #8b90b0; }

.row-section { padding: 20px 0 8px; }
.row-section.first { padding-top: 12px; }
.popular-section { padding: 20px 0 8px; }

.about-section { padding: 20px 0 90px; }
.about-box { border: 2px solid #14163a; background: #ffffff; padding: 38px 44px; }
.about-box h2 { margin: 0 0 16px; font: 800 32px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }
.about-box p { margin: 0 0 16px; font: 400 18px/1.6 'Newsreader', serif; color: #3c4066; max-width: 70ch; }
.about-box p:last-child { margin-bottom: 0; }

.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px; border: 2px solid #14163a; background: #ffffff; color: #14163a;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(20, 22, 58, .45); }
.card .card-top { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 14px; }
.card .open-label { font: 700 14px 'Space Grotesk', sans-serif; }
.card .kicker { font: 700 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.card .title { font: 700 22px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.star-btn { border: none; background: transparent; cursor: pointer; padding: 0; line-height: 0; }
.star-btn .ms { font-size: 27px; color: #c2c8de; }
.star-btn.on .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; color: #f5a623; }

.card.soon {
  border: 2px dashed #c2c8de; background: transparent; color: #9aa0bd;
  transition: none;
}
.card.soon:hover { transform: none; box-shadow: none; }
.card.soon .kicker { color: #b3b8d0; }
.soon-pill {
  margin-top: 6px; align-self: flex-start;
  font: 700 11px 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #9aa0bd; border: 1.5px solid #c2c8de; padding: 3px 8px; border-radius: 999px;
}

.cat-stack { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.cat-row { border: 2px solid #14163a; background: #ffffff; }
.cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 28px; cursor: pointer;
}
.cat-head:hover { background: #f4f6fc; }
.cat-head-l { display: flex; align-items: center; gap: 20px; }
.cat-tile {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cat-tile .ms { font-size: 30px; }
.cat-name { font: 800 30px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }
.cat-blurb { margin-top: 8px; font: 400 16px 'Newsreader', serif; color: #3c4066; }
.cat-head-r { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cat-count { font: 600 13px 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.chev {
  width: 36px; height: 36px; border: 2px solid #14163a; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 600 22px 'Space Grotesk', sans-serif; color: #14163a; flex: 0 0 auto;
}
.chev::before { content: '+'; }
.cat-body {
  display: none; padding: 22px 28px 28px;
  grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cat-row.expanded .cat-body { display: grid; }
.cat-row.expanded .cat-head { border-bottom: 2px solid #14163a; }
.cat-row.expanded .chev::before { content: '\2013'; }

/* ── Calculator page ──────────────────────────────────────────────────── */

.calc-outer { display: flex; justify-content: center; padding: 48px 24px 80px; }
.calc-wrap { width: 100%; max-width: 1000px; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.topbar .wordmark { font-size: 22px; }
.topbar-r { display: flex; align-items: center; gap: 12px; }
.topbar-r .lang-select { padding: 9px 12px; }
.fav-btn {
  display: flex; align-items: center; gap: 8px; border: 2px solid #14163a;
  background: #ffffff; color: #14163a; padding: 9px 15px; cursor: pointer;
  font: 700 13px 'Space Grotesk', sans-serif;
}
.fav-btn .ms { font-size: 19px; }
.fav-btn.on { background: #fff8e6; color: #f5a623; }
.fav-btn.on .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.all-link { font: 600 14px 'Space Grotesk', sans-serif; color: #3358ff; }

.chiprow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.chip-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border: 2px solid #14163a;
  background: #ffffff; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.chip-arrow:hover { background: #f4f6fc; }
.chip-arrow .ms { font-size: 22px; color: #14163a; }
.cat-scroll {
  flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; padding: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  border: 2px solid #14163a; padding: 9px 15px; background: #ffffff;
  font: 700 13px 'Space Grotesk', sans-serif; color: #14163a; white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }

.restored-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 2px solid #dfe3f0; background: #f4f6fc; padding: 11px 16px; margin-bottom: 18px;
}
.restored-bar .note { font: 500 13px 'Space Grotesk', sans-serif; color: #656a8f; }
.restored-bar .reset { font: 700 13px 'Space Grotesk', sans-serif; color: #3358ff; cursor: pointer; }

.calc-article {
  background: #f4f6fc; border: 2px solid #14163a;
  box-shadow: 0 24px 60px -30px rgba(20, 22, 58, .4); color: #14163a; overflow: hidden;
}
.article-head { padding: 44px 52px 0; }
.kicker-chip-row { display: flex; gap: 8px; margin-bottom: 24px; }
.kicker-chip {
  font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; background: #14163a; color: #f4f6fc; padding: 6px 12px;
}
.calc-h1 { margin: 0 0 34px; font: 800 74px/.92 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; }
.calc-h1 .hl { background: #3358ff; padding: 0 10px; color: #ffffff; }

.hero-band {
  background: #3358ff; padding: 38px 52px; display: flex;
  justify-content: space-between; align-items: flex-end;
  border-top: 2px solid #14163a; border-bottom: 2px solid #14163a;
}
.hero-label {
  font: 700 13px 'Space Grotesk', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #ccd6ff; margin-bottom: 8px;
}
.hero-val { font: 800 82px/.9 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; color: #ffffff; }
.hero-meta { text-align: right; font: 600 16px 'Space Grotesk', sans-serif; color: #ccd6ff; line-height: 1.7; }

.article-body { padding: 40px 52px 52px; }

.inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; margin-bottom: 34px; }
.fld.full { grid-column: 1 / -1; }
.fld > label {
  display: block; font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #656a8f; margin-bottom: 8px;
}
.tfield { display: flex; align-items: center; border: 2px solid #14163a; background: #ffffff; }
.tfield .affix { padding: 0 12px; font: 600 18px 'Space Grotesk', sans-serif; color: #9aa3c7; }
.tfield input {
  flex: 1; border: none; background: transparent; padding: 12px;
  font: 600 19px 'Space Grotesk', sans-serif; color: #14163a; width: 100%;
}
.range-readout { font: 700 15px 'Space Grotesk', sans-serif; color: #3358ff; margin: -2px 0 10px; }
.fld input[type=range] { width: 100%; accent-color: #3358ff; }
.seg { display: flex; gap: 10px; }
.seg-btn {
  flex: 1; padding: 13px 0; text-align: center; cursor: pointer;
  border: 2px solid #14163a; background: #f4f6fc; color: #14163a;
  font: 700 15px 'Bricolage Grotesque', sans-serif;
}
.seg-btn.active { background: #3358ff; color: #ffffff; }
.sel {
  width: 100%; border: 2px solid #14163a; background: #ffffff; padding: 12px 14px;
  font: 700 15px 'Bricolage Grotesque', sans-serif; color: #14163a;
}

.bd-box { display: grid; grid-template-columns: 1fr; gap: 0; border: 2px solid #14163a; margin-bottom: 34px; }
.bd-box.cols-2 { grid-template-columns: 1fr 1fr; }
.bd-list { padding: 22px 24px; }
.bd-box.cols-2 .bd-list { border-right: 2px solid #14163a; }
.bd-row { display: flex; justify-content: space-between; padding: 8px 0; font: 600 15px 'Space Grotesk', sans-serif; }
.bd-row.strong { font-weight: 700; border-top: 1px solid #e2e5f2; margin-top: 4px; padding-top: 12px; }
.bd-row .lbl { color: #656a8f; }
.bd-row .val { color: #14163a; }
.bd-row .val.accent { color: #3358ff; }
.split-panel { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.split-title {
  font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #656a8f; margin-bottom: 12px;
}
.split-bar { display: flex; height: 28px; border: 2px solid #14163a; overflow: hidden; }
.split-bar .a { background: #14163a; }
.split-bar .b { background: #3358ff; }
.split-legend { display: flex; justify-content: space-between; margin-top: 8px; font: 600 13px 'Space Grotesk', sans-serif; }
.split-legend .b { color: #3358ff; }

.sec-h2 { margin: 0 0 14px; font: 800 32px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }

.chart-box { border: 2px solid #14163a; padding: 18px 20px; margin-bottom: 34px; }
.chart-box svg { display: block; }
.chart-axes { display: flex; justify-content: space-between; margin-top: 10px; font: 600 12px 'Space Grotesk', sans-serif; color: #8b90b0; }

.table-box { border: 2px solid #14163a; margin-bottom: 34px; }
.t-head {
  display: grid; grid-template-columns: 60px 1fr 1fr 1fr; background: #14163a;
  color: #f4f6fc; padding: 11px 18px; font: 700 11px 'Space Grotesk', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.t-head span:last-child { text-align: right; }
.t-body { max-height: 250px; overflow: auto; }
.t-row {
  display: grid; grid-template-columns: 60px 1fr 1fr 1fr;
  padding: 9px 18px; border-bottom: 1px solid #e6e8f4;
  font: 500 14px 'Space Grotesk', sans-serif; color: #1e2140;
}
.t-row span:first-child { color: #3358ff; font-weight: 700; }
.t-row span:last-child { text-align: right; }

.formula-box { background: #14163a; color: #f4f6fc; padding: 28px 32px; margin-bottom: 34px; }
.formula-box h2 { margin: 0 0 14px; font: 800 26px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #f4f6fc; }
.formula { font: 500 22px 'Space Grotesk', sans-serif; color: #8aa2ff; }
.formula .katex { font-size: 1.55em; color: #8aa2ff; }
.formula .katex-display { margin: 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden; }
/* Inline math inside SEO prose sits on the body text baseline/colour. */
.seo-sec .katex { font-size: 1.04em; }
.formula-legend { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.formula-legend div { font: 400 15px 'Newsreader', serif; color: #c2c6e0; }
.formula-legend b { font-family: 'Space Grotesk', sans-serif; color: #8aa2ff; }

.how-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 32px; }
.how-faq h2 { margin: 0 0 12px; font: 800 26px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; }
.how-faq .intro { margin: 0; font: 400 17px/1.6 'Newsreader', serif; color: #3c4066; }
.faq-item { margin-bottom: 14px; }
.faq-q { font: 700 16px 'Space Grotesk', sans-serif; margin-bottom: 5px; }
.faq-a { margin: 0; font: 400 15px/1.5 'Newsreader', serif; color: #656a8f; }

.related-share { border-top: 2px solid #14163a; padding-top: 26px; }
.related-eyebrow {
  font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #3358ff; margin-bottom: 14px;
}
.related-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.rel-chip { border: 2px solid #14163a; padding: 11px 18px; font: 700 15px 'Space Grotesk', sans-serif; color: #14163a; }
.share-row { display: flex; gap: 12px; }
.btn-primary, .btn-ghost {
  border: 2px solid #14163a; padding: 13px 26px; cursor: pointer;
  font: 700 15px 'Bricolage Grotesque', sans-serif;
}
.btn-primary { background: #3358ff; color: #ffffff; }
.btn-ghost { background: #f4f6fc; color: #14163a; }

.seo-sec { margin-top: 40px; border-top: 2px solid #14163a; padding-top: 34px; }
.seo-sec h2 { margin: 0 0 12px; font: 800 26px 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }
.seo-sec p { margin: 0 0 26px; font: 400 17px/1.65 'Newsreader', serif; color: #3c4066; max-width: 70ch; }

/* rails below the article */
.rail { margin: 36px 0 0; }
.rail.first { margin-top: 44px; }
.rail-cards { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.mini-card {
  flex: 0 0 auto; width: 236px; display: flex; flex-direction: column; gap: 6px;
  border: 2px solid #14163a; background: #ffffff; padding: 16px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mini-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(20, 22, 58, .45); }
.mini-card .kicker { font: 700 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mini-card .title { font: 700 20px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; color: #14163a; }

.foot-note {
  max-width: 1000px; margin: 36px auto 0; font: 400 13px/1.5 'Space Grotesk', sans-serif;
  color: #8b90b0; text-align: center;
}

[hidden] { display: none !important; }