/* ==========================================================================
   Brake Spoon — Components
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */
.hero { padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 7vw, 6rem); position: relative; overflow: hidden; }
.hero::after {
  /* faint road-lane rule that anchors the hero without becoming a gradient blob */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 26px, transparent 26px 46px);
}
.hero-grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1.05fr 0.95fr; align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-title { font-size: var(--t-mega); font-weight: 800; font-stretch: 120%; }
.hero-title .ln { display: block; overflow: hidden; }
.hero-title .ln > span { display: block; }
.hero-title em { font-style: normal; color: var(--pass-deep); }

.hero-lead { margin-top: var(--s-5); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); align-items: center; }

.hero-note {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-family: var(--data); font-size: var(--t-small); color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.hero-note b { color: var(--ink); font-weight: 600; }

/* --- THE SERVICE DAY (hero visual) -----------------------------------------
   A live-tracking view of one service day, exactly as the app shows it.
   Rows tick through on load (main.js), ending on the PASS state. */
.hero-visual { display: flex; justify-content: center; }

.dayline {
  width: min(100%, 400px);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  transform: rotate(-1.6deg);
  overflow: hidden;
}
@media (max-width: 560px) { .dayline { transform: none; } }

.dayline-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 2px solid var(--ink);
}
.dayline-title {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.dayline-date {
  font-family: var(--data); font-size: var(--t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.dayline-date::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pass); box-shadow: 0 0 0 3px var(--pass-soft);
}

.day-rows { list-style: none; margin: 0; padding: var(--s-4) var(--s-5); }
.day-row {
  display: grid; grid-template-columns: 44px 16px 1fr;
  gap: 0 var(--s-3); align-items: baseline;
  padding-block: var(--s-3); margin: 0;
  position: relative;
  opacity: 0.38;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.day-row.is-done { opacity: 1; }

.day-time {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.04em; text-align: right;
}
.day-row.is-done .day-time { color: var(--pass-deep); }

/* rail: dot per row, connected by a line */
.day-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--card);
  align-self: center; position: relative; z-index: 1;
  transition: background var(--dur-fast) var(--ease-pop), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-pop);
}
.day-row.is-done .day-dot { background: var(--pass); border-color: var(--ink); transform: scale(1.15); }
.day-row::before {
  content: ""; position: absolute; left: calc(44px + var(--s-3) + 4.5px);
  top: 0; bottom: 0; width: 2px; background: var(--line);
}
.day-row:first-child::before { top: 50%; }
.day-row:last-child::before { bottom: 50%; }

.day-what b { display: block; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.day-what small { display: block; font-size: var(--t-micro); font-family: var(--data); color: var(--ink-3); margin-top: 2px; }

.dayline-foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1.5px dashed var(--line-strong);
  font-family: var(--data); font-size: var(--t-micro); color: var(--ink-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-pop);
}
.dayline.is-complete .dayline-foot { opacity: 1; transform: none; }

.sticker-caption {
  text-align: center; margin-top: var(--s-5);
  font-family: var(--data); font-size: var(--t-small); color: var(--ink-2);
}
.sticker-caption b { color: var(--ink); font-weight: 600; }

/* --- STEPS: a real sequence, so numbering carries information ------------- */
.steps { display: grid; gap: var(--s-5); grid-template-columns: repeat(4, 1fr); counter-reset: step; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.step-n {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em;
  color: var(--pass-deep); display: block; margin-bottom: var(--s-4);
}
.step h3 { margin-bottom: var(--s-3); }
.step p { font-size: var(--t-small); color: var(--ink-2); }
/* The time chip sits at the bottom of every card and never wraps, so the
   four cards stay symmetric whatever their copy length. */
.step-time {
  display: inline-block; margin-top: auto; align-self: flex-start;
  white-space: nowrap;
  font-family: var(--data); font-size: var(--t-micro); color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 10px;
}
.step p { margin-bottom: var(--s-4); }

/* --- ADVOCACY: the mock inspection report --------------------------------- */
.advocate { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); }
.advocate .eyebrow { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.advocate h2 { color: var(--paper); }
.advocate-lead { color: color-mix(in srgb, var(--paper) 72%, transparent); }

.report {
  background: var(--card); color: var(--ink); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.report-head {
  padding: var(--s-5); border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.report-title { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.report-meta { font-family: var(--data); font-size: var(--t-micro); color: var(--ink-3); }
.report-list { list-style: none; margin: 0; padding: 0; }
.report-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-4);
  align-items: center; padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line); margin: 0;
}
.report-row:last-child { border-bottom: 0; }
.report-item { font-weight: 500; font-size: 0.9375rem; }
.report-why { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); margin: 0; }

.tag {
  font-family: var(--data); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.tag-need { background: var(--pass-soft); color: var(--pass-deep); border: 1px solid var(--pass); }
.tag-skip { background: var(--reject-soft); color: #B3134B; border: 1px solid var(--reject); }

.report-foot {
  padding: var(--s-5); background: var(--paper); border-top: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  font-family: var(--data); font-size: var(--t-small);
}
.report-saved { font-weight: 600; color: var(--pass-deep); font-size: 1.125rem; }

/* --- SERVICE CARDS (registration / oil) ----------------------------------- */
.cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card-tint-blue { background: var(--sticker-soft); }
.card-tint-pass { background: var(--pass-soft); }
.card h3 { margin: var(--s-4) 0 var(--s-3); }
.card p { font-size: 0.9375rem; color: var(--ink-2); }
.card-price {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1; margin-top: auto; padding-top: var(--s-5);
}
.card-price small { font-family: var(--data); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); display: block; margin-top: var(--s-2); }
.card-icon { width: 40px; height: 40px; }

.checks { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.checks li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; color: var(--ink-2); margin-bottom: var(--s-3); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 15px; height: 9px;
  border-left: 2.5px solid var(--pass-deep); border-bottom: 2.5px solid var(--pass-deep);
  transform: rotate(-45deg);
}

/* --- PRICING -------------------------------------------------------------- */
.price-hero {
  background: var(--pass); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem); box-shadow: var(--shadow-pop);
}
.price-figure {
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(4rem, 11vw, 8rem); line-height: 0.82; letter-spacing: -0.055em; color: var(--ink);
}
.price-figure sup { font-size: 0.36em; vertical-align: super; letter-spacing: -0.02em; }
.price-per { font-family: var(--data); font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 72%, transparent); margin-top: var(--s-4); }

.breakdown { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.breakdown li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-family: var(--data); font-size: 0.875rem;
}
.breakdown li:last-child { border-bottom: 0; font-weight: 600; }

/* Two-tier pricing: next-day (paper card) beside same-day (the green hero).
   Same component, one modifier, so the breakdown rows line up across both. */
.price-tiers { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 820px) { .price-tiers { grid-template-columns: 1fr; } }
.price-hero-alt { background: var(--card); box-shadow: var(--shadow-md); }
.price-hero-alt .breakdown li { border-bottom-color: var(--line); }
.price-tier-name {
  font-family: var(--data); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-4);
}
.price-note {
  margin-top: var(--s-5); max-width: 62ch;
  font-family: var(--data); font-size: var(--t-small); color: var(--ink-3);
}

/* Service menu: six categories in a 3-up grid of step cards. */
.menu { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .menu { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .menu { grid-template-columns: 1fr; } }
.menu .step-time a { color: inherit; text-decoration: none; }
.menu .step-time a:hover { color: var(--pass-deep); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  background: none; border: 0; padding: var(--s-5) 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--ink);
}
.faq-q:hover { color: var(--pass-deep); }
.faq-icon { flex: none; width: 20px; height: 20px; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; height: 0; transition: height var(--dur-mid) var(--ease-out); }
.faq-a-inner { padding-bottom: var(--s-5); max-width: var(--maxw-text); color: var(--ink-2); font-size: 0.9375rem; }

/* --- COVERAGE ------------------------------------------------------------- */
.coverage { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding: 0; list-style: none; }
.chip {
  font-family: var(--data); font-size: var(--t-small); padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2);
  margin: 0;
}
.chip-live { background: var(--pass-soft); border-color: var(--pass); color: var(--pass-deep); font-weight: 600; }
.chip-soon { opacity: .65; }

/* --- BLOG ----------------------------------------------------------------- */
.posts { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }

.post-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pass); }
.post-meta { font-family: var(--data); font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.post-card h3 { font-size: 1.1875rem; }
.post-card p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.post-more { margin-top: auto; padding-top: var(--s-3); font-family: var(--data); font-size: var(--t-small); color: var(--pass-deep); font-weight: 500; }

/* --- ARTICLE -------------------------------------------------------------- */
.article { max-width: 68ch; margin-inline: auto; }
.article h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); margin: var(--s-8) 0 var(--s-4); }
.article h3 { margin: var(--s-6) 0 var(--s-3); }
.article p, .article li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.article strong { color: var(--ink); font-weight: 600; }
.article blockquote {
  margin: var(--s-6) 0; padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--pass); background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article table { width: 100%; border-collapse: collapse; margin: var(--s-6) 0; font-size: 0.9375rem; }
.article th, .article td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.article th { font-family: var(--data); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* --- CTA BAND ------------------------------------------------------------- */
.cta-band {
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;
}
.cta-band h2 { color: var(--paper); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: color-mix(in srgb, var(--paper) 70%, transparent); max-width: 48ch; margin: var(--s-5) auto 0; }
.cta-band .btn { margin-top: var(--s-7); }

/* --- Utility -------------------------------------------------------------- */
.center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Hero load sequence ---------------------------------------------------
   One orchestrated moment on load: the headline lines rise out of their
   masks, the supporting copy fades up behind them, then the sticker drops
   in and the month sweep (in main.js) lands on the service month.
   -------------------------------------------------------------------------- */
.js [data-hero] .hero-title .ln > span { transform: translateY(105%); }
.js [data-hero] .hero-lead,
.js [data-hero] .hero-actions,
.js [data-hero] .hero-note,
.js [data-hero] .hero-eyebrow { opacity: 0; transform: translateY(14px); }
.js .js [data-hero] .hero-visual { opacity: 0; transform: translateY(26px) scale(.96); }

[data-hero].is-loaded .hero-title .ln > span {
  transform: translateY(0);
  transition: transform 760ms var(--ease-out);
}
[data-hero].is-loaded .hero-title .ln:nth-child(1) > span { transition-delay: 60ms; }
[data-hero].is-loaded .hero-title .ln:nth-child(2) > span { transition-delay: 140ms; }
[data-hero].is-loaded .hero-title .ln:nth-child(3) > span { transition-delay: 220ms; }
[data-hero].is-loaded .hero-title .ln:nth-child(4) > span { transition-delay: 300ms; }
[data-hero].is-loaded .hero-title .ln:nth-child(5) > span { transition-delay: 380ms; }

[data-hero].is-loaded .hero-eyebrow,
[data-hero].is-loaded .hero-lead,
[data-hero].is-loaded .hero-actions,
[data-hero].is-loaded .hero-note {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
[data-hero].is-loaded .hero-eyebrow { transition-delay: 40ms; }
[data-hero].is-loaded .hero-lead    { transition-delay: 320ms; }
[data-hero].is-loaded .hero-actions { transition-delay: 400ms; }
[data-hero].is-loaded .hero-note    { transition-delay: 470ms; }

[data-hero].is-loaded .hero-visual {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-pop);
  transition-delay: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-hero] .hero-title .ln > span,
  [data-hero] .hero-lead, [data-hero] .hero-actions,
  [data-hero] .hero-note, [data-hero] .hero-eyebrow,
  [data-hero] .hero-visual { opacity: 1; transform: none; transition: none; }
}

/* Closing line under the advocacy copy — balances the column against the
   taller report card and states the standard we actually argue from. */
.advocate-cite {
  margin-top: var(--s-7);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--pass);
  background: color-mix(in srgb, var(--paper) 8%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--data);
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* Wide content scrolls inside its own container — the page body never scrolls
   sideways. Applies to prose tables in posts and on the registration page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--s-6) 0; }
.table-scroll table { margin: 0; min-width: 34rem; }


/* --- Photos ----------------------------------------------------------------
   Stock photography is cropped server-side to fixed ratios and framed like
   every other card on the site: ink border, large radius. */
.photo {
  display: block; width: 100%; object-fit: cover;
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.photo-row {
  display: grid; grid-template-columns: 2fr 3fr; gap: var(--s-5);
  margin-top: var(--s-7);
}
.photo-row .photo { height: clamp(220px, 30vw, 380px); }
@media (max-width: 700px) {
  .photo-row { grid-template-columns: 1fr; }
  .photo-row .photo { height: clamp(180px, 46vw, 260px); }
}
.photo-side { aspect-ratio: 4 / 3; height: auto; }

/* Old-way list: pink x marks instead of pass-green checks. */
.checks-x li::before {
  content: "\00d7"; border: 0; width: auto; height: auto; top: -0.08em;
  transform: none;
  font-family: var(--data); font-weight: 600; font-size: 1.05rem;
  color: #B3134B;
}


/* --- Mobile density for components ---------------------------------------- */
@media (max-width: 560px) {
  .hero { padding-block: 6.25rem 2.5rem; }
  .hero-actions { gap: 0.6rem; }
  .hero-actions .btn-lg { font-size: 1rem; padding: 0.85rem 1.3rem; }
  .hero-note { font-size: 0.8125rem; gap: 0.35rem 1.1rem; }
  .card, .step { padding: var(--s-5); }
  .price-hero { padding: 1.5rem 1.25rem; }
  .advocate { padding: 1.5rem 1.25rem !important; }
  .cta-band { padding: 2.25rem 1.25rem; }
  .report-head, .report-row, .report-foot { padding-inline: var(--s-4); }
}


/* Back-navigation link on blog posts. */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--data); font-size: var(--t-small); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: 0.4rem 0.9rem; margin-bottom: var(--s-5);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.backlink:hover { border-color: var(--pass-deep); color: var(--ink); transform: translateX(-2px); }

/* --- Discoverability components (Aug 2026) ---------------------------------
   Breadcrumbs, answer-first boxes, related-link clusters, sources, and the
   guides hub. All plain HTML so crawlers read them without JS. */
.crumbs { font-family: var(--data); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: var(--s-5); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--pass-deep); }

.answer {
  margin-top: var(--s-6); padding: var(--s-5) var(--s-6);
  background: var(--pass-soft); border: 2px solid var(--ink); border-radius: var(--r-md);
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink); max-width: 72ch;
}
.article .answer { color: var(--ink); }
.answer strong { font-family: var(--data); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pass-deep); display: block; margin-bottom: var(--s-2); }

.related { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.related h2 { font-size: 1.25rem; margin: 0 0 var(--s-4); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .related ul { grid-template-columns: 1fr; } }
.related li { margin: 0; font-size: 0.9375rem; color: var(--ink-2); padding: 0; }
.related li::before { content: none; }
.related a { font-weight: 500; color: var(--ink); }
.related a:hover { color: var(--pass-deep); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-8); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); }
.prose h3 { margin-top: var(--s-6); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.prose p { margin-top: var(--s-4); }
.prose ol, .prose ul { padding-left: 1.4rem; margin-top: var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--ink); font-weight: 600; }

.hub-cat { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.hub-cat h2 { margin-bottom: var(--s-3); }
.hub-cat > p { max-width: 62ch; color: var(--ink-2); }

.sources { margin-top: var(--s-8); padding: var(--s-5) var(--s-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.sources h2 { font-size: 0.75rem; font-family: var(--data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-3); }
.sources ul { margin: 0; padding-left: 1.2rem; }
.sources li { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s-2); }
.sources p { font-size: var(--t-small); color: var(--ink-3); margin: var(--s-3) 0 0; }

/* One-line inclusion statement inside every price card. */
.price-incl {
  font-family: var(--data); font-size: 0.8125rem; font-weight: 600;
  color: var(--ink); margin: var(--s-3) 0 0;
  padding: 5px 12px; display: inline-block;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
}