/* ==========================================================================
   Benchmark Money — single card page
   --------------------------------------------------------------------------
   Light only, deliberately. The theme around it has no dark mode, so a
   calculator or card page that flips to dark on its own reads as broken
   rather than considerate. Same call as the calculator stylesheet.

   Everything is namespaced under .bm-cs so nothing can leak into the theme,
   and nothing the theme does can accidentally restyle a fee table.
   ========================================================================== */

.bm-cs {
  --cs-ink:      #0b0b0b;
  --cs-ink-2:    #52514e;
  --cs-muted:    #898781;
  --cs-line:     #e1e0d9;
  --cs-line-2:   #c3c2b7;
  --cs-surface:  #fcfcfb;
  --cs-plane:    #f9f9f7;
  --cs-accent:   #2a78d6;
  --cs-accent-d: #1c5ba6;
  --cs-good:     #006300;
  --cs-warn:     #fab219;
  --cs-radius:   10px;

  color-scheme: light;
  color: var(--cs-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  container-type: inline-size;
  margin-top: 22px;
}

.bm-cs *, .bm-cs *::before, .bm-cs *::after { box-sizing: border-box; }
.bm-cs p { margin: 0 0 12px; }
.bm-cs p:last-child { margin-bottom: 0; }

/* ---------- Summary ---------- */

.bm-cs__hero {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@container (min-width: 640px) {
  .bm-cs__hero { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
}

.bm-cs__img { width: 100%; border-radius: 10px; display: block; }

/* Generic artwork — no issuer's brand colours, nothing that could pass for
   the real product or imply the bank endorsed this page. */
.bm-cs__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.585;
  border-radius: 10px;
  padding: 14px 15px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg,
    hsl(var(--art-hue) 34% 30%) 0%,
    hsl(var(--art-hue) 30% 22%) 55%,
    hsl(calc(var(--art-hue) + 18) 32% 17%) 100%);
}
.bm-cs__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 42%);
}
.bm-cs__artchip {
  position: absolute; top: 15px; left: 15px;
  width: 32px; height: 24px; border-radius: 4px;
  background: linear-gradient(160deg, #e8d9a8, #bfa456);
}
.bm-cs__artissuer {
  position: relative; z-index: 1;
  font-size: 15px; font-weight: 650; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bm-cs__artnetwork {
  position: relative; z-index: 1;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.82;
}

.bm-cs__eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--cs-muted);
}

.bm-cs__stars { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-bottom: 8px; }
.bm-cs__startrack { position: relative; display: inline-block; }
.bm-cs__starempty { color: var(--cs-line); letter-spacing: 1px; }
.bm-cs__starfill {
  position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap;
  color: var(--cs-warn); letter-spacing: 1px;
}
.bm-cs__stars strong { font-weight: 700; }
.bm-cs__starof { font-size: 12.5px; color: var(--cs-muted); }

.bm-cs__bestfor {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(42, 120, 214, 0.09);
  color: var(--cs-accent-d);
  font-size: 13px; font-weight: 650;
}

.bm-cs__summary { font-size: 15.5px; color: var(--cs-ink-2); margin: 0 0 16px; }

/* The four figures somebody came here for. */
.bm-cs__keystats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.bm-cs__keystat {
  background: var(--cs-plane);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.bm-cs__keystat > span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cs-muted);
}
.bm-cs__keystat > strong {
  font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.bm-cs__keystat > strong em { font-size: 13px; font-weight: 500; font-style: normal; color: var(--cs-muted); }
.bm-cs__keystat > small { font-size: 11.5px; color: var(--cs-muted); }

.bm-cs__actions { margin-bottom: 10px; }

.bm-cs__cta {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--cs-accent);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px; font-weight: 650;
  transition: filter 120ms ease;
}
.bm-cs__cta:hover { filter: brightness(1.08); color: #fff !important; }
.bm-cs__cta:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 2px; }

.bm-cs__compliance {
  margin: 0;
  font-size: 11.5px; line-height: 1.6; color: var(--cs-muted);
  display: flex; flex-wrap: wrap; gap: 2px 14px;
}
.bm-cs__compliance a { color: var(--cs-muted); }

/* ---------- Sections ---------- */

.bm-cs__section { margin-top: 30px; }

.bm-cs__h2 {
  margin: 0 0 12px;
  font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cs-line);
}

/* ---------- Definition tables ---------- */

.bm-cs__dl { margin: 0; }

.bm-cs__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--cs-line);
}
.bm-cs__row:last-child { border-bottom: 0; }

.bm-cs__row dt { color: var(--cs-ink-2); font-size: 14.5px; }
.bm-cs__row dd {
  margin: 0;
  font-size: 15px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bm-cs__rownote {
  display: block;
  font-size: 12px; font-weight: 400; color: var(--cs-muted);
}

/* "Not published by the issuer" is a finding, not a formatting failure — it
   is set quietly but it is never hidden, because the absence is the point. */
.bm-cs__unstated { font-weight: 400; font-size: 13.5px; color: var(--cs-muted); font-style: italic; }

/* ---------- Prose blocks ---------- */

.bm-cs__prose {
  background: var(--cs-plane);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  padding: 15px 17px;
  font-size: 14.5px;
  color: var(--cs-ink-2);
}
.bm-cs__prose--caution { border-left: 3px solid var(--cs-warn); }

/* ---------- Pros and cons ---------- */

.bm-cs__proscons { display: grid; gap: 14px; grid-template-columns: 1fr; }
@container (min-width: 640px) { .bm-cs__proscons { grid-template-columns: 1fr 1fr; } }

.bm-cs__pros, .bm-cs__cons {
  background: var(--cs-plane);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  padding: 14px 16px;
}
.bm-cs__pros { border-left: 3px solid var(--cs-good); }
.bm-cs__cons { border-left: 3px solid var(--cs-warn); }

.bm-cs__pros h3, .bm-cs__cons h3 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--cs-ink-2);
}
.bm-cs__pros ul, .bm-cs__cons ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.bm-cs__pros li, .bm-cs__cons li { margin-bottom: 5px; }

/* ---------- Related cards ---------- */

.bm-cs__related { list-style: none; margin: 0; padding: 0; }

.bm-cs__relitem {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--cs-line);
}
.bm-cs__relitem:last-child { border-bottom: 0; }

.bm-cs__relitem a {
  font-size: 15px;
  font-weight: 650;
  color: var(--cs-accent-d);
  text-decoration: none;
}
.bm-cs__relitem a:hover { text-decoration: underline; }
.bm-cs__relitem span { font-size: 13px; color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* ---------- Close ---------- */

.bm-cs__close {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--cs-line);
}
.bm-cs__closeactions { margin-bottom: 14px; }
.bm-cs__back { font-size: 14.5px; }
.bm-cs__source { font-size: 12.5px; color: var(--cs-muted); line-height: 1.6; }
.bm-cs__source strong { color: var(--cs-ink-2); }

@media (prefers-reduced-motion: reduce) { .bm-cs__cta { transition: none; } }

@media print {
  .bm-cs__cta, .bm-cs__closeactions { display: none; }
  .bm-cs__hero, .bm-cs__prose, .bm-cs__pros, .bm-cs__cons { border: 1px solid #999; }
}

/* --------------------------------------------------------------------------
   Theme chrome that does not belong on a card page.

   The block theme prints a post date under the H1. On a blog post that is
   useful; on a credit card it is actively misleading — it looks like the
   card was published on that date, and a date from months ago reads as
   "this is stale" even when the rates were re-verified yesterday. The page
   carries its own "Rates and features verified <date>" line, which is the
   date that actually means something.

   This stylesheet only loads on single card pages, and the selector is
   scoped to the body class as well, so it cannot reach a blog post.
   -------------------------------------------------------------------------- */
body.single-card .wp-block-post-date { display: none; }