/* FinBedrock 0.1.2 — add after design-tokens.css; scope every rule.
 * Classes use the fbds- prefix: legacy theme classes (fb-faq, fb-card-summary,
 * fb-btn-apply…) and the new components must never match the same markup. */
.fb-ds-v01, .fb-ds-v01 * { box-sizing: border-box; }
.fb-ds-v01 { font-family: var(--fb-font-sans); color: var(--fb-color-text); line-height: var(--fb-leading-body); }
.fb-ds-v01 [hidden] { display: none !important; }
.fb-ds-v01 h1, .fb-ds-v01 h2, .fb-ds-v01 h3, .fb-ds-v01 h4 { color: var(--fb-color-heading); font-weight: var(--fb-weight-bold); text-wrap: balance; }
.fb-ds-v01 h1 { font-size: var(--fb-text-h1); line-height: var(--fb-leading-heading); letter-spacing: -0.035em; }
.fb-ds-v01 h2 { font-size: var(--fb-text-h2); line-height: 1.2; letter-spacing: -0.025em; }
.fb-ds-v01 h3 { font-size: var(--fb-text-lg); line-height: 1.35; letter-spacing: -0.015em; }
.fb-ds-v01 a { color: var(--fb-color-action); text-underline-offset: 0.2em; }
.fb-ds-v01 button, .fb-ds-v01 input, .fb-ds-v01 select, .fb-ds-v01 textarea { font: inherit; }
.fb-ds-v01 :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--fb-color-focus); outline-offset: 3px; }
.fb-ds-v01 :is(a, p, h1, h2, h3, h4, li, code) { overflow-wrap: break-word; }

/* Inside a component its own spacing rules; zero-specificity reset so any
   component or layout rule below wins. Article text (.fbds-article) keeps flow margins. */
.fb-ds-v01 :where(.fbds-card, .fbds-hero, .fbds-result, .fbds-notice, .fbds-stack, .fbds-glance, .fbds-apply, .fbds-proscons, .fbds-faq, .fbds-sticky-cta, .fbds-verdict, .fbds-stat) :where(h1, h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; }

/* Layout */
.fb-ds-v01 .fbds-page { background: var(--fb-color-page); }
.fb-ds-v01 .fbds-container { width: min(100%, var(--fb-layout-wide)); margin-inline: auto; padding-inline: var(--fb-gutter); }
/* Content sheet: the white panel that holds an article on the light page (today's Kadence .content-bg). */
.fb-ds-v01 .fbds-sheet { display: grid; gap: var(--fb-space-6); padding: clamp(var(--fb-space-5), 3vw, var(--fb-space-8)); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); }
.fb-ds-v01 .fbds-sheet > * { min-width: 0; }
.fb-ds-v01 .fbds-section { padding-block: var(--fb-space-16); scroll-margin-top: 1rem; }
.fb-ds-v01 .fbds-stack > * + * { margin-top: var(--fb-space-5); }
.fb-ds-v01 .fbds-row { display: flex; gap: var(--fb-space-3); align-items: center; flex-wrap: wrap; }
.fb-ds-v01 .fbds-grid { display: grid; gap: var(--fb-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.fb-ds-v01 .fbds-grid > *, .fb-ds-v01 .fbds-split > * { min-width: 0; }
.fb-ds-v01 .fbds-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--fb-space-8); }

/* Text */
.fb-ds-v01 .fbds-body { font-size: var(--fb-text-body); }
.fb-ds-v01 .fbds-small { font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-muted { color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-eyebrow { font-size: var(--fb-text-xs); font-weight: var(--fb-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; }
.fb-ds-v01 .fbds-numeric { font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fb-ds-v01 .fbds-mono { font-family: var(--fb-font-mono); font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-article { max-width: var(--fb-layout-article); font-size: var(--fb-text-body); }
.fb-ds-v01 .fbds-article--wide { max-width: none; }
.fb-ds-v01 .fbds-article > :where(p, ul, ol, table, blockquote, figure, .fbds-table-wrap) { margin-block: 0 1.25em; }
.fb-ds-v01 .fbds-article > :where(div, section, aside, details) { margin-block: 1.75em; }
.fb-ds-v01 .fbds-article > :where(h2) { margin-block: 2em 0.6em; }
.fb-ds-v01 .fbds-article > :where(h3, h4) { margin-block: 1.6em 0.5em; }
.fb-ds-v01 .fbds-article > :where(ul, ol) > li + li { margin-top: 0.4em; }
.fb-ds-v01 .fbds-article > :first-child { margin-top: 0; }

/* Buttons. Primary = the Apply button on light surfaces; accent = a CTA on the navy hero only. */
.fb-ds-v01 .fbds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fb-space-2); min-height: 44px; padding: 0.65rem 1.125rem; border: 1px solid transparent; border-radius: var(--fb-radius-control); font-size: var(--fb-text-md); font-weight: var(--fb-weight-semibold); line-height: 1.3; text-decoration: none; background: var(--fb-color-action); color: var(--fb-color-on-action); cursor: pointer; transition: background-color var(--fb-duration-fast) var(--fb-ease), box-shadow var(--fb-duration-fast) var(--fb-ease), border-color var(--fb-duration-fast) var(--fb-ease); }
/* Hover = colour shift + 2 px lift + soft glow in the button's own colour; press sinks back flat. */
.fb-ds-v01 .fbds-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--fb-color-action-hover); box-shadow: var(--fb-shadow-btn-hover); }
.fb-ds-v01 .fbds-btn:active:not(:disabled) { background: var(--fb-color-action-pressed); box-shadow: none; }
.fb-ds-v01 .fbds-btn--secondary { background: var(--fb-color-surface); border-color: var(--fb-color-action); color: var(--fb-color-action); }
.fb-ds-v01 .fbds-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--fb-color-soft); color: var(--fb-color-action); box-shadow: var(--fb-shadow-btn-hover); }
.fb-ds-v01 .fbds-btn--secondary:active:not(:disabled) { background: var(--fb-color-soft); color: var(--fb-color-action); box-shadow: none; }
.fb-ds-v01 .fbds-btn--accent { background: var(--fb-color-brand-azure); color: var(--fb-color-brand-navy); }
.fb-ds-v01 .fbds-btn--accent:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--fb-color-brand-sky); color: var(--fb-color-brand-navy); box-shadow: 0 6px 20px rgb(38 167 254 / 45%); }
.fb-ds-v01 .fbds-btn--accent:active:not(:disabled) { background: var(--fb-color-brand-sky); color: var(--fb-color-brand-navy); box-shadow: none; }
.fb-ds-v01 .fbds-btn--large { min-height: 52px; padding-inline: 1.5rem; font-size: var(--fb-text-body); }
.fb-ds-v01 .fbds-btn--block { width: 100%; }
.fb-ds-v01 .fbds-btn:disabled, .fb-ds-v01 .fbds-btn[aria-disabled="true"] { color: var(--fb-color-disabled-text); background: var(--fb-color-disabled-bg); border-color: var(--fb-color-border); cursor: not-allowed; }
.fb-ds-v01 .fbds-btn--loading { cursor: progress; }

/* Card, badge, notice, disclosure */
.fb-ds-v01 .fbds-card { padding: var(--fb-space-6); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-card); }
.fb-ds-v01 .fbds-card--interactive { transition: transform var(--fb-duration-normal) var(--fb-ease); }
.fb-ds-v01 .fbds-card--interactive:focus-within { outline: 2px solid var(--fb-color-focus); outline-offset: 3px; }
.fb-ds-v01 .fbds-badge { display: inline-flex; gap: 0.35em; align-items: center; padding: 0.3rem 0.65rem; border-radius: var(--fb-radius-pill); color: var(--fb-color-action); background: var(--fb-color-soft); font-size: var(--fb-text-xs); font-weight: var(--fb-weight-semibold); line-height: 1.4; }
.fb-ds-v01 .fbds-badge--neutral { background: var(--fb-color-page); color: var(--fb-color-muted); border: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-notice { border-inline-start: 3px solid var(--fb-color-action); border-radius: var(--fb-radius-control); padding: var(--fb-space-4); color: var(--fb-color-text); background: var(--fb-color-soft); font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-notice--success { border-color: var(--fb-color-success); background: var(--fb-color-success-bg); color: var(--fb-color-success); }
.fb-ds-v01 .fbds-notice--warning { border-color: var(--fb-color-warning); background: var(--fb-color-warning-bg); color: var(--fb-color-warning); }
.fb-ds-v01 .fbds-notice--error { border-color: var(--fb-color-error); background: var(--fb-color-error-bg); color: var(--fb-color-error); }
.fb-ds-v01 .fbds-disclosure { padding: var(--fb-space-4) 0; border-block: 1px solid var(--fb-color-border); color: var(--fb-color-muted); font-size: var(--fb-text-sm); }

/* Form */
.fb-ds-v01 .fbds-field { display: flex; flex-direction: column; gap: var(--fb-space-2); min-width: 0; }
.fb-ds-v01 .fbds-field label { font-size: var(--fb-text-sm); font-weight: var(--fb-weight-semibold); }
.fb-ds-v01 .fbds-input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--fb-color-input-border); border-radius: var(--fb-radius-control); padding: 0.65rem 0.875rem; background: var(--fb-color-surface); color: var(--fb-color-text); font-size: var(--fb-text-md); }
.fb-ds-v01 .fbds-input[aria-invalid="true"] { border-color: var(--fb-color-error); }
.fb-ds-v01 .fbds-error-text { color: var(--fb-color-error); font-size: var(--fb-text-sm); }

/* Result */
.fb-ds-v01 .fbds-result { padding: var(--fb-space-6); border: 1px solid var(--fb-color-result-border); border-radius: var(--fb-radius-card); background: var(--fb-color-result-bg); color: var(--fb-color-on-result); }
.fb-ds-v01 .fbds-result-value { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15; font-weight: var(--fb-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.fb-ds-v01 .fbds-result .fbds-muted { color: var(--fb-color-on-navy-muted); }
.fb-ds-v01 .fbds-result :is(a, button):focus-visible { outline-color: var(--fb-color-brand-sky); }

/* Table. Cells never break mid-number: wide tables scroll inside .fbds-table-wrap. */
.fb-ds-v01 .fbds-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); }
.fb-ds-v01 .fbds-table-wrap:focus-visible { outline: 3px solid var(--fb-color-focus); outline-offset: 3px; }
.fb-ds-v01 .fbds-table-wrap > .fbds-table { margin: 0; } /* Kadence gives tables a bottom margin; inside the frame it shows as a blank strip */
.fb-ds-v01 .fbds-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fb-color-surface); font-size: var(--fb-text-md); }
.fb-ds-v01 .fbds-table caption { text-align: left; padding: var(--fb-space-4); background: var(--fb-color-surface); font-weight: var(--fb-weight-semibold); }
.fb-ds-v01 .fbds-table :is(th, td) { padding: var(--fb-space-4); border-top: 1px solid var(--fb-color-border); vertical-align: top; text-align: left; }
.fb-ds-v01 .fbds-table thead th { background: var(--fb-color-soft); color: var(--fb-color-heading); font-size: var(--fb-text-sm); font-weight: var(--fb-weight-semibold); border-top: 0; }
.fb-ds-v01 .fbds-table tbody tr:nth-child(even) > * { background: var(--fb-color-page); }
.fb-ds-v01 .fbds-table tbody th[scope="row"] { font-weight: var(--fb-weight-semibold); color: var(--fb-color-heading); }
.fb-ds-v01 .fbds-table .fbds-col-pick, .fb-ds-v01 .fbds-table tbody tr:nth-child(even) > .fbds-col-pick { background: var(--fb-color-soft); }
.fb-ds-v01 .fbds-table thead .fbds-col-pick { box-shadow: inset 0 3px 0 var(--fb-color-action); }
.fb-ds-v01 .fbds-table :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--fb-color-border); } /* light column dividers */
.fb-ds-v01 .fbds-table .fbds-cell-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Comparison: the row-label column stays put while the card columns scroll. */
.fb-ds-v01 .fbds-table--compare th[scope="row"], .fb-ds-v01 .fbds-table--compare thead th:first-child { position: sticky; left: 0; z-index: 1; border-inline-end: 1px solid var(--fb-color-border); min-width: 9rem; }
.fb-ds-v01 .fbds-table--compare tbody tr:nth-child(odd) > th[scope="row"] { background: var(--fb-color-surface); }
.fb-ds-v01 .fbds-table--compare thead th:not(:first-child) { min-width: 11rem; }
.fb-ds-v01 .fbds-table--compare .fbds-col-pick:not(:last-child) { border-inline-end: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-table--compare .fbds-col-pick:not(:last-child) + * { border-inline-start: 0; }
.fb-ds-v01 .fbds-table--compare :is(th[scope="row"], thead th:first-child) + * { border-inline-start: 0; } /* the sticky label column draws its own edge */
/* Wide screens: label column 30 %, card columns share the rest equally (auto layout gave the longest text the most room). Phones keep auto widths and scroll. */
@media (min-width: 48.0625rem) { .fb-ds-v01 .fbds-table--compare { table-layout: fixed; } .fb-ds-v01 .fbds-table--compare thead th:first-child { width: 30%; } }
.fb-ds-v01 .fbds-table--compare .fbds-compare-pick { display: flex; width: fit-content; margin-top: var(--fb-space-2); background: var(--fb-color-surface); }

/* FAQ, byline */
.fb-ds-v01 .fbds-faq { border-bottom: 1px solid var(--fb-color-border); background: var(--fb-color-surface); padding: 0 var(--fb-space-5); }
.fb-ds-v01 .fbds-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); min-height: 44px; padding-block: var(--fb-space-4); list-style: none; font-weight: var(--fb-weight-semibold); color: var(--fb-color-heading); cursor: pointer; }
.fb-ds-v01 .fbds-faq summary::-webkit-details-marker { display: none; }
.fb-ds-v01 .fbds-faq summary::after { content: "+"; flex: none; font-size: 1.35rem; font-weight: var(--fb-weight-regular); line-height: 1; color: var(--fb-color-action); }
.fb-ds-v01 .fbds-faq[open] summary::after { content: "\2212"; }
.fb-ds-v01 .fbds-faq summary:hover { color: var(--fb-color-action); }
.fb-ds-v01 .fbds-faq > :not(summary) { padding-bottom: var(--fb-space-5); }
.fb-ds-v01 .fbds-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--fb-space-2); list-style: none; padding: 0; margin: 0; font-size: var(--fb-text-sm); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-crumbs li + li::before { content: "›"; margin-inline-end: var(--fb-space-2); }
.fb-ds-v01 .fbds-crumbs a { color: var(--fb-color-muted); text-decoration: none; }
.fb-ds-v01 .fbds-crumbs a:hover { color: var(--fb-color-action); text-decoration: underline; }
.fb-ds-v01 .fbds-byline { display: flex; flex-wrap: wrap; gap: var(--fb-space-3); font-size: var(--fb-text-sm); color: var(--fb-color-muted); }

/* Card art: ISO ID-1 card ratio, so issuer images and the placeholder share one box. */
.fb-ds-v01 .fbds-card-art { display: block; width: 100%; max-width: 100%; aspect-ratio: 1.586; border-radius: 0.6rem; object-fit: cover; background: linear-gradient(135deg, var(--fb-color-brand-navy), var(--fb-color-brand-blue)); box-shadow: var(--fb-shadow-card); }

/* Rating: same output as the theme's star closure (aria-label "4.5 out of 5"), restyled. */
.fb-ds-v01 .fbds-rating { display: inline-flex; align-items: baseline; gap: var(--fb-space-2); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-rating__stars { color: var(--fb-color-rating); letter-spacing: 0.08em; font-size: 1.125rem; }
.fb-ds-v01 .fbds-rating__stars .fbds-star--empty { color: var(--fb-color-border); }
.fb-ds-v01 .fbds-rating__stars .fbds-star--half { background: linear-gradient(90deg, var(--fb-color-rating) 50%, var(--fb-color-border) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fb-ds-v01 .fbds-rating__value { font-weight: var(--fb-weight-bold); color: var(--fb-color-heading); }
.fb-ds-v01 .fbds-rating__max { color: var(--fb-color-muted); font-size: var(--fb-text-sm); }

/* Card at a Glance: card art + name + rating, four key numbers, detail rows, then Apply.
   Every value comes from the card CPT (fb_get_card_data), the same fields as today. */
.fb-ds-v01 .fbds-glance { display: grid; gap: var(--fb-space-6); padding: var(--fb-space-6); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-card); }
.fb-ds-v01 .fbds-glance__head { display: grid; grid-template-columns: minmax(0, 10rem) 1fr; gap: var(--fb-space-6); align-items: center; }
.fb-ds-v01 .fbds-glance__head > * { min-width: 0; }
.fb-ds-v01 .fbds-glance__id { display: grid; gap: var(--fb-space-2); justify-items: start; }
.fb-ds-v01 .fbds-glance__title { font-size: var(--fb-text-lg); }
.fb-ds-v01 .fbds-glance__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--fb-space-3); }
.fb-ds-v01 .fbds-stat { display: grid; gap: var(--fb-space-1); align-content: start; min-width: 0; padding: var(--fb-space-4); border-radius: var(--fb-radius-control); background: var(--fb-color-soft); }
.fb-ds-v01 .fbds-stat__label { font-size: var(--fb-text-xs); font-weight: var(--fb-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-stat__value { font-size: var(--fb-text-lg); line-height: 1.2; font-weight: var(--fb-weight-bold); color: var(--fb-color-heading); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-stat__note { font-size: var(--fb-text-sm); line-height: 1.4; color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-glance__rows { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; border-top: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-glance__rows :is(dt, dd) { padding-block: var(--fb-space-3); border-bottom: 1px solid var(--fb-color-border); min-width: 0; }
.fb-ds-v01 .fbds-glance__rows dt { color: var(--fb-color-muted); font-size: var(--fb-text-sm); padding-inline-end: var(--fb-space-4); }
.fb-ds-v01 .fbds-glance__rows dd { font-weight: var(--fb-weight-semibold); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-review-proscons { display: grid; gap: var(--fb-space-6); padding-block: var(--fb-space-8) var(--fb-space-12); margin-bottom: var(--fb-space-12); border-bottom: 1px solid var(--fb-color-border); } /* T-92: sits between Glance and the article text */
.fb-ds-v01 .fbds-review-proscons > h2 { margin: 0; }
.fb-ds-v01 .fbds-glance__head.fbds-glance__head--solo { grid-template-columns: 1fr; } /* no card art yet: the id block takes the row */
.fb-ds-v01 .fbds-glance__foot > :only-child { grid-column: 1 / -1; }
.fb-ds-v01 .fbds-glance__note--inline { display: inline; }
.fb-ds-v01 .fbds-glance__note { display: block; font-weight: var(--fb-weight-regular); color: var(--fb-color-muted); font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-rates { display: grid; grid-template-columns: max-content 1fr; gap: var(--fb-space-2) var(--fb-space-3); list-style: none; padding: 0; margin: 0; font-weight: var(--fb-weight-regular); }
.fb-ds-v01 .fbds-rates li { display: contents; }
.fb-ds-v01 .fbds-rate { font-weight: var(--fb-weight-bold); color: var(--fb-color-action); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-glance__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fb-space-4); align-items: center; }
.fb-ds-v01 .fbds-verified { font-size: var(--fb-text-sm); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-verified::before { content: "✓ "; color: var(--fb-color-success); font-weight: var(--fb-weight-bold); }

/* Apply CTA: button, issuer terms link and the "you'll be redirected" note always travel together. */
.fb-ds-v01 .fbds-apply { display: grid; gap: var(--fb-space-2); justify-items: start; }
.fb-ds-v01 .fbds-apply__terms { font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-apply__note { font-size: var(--fb-text-sm); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-glance .fbds-apply { justify-items: stretch; text-align: center; }

/* Pros / cons: a text heading and a symbol on each item, so meaning never rides on colour alone. */
.fb-ds-v01 .fbds-proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--fb-space-4); }
.fb-ds-v01 .fbds-proscons > div { padding: var(--fb-space-5); border-radius: var(--fb-radius-card); border: 1px solid var(--fb-color-border); background: var(--fb-color-surface); min-width: 0; }
.fb-ds-v01 .fbds-proscons h3 { display: flex; align-items: center; gap: var(--fb-space-3); font-size: var(--fb-text-md); margin-bottom: var(--fb-space-4); }
.fb-ds-v01 .fbds-proscons h3::before { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.9rem; }
.fb-ds-v01 .fbds-pros h3::before { content: "✓"; background: var(--fb-color-success-bg); color: var(--fb-color-success); }
.fb-ds-v01 .fbds-cons h3::before { content: "✕"; background: var(--fb-color-error-bg); color: var(--fb-color-error); }
.fb-ds-v01 .fbds-proscons ul { list-style: none; padding: 0; display: grid; gap: var(--fb-space-3); }
.fb-ds-v01 .fbds-proscons li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--fb-space-2); }
.fb-ds-v01 .fbds-pros li::before { content: "✓"; color: var(--fb-color-success); font-weight: var(--fb-weight-bold); }
.fb-ds-v01 .fbds-cons li::before { content: "✕"; color: var(--fb-color-error); font-weight: var(--fb-weight-bold); }

/* Nick's Verdict: author + rating band, the verdict text, then the Apply block. */
.fb-ds-v01 .fbds-verdict { border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-card); overflow: hidden; }
.fb-ds-v01 .fbds-verdict__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fb-space-4); padding: var(--fb-space-5) var(--fb-space-6); background: var(--fb-color-soft); border-bottom: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-verdict__who { display: flex; align-items: center; gap: var(--fb-space-3); margin-inline-end: auto; min-width: 0; }
.fb-ds-v01 .fbds-avatar { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--fb-color-brand-navy); color: var(--fb-color-on-result); font-weight: var(--fb-weight-bold); overflow: hidden; }
.fb-ds-v01 .fbds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb-ds-v01 .fbds-verdict__title { font-size: var(--fb-text-lg); }
.fb-ds-v01 .fbds-verdict__body { display: grid; gap: var(--fb-space-4); padding: var(--fb-space-6); }
.fb-ds-v01 .fbds-verdict__body > :first-child { font-size: 1.1875rem; line-height: 1.5; font-weight: var(--fb-weight-medium); color: var(--fb-color-heading); }
.fb-ds-v01 .fbds-verdict__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fb-space-3) var(--fb-space-5); padding: 0 var(--fb-space-6) var(--fb-space-6); }

/* Sticky Apply bar: phones only, shown by the template once the Glance box scrolls away. */
.fb-ds-v01 .fbds-sticky-cta { position: fixed; inset: auto 0 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); padding: var(--fb-space-3) var(--fb-gutter) calc(var(--fb-space-3) + env(safe-area-inset-bottom, 0px)); background: var(--fb-color-surface); border-top: 1px solid var(--fb-color-border); box-shadow: 0 -6px 20px rgb(3 19 57 / 10%); }
.fb-ds-v01 .fbds-sticky-cta__name { font-weight: var(--fb-weight-semibold); font-size: var(--fb-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-ds-v01 .fbds-sticky-cta--inline { position: static; box-shadow: none; border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); }
@media (min-width: 48.0625rem) { .fb-ds-v01 .fbds-sticky-cta:not(.fbds-sticky-cta--inline) { display: none; } }

/* Hero, nav */
.fb-ds-v01 .fbds-hero { padding: var(--fb-space-12); border-radius: var(--fb-radius-feature); background: var(--fb-color-soft); color: var(--fb-color-text); }
.fb-ds-v01 .fbds-hero h1 { font-size: var(--fb-text-display); }
.fb-ds-v01 .fbds-hero--navy { background: var(--fb-color-result-bg); color: var(--fb-color-on-result); border: 1px solid var(--fb-color-result-border); }
.fb-ds-v01 .fbds-hero--navy :is(h1, h2, h3) { color: var(--fb-color-on-result); }
.fb-ds-v01 .fbds-hero--navy .fbds-muted { color: var(--fb-color-on-navy-muted); }
.fb-ds-v01 .fbds-hero--navy .fbds-eyebrow { color: var(--fb-color-brand-sky); }
.fb-ds-v01 .fbds-hero--navy :is(a, button):focus-visible { outline-color: var(--fb-color-brand-sky); }
.fb-ds-v01 .fbds-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fb-space-5); padding-block: var(--fb-space-5); }
.fb-ds-v01 .fbds-brand { display: inline-flex; gap: var(--fb-space-3); align-items: center; text-decoration: none; color: var(--fb-color-heading); font-size: 1.25rem; font-weight: var(--fb-weight-bold); }
.fb-ds-v01 .fbds-brand img { width: 44px; height: 44px; border-radius: var(--fb-radius-control); }
.fb-ds-v01 .fbds-nav-links { display: flex; gap: var(--fb-space-1); flex-wrap: wrap; align-items: center; }
/* Menu item states change colour only (no weight, size or position change): hover = soft fill,
   current page (aria-current) = action colour + 2px bar, pressed = darker text. */
.fb-ds-v01 .fbds-nav-links a:not(.fbds-btn) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--fb-space-3); border-radius: var(--fb-radius-control); font-size: var(--fb-text-sm); font-weight: var(--fb-weight-medium); color: var(--fb-color-text); text-decoration: none; transition: background-color var(--fb-duration-fast) var(--fb-ease), color var(--fb-duration-fast) var(--fb-ease); }
.fb-ds-v01 .fbds-nav-links a:not(.fbds-btn):hover { background: var(--fb-color-soft); color: var(--fb-color-action); }
.fb-ds-v01 .fbds-nav-links a[aria-current]:not([aria-current="false"]) { color: var(--fb-color-action); box-shadow: inset 0 -2px 0 var(--fb-color-action); border-radius: var(--fb-radius-control) var(--fb-radius-control) 0 0; }
.fb-ds-v01 .fbds-nav-links a:not(.fbds-btn):active { background: var(--fb-color-soft); color: var(--fb-color-action-pressed); }

/* Motion */
.fb-ds-v01 .fbds-enter { animation: fbds-v01-enter var(--fb-duration-enter) var(--fb-ease); }
@keyframes fbds-v01-enter { from { opacity: 0.6; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) { .fb-ds-v01 .fbds-card--interactive:hover { transform: translateY(-3px); } }
/* Article families (guide / roundup / comparison, T-92 previews). */
.fb-ds-v01 :where(.fbds-toc, .fbds-pick, .fbds-vs, .fbds-related, .fbds-band, .fbds-who) :where(h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; }
.fb-ds-v01 .fbds-toc { border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-page); padding: var(--fb-space-5); }
.fb-ds-v01 .fbds-toc summary { cursor: pointer; font-weight: var(--fb-weight-semibold); min-height: 44px; display: flex; align-items: center; }
.fb-ds-v01 .fbds-toc ol { margin-top: var(--fb-space-3); padding-left: 1.4em; columns: 2 18rem; column-gap: var(--fb-space-8); }
.fb-ds-v01 .fbds-toc li { break-inside: avoid; padding-block: var(--fb-space-1); }
.fb-ds-v01 .fbds-toc a { text-decoration: none; }
.fb-ds-v01 .fbds-toc a:hover { text-decoration: underline; }
.fb-ds-v01 .fbds-rank { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--fb-color-brand-navy); color: var(--fb-color-on-result); font-weight: var(--fb-weight-bold); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-pick { display: grid; gap: var(--fb-space-5); padding: var(--fb-space-6); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-card); scroll-margin-top: 1rem; }
.fb-ds-v01 .fbds-pick__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fb-space-3) var(--fb-space-4); }
.fb-ds-v01 .fbds-pick__id { display: grid; gap: var(--fb-space-1); justify-items: start; flex: 1 1 18rem; min-width: 0; }
.fb-ds-v01 .fbds-pick__title { display: flex; align-items: center; gap: var(--fb-space-3); font-size: var(--fb-text-lg); line-height: 1.25; }
.fb-ds-v01 .fbds-picks { display: grid; gap: var(--fb-space-6); margin-block: var(--fb-space-6); }
.fb-ds-v01 .fbds-pick__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--fb-space-6); border-top: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-pick__facts > div { display: grid; gap: var(--fb-space-1); align-content: start; padding-block: var(--fb-space-3); border-bottom: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-pick__facts dt { font-size: var(--fb-text-xs); font-weight: var(--fb-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-pick__facts dd { font-weight: var(--fb-weight-semibold); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-pick__actions { display: flex; flex-wrap: wrap; gap: var(--fb-space-3); align-items: center; }
.fb-ds-v01 .fbds-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--fb-space-4); align-items: stretch; }
.fb-ds-v01 .fbds-vs__card { display: grid; gap: var(--fb-space-3); align-content: start; padding: var(--fb-space-6); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); }
.fb-ds-v01 .fbds-vs__card > .fbds-badge { justify-self: start; }
.fb-ds-v01 .fbds-vs__card > .fbds-btn { align-self: end; }
.fb-ds-v01 .fbds-vs__card--pick { border-color: var(--fb-color-action); background: var(--fb-color-soft); box-shadow: var(--fb-shadow-card); }
.fb-ds-v01 .fbds-vs__card--pick > .fbds-badge { background: var(--fb-color-action); color: var(--fb-color-on-action); }
.fb-ds-v01 .fbds-vs__card :is(h2, h3) { font-size: var(--fb-text-lg); line-height: 1.25; margin: 0; }
.fb-ds-v01 .fbds-vs__card > .fbds-btn + .fbds-btn { margin-top: calc(var(--fb-space-2) * -1); }
.fb-ds-v01 .fbds-vs { margin-block: var(--fb-space-6) var(--fb-space-4); }
.fb-ds-v01 .fbds-vs__fee { font-size: var(--fb-text-sm); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-vs__fee strong { color: var(--fb-color-heading); font-size: var(--fb-text-lg); font-variant-numeric: tabular-nums; }
.fb-ds-v01 .fbds-vs__mid { align-self: center; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--fb-color-soft); color: var(--fb-color-muted); font-weight: var(--fb-weight-bold); font-size: var(--fb-text-sm); }
.fb-ds-v01 .fbds-pickline { display: flex; flex-wrap: wrap; gap: var(--fb-space-2) var(--fb-space-4); align-items: baseline; padding: var(--fb-space-4) var(--fb-space-5); border-radius: var(--fb-radius-card); background: var(--fb-color-soft); }
.fb-ds-v01 .fbds-pickline strong { color: var(--fb-color-heading); }
.fb-ds-v01 .fbds-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--fb-space-4); }
.fb-ds-v01 .fbds-who > section { display: grid; gap: var(--fb-space-3); align-content: start; padding: var(--fb-space-6); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); }
.fb-ds-v01 .fbds-who h2 { font-size: var(--fb-text-lg); line-height: 1.25; }
.fb-ds-v01 .fbds-band { display: grid; gap: var(--fb-space-2); padding: var(--fb-space-6); border-radius: var(--fb-radius-card); background: var(--fb-color-result-bg); color: var(--fb-color-on-result); }
.fb-ds-v01 .fbds-band h2 { color: var(--fb-color-on-result); font-size: var(--fb-text-lg); }
.fb-ds-v01 .fbds-band .fbds-eyebrow { color: var(--fb-color-brand-sky); }
.fb-ds-v01 .fbds-band .fbds-btn { justify-self: start; margin-top: var(--fb-space-2); }
.fb-ds-v01 .fbds-related { display: grid; gap: var(--fb-space-4); }
.fb-ds-v01 .fbds-related .fbds-eyebrow a { color: var(--fb-color-action); text-decoration: none; }
.fb-ds-v01 .fbds-related .fbds-eyebrow a::after { content: " →"; }
.fb-ds-v01 .fbds-related .fbds-eyebrow a:hover { text-decoration: underline; }
.fb-ds-v01 .fbds-related ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--fb-space-3); }
.fb-ds-v01 .fbds-related li a { display: grid; gap: var(--fb-space-1); height: 100%; padding: var(--fb-space-4); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); text-decoration: none; color: var(--fb-color-heading); font-weight: var(--fb-weight-semibold); }
.fb-ds-v01 .fbds-related li a:hover { border-color: var(--fb-color-action); color: var(--fb-color-action); }
.fb-ds-v01 .fbds-related li a span { font-size: var(--fb-text-xs); font-weight: var(--fb-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-color-muted); }

/* What to Read Next (Nick, Oct 28: variant 2): card reviews as tiles, everything else as rows. */
.fb-ds-v01 .fbds-readnext { display: grid; gap: var(--fb-space-3); margin-block: var(--fb-space-8); }
.fb-ds-v01 .fbds-readnext :where(h2, p, ul) { margin: 0; }
.fb-ds-v01 .fbds-readnext h2 { margin-bottom: var(--fb-space-1); }
.fb-ds-v01 .fbds-readnext__label { margin-top: var(--fb-space-3) !important; font-size: var(--fb-text-xs); font-weight: var(--fb-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-readnext__label a { color: var(--fb-color-action); text-decoration: none; }
.fb-ds-v01 .fbds-readnext__label a:hover { text-decoration: underline; }
.fb-ds-v01 .fbds-readnext__type { font-size: var(--fb-text-xs); font-weight: var(--fb-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-readnext__vs { font-weight: var(--fb-weight-regular); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-readnext__meta { font-size: var(--fb-text-sm); color: var(--fb-color-muted); }
.fb-ds-v01 .fbds-readnext__meta b { color: var(--fb-color-heading); }
.fb-ds-v01 .fbds-readnext__rows { list-style: none; padding: 0; border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); }
.fb-ds-v01 .fbds-readnext__rows li + li { border-top: 1px solid var(--fb-color-border); }
.fb-ds-v01 .fbds-readnext__rows a { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto auto; gap: var(--fb-space-4); align-items: center; padding: var(--fb-space-4) var(--fb-space-5); text-decoration: none; color: var(--fb-color-heading); font-weight: var(--fb-weight-semibold); }
.fb-ds-v01 .fbds-readnext__rows a:hover { background: var(--fb-color-soft); }
.fb-ds-v01 .fbds-readnext__arrow { color: var(--fb-color-action); }
.fb-ds-v01 .fbds-readnext__tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--fb-space-3); }
.fb-ds-v01 .fbds-readnext__tiles a { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--fb-space-2); height: 100%; padding: var(--fb-space-5); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-card); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-card); text-decoration: none; color: var(--fb-color-text); }
.fb-ds-v01 .fbds-readnext__tiles a:hover { border-color: var(--fb-color-action); }
.fb-ds-v01 .fbds-readnext__tiles strong { color: var(--fb-color-heading); line-height: 1.3; }
.fb-ds-v01 .fbds-readnext__tiles .fbds-readnext__meta { align-self: end; }
.fb-ds-v01 .fbds-readnext__cta { color: var(--fb-color-action); font-weight: var(--fb-weight-semibold); font-size: var(--fb-text-sm); }

@media (max-width: 48rem) {
  .fb-ds-v01 .fbds-readnext__rows a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fb-space-1) var(--fb-space-3); }
  .fb-ds-v01 .fbds-readnext__rows a > :not(.fbds-readnext__arrow) { grid-column: 1; }
  .fb-ds-v01 .fbds-readnext__rows .fbds-readnext__arrow { grid-column: 2; grid-row: 1 / span 3; }
  .fb-ds-v01 .fbds-pick__facts { grid-template-columns: 1fr; }
  .fb-ds-v01 .fbds-vs { grid-template-columns: 1fr; }
  .fb-ds-v01 .fbds-vs__mid { justify-self: center; }
  .fb-ds-v01 :is(.fbds-pick, .fbds-vs__card, .fbds-who > section) { padding: var(--fb-space-5); }
  .fb-ds-v01 .fbds-split { grid-template-columns: 1fr; }
  .fb-ds-v01 .fbds-hero { padding: var(--fb-space-6); }
  .fb-ds-v01 .fbds-sheet { margin-inline: calc(-1 * var(--fb-gutter)); border-radius: 0; border-inline: 0; }
  .fb-ds-v01 .fbds-section { padding-block: var(--fb-space-12); }
  .fb-ds-v01 .fbds-table :is(th, td) { padding: var(--fb-space-3); }
  .fb-ds-v01 .fbds-glance__head { grid-template-columns: minmax(0, 7rem) 1fr; gap: var(--fb-space-4); }
  .fb-ds-v01 :is(.fbds-glance, .fbds-verdict__body) { padding: var(--fb-space-5); }
  .fb-ds-v01 .fbds-glance__foot { grid-template-columns: 1fr; }
  .fb-ds-v01 .fbds-glance__rows { grid-template-columns: 1fr; }
  .fb-ds-v01 .fbds-glance__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2×2 keeps Apply near the first screen */
  .fb-ds-v01 .fbds-stat { padding: var(--fb-space-3); }
  .fb-ds-v01 .fbds-glance__rows dt { border-bottom: 0; padding-bottom: 0; }
  .fb-ds-v01 :is(.fbds-verdict__head, .fbds-verdict__foot) { padding-inline: var(--fb-space-5); }
  .fb-ds-v01 .fbds-btn--large { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-ds-v01 { --fb-duration-fast: 0ms; --fb-duration-normal: 0ms; --fb-duration-enter: 0ms; }
  .fb-ds-v01 .fbds-enter { animation: none; }
  .fb-ds-v01 .fbds-card--interactive:hover { transform: none; }
}