/* ============================================================
   Alpha Finance: blog post skin
   Everything specific to a long-form editorial post: the article hero with
   its trust badges, the key-takeaways card, the featured-platform box, the
   sources list and the author / fact-checker cards. Loaded after alpha.css
   and article.css, which carry the shared prose, rail and FAQ furniture.
   ============================================================ */

/* ---------- article hero ---------- */

.posthero {
  border-bottom: 1px solid var(--line);
  padding: 30px 0 24px;
  background:
    radial-gradient(60% 130% at 85% -20%, color-mix(in srgb, var(--lime) 5%, transparent), transparent 60%),
    var(--bg-2);
}
.posthero-inner { max-width: 860px; }

.posthero h1 {
  font-family: var(--display);
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin-bottom: 12px;
}
.posthero .dek {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 44em;
}

/* byline: one compact row under the dek. Same .credit grammar as the buy
   guides, restated here so the blog skin does not depend on buy.css. The
   fact-check credit carries its own popover, and the disclosure is a plain
   link pushed to the far edge, so trust chrome adds no extra rows. */
.postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.postmeta .credit-disc {
  margin-left: auto;
  color: var(--faint);
  transition: color 0.15s;
}
.postmeta .credit-disc:hover { color: var(--lime); }
.credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.credit b { color: var(--text-2); font-weight: 500; }
.credit a { transition: color 0.15s; }
.credit a:hover { color: var(--lime); }
.credit-date { color: var(--faint); }
.credit-date b { color: var(--muted); font-weight: 400; }
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line-2);
  background: var(--panel);
}
.avatar-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- fact-check popover (YMYL chrome) ----------
   The verification claim lives on the byline itself: the fact-checked credit
   shows a small shield and opens a popover on hover or keyboard focus, so
   the claim is inspectable without adding a row of chrome to the hero. */

.credit-fc { position: relative; cursor: help; }
.credit-fc > .fc-shield {
  width: 12px;
  height: 12px;
  color: var(--lime-dim);
  flex-shrink: 0;
}
.credit-fc b {
  border-bottom: 1px dotted var(--faint);
  padding-bottom: 1px;
}
.credit-fc:hover b, .credit-fc:focus-within b { border-bottom-color: var(--lime-dim); }

.fc-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: 290px;
  padding: 13px 15px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.credit-fc:hover .fc-pop,
.credit-fc:focus-within .fc-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fc-pop h5 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 7px;
}
.fc-pop p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 9px;
}
.fc-pop a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--lime);
}
.fc-pop a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- key takeaways ----------
   No border: four lime corner marks, like a terminal viewfinder, drawn as
   background strokes so the box needs no extra markup. */

.takeaways {
  --cm: 12px;   /* corner mark length */
  --cw: 1.5px;  /* corner mark weight */
  --cc: linear-gradient(var(--lime), var(--lime));
  background:
    var(--cc) left top / var(--cm) var(--cw),
    var(--cc) left top / var(--cw) var(--cm),
    var(--cc) right top / var(--cm) var(--cw),
    var(--cc) right top / var(--cw) var(--cm),
    var(--cc) left bottom / var(--cm) var(--cw),
    var(--cc) left bottom / var(--cw) var(--cm),
    var(--cc) right bottom / var(--cm) var(--cw),
    var(--cc) right bottom / var(--cw) var(--cm),
    var(--panel);
  background-repeat: no-repeat;
  padding: 18px 20px 8px;
  margin: 0 0 28px;
}
.takeaways h2 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 11px;
}
.takeaways li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px; height: 6px;
  background: var(--lime-dim);
}
.takeaways li strong { color: var(--text); font-weight: 600; }

/* ---------- featured platform box ----------
   One compact card: name, tag and score on the first line with the button
   opposite, a two-line verdict, the specs as a single strip of stats, and the
   disclosure tucked underneath. */

.featplat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand cta"
    "verdict verdict"
    "specs specs"
    "fine fine";
  align-items: center;
  column-gap: 20px;
  padding: 16px 18px 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--panel);
  margin: 0 0 34px;
  /* no overflow clip: the score popover opens out of the box */
  position: relative;
}

.fp-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.fp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--b, var(--text));
  flex-shrink: 0;
}
.fp-icon img, .fp-icon svg { width: 18px; height: 18px; }
.fp-name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.fp-cta { grid-area: cta; display: flex; align-items: center; gap: 14px; }
/* the box lives inside .prose, whose link colour would otherwise paint the
   button text lime-on-lime */
.prose .fp-cta .btn-lime { color: #0a0b0d; }
.fp-cta .btn { padding: 8px 15px; font-size: 12.5px; white-space: nowrap; }
.fp-more {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.15s;
}
.prose .fp-more { color: var(--muted); }
.fp-more:hover, .prose .fp-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* .prose p would otherwise restyle every paragraph in the box, so the box's
   own type is stated at higher specificity */
.fp-verdict, .prose .fp-verdict {
  grid-area: verdict;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 10px 0 0;
  max-width: 92ch;
}

.fp-specs {
  grid-area: specs;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fp-specs > div { padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.fp-specs > div:first-child { padding-left: 0; border-left: 0; }
.fp-specs dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.fp-specs dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}

.fp-fine, .prose .fp-fine {
  grid-area: fine;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 9.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--faint);
  opacity: 0.85;
}
.fp-fine svg { width: 10px; height: 10px; flex-shrink: 0; margin-top: 2px; color: var(--faint); }
.fp-fine a, .prose .fp-fine a {
  color: var(--faint);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--faint) 50%, transparent);
  text-underline-offset: 2px;
}
.fp-fine a:hover, .prose .fp-fine a:hover { color: var(--muted); text-decoration-color: var(--muted); }

@media (max-width: 640px) {
  .featplat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "verdict" "cta" "specs" "fine";
    padding: 14px 14px 12px;
  }
  .fp-cta { margin-top: 12px; }
  .fp-specs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .fp-specs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- figures ---------- */

.postfig { margin: 26px 0 30px; }
.postfig .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--line) 45%, transparent) 14px 15px),
    var(--panel);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.postfig img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.postfig figcaption {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* ---------- sources (YMYL: every claim traceable) ---------- */

.sources { margin-top: 6px; }
.sources ol { counter-reset: src; list-style: none; margin: 0; padding: 0; }
.sources li {
  counter-increment: src;
  position: relative;
  padding: 9px 0 9px 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.sources li:last-child { border-bottom: 0; }
.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--lime-dim);
}
.sources li a { color: var(--text); }
.sources li a:hover { color: var(--lime); }
/* the sources are a list of links already: no underline on each */
.prose .sources li a { text-decoration: none; }
.sources .src-meta { color: var(--muted); }

/* ---------- author + fact-checker cards ---------- */

.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
/* the prose rules reach every p and h3 inside the article, so the cards
   restate their own spacing at higher specificity */
.prose .who {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 16px 18px 17px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.prose .who > div { min-width: 0; }
.prose .who .avatar { width: 40px; height: 40px; margin-top: 1px; }
.prose .who .avatar-fb { font-size: 12px; }
.prose .who .who-role {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-dim);
}
.prose .who h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.prose .who p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.prose .who p a { color: var(--text-2); }
.prose .who p a:hover { color: var(--lime); }

/* ---------- rail extras ---------- */

/* scrollspy state written by blog.js */
.toc a.on { color: var(--lime); }

/* ---------- related posts ---------- */

.postrel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.postrel {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 17px 18px 19px;
  transition: border-color 0.15s, transform 0.15s;
}
.postrel:hover { border-color: var(--lime-dim); transform: translateY(-2px); }
.postrel .cat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-dim);
  margin-bottom: 9px;
}
.postrel h4 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 7px;
}
.postrel p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .postrel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fc-pop { width: min(290px, 82vw); }
  .postmeta .credit-disc { margin-left: 0; }
}

/* ---------- board-era chrome ---------- */
.takeaways h2 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.fc-pop h5 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
/* ---------- desk score popover ----------
   Same grammar as the fact-check popover: the claim is inspectable where it
   is made. Hover or keyboard focus on the score opens the weighted rows that
   produce it. Anchored to the left edge because the score sits beside the
   platform name. */
.fp-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  cursor: help;
  outline: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.fp-score b { font-size: 14px; font-weight: 600; color: var(--lime); letter-spacing: 0; }
.fp-score i { font-style: normal; font-size: 9px; color: var(--lime-dim); letter-spacing: 0; }
.fp-score-k { border-bottom: 1px dotted var(--faint); padding-bottom: 1px; }
.fp-score:hover .fp-score-k,
.fp-score:focus-visible .fp-score-k { border-bottom-color: var(--lime-dim); }
.fp-score-i { width: 11px; height: 11px; align-self: center; color: var(--faint); transition: color 0.15s; }
.fp-score:hover .fp-score-i,
.fp-score:focus-visible .fp-score-i { color: var(--lime-dim); }

.score-pop {
  position: absolute;
  top: calc(100% + 12px);
  left: -6px;
  z-index: 40;
  display: block;
  width: 332px;
  padding: 14px 16px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
/* a bridge over the gap so the pointer can travel from the score to the link */
.score-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
.fp-score:hover .score-pop,
.fp-score:focus-within .score-pop { opacity: 1; visibility: visible; transform: translateY(0); }

.score-pop .sp-h { display: block; font-size: 12.5px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.score-pop .sp-sub { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 11px; }
.score-pop .sp-rows { display: block; border-top: 1px solid var(--line); }
.score-pop .sp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 64px 26px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.score-pop .sp-k { font-size: 12.5px; color: var(--text-2); }
.score-pop .sp-w { font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right; }
.score-pop .sp-bar { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.score-pop .sp-bar i { display: block; height: 100%; background: var(--lime-dim); }
.score-pop .sp-v { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.score-pop .sp-note { display: block; margin: 10px 0 9px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.score-pop a, .prose .score-pop a { font-size: 12px; color: var(--lime); }
.score-pop a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .score-pop { width: min(332px, calc(100vw - 58px)); }
}

/* ---------- sources: tighter heading, full-width rows ---------- */
.prose .sources li { padding-left: 34px; counter-increment: src; }
/* .prose ol li::before outranks .sources li::before, and its counter is never
   reset here, so the list would carry on from the last ordered list */
.prose .sources li::before { content: counter(src, decimal-leading-zero); top: 11px; width: auto; height: auto; background: none; }

/* ---------- subheadings in a post: clearly a step down from h2 (26px), well above body (15px) ---------- */
body.post #post-body > h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 34px 0 10px; }
@media (max-width: 640px) { body.post #post-body > h3 { font-size: 18px; margin-top: 28px; } }