.review-article {
  margin: 0 auto;
  max-width: 1440px;
}

.review-preview-index {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  line-height: 1.6;
}


.review-preview-index h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.2; }
.review-preview-index h2 { font-size: 22px; margin-bottom: 8px; }
.review-preview-index ul { padding-left: 24px; }
.review-preview-index li { margin-bottom: 24px; }

.review-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  min-height: 700px;
}

.review-hero-copy {
  align-self: center;
  padding: clamp(68px, 8vw, 116px) clamp(28px, 6vw, 88px);
}

.review-kicker,
.section-label {
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1.4;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.review-kicker-current {
  background: var(--lime);
  color: var(--ink);
  display: inline-block;
  padding: 8px 10px;
}

.review-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(50px, 6.2vw, 88px);
  font-weight: 520;
  letter-spacing: -.06em;
  line-height: .94;
  margin: 0;
}

.review-dek {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  margin: 32px 0 0;
  max-width: 760px;
}

.review-byline {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 10px 24px;
  margin-top: 34px;
  padding-top: 18px;
}

.review-byline span { font-weight: 800; }
.review-byline time { color: var(--muted); }

/* The hero image is a paid link, so it says so where it is rather than
   relying on a disclosure ten thousand characters below it. Sized to match
   the caption above it, not to shout. */
.review-product-stage > .review-stage-disclosure {
  color: rgba(24, 50, 47, 0.72);
  font-size: 12px;
  letter-spacing: normal;
  line-height: 1.5;
  margin: 10px auto 0;
  max-width: 46ch;
  text-align: center;
  text-transform: none;
}

.review-product-stage {
  align-items: center;
  background: #fff;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  padding: 56px clamp(24px, 4vw, 64px);
}

.review-product-stage > a {
  display: block;
  width: min(100%, 550px);
}

.review-product-halo {
  aspect-ratio: 1;
  background: var(--lime);
  border-radius: 50%;
  display: grid;
  padding: clamp(34px, 5vw, 68px);
  place-items: center;
  width: 100%;
}

.review-product-halo img {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Evidence-led articles use shorter reading lines and leave the real product
   inside its white image field, clear of the surrounding green ring. */
.review-researched .review-product-halo img { padding: 15%; }
.review-researched .review-product-halo-tight img { padding: 6%; }
.review-researched .review-citations { white-space: normal; }
.review-researched .review-citations a { font-size: 12px; font-weight: 700; }
.review-researched .review-sources li { scroll-margin-top: 110px; margin-bottom: 12px; }
.review-researched .review-sources li:target { background: var(--lime); }
.review-researched h2[id], .review-researched h3[id] { scroll-margin-top: 110px; }
.review-researched .review-hero-text-only { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.review-researched .review-hero-text-only .review-hero-copy { max-width: 1000px; }
.review-researched .review-hero-text-only .image-verdict-badge { position: relative; inset: auto; margin-top: 28px; transform: none; }
@media (max-width: 380px) {
  .researched-article-page .site-header { grid-template-columns: 1fr; height: auto; gap: 8px; }
  .researched-article-page .site-header .header-action { width: 100%; text-align: center; }
}

.review-product-stage > p {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  margin: 18px 0 0;
  text-align: center;
  text-transform: uppercase;
}

.verdict-block {
  border-bottom: 1px solid var(--ink);
  margin: 0 auto;
  max-width: 1280px;
  padding: 110px 24px;
}

.verdict-block h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(42px, 5.3vw, 76px);
  font-weight: 520;
  letter-spacing: -.055em;
  line-height: 1;
  margin: 0;
  max-width: 1160px;
}

.verdict-block > p:last-child {
  font-size: 20px;
  line-height: 1.65;
  margin: 40px 0 0 auto;
  max-width: 720px;
}

.review-section {
  border-bottom: 1px solid var(--line);
  margin: 0 auto;
  max-width: 1280px;
  padding: 100px 24px;
}

.review-section-heading {
  display: grid;
  gap: 30px 54px;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
}

.review-section-heading .section-label { grid-column: 1; }

.review-section-heading h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 520;
  grid-column: 2;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 0;
}

.review-section-heading > p:last-child {
  grid-column: 2;
  line-height: 1.65;
  margin: 0;
}

.fact-grid {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 62px;
}

.fact-grid article {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 220px;
  padding: 28px;
}

.fact-grid article:nth-child(3n) { border-right: 0; }
.fact-grid strong { color: var(--orange); font: 560 clamp(34px, 4vw, 54px)/1 "Space Grotesk", sans-serif; }
.fact-grid h3 { font-size: 15px; margin: 22px 0 10px; }
.fact-grid p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }

.fit-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 1440px;
}

.fit-split article { padding: 90px clamp(28px, 6vw, 90px); }
.fit-buy { background: var(--lime); }
.fit-skip { background: var(--ink); color: var(--paper-bright); }
.fit-skip .section-label { color: var(--orange); }
.fit-split h2 { font: 540 clamp(38px, 4vw, 58px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; margin: 0 0 40px; }
.fit-split ul { list-style: none; margin: 0; padding: 0; }
.fit-split li { border-top: 1px solid currentColor; line-height: 1.55; padding: 18px 0 18px 28px; position: relative; }
.fit-split li::before { content: "→"; left: 0; position: absolute; }

.owner-theme-list { border-top: 1px solid var(--ink); margin-top: 64px; }
.owner-theme-list article { border-bottom: 1px solid var(--line); display: grid; gap: 32px; grid-template-columns: 80px 1fr; padding: 34px 0; }
.owner-theme-list > article > span { color: var(--orange); font: 600 24px/1 "Space Grotesk", sans-serif; }
.owner-theme-list h3 { font: 600 26px/1.15 "Space Grotesk", sans-serif; margin: 0; }
.owner-theme-list p { line-height: 1.65; max-width: 780px; }
.owner-theme-list a, .review-sources a { font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

.decision-check ol {
  counter-reset: decision;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 62px 0 0;
  padding: 0;
}

.decision-check li {
  background: var(--paper-bright);
  counter-increment: decision;
  font: 560 23px/1.35 "Space Grotesk", sans-serif;
  min-height: 190px;
  padding: 34px;
}

.decision-check li::before { color: var(--orange); content: "0" counter(decision); display: block; font: 800 12px/1 "DM Sans", sans-serif; letter-spacing: .12em; margin-bottom: 28px; }

.affiliate-decision {
  align-items: end;
  background: var(--teal);
  color: var(--paper-bright);
  display: grid;
  gap: 54px;
  grid-template-columns: 1fr auto;
  margin: 0 auto;
  max-width: 1280px;
  padding: 70px clamp(24px, 5vw, 70px);
}

.affiliate-decision .section-label { color: var(--lime); }
.affiliate-decision h2 { font: 560 clamp(38px, 4vw, 58px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; margin: 0 0 18px; }
.affiliate-decision p { line-height: 1.6; max-width: 720px; }
.affiliate-decision .button { background: var(--lime); color: var(--ink); min-width: 260px; }
.affiliate-disclosure { font-size: 12px; font-weight: 800; }

.review-sources { display: grid; gap: 54px; grid-template-columns: .9fr 1.1fr; }
.review-sources .review-section-heading { display: block; }
.review-sources ul { line-height: 1.7; margin: 0 0 30px; padding-left: 20px; }
.review-sources > div:last-child > p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 28px; }
.manufacturer-source { color: var(--muted); font-size: 12px !important; }

.review-library { margin: 0 auto; max-width: 1280px; padding: 100px 24px 120px; }
.review-library > header { max-width: 930px; }
.review-library > header h1 { font: 520 clamp(64px, 8vw, 112px)/.88 "Space Grotesk", sans-serif; letter-spacing: -.07em; margin: 0; }
.review-library > header h1 span { color: var(--orange); }
.review-library > header > p:last-child { font-size: 20px; line-height: 1.65; margin: 38px 0 0; max-width: 760px; }
.review-library-grid { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, 1fr); margin: 84px 0; }
.review-library-card { border-bottom: 1px solid var(--line); min-height: 440px; padding: 38px 42px; position: relative; }
.review-library-card:nth-child(odd) { border-right: 1px solid var(--line); }
.review-library-card > span { color: var(--orange); font: 650 20px/1 "Space Grotesk", sans-serif; position: absolute; right: 38px; top: 40px; }
.review-library-card > p:first-child { color: var(--teal); font-size: 11px; font-weight: 850; letter-spacing: .14em; padding-right: 50px; text-transform: uppercase; }
.review-library-card h2 { font: 560 clamp(34px, 4vw, 52px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; margin: 50px 0 14px; }
.review-library-card > strong { display: block; font-size: 17px; }
.review-library-card > p:not(:first-child) { color: var(--muted); line-height: 1.6; }
.review-library-card > a { bottom: 38px; font-size: 14px; font-weight: 850; position: absolute; text-decoration: underline; text-underline-offset: 5px; }
.review-library-featured { background: var(--lime); }

@media (max-width: 900px) {
  .review-hero { display: block; }
  .review-product-stage { border-left: 0; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-grid article:nth-child(3n) { border-right: 1px solid var(--line); }
  .fact-grid article:nth-child(2n) { border-right: 0; }
  .review-section-heading, .review-sources { display: block; }
  .review-section-heading h2, .review-section-heading > p:last-child { grid-column: auto; margin-top: 24px; }
  .affiliate-decision { align-items: start; grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .review-hero-copy { padding: 68px 20px; }
  .review-hero h1 { font-size: 52px; }
  .review-product-stage { padding: 46px 28px; }
  .review-product-halo { padding: 34px; }
  .verdict-block, .review-section { padding: 76px 20px; }
  .fit-split { grid-template-columns: 1fr; }
  .fit-split article { padding: 70px 24px; }
  .fact-grid, .decision-check ol, .review-library-grid { grid-template-columns: 1fr; }
  .fact-grid article, .fact-grid article:nth-child(3n) { border-right: 0; }
  .owner-theme-list article { grid-template-columns: 48px 1fr; }
  .affiliate-decision { margin: 0 20px; padding: 54px 24px; }
  .affiliate-decision .button { min-width: 0; width: 100%; }
  .review-library { padding: 76px 20px; }
  .review-library > header h1 { font-size: 64px; }
  .review-library-card, .review-library-card:nth-child(odd) { border-right: 0; padding: 34px 24px; }
}

/* Dated confirmation that the selection gate was actually applied to this
   product. Rendered only where evidence/product-editorials records it. */
.verdict-badge {
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.verdict-not-worthivo .verdict-badge { color: var(--orange); }

.verdict-badge-none {
  color: var(--muted);
  opacity: .85;
}

.verdict-condition,
.verdict-no-link,
.verdict-legacy-note {
  border-left: 2px solid var(--line);
  font-size: 16px;
  margin: 18px 0 0;
  max-width: 58ch;
  padding-left: 16px;
}

.verdict-no-link { border-left-color: var(--orange); }

.verdict-dated {
  color: var(--muted);
  font-size: 14px;
  margin: 14px 0 0;
}

.card-verdict {
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.card-verdict-not-worthivo { color: var(--orange); }

.card-verdict-none {
  color: var(--muted);
  opacity: .8;
}

/* ---------------------------------------------------------------- verdict badge
   Sits over the top-right of the product image. Square, flat, heavy uppercase —
   the same vocabulary as the weekly-pick kicker, so it reads as part of the site
   rather than a sticker applied to it. */
.review-product-stage { position: relative; }

.image-verdict-badge {
  align-items: center;
  background: var(--teal);
  border: 0;
  color: var(--paper);
  cursor: pointer;
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: .14em;
  line-height: 1.25;
  padding: 11px 14px 11px 12px;
  position: absolute;
  right: 26px;
  text-transform: uppercase;
  top: 26px;
  z-index: 3;
}

.image-verdict-badge svg { flex: none; }
.image-verdict-words { text-align: left; }

.image-verdict-more {
  align-items: center;
  border: 1.5px solid currentColor;
  display: flex;
  flex: none;
  font-size: 10px;
  height: 15px;
  justify-content: center;
  letter-spacing: 0;
  margin-left: 3px;
  opacity: .75;
  width: 15px;
}

.image-verdict-badge:hover { filter: brightness(1.08); }
.image-verdict-badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.image-verdict-conditional { background: var(--ink); color: var(--lime); }
.image-verdict-not-worthivo { background: var(--orange-deep); color: var(--paper-bright); }

/* -------------------------------------------------------------- the explainer */
.verdict-explainer {
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  inset: unset;
  left: 50%;
  /* The explainer is taller than a short laptop viewport once the tier copy and
     the how-we-got-there list are in it, so it has to be able to scroll itself.
     Without this it overflows the screen with no way to reach the close button. */
  max-height: calc(100dvh - 32px);
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
}

.verdict-explainer::backdrop { background: rgba(24, 50, 47, .55); }

.explainer-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px 24px 0;
}

.explainer-badge {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: .14em;
  line-height: 1.25;
  margin: 0;
  padding: 11px 14px 11px 12px;
  text-transform: uppercase;
}

.explainer-close {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  padding: 4px;
}
.explainer-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.verdict-explainer h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 20px 24px 0;
}

.verdict-explainer > p {
  font-size: 16px;
  line-height: 1.6;
  margin: 14px 24px 0;
}

.explainer-how {
  border-top: 1px solid var(--line);
  margin: 18px 24px 0;
  padding-top: 16px;
}
.explainer-how .section-label { margin: 0 0 10px; }
.explainer-how ul { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.explainer-how li { font-size: 15px; line-height: 1.55; padding-left: 18px; position: relative; }
.explainer-how li::before {
  background: var(--teal);
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 7px;
}

.explainer-caveat {
  background: var(--paper-bright);
  border-left: 3px solid var(--teal);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 24px 0;
  padding: 14px 16px;
}
.image-verdict-conditional ~ .verdict-explainer .explainer-caveat { border-left-color: var(--ink); }
.explainer-caveat strong { font-size: 13px; }
.explainer-caveat span { color: var(--muted); font-size: 15px; line-height: 1.55; }

.explainer-maker {
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 16px 24px 0;
  padding-left: 14px;
}

.explainer-foot {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 18px 24px 24px;
}

@media (max-width: 560px) {
  .image-verdict-badge { right: 14px; top: 14px; font-size: 11px; padding: 9px 11px 9px 10px; }
  .verdict-explainer { width: calc(100vw - 24px); }
}

/* The verdict for THIS product leads the explainer; the tier copy is context. */
.explainer-verdict {
  font-size: 16px;
  line-height: 1.6;
  margin: 14px 24px 0;
}

.explainer-condition,
.explainer-nolink {
  border-left: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  margin: 14px 24px 0;
  padding-left: 14px;
}

.explainer-nolink { border-left-color: var(--orange); }

.explainer-dated {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 24px 0;
}

.explainer-generic {
  border-top: 1px solid var(--line);
  margin: 18px 24px 0;
  padding-top: 16px;
}
.explainer-generic .section-label { margin: 0 0 8px; }
.explainer-generic p { font-size: 15px; line-height: 1.6; margin: 0; }

/* --------------------------------------------------- verdict block typography
   The verdict statement is a sentence, not a headline. The review's own h2 scale
   is built for three or four words; a full conclusion set at that size dominates
   the page and is harder to read, not easier. */
.verdict-block h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.32;
  margin: 0;
  /* Not ch: Space Grotesk's zero is far wider than its average glyph, so 60ch
     measured out at ~1000px — roughly 130 characters a line. Set in px against
     the rendered result instead. */
  max-width: 660px;
  text-wrap: pretty;
}

.verdict-block .verdict-condition,
.verdict-block .verdict-no-link {
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
}

.verdict-block > p:not([class]) {
  font-size: 17px;
  line-height: 1.65;
  max-width: 640px;
}

.card-verdict-nolink {
  border-left: 2px solid var(--orange);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
  padding-left: 10px;
}

/* ------------------------------------------------- the product image is a link
   Nothing on the page said so. The affordance is built entirely from a
   pseudo-element on the halo: no DOM node, no text, no markup change, so a
   crawler sees exactly the same document it saw before and the anchor keeps its
   own aria-label as the accessible name.

   It is scoped to `a > .review-product-halo` on purpose. On a Not Worthivo page
   the image is deliberately NOT wrapped in a link, and inviting a click there
   would promise a route to buy that the verdict forbids — so the affordance
   disappears with the link, automatically, rather than by a second rule someone
   has to remember. */
a > .review-product-halo {
  /* The sweep is a square box wearing a border-radius. Rotating a square grows
     its axis-aligned bounds by up to a factor of root two, so the corners swung
     ~23px past the halo on every frame and widened the document — the page
     scrolled sideways even though nothing visible had moved. Clipping to the
     halo's own circle contains it. The element's own box-shadow and outline are
     unaffected: overflow clips children, not the element's own decorations. */
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s ease;
}

/* A brighter lime segment travelling the ring. The image sits above it, so only
   the annulus shows the sweep — the ring reads as live without anything moving
   in the reader's way. transform-only, so it stays on the compositor. */
a > .review-product-halo::after {
  animation: worthivo-halo-sweep 9s linear infinite;
  background: conic-gradient(
    from 0turn,
    rgba(255, 255, 255, 0) 0turn .58turn,
    rgba(255, 255, 255, .46) .78turn,
    rgba(255, 255, 255, 0) .92turn 1turn
  );
  border-radius: 50%;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

a > .review-product-halo img {
  position: relative;
  transition: transform .25s ease;
  z-index: 1;
}

/* @keyframes worthivo-halo-sweep moved to worthivo-site.css: the homepage
   uses the same sweep and does not load this stylesheet, so the animation name
   resolved to nothing there. Shared primitives belong in the sheet every page
   loads. */

/* Pointer and keyboard get the same response: the ring hardens, the sweep picks
   up, the product lifts. Touch has no hover, which is why the ambient sweep
   carries the affordance on its own. */
a:hover > .review-product-halo,
a:focus-visible > .review-product-halo {
  box-shadow: 0 0 0 3px var(--ink);
}

a:hover > .review-product-halo::after,
a:focus-visible > .review-product-halo::after {
  animation-duration: 2.4s;
}

a:hover > .review-product-halo img,
a:focus-visible > .review-product-halo img {
  transform: scale(1.035);
}

/* Tactile: the product presses in under the click. */
a:active > .review-product-halo img {
  transform: scale(.99);
  transition-duration: .08s;
}

a:focus-visible > .review-product-halo {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

/* Someone who has asked the system for less motion gets none of the sweep. The
   hover and focus states stay, so the affordance survives — it just waits to be
   asked for rather than announcing itself. */
@media (prefers-reduced-motion: reduce) {
  a > .review-product-halo::after { animation: none; }
  a > .review-product-halo img,
  a > .review-product-halo { transition: none; }
  a:hover > .review-product-halo img,
  a:focus-visible > .review-product-halo img { transform: none; }
}

/* States for the lime-on-teal affiliate CTA. Declared here, right after the rule
   that makes it lime, because the generic .button-primary:hover in
   worthivo-site.css ties on specificity and loads earlier — it lost silently,
   and this button ran with no hover state at all. */
.affiliate-decision .button:hover,
.affiliate-decision .button:focus-visible {
  background: var(--paper-bright);
  /* lime -> paper-bright is only 1.2 contrast between the two states, so the
     ring and the lift are doing the real work here, not the colour. */
  box-shadow: 0 0 0 2px var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
}

.affiliate-decision .button:active {
  background: var(--lime);
  color: var(--ink);
}

.affiliate-decision .button:focus-visible {
  outline: 3px solid var(--paper-bright);
  outline-offset: 4px;
}

/* ---------------------------------------------------------- back to school
   The card leads with the CONDITION, not the product name. On a Conditional
   verdict the condition is the decisive part — a sentence starting "if you"
   that a reader resolves in one pass — and a headline above it would bury the
   only thing they came for. */
.bts-shell { margin: 0 auto; max-width: 1180px; padding: 0 clamp(20px, 5vw, 48px) 88px; }

.bts-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(30px, 4vw, 46px); max-width: 780px; }
.bts-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(42px, 6vw, 74px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .96;
  margin: 0 0 20px;
}
.bts-hero h1 span { color: var(--teal); }
.bts-hero > p { font-size: 19px; line-height: 1.6; margin: 0; max-width: 62ch; }

.bts-band { border-top: 1px solid var(--line); padding: 34px 0; }
.bts-band header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 22px; }
.bts-band .section-label { margin: 0; }
.bts-who { color: var(--muted); font-size: 14px; margin: 0; }

.bts-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.bts-card {
  background: var(--paper-bright);
  border: 1px solid var(--line-soft, rgba(24,50,47,.12));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 26px;
}
.bts-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.bts-card h3 a { color: inherit; text-decoration: none; }
.bts-card h3 a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.bts-condition { font-size: 16px; line-height: 1.6; margin: 0; max-width: 52ch; }

.bts-more {
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-top: auto;
  padding-top: 8px;
  text-transform: uppercase;
}
.bts-more:hover { color: var(--ink); }

.bts-empty { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; max-width: 58ch; }

.hub-section-link { margin: 18px 0 0; }
.hub-section-link a { font-size: 15px; font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .bts-grid { grid-template-columns: 1fr; }
}