/*
 * conditions.css: Lane C (Conditions) stylesheet. Loads after ve-site.css.
 * Covers LiveConditionPage / ConditionPage (140+ pages), We Can Help,
 * Answer Hub, FAQ, the bespoke condition pages and the service-area pages.
 * Tokens from tokens.css only; every class is prefixed ve-cond-.
 *
 * Sections
 *   1. Page frame + condition browser (band extras)
 *   2. Intro row (text left, own photo right)
 *   3. Narrative sections (heading column left, copy right)
 *   4. Card-grid pages (symptoms, benefits, approach, outcomes, highlight)
 *   5. FAQ, related links, blog links, CTA panels
 *   6. We Can Help hub (search + tiles)
 *   7. Answer Hub, FAQ page, videos, service areas
 */

/* ========================================================= 1. page frame */
.ve-cond-page { padding: 0; }
.ve-cond-block + .ve-cond-block { margin-top: var(--section-y); }
.ve-cond-block--tight + .ve-cond-block, .ve-cond-block + .ve-cond-block--tight { margin-top: var(--block-gap); }
.ve-cond-page .ve-cta-wrap { padding: 0; }
.ve-cond-cta-guide .ve-eyebrow { color: var(--c-gold); margin-bottom: 8px; }
.ve-cond-block--tight:has(> .ve-cta) + .ve-cond-block { margin-top: var(--section-y); }
/* card-grid pages: the closing inline CTA gets the same air above it that a
   narrative section's bottom padding gives the callout on back-pain */
.ve-cond-block:not(.ve-cond-sections) + .ve-cond-block--tight:has(> .ve-cta) { margin-top: clamp(48px, 6vw, 80px); }
.ve-cond-cta-guide .ve-cta--large h2 { font-weight: 300; }

/* Eyebrows on Lane C pages follow the brief (16px / 600, normal case, no
   dot rule) until the integrator deletes the legacy ve-site.css section 8
   .ve-eyebrow rule that still uppercases them. */
.ve-cond-band .ve-eyebrow, .ve-cond-page .ve-eyebrow, .ve-cond-cta-guide .ve-eyebrow,
body.page-answers .ve-band .ve-eyebrow, body.page-faq .ve-band .ve-eyebrow, body.page-service-areas .ve-band .ve-eyebrow,
body[class*='page-chiropractor-'] .ve-band .ve-eyebrow, body.page-we-can-help .ve-eyebrow, body.page-extremities-adjusting .ve-band .ve-eyebrow {
  display: block;
  margin: 0 0 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
}
.ve-cond-band .ve-eyebrow::before, .ve-cond-page .ve-eyebrow::before, .ve-cond-cta-guide .ve-eyebrow::before,
body.page-answers .ve-band .ve-eyebrow::before, body.page-faq .ve-band .ve-eyebrow::before, body.page-service-areas .ve-band .ve-eyebrow::before,
body[class*='page-chiropractor-'] .ve-band .ve-eyebrow::before, body.page-we-can-help .ve-eyebrow::before, body.page-extremities-adjusting .ve-band .ve-eyebrow::before { content: none; }

/* Condition band: tighter than the generic band so long titles stay near 260px */
.ve-cond-band .ve-container { position: relative; }
.ve-cond-band.ve-band { padding-bottom: calc(var(--curve-h) + 14px); }
.ve-cond-band .ve-crumbs { margin-bottom: 10px; }
.ve-cond-band .ve-band-title { font-size: clamp(32px, 3.4vw, 48px); max-width: 26ch; }
.ve-cond-band .ve-band-lead { margin-top: 8px; max-width: 58ch; }

/* "All conditions" browser: top-right of the band on desktop, inline on phones */
.ve-cond-browse { position: relative; display: inline-block; margin: 14px 0 0; }
@media (min-width: 768px) {
  .ve-cond-browse { position: absolute; top: 0; right: var(--gutter); margin: 0; }
  .ve-cond-browse-panel { left: auto; right: 0; }
}
.ve-cond-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* tap target */
  padding: 6px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-btn);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-nav);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.ve-cond-browse-btn:hover, .ve-cond-browse-btn[aria-expanded='true'] { border-color: var(--c-pink); color: var(--c-pink); }
.ve-cond-browse-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ve-cond-browse-btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-std); }
.ve-cond-browse-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.ve-cond-browse-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  max-height: min(70vh, 520px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-white);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
  overflow: hidden;
}
.ve-cond-browse-search { position: relative; flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
.ve-cond-browse-search svg { position: absolute; left: 22px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.ve-cond-browse-search input {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-btn);
  background: var(--c-surface);
  font: inherit;
  font-size: 16px;
  color: var(--c-text);
}
.ve-cond-browse-search input:focus-visible { outline: none; border-color: var(--c-pink); box-shadow: var(--focus-ring); }
.ve-cond-browse-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
.ve-cond-browse-all { flex: 0 0 auto; display: block; padding: 10px 14px; border-top: 1px solid var(--c-line); font-size: var(--fs-small); font-weight: 500; color: var(--c-pink); }
.ve-cond-browse-all:hover { background: var(--c-pink-tint); text-decoration: none; }
.ve-cond-browse-cat {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 6px 14px;
  border: 0;
  background: var(--c-surface);
  color: var(--c-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ve-cond-browse-cat:hover { color: var(--c-pink); }
.ve-cond-browse-list a { display: block; padding: 7px 14px; font-size: var(--fs-small); color: var(--c-text); }
.ve-cond-browse-list a:hover { background: var(--c-pink-tint); color: var(--c-pink); text-decoration: none; }
.ve-cond-browse-empty { margin: 0; padding: 12px 14px; font-size: var(--fs-small); color: var(--c-muted); }

/* ------------------------------------------------ 1b. condition photo hero
   Session 2 (09-29): the home/team side-hero pattern for all condition pages.
   Title, lead, Book Online and the conditions browser on solid navy; the
   practice photo (src/data/condition-hero-photos.ts) runs full width above the
   title below 1024px and fills the right half from 1024px, fading into the
   navy at its left edge. No text ever sits on the photo, so any photo can be
   swapped in without re-measuring contrast. */
.ve-cond-hero {
  position: relative;
  z-index: 3; /* the conditions browser panel opens over the content below */
  display: grid;
  align-items: center;
  background: var(--c-navy-deep);
  color: var(--c-white);
  padding: 0 0 calc(var(--curve-h) + 52px);
}
.ve-cond-hero-media { position: relative; }
.ve-cond-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--focal-mobile, var(--focal, 50% 40%));
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.ve-cond-hero-inner { position: relative; z-index: 1; }
.ve-cond-hero-text { padding-top: 4px; }
.ve-cond-hero .ve-crumbs { margin-bottom: 12px; color: rgb(255 255 255 / 0.85); }
.ve-cond-hero .ve-crumbs a, .ve-cond-hero .ve-crumbs [aria-current] { color: var(--c-white); }
.ve-cond-hero .ve-eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--c-pink-light); /* the one pink allowed on navy (5.8:1) */
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
}
.ve-cond-hero .ve-eyebrow::before { content: none; }
.ve-cond-hero-title {
  margin: 0;
  max-width: 20ch;
  color: var(--c-white);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  text-wrap: balance;
}
.ve-cond-hero-lead {
  margin: 12px 0 0;
  max-width: 44ch;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.ve-cond-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 26px; }
/* the browser sits beside Book Online here (never absolutely placed) */
.ve-cond-hero .ve-cond-browse { position: relative; top: auto; right: auto; margin: 0; }
.ve-cond-hero .ve-cond-browse-btn {
  min-height: 52px;
  padding: 10px 18px;
  border-color: rgb(255 255 255 / 0.5);
  background: transparent;
  color: var(--c-white);
}
.ve-cond-hero .ve-cond-browse-btn:hover,
.ve-cond-hero .ve-cond-browse-btn[aria-expanded='true'] { border-color: var(--c-white); background: rgb(255 255 255 / 0.08); color: var(--c-white); }
.ve-cond-hero .ve-cond-browse-panel { left: 0; right: auto; color: var(--c-text); }
@media (max-width: 479px) {
  /* phones: Book Online takes the row, the browser beside it (wraps under on narrow phones) */
  .ve-cond-hero-actions { gap: 10px; }
  .ve-cond-hero-actions > .ve-btn { flex: 1 1 auto; padding-inline: 22px; }
  .ve-cond-hero .ve-cond-browse-btn { padding-inline: 14px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ve-cond-hero-img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .ve-cond-hero {
    --cond-photo-w: min(52vw, 1000px);
    min-height: clamp(440px, 36vw, 560px);
    padding: 56px 0 calc(var(--curve-h) + 64px);
  }
  .ve-cond-hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: var(--cond-photo-w); z-index: 0; }
  .ve-cond-hero-img {
    height: 100%;
    aspect-ratio: auto;
    object-position: var(--focal, 50% 40%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
  /* text stays left of the photo's fade */
  .ve-cond-hero-text { max-width: min(540px, calc(100vw - var(--cond-photo-w) - max(var(--gutter), (100vw - var(--container)) / 2) - 16px)); padding-top: 0; }
}

/* ======================================================== 2. intro row */
.ve-cond-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ve-cond-intro-text > :first-child { margin-top: 0; }
.ve-cond-intro-text > :last-child { margin-bottom: 0; }
.ve-cond-intro-text p:first-of-type { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.ve-cond-intro-media { position: relative; }
.ve-cond-intro-media .ve-photo-frame { max-width: 425px; margin: 0 auto; }
.ve-cond-intro--solo { grid-template-columns: minmax(0, 1fr); }
/* landscape pro-shoot photos (doctor + patient side by side) get a wider column */
.ve-cond-intro--landscape { grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); align-items: center; }
.ve-cond-intro--landscape .ve-cond-intro-media .ve-photo-frame { max-width: 480px; }
.ve-cond-intro--solo .ve-cond-intro-text { max-width: 70ch; }
.ve-cond-intro-actions { margin-top: 24px; }
@media (max-width: 1023px) {
  .ve-cond-intro { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
  .ve-cond-intro--landscape { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
}
@media (max-width: 767px) {
  .ve-cond-intro, .ve-cond-intro--landscape { grid-template-columns: 1fr; gap: 24px; }
  .ve-cond-intro-media { order: -1; }
  .ve-cond-intro-media .ve-photo-frame { max-width: 360px; }
  .ve-cond-intro--landscape .ve-cond-intro-media .ve-photo-frame { max-width: none; }
}

/* ================================================ 3. narrative sections */
.ve-cond-section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--c-line);
}
.ve-cond-section:first-child { border-top: 0; padding-top: 0; }
.ve-cond-section-head h2 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-ink);
  max-width: 16ch;
}
.ve-cond-section-body > :first-child { margin-top: 0; }
.ve-cond-section-body > :last-child { margin-bottom: 0; }
.ve-cond-section-body p { margin: 0 0 1.1em; }
/* reading measure: about 70 characters a line, whatever the grid track gives */
.ve-cond-section-body:not(.ve-cond-cols) > :is(p, ul, ol) { max-width: 33em; }
.ve-cond-section--tint {
  border-top: 0;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3.5vw, 40px);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  /* short heading beside long copy: centre it so the tinted box shows no
     empty grey column under the H2 */
  align-items: center;
}
.ve-cond-section--tint + .ve-cond-section { border-top: 0; }
.ve-cond-section-body .ve-cond-figure {
  float: right;
  width: min(42%, 360px);
  margin: 4px 0 18px 26px;
}
.ve-cond-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-img); }
.ve-cond-figure--left { float: left; margin: 4px 26px 18px 0; }
.ve-cond-section-body::after { content: ''; display: block; clear: both; }
.ve-cond-section-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-img); }
.ve-cond-section-body .ve-cond-media-frame { margin: 0 0 1.2em; }
.ve-cond-section-body img.rounded, .ve-cond-section-body img.alignright, .ve-cond-section-body img.alignleft { border-radius: var(--radius-img); }
.ve-cond-cols { column-count: 2; column-gap: clamp(24px, 3vw, 40px); }
.ve-cond-cols > p { break-inside: avoid; }

/* pull quote: light 24px statement on a gold rule (educational, not a review) */
.ve-cond-pull {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--c-gold);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-ink);
}
.ve-cond-pull p { margin: 0; }

@media (max-width: 1023px) {
  .ve-cond-section { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .ve-cond-section-head h2 { max-width: none; }
}
@media (max-width: 767px) {
  .ve-cond-section-body .ve-cond-figure, .ve-cond-figure--left { float: none; width: 100%; max-width: 360px; margin: 0 0 18px; }
  .ve-cond-cols { column-count: 1; }
}

/* =================================================== 4. card-grid pages */
.ve-cond-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 26px 28px;
  border-left: 4px solid var(--c-gold);
  border-radius: var(--radius-card);
  background: var(--c-pink-tint);
}
.ve-cond-block--tight:has(> .ve-cond-highlight) + .ve-cond-block { margin-top: var(--section-y); }
.ve-cond-highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-pink);
}
.ve-cond-highlight-icon svg { width: 22px; height: 22px; }
.ve-cond-highlight .ve-eyebrow { margin-bottom: 4px; }
.ve-cond-highlight p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink); }
@media (max-width: 767px) { .ve-cond-highlight { grid-template-columns: 1fr; padding: 22px; } }

/* Symptoms and benefits: plain items on a top hairline, no box per item
   (Zach 09-28 list rule); the round icon is the only ornament. */
.ve-cond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; list-style: none; margin: 0; padding: 0; }
.ve-cond-grid li { margin: 0; border-top: 1px solid var(--c-line); }
.ve-cond-card, a.ve-cond-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px 0 0;
  color: var(--c-text);
  text-decoration: none;
}
main a.ve-cond-card, main a.ve-cond-card:hover { text-decoration: none; }
a.ve-cond-card:hover h3, a.ve-cond-card:hover .ve-cond-card-more { text-decoration: underline; text-underline-offset: 3px; }
a.ve-cond-card:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ve-cond-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c-pink-tint); color: var(--c-pink); }
.ve-cond-card-icon svg { width: 20px; height: 20px; }
.ve-cond-card h3 { margin: 4px 0 0; font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-heading); color: var(--c-ink); }
a.ve-cond-card h3 { color: var(--c-pink); }
.ve-cond-card p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.ve-cond-card-more { margin-top: auto; padding-top: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--c-pink); }
.ve-cond-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ve-cond-card--row { flex-direction: row; align-items: flex-start; gap: 18px; }
.ve-cond-card--row .ve-cond-card-icon { flex: 0 0 42px; }
.ve-cond-card--row h3 { margin-top: 0; }
@media (max-width: 1023px) { .ve-cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ve-cond-grid, .ve-cond-grid--2 { grid-template-columns: 1fr; } }

.ve-cond-steps { list-style: none; margin: 0; padding: 0; counter-reset: ve-step; max-width: 760px; }
.ve-cond-steps li { position: relative; margin: 0; padding: 0 0 28px 66px; }
.ve-cond-steps li:last-child { padding-bottom: 0; }
.ve-cond-steps li::before {
  counter-increment: ve-step;
  content: counter(ve-step);
  position: absolute;
  left: 0;
  top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-pink);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 600;
}
.ve-cond-steps li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 44px; bottom: 6px; width: 2px; background: var(--c-line); }
.ve-cond-steps h3 { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: 500; color: var(--c-ink); }
.ve-cond-steps p { margin: 0; }

.ve-cond-outcomes { max-width: 760px; }
.ve-cond-outcomes .ve-list { columns: 2; column-gap: 40px; }
.ve-cond-outcomes .ve-list li { break-inside: avoid; }
@media (max-width: 639px) { .ve-cond-outcomes .ve-list { columns: 1; } }

/* ===================================== 5. FAQ, related, blog, CTA panels */
.ve-cond-faq .ve-acc { max-width: 860px; }
.ve-cond-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ve-cond-related-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; }
.ve-cond-related-head a { font-weight: 500; }
.ve-cond-blog-count { font-size: var(--fs-small); color: var(--c-muted); }
.ve-cond-blog-more { margin-top: 28px; }
.ve-cond-cta-guide .ve-cta--large .ve-cta-text { max-width: 56ch; }
.ve-cond-cta-btn { border: 0; }
.ve-cond-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* ======================================================= 6. We Can Help */
.ve-cond-hub-intro { max-width: 70ch; }
.ve-cond-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-img); overflow: hidden; background: var(--c-surface); }
.ve-cond-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ve-cond-find { position: relative; max-width: 560px; margin: 0 0 var(--block-gap); }
.ve-cond-find label { display: block; margin: 0 0 8px; font-size: var(--fs-small); font-weight: 500; color: var(--c-ink); }
.ve-cond-find-field { position: relative; }
.ve-cond-find-field > svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.ve-cond-find input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 48px 12px 46px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-btn);
  background: var(--c-white);
  font: inherit;
  font-size: 17px;
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.ve-cond-find input:focus-visible { outline: none; border-color: var(--c-pink); box-shadow: var(--focus-ring); }
.ve-cond-find-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.ve-cond-find-clear:hover { color: var(--c-pink); }
.ve-cond-find-clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ve-cond-find-clear svg { width: 18px; height: 18px; }
.ve-cond-find-status { margin: 10px 0 0; font-size: var(--fs-small); color: var(--c-muted); }
.ve-cond-find-status:empty { display: none; }

.ve-cond-cat { scroll-margin-top: calc(var(--header-h-stuck) + 16px); }
.ve-cond-cat + .ve-cond-cat { margin-top: clamp(36px, 4vw, 48px); }
.ve-cond-cat-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); }
.ve-cond-cat-head h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 300; }
.ve-cond-cat-count { font-size: var(--fs-small); color: var(--c-muted); }
/* We Can Help index: a plain link list in columns, one hairline under each
   row (same look as .ve-related), no box per condition. */
.ve-cond-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 36px; list-style: none; margin: 0; padding: 0; }
.ve-cond-tiles li { margin: 0; border-bottom: 1px solid var(--c-line); }
.ve-cond-tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 0;
  color: var(--c-ink);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-std);
}
main .ve-cond-tiles li a.ve-cond-tile { text-decoration: none; }
.ve-cond-tile span { flex: 1 1 auto; }
.ve-cond-tile svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-pink); opacity: 0.55; transition: transform var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std); }
.ve-cond-tile:hover { color: var(--c-pink); }
.ve-cond-tile:hover svg { opacity: 1; transform: translateX(3px); }
.ve-cond-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ve-cond-none { padding: 24px; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-card); color: var(--c-muted); }

/* ================================= 7. Answer Hub, FAQ page, service areas */
/* jump links: plain inline list (base.css .ve-inline-list), no pill per topic */
.ve-cond-chips { margin: 0 0 var(--block-gap); }
.ve-cond-chips svg { width: 16px; height: 16px; color: var(--c-pink); }
/* FAQ / Answers question groups. Not .ve-cond-group: chrome.css uses that
   name for the nav's condition menu (a grid), which split the accordions
   into columns. */
.ve-cond-faqgroup { max-width: 860px; }
.ve-cond-faqgroup + .ve-cond-faqgroup { margin-top: clamp(36px, 4vw, 56px); }
.ve-cond-faqgroup h2 { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; }
.ve-cond-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.ve-cond-videos h3 { margin: 12px 0 0; font-size: var(--fs-h3); font-weight: 500; color: var(--c-ink); }
@media (max-width: 767px) { .ve-cond-videos { grid-template-columns: 1fr; } }
.ve-cond-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 36px; list-style: none; margin: 0; padding: 0; }
.ve-cond-areas li { margin: 0; border-bottom: 1px solid var(--c-line); }
/* Service areas: a plain link list on hairlines (Zach 09-28 list rule), city in
   navy, drive time muted, pink arrow; no box per city. */
.ve-cond-area, main .ve-cond-areas li a.ve-cond-area {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-std);
}
.ve-cond-area-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ve-cond-area strong { font-weight: 500; line-height: 1.35; }
.ve-cond-area-text span { font-size: var(--fs-small); color: var(--c-muted); }
.ve-cond-area svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-pink); opacity: 0.55; transition: transform var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std); }
.ve-cond-area:hover { color: var(--c-pink); }
.ve-cond-area:hover svg { opacity: 1; transform: translateX(3px); }
.ve-cond-area:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ve-cond-prose { max-width: 72ch; }
.ve-cond-prose h2 { margin: 1.6em 0 0.5em; font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; }
.ve-cond-prose > h2:first-child { margin-top: 0; }
.ve-cond-byline { margin: 0 0 var(--block-gap); }
.ve-cond-area-photo img { object-position: 50% 28%; }

@media (prefers-reduced-motion: reduce) {
  .ve-cond-tile svg, .ve-cond-tile, .ve-cond-card, .ve-cond-area { transition: none; }
}