/* ============================================================
   PrepBenchmark · components.css
   Reusable components. Load THIRD.
   ============================================================ */

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
/* Default button: NAVY */
.btn--primary { background: var(--color-navy); color: var(--color-ink-on-navy); }
.btn--primary:hover { background: var(--color-navy-2); color: var(--color-ink-on-navy); }
/* Gold: EXACTLY ONE per page · the single most important CTA */
.btn--gold { background: var(--color-gold); color: var(--color-navy); }
.btn--gold:hover { background: var(--color-gold-deep); color: var(--color-navy); }
/* Outline / secondary · adapts to light surfaces */
.btn--outline {
  background: transparent;
  border-color: var(--color-navy-2);
  color: var(--color-navy-2);
}
.btn--outline:hover { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-ink-on-navy); }
/* Outline variant for navy surfaces (header, footer, navy cards) */
.btn--outline-light {
  background: transparent;
  border-color: rgba(245, 242, 233, 0.45);
  color: var(--color-ink-on-navy);
}
.btn--outline-light:hover { border-color: var(--color-ink-on-navy); background: rgba(245, 242, 233, 0.08); color: var(--color-ink-on-navy); }
.btn--lg { padding: 0.9rem 1.75rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.45rem 0.9rem; font-size: var(--fs-xs); }

/* Text link with arrow, used beside CTAs ("How We Rank →") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-navy-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-arrow::after { content: "\2192"; text-decoration: none; transition: transform var(--transition); }
.link-arrow:hover::after { transform: translateX(3px); }
.on-dark .link-arrow, .link-arrow--light { color: var(--color-ink-on-navy); text-decoration-color: rgba(245,242,233,0.4); }
.on-dark .link-arrow:hover, .link-arrow--light:hover { color: #FFFFFF; }
/* A plain link on a navy panel inherited the navy link colour and was all but
   invisible against it. Anything inside .on-dark reads light. */
.on-dark a:not(.btn) { color: var(--color-ink-on-navy); text-decoration-color: rgba(245, 242, 233, 0.5); }
.on-dark a:not(.btn):hover { color: #FFFFFF; }

/* ============ Eyebrow ============ */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}
.eyebrow--gold { color: var(--color-gold-text); } /* use sparingly: hero + section leads only */

/* ============ Star rating (pure CSS, no JS) ============
   Usage: <div class="stars" style="--rating: 4.5" role="img" aria-label="Rated 4.5 out of 5"></div> */
.stars {
  --rating: 0;
  --star-size: 1rem;
  --star-empty: var(--color-track);
  display: inline-block;
  line-height: 1;
}
.stars::before {
  content: "\2605\2605\2605\2605\2605";
  font-size: var(--star-size);
  letter-spacing: 2px;
  background: linear-gradient(
    90deg,
    var(--color-gold) calc(var(--rating) / 5 * 100%),
    var(--star-empty) calc(var(--rating) / 5 * 100%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stars--lg { --star-size: 1.35rem; }
.on-dark .stars { --star-empty: rgba(245, 242, 233, 0.25); }

/* ============ Score ring (pure SVG + CSS, no JS) ============
   Usage:
   <div class="score-ring" style="--score: 9.2" role="img" aria-label="Overall score 9.2 out of 10">
     <svg viewBox="0 0 100 100" aria-hidden="true">
       <circle class="score-ring__track" cx="50" cy="50" r="44" pathLength="100"></circle>
       <circle class="score-ring__fill"  cx="50" cy="50" r="44" pathLength="100"></circle>
     </svg>
     <span class="score-ring__value">9.2</span>
   </div> */
.score-ring {
  --score: 0;
  --ring-size: 96px;
  --ring-stroke: 6;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex: none;
}
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: var(--ring-stroke); }
.score-ring__track { stroke: var(--color-track); }
.score-ring__fill {
  stroke: var(--color-gold);
  stroke-linecap: round;
  stroke-dasharray: calc(var(--score) * 10) 100;
}
.score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(var(--ring-size) * 0.3);
  color: var(--color-navy);
}
.score-ring--sm { --ring-size: 48px; --ring-stroke: 8; }
.score-ring--lg { --ring-size: 148px; --ring-stroke: 5; }
.on-dark .score-ring__track { stroke: rgba(245, 242, 233, 0.18); }
.on-dark .score-ring__value { color: var(--color-ink-on-navy); }

/* Score word under a ring: "Excellent" */
.score-word {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gold-text);
  text-align: center;
}

/* ============ Blog ============ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.post-card__cat { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold-text); }
.post-card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; margin: 0; }
.post-card__title a { color: var(--color-navy); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0; }
.post-card__meta { margin-top: auto; font-size: var(--fs-xs); color: var(--color-ink-muted); }

/* ============ Articles landing: Latest Articles ============
   Images belong on these featured cards only. Dave's archive below stays
   text-first by design, so do not reuse this block there.
   Built on our tokens; the hex values in his HTML sample are layout reference
   only, not a repaint of the design system. */
.featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 720px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }

.featured-card {
  position: relative; /* anchors the stretched title link below */
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.featured-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.featured-card__media {
  position: relative;
  aspect-ratio: 16 / 9; /* reserved up front so nothing reflows when real art lands */
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.featured-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder panel for articles with no featured image yet. Two oversized rings
   bleeding off opposite corners, matching the treatment in Dave's sample. */
.featured-card__media--empty::before,
.featured-card__media--empty::after { content: ""; position: absolute; border-radius: var(--radius-full); }
.featured-card__media--empty::before { width: 190px; height: 190px; right: -52px; top: -75px; border: 18px solid rgba(201, 162, 39, 0.55); }
.featured-card__media--empty::after { width: 130px; height: 130px; left: -42px; bottom: -58px; border: 16px solid rgba(17, 34, 64, 0.14); }
.featured-card__media--v1 { background: linear-gradient(135deg, var(--color-bg) 0%, rgba(201, 162, 39, 0.14) 100%); }
.featured-card__media--v2 { background: linear-gradient(135deg, var(--color-bg) 0%, rgba(36, 59, 83, 0.12) 100%); }
.featured-card__media--v3 { background: linear-gradient(135deg, rgba(201, 162, 39, 0.10) 0%, rgba(36, 59, 83, 0.10) 100%); }
/* The shield sits low in the panel as a watermark, so an article with no artwork
   still reads as ours rather than as a broken image. */
.featured-card__mark {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  width: 3.25rem;
  height: auto;
  opacity: 0.28;
}

.featured-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.featured-card__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold-text); }
.featured-card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; margin: 0; }
.featured-card__title a { color: var(--color-navy); text-decoration: none; }
.featured-card__title a:hover { text-decoration: underline; }
/* One link covers the whole card, so the media is clickable without a second
   duplicate link for screen readers to announce. */
.featured-card__title a::after { content: ""; position: absolute; inset: 0; }
.featured-card__excerpt { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0; }
.featured-card__meta { margin-top: auto; font-size: var(--fs-xs); color: var(--color-ink-muted); }

/* The offer bar and header are sticky, so the jump link from Latest Articles has
   to clear them (see --sticky-top in tokens.css). */
#all-articles { scroll-margin-top: calc(var(--sticky-top) + var(--space-3)); }

/* ============ Articles landing: archive ============
   Text first by Dave's design, so no thumbnails here. The images live on the
   featured cards above, which keeps the archive quick to scan. */
/* Input padding and border match .contact-form so the two search and form
   surfaces on the site look like one system. */
.archive-search { margin-bottom: var(--space-5); }
.archive-search__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-2); }
.archive-search__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 40rem) { .archive-search__row { grid-template-columns: 1fr auto; } }
.archive-search__input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: var(--color-surface); color: var(--color-navy); }

.archive-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-bottom: var(--space-5); }
.archive-filters__field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 12rem; min-width: 0; }
.archive-filters__field label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-muted); }
.archive-filters__field select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: var(--color-surface); color: var(--color-navy); }
.archive-filters__clear { align-self: end; padding-block: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-navy-2); text-decoration: underline; text-underline-offset: 3px; }
/* .btn sets display:inline-flex, which outranks the browser's [hidden] rule, so
   the script's apply.hidden would otherwise have no visible effect. */
.archive-filters__apply[hidden] { display: none; }

.archive-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* The rail only exists once Explore by Interest ships. Until then the archive
   takes the full width rather than leaving an empty column beside it. */
@media (min-width: 60rem) {
  .archive-layout:has(.archive-rail) { grid-template-columns: minmax(0, 1fr) 235px; }
}
.archive-main { min-width: 0; }
.archive-count { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-4); }

.article-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 40rem) { .article-list { grid-template-columns: repeat(2, 1fr); } }

.article-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.article-card__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold-text); }
.article-card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; margin: 0; }
.article-card__title a { color: var(--color-navy); text-decoration: none; }
.article-card__title a:hover { text-decoration: underline; }
/* One stretched link per card, so "Read Article" stays a visual affordance and
   screen readers are not given the same destination twice. */
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__excerpt { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0; }
.article-card__meta { font-size: var(--fs-xs); color: var(--color-ink-muted); margin: 0; }
.article-card__cta { margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-sm); }

.archive-empty { text-align: center; padding: var(--space-7) var(--space-5); color: var(--color-ink-muted); }
.archive-empty p { margin: 0 0 var(--space-4); }

.archive-more { display: block; width: fit-content; margin: var(--space-6) auto 0; }

/* Explore by Interest. Sticky on desktop so it stays with the reader down a long
   archive, static below the two column breakpoint where it sits under the list. */
.archive-rail { align-self: start; }
.archive-rail__title { font-family: var(--font-serif); font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.archive-rail__lede { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-4); }
.archive-rail__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.archive-rail__link {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-navy); text-decoration: none;
}
.archive-rail__link:hover { color: var(--color-gold-text); }
.archive-rail__link span:last-child { color: var(--color-gold-text); }
.archive-rail__link.is-active { color: var(--color-gold-text); }
@media (min-width: 60rem) {
  .archive-rail { position: sticky; top: calc(var(--sticky-top) + var(--space-3)); }
}

/* Reviews index cards (with scores) */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.review-card { display: flex; flex-direction: column; gap: var(--space-3); }
.review-card__top { display: flex; align-items: center; justify-content: space-between; }
.review-card__exam { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold-text); }
.review-card__name { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.2; margin: 0; }
.review-card__name a { color: var(--color-navy); text-decoration: none; }
.review-card__name a:hover { text-decoration: underline; }
.review-card__score { display: flex; align-items: center; gap: var(--space-3); }
.review-card__summary { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0; }
.review-card .link-arrow { margin-top: auto; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-navy-2); background: var(--color-surface); }
.chip:hover { border-color: var(--color-navy-2); }
.chip--active { background: var(--color-navy); color: var(--color-ink-on-navy); border-color: var(--color-navy); }

/* Article body (post content) */
.article-body { max-width: 44rem; color: var(--color-ink); line-height: var(--lh-body); }
.article-body > * + * { margin-top: var(--space-4); }
.article-body h2 { font-family: var(--font-serif); font-size: var(--fs-xl); margin-top: var(--space-6); }
.article-body h3 { font-family: var(--font-serif); font-size: var(--fs-lg); margin-top: var(--space-5); }
.article-body a { color: var(--color-navy-2); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: var(--space-5); }
.article-body li + li { margin-top: var(--space-2); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* Tag chips */
/* ============ Article page: layout, byline, table of contents ============ */
/* Mobile first: one column, contents shown inline above the body. The sidebar
   only becomes a sidebar once there is room for one. */
.article-layout { display: grid; gap: var(--space-6); margin-top: var(--space-5); }

.article-byline { margin: var(--space-3) 0 var(--space-5); }
.article-byline__main {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.article-byline__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}
.toc__title, .toc > summary {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.toc > summary { cursor: pointer; margin-bottom: 0; }
.toc[open] > summary { margin-bottom: var(--space-3); }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__item + .toc__item { margin-top: var(--space-2); }
.toc__item--h3 { padding-left: var(--space-4); }
.toc__item a {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-navy-2);
  text-decoration: none;
}
.toc__item a:hover { text-decoration: underline; text-underline-offset: 3px; }

.toc--inline { margin-bottom: var(--space-6); }
.toc--sticky { display: none; }
/* A sticky contents list must clear the sticky site header. */
.article-body :is(h2, h3) { scroll-margin-top: calc(var(--sticky-top) + var(--space-3)); }

@media (min-width: 60rem) {
  /* No align-items:start here: the aside must stretch full height or the sticky
     contents box has no travel and scrolls away with its own shrink-wrapped parent. */
  .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-7); }
  .toc--inline { display: none; }
  .toc--sticky { display: block; position: sticky; top: calc(var(--sticky-top) + var(--space-3)); }
}

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { font-size: var(--fs-xs); color: var(--color-navy-2); text-decoration: none; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); }

/* ============ Legacy-page compatibility ============
   Old pages now share the new chrome. Give their content breathing room and
   tidy the legacy (Bootstrap) breadcrumb so it matches the new design. */
/* Top padding matches the brand hero/section (var(--space-7)) so the breadcrumb on
   legacy-template pages (e.g. /articles, /study-resources) sits at the same height as
   the rest of the site, not a bit higher. */
.section-container { padding-block: var(--space-7); }
/* Legacy Bootstrap-style breadcrumbs (Breadcrumbs::render) rendered inline, one line, to match the site breadcrumb. */
ol.breadcrumb { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm, 0.9rem); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
ol.breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; }
ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; margin-right: var(--space-2); opacity: 0.6; }
ol.breadcrumb a { color: var(--color-navy-2); }
ol.breadcrumb a:hover { color: var(--color-navy); }
ol.breadcrumb .active { color: var(--color-ink-muted); }
.section-container .card { margin-bottom: var(--space-4); }

/* Newsletter card */
.newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.newsletter__form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.newsletter__form input[type="email"] { padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; min-width: 240px; }
/* The v2 checkbox is a fixed-size iframe, so give it its own row rather than
   letting it squeeze the email field on narrow screens. */
.newsletter__form .g-recaptcha { flex-basis: 100%; }
.contact-form .g-recaptcha { margin-top: var(--space-1); }
/* Same block treatment as the contact confirmation, so all three messages on the
   site read as one thing rather than three. Changing how loud they are later is
   then a single change instead of three. */
.newsletter__msg {
  color: var(--color-success); font-weight: 600; margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid currentColor;
  background: rgba(22, 163, 74, 0.10);
}
.newsletter__consent { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--color-ink-muted); line-height: var(--lh-snug); }
.newsletter__consent .link-inline { font-size: inherit; color: inherit; }
.on-dark .newsletter__consent, .on-dark .newsletter__consent .link-inline { color: var(--color-ink-on-navy-2); }
.newsletter__err { color: #B91C1C; font-size: var(--fs-xs); flex-basis: 100%; }

/* ============ Laurel placeholder (logo stand-in) ============
   Swap this ONE block for the final logo SVG later. */
.laurel-placeholder {
  --laurel-size: 40px;
  width: var(--laurel-size);
  height: var(--laurel-size);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-gold);
  box-shadow: inset 0 0 0 3px transparent, 0 0 0 3px transparent;
  outline: 1px solid rgba(201, 162, 39, 0.45);
  outline-offset: 3px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(var(--laurel-size) * 0.42);
  color: var(--color-gold);
  background: transparent;
  letter-spacing: -0.02em;
}
.laurel-placeholder--lg { --laurel-size: 64px; }

/* Real logo image (extracted from approved mockup).
   laurel-light.png = warm-white PB for navy surfaces; laurel.png = navy PB for light. */
.laurel-logo { height: 42px; width: auto; flex: none; }
.laurel-logo--sm { height: 30px; }

/* Brand mark: the shield logo (SVG). Height drives size; width stays auto. */
.brand__mark { display: block; height: 44px; width: auto; flex: none; }
.brand__mark--sm { height: 30px; }

/* Brand lockup: laurel + wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.brand__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  font-variant-caps: small-caps;
  color: var(--color-ink-on-navy);
}
.brand__name em { font-style: normal; color: var(--color-gold); } /* "Benchmark" is gold on every surface */
.brand--on-light .brand__name { color: var(--color-navy); }

/* ============ Rank badge ============ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--color-border);
  color: var(--color-navy-2);
}
.rank-badge--gold { background: var(--color-gold); color: var(--color-navy); } /* rank #1 only */

/* Editor's Choice / label badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-navy-2);
  color: var(--color-ink-on-navy);
}
.badge--gold { background: var(--color-gold); color: var(--color-navy); } /* Editor's Choice, Top Ranked */

/* ============ Bootstrap utility compat (legacy pages on the new chrome) ============
   Old pages rely on Bootstrap spacing, flex, grid, badge, and button classes.
   These restore proper spacing and states so nothing renders cramped. */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-3); }
.mb-3 { margin-bottom: var(--space-4); }
.mb-4 { margin-bottom: var(--space-5); }
.mb-5 { margin-bottom: var(--space-6); }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-3); }
.mt-3 { margin-top: var(--space-4); }
.mt-4 { margin-top: var(--space-5); }
.mt-5 { margin-top: var(--space-6); }
.mt-auto { margin-top: auto; }
.mr-1 { margin-right: var(--space-2); }
.ml-1 { margin-left: var(--space-2); }
.my-4 { margin-block: var(--space-5); }
.p-0 { padding: 0; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.h-100 { height: 100%; }
.text-muted { color: var(--color-ink-muted); }
.small { font-size: var(--fs-sm); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
/* Simple responsive grid */
.row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.row > [class*="col-"] { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  .row > .col-md-4 { flex: 1 1 calc(33.333% - var(--space-5)); }
  .row > .col-md-6 { flex: 1 1 calc(50% - var(--space-5)); }
  .row > .col-md-8 { flex: 1 1 calc(66.666% - var(--space-5)); }
}
/* Badge states (filter chips) */
.badge-primary { background: var(--color-navy); color: var(--color-ink-on-navy); }
.badge-light { background: var(--color-surface); color: var(--color-navy-2); border: 1px solid var(--color-border); }
.badge-secondary { background: var(--color-bg); color: var(--color-navy-2); border: 1px solid var(--color-border); }
.badge-warning { background: var(--color-gold); color: var(--color-navy); }
/* Buttons */
.btn-primary { background: var(--color-navy); color: var(--color-ink-on-navy); border-color: var(--color-navy); }
.btn-primary:hover { background: var(--color-navy-2); color: var(--color-ink-on-navy); }
.btn-sm { padding: 0.45rem 0.9rem; font-size: var(--fs-xs); }
.btn-lg { padding: 0.9rem 1.75rem; font-size: var(--fs-base); }
.btn-block { display: flex; width: 100%; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.d-none { display: none; }
.list-unstyled { list-style: none; padding-left: 0; }
.w-100 { width: 100%; }

/* Homepage "Explore Prep by Exam" quadrant grid */
.exam-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 640px) { .exam-grid { grid-template-columns: repeat(2, 1fr); } }
.exam-card { display: flex; flex-direction: column; gap: var(--space-2); }
.exam-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.exam-card__name { margin: 0; font-size: 1.5rem; color: var(--color-navy); }
.exam-card__label { margin: 0; font-size: var(--fs-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); }
.exam-card__provider { margin: 0; font-weight: 600; color: var(--color-navy); }
.exam-card__word { margin: 0; color: var(--color-gold-text); font-weight: 600; font-size: var(--fs-sm, 0.875rem); }
.exam-card .link-arrow { margin-top: auto; padding-top: var(--space-2); }

/* About / Disclosure / Contact content pages */
.prose { color: var(--color-ink-muted); max-width: 60ch; }
.prose + .prose { margin-top: var(--space-4); }

/* ============ Reading rhythm on the brand pages ============
   Headings carry no bottom margin from the reset, so a heading followed by
   copy sat flush against it. Denny: "too tight ... from paragraph to headers".
   Scoped to .section and .hero, which the legacy templates do not use. */
:is(.section, .hero) :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: var(--space-3); }
:is(.section, .hero) p + :is(h2, h3) { margin-top: var(--space-6); }
:is(.section, .hero) :is(ul, ol) + :is(h2, h3) { margin-top: var(--space-6); }
.section-narrow .container { max-width: 54rem; }
.proof-panel { align-self: start; }
.proof-panel__label { font-size: var(--fs-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); margin: 0 0 var(--space-3); }
.q-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.q-list li { position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 2.5rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; font-weight: 600; color: var(--color-navy); }
.q-list li::before { content: "?"; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border: 1px solid var(--color-navy); border-radius: 50%; font-size: var(--fs-xs, 0.75rem); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
.card-grid h3 { margin: 0 0 var(--space-2); color: var(--color-navy); font-size: var(--fs-lg, 1.25rem); }
.card-grid p { margin: 0; color: var(--color-ink-muted); }

/* Icon on a card, drawn from the design system rather than photography. */
.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-gold-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.disclosure-snippet { border-left: 4px solid var(--color-gold); }
.disclosure-block { margin-top: var(--space-7); }
/* Denny found the page too narrow inside the 1200px container. 60ch is the site
   default for comfortable reading; 78ch is still within a sensible measure and
   uses the width he was reacting to. Scoped to this page only. */
.disclosure-block .prose { max-width: 78ch; }
.contact-form { display: grid; gap: var(--space-4); max-width: 40rem; margin-top: var(--space-5); }
.contact-form label { display: block; font-weight: 600; margin-bottom: var(--space-1); color: var(--color-navy); }
.contact-form .label-optional { font-weight: 400; color: var(--color-ink-muted); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="url"], .contact-form select, .contact-form textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: #fff; color: var(--color-navy); }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form .consent { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; color: var(--color-ink-muted); }
.contact-form .consent input { margin-top: 0.3rem; }
.form-note { margin-top: var(--space-3); font-size: var(--fs-sm, 0.9rem); font-weight: 600; }
/* Denny asked for the confirmation to read as a result rather than a caption, since
   a line of coloured text under the heading is easy to scroll past and the form
   disappears at the same moment. The error gets the same block so a failure is not
   quieter than a success, but deliberately lighter: his note was that it "doesn't
   need to be as pronounced in comparison to the confirmation". */
.form-note--ok, .form-note--err {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid currentColor;
}
.form-note--ok { color: var(--color-success, #16A34A); background: rgba(22, 163, 74, 0.10); }
/* Placeholder notice: visibly unfinished, so nothing reads as final copy. */
.form-note--pending {
  font-weight: 400;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
}
/* Thinner rule and a fainter tint than the confirmation above, so it registers
   without shouting. */
.form-note--err { color: #b3261e; background: rgba(179, 38, 30, 0.05); border-left-width: 3px; }
.field-error { color: #b3261e; font-size: var(--fs-sm, 0.9rem); margin-top: var(--space-1); }
[data-conditional] { display: none; }
[data-conditional].is-shown { display: block; }

/* FAQ accordion (per-exam review pages) */
.faq { border-top: 1px solid var(--color-border); max-width: 60rem; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary { list-style: none; cursor: pointer; padding: var(--space-4) 2.5rem var(--space-4) 0; position: relative; font-family: var(--font-serif, Georgia, serif); font-size: var(--fs-lg, 1.2rem); font-weight: 700; color: var(--color-navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; font-weight: 500; color: var(--color-navy); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 2.5rem var(--space-4) 0; color: var(--color-ink-muted); max-width: 52rem; }
.faq__answer p { margin: 0; }
@media (min-width: 992px) {
  .row > .col-lg-2 { flex: 1 1 calc(16.666% - var(--space-5)); }
  .row > .col-lg-3 { flex: 1 1 calc(25% - var(--space-5)); }
  .row > .col-lg-4 { flex: 1 1 calc(33.333% - var(--space-5)); }
  .row > .col-lg-6 { flex: 1 1 calc(50% - var(--space-5)); }
}

/* Provider logo placeholder (initials roundel) */
.provider-logo {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-navy-2);
}

/* ============ Cards ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card--navy {
  background: var(--color-navy-2);
  border-color: var(--color-navy-2);
  color: var(--color-ink-on-navy);
}
.card--navy h2, .card--navy h3, .card--navy h4 { color: var(--color-ink-on-navy); }
.card--navy p { color: var(--color-ink-on-navy-2); }

/* ============ Check list (Why Trust panel, key strengths) ============ */
.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.check-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.check-list li::before {
  content: "\2713";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-navy-2);
  color: var(--color-navy-2);
  font-size: 0.6rem;
  font-weight: 700;
}
.check-list--success li::before { border-color: var(--color-success); color: var(--color-success); }
.on-dark .check-list li::before { border-color: var(--color-ink-on-navy-2); color: var(--color-ink-on-navy); }

/* ============ Ranking table ============ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ranking-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--fs-sm);
}
.ranking-table caption { text-align: left; }
.ranking-table thead th {
  background: var(--color-navy-2);
  color: var(--color-ink-on-navy);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}
.ranking-table tbody th,
.ranking-table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.ranking-table tbody tr:last-child th,
.ranking-table tbody tr:last-child td { border-bottom: none; }
.ranking-table tbody tr:hover { background: rgba(250, 248, 242, 0.7); }
.ranking-table .provider-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-navy);
}
.ranking-table .provider-cell small {
  display: block;
  font-weight: 400;
  color: var(--color-ink-muted);
}
.ranking-table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-navy); }

/* ============ Criterion bars (review page) ============
   Usage: <div class="bar" style="--score: 8.6"><span class="bar__fill"></span></div> */
.bar {
  --score: 0;
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-track);
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0;
  width: calc(var(--score) / 10 * 100%);
  border-radius: inherit;
  background: var(--color-gold);
}
.criterion-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.criterion-row:last-child { border-bottom: none; }
.criterion-row .bar { grid-column: 1 / -1; }
.criterion-row__label { font-weight: 500; font-size: var(--fs-sm); }
.criterion-row__score { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-sm); color: var(--color-navy); }

/* ============ Pros & cons ============ */
.pros-cons {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pros-cons__col { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.pros-cons__col h3 { font-size: var(--fs-base); margin-bottom: var(--space-4); }
.pros-cons ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-sm); }
.pros-cons li { display: flex; gap: var(--space-3); align-items: baseline; }
.pros-cons__col--pros li::before { content: "+"; font-weight: 700; color: var(--color-success); flex: none; }
.pros-cons__col--cons li::before { content: "\2013"; font-weight: 700; color: var(--color-ink-muted); flex: none; }

/* ============ Facts list ("at a glance") ============ */
.facts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  font-size: var(--fs-sm);
}
.facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.facts li:last-child { border-bottom: none; }
.facts dt, .facts .facts__label { color: var(--color-ink-muted); }
.facts .facts__value { font-weight: 600; color: var(--color-navy); text-align: right; }
.on-dark .facts li { border-bottom-color: rgba(245,242,233,0.15); }
.on-dark .facts .facts__label { color: var(--color-ink-on-navy-2); }
.on-dark .facts .facts__value { color: var(--color-ink-on-navy); }

/* ============ Search form ============ */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(245, 242, 233, 0.08);
  border: 1px solid rgba(245, 242, 233, 0.25);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.9rem;
  transition: border-color var(--transition);
}
.search-form:focus-within { border-color: var(--color-ink-on-navy); }
.search-form input {
  background: transparent;
  border: none;
  color: var(--color-ink-on-navy);
  font-size: var(--fs-sm);
  width: 9rem;
  min-width: 0;
}
.search-form input::placeholder { color: var(--color-ink-on-navy-2); }
.search-form input:focus { outline: none; } /* focus shown on wrapper via :focus-within */
.search-form button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-ink-on-navy-2);
  display: inline-flex;
}
.search-form button:hover { color: var(--color-ink-on-navy); }

/* ============ Image placeholder (real asset drops in later) ============ */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    rgba(36, 59, 83, 0.05) 0 12px,
    rgba(36, 59, 83, 0.10) 12px 24px
  );
  border: 1px dashed rgba(36, 59, 83, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-4);
}

/* ============ Trust bar items (footer) ============ */
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.trust-item strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-on-navy);
}
.trust-item p { font-size: var(--fs-sm); color: var(--color-ink-on-navy-2); }
.trust-item svg { flex: none; width: 26px; height: 26px; stroke: var(--color-ink-on-navy-2); margin-top: 2px; }

/* ============ Inline text button (reads as a link inside a sentence) ============ */
.link-inline {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-inline:hover { color: var(--color-gold-deep); }

/* ============ Modal (native <dialog>) ============ */
.modal {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  background: transparent;
  color: var(--color-ink);
}
.modal::backdrop { background: rgba(17, 34, 64, 0.55); }

/* Mobile first: the panel is a sheet pinned to the bottom of the screen. */
.modal__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.modal__close:hover { background: var(--color-bg); }
.modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.modal__body {
  overflow-y: auto;
  padding: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.modal__body h3 {
  font-size: var(--fs-base);
  margin: var(--space-5) 0 var(--space-2);
}
.modal__body h3:first-of-type { margin-top: 0; }
.modal__body p { color: var(--color-ink-muted); }

.modal__notice {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--fs-xs);
  color: var(--color-ink) !important;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}
.modal__foot .btn { width: 100%; justify-content: center; }

/* Tablet and up: centered card instead of a bottom sheet. */
@media (min-width: 40rem) {
  .modal__panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    width: min(38rem, calc(100% - 2 * var(--space-5)));
    max-height: 82vh;
    border-radius: var(--radius-lg);
  }
  .modal__body { font-size: var(--fs-base); padding: var(--space-6); }
  .modal__head { padding: var(--space-5) var(--space-6); }
  .modal__foot { padding: var(--space-4) var(--space-6); }
  .modal__foot .btn { width: auto; }
}