/* Elements unique to semantic comparisons; shared V2 components live in site-foundations.css. */

/* A pair keeps one canonical route; these ordinary fragment links remain useful
   without JavaScript and are enhanced only by the browser's native focus. */
.comparison-v2 .cv3-profile-selector { display: none; }
.comparison-v2 .cv3-page[data-profiles-enhanced="true"] .cv3-profile-selector { display: block; }

.comparison-v2 .cv3-page > article[data-profile-panel] {
  display: block;
}

.comparison-v2 .cv3-page > article[data-profile-panel][hidden] {
  display: none;
}

.comparison-v2 .cv3-breadcrumb {
  width: min(var(--site-content), calc(100% - 40px));
  margin: 0 auto;
  padding-block: .85rem;
  color: var(--site-muted);
  font-size: .9rem;
}

.comparison-v2 .cv3-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.comparison-v2 .cv3-breadcrumb li + li::before { content: "›"; margin-right: .45rem; }
.comparison-v2 .cv3-breadcrumb a { color: inherit; }

@media (max-width: 700px) {
  .comparison-v2 .cv3-breadcrumb {
    width: min(100% - 24px, var(--site-content));
  }
}

.comparison-v2 .cv2-hero {
  border-block: 1px solid var(--site-line);
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--site-accent) 15%, transparent) 0 9rem, transparent 9.1rem), linear-gradient(135deg, var(--site-paper), var(--site-soft));
}

.comparison-v2 .v2-page h1,
.comparison-v2 .v2-page h2,
.comparison-v2 .v2-page h3,
.comparison-v2 .v2-page h4 {
  margin-top: 0;
  font-family: var(--site-font-display);
  line-height: var(--site-line-heading);
  text-wrap: balance;
}

.comparison-v2 .v2-page h1 {
  max-width: 850px;
  margin-bottom: 1rem;
  font-size: clamp(2.15rem, 4vw, 3.25rem);
  letter-spacing: -.025em;
}

.comparison-v2 .v2-page h2 {
  max-width: 850px;
  margin-bottom: 1rem;
  font-size: var(--site-type-section);
  letter-spacing: -.025em;
}

.comparison-v2 .v2-page h3,
.comparison-v2 .v2-page h4 {
  margin-bottom: .7rem;
  font-size: 1.35rem;
}

.comparison-v2 .v2-page p { max-width: 75ch; }

.comparison-v2 .v2-page > article[data-profile-panel] > .v2-section {
  border-bottom: 1px solid var(--site-line);
}

.comparison-v2 .v2-page > article[data-profile-panel] > .v2-section:nth-of-type(even) {
  background: color-mix(in srgb, var(--site-paper) 82%, transparent);
}

.comparison-v2 .cv2-lede {
  color: var(--site-muted);
  font-size: clamp(1.06rem, 2vw, 1.28rem);
}

.comparison-v2 .cv2-verdict {
  max-width: 760px;
  margin-top: var(--site-space-4);
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--site-accent);
  background: color-mix(in srgb, var(--site-paper) 76%, transparent);
}

.comparison-v2 .cv2-verdict strong {
  color: var(--site-accent-dark);
  font-family: var(--site-font-display);
  font-size: 1.2rem;
}

.comparison-v2 .cv2-verdict p:last-child { margin-bottom: 0; }

.comparison-v2 .cv2-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-space-3);
  margin-top: var(--site-space-5);
}

.comparison-v2 .cv2-score {
  padding: 1.5rem;
  border-top: 5px solid var(--site-accent);
  box-shadow: var(--site-shadow);
}

.comparison-v2 .cv2-score > span {
  display: block;
  color: var(--site-muted);
  font-size: var(--site-type-label);
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.comparison-v2 .cv2-score strong {
  display: block;
  margin: .35rem 0 .65rem;
  color: var(--site-accent-dark);
  font-family: var(--site-font-display);
  font-size: 3.2rem;
  line-height: 1;
}

.comparison-v2 .cv2-score p {
  margin: 0 0 1rem;
  font-family: var(--site-font-display);
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.2;
}

.comparison-v2 .cv2-score a {
  color: var(--site-accent-dark);
  font-weight: 800;
  text-underline-offset: .2rem;
}

.comparison-v2 .cv2-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.comparison-v2 .cv2-section-intro {
  margin: -.25rem 0 var(--site-space-4);
  color: var(--site-muted);
  font-size: 1.06rem;
}

.comparison-v2 .cv2-decision-card {
  padding: clamp(1.35rem, 3vw, 2rem);
}

.comparison-v2 .cv2-tradeoff-grid,
.comparison-v2 .cv2-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-space-3);
}

.comparison-v2 .cv2-tradeoff,
.comparison-v2 .cv2-price {
  padding: clamp(1.25rem, 2.5vw, 1.7rem);
}

.comparison-v2 .cv2-tradeoff-choice {
  margin: 0 0 .55rem;
  color: var(--site-accent-dark);
  font-size: var(--site-type-label);
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.comparison-v2 .cv2-tradeoff p:not(.cv2-tradeoff-choice) {
  margin-bottom: .85rem;
}

.comparison-v2 .cv2-risk {
  padding-top: .85rem;
  border-top: 1px solid var(--site-line);
}

.comparison-v2 .cv2-price-start {
  margin: 0 0 1rem;
  color: var(--site-accent-dark);
  font-family: var(--site-font-display);
  font-size: 1.35rem;
  font-weight: 750;
}

.comparison-v2 .cv2-table-scroll {
  overflow-x: auto;
  border-radius: var(--site-radius);
}

.comparison-v2 .cv2-table-scroll:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--site-accent) 55%, var(--site-paper));
  outline-offset: 3px;
}

.comparison-v2 .cv2-swipe-hint {
  display: none;
  margin: 0 0 .65rem;
  color: var(--site-accent-dark);
  font-size: .86rem;
  font-weight: 800;
}

.comparison-v2 table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--site-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--site-radius);
  background: var(--site-paper);
  box-shadow: var(--site-shadow);
}

.comparison-v2 th,
.comparison-v2 td {
  padding: 1rem;
  border: 0;
  border-bottom: 1px solid var(--site-line);
  vertical-align: top;
  text-align: left;
}

.comparison-v2 thead th {
  background: var(--site-dark);
  color: var(--site-paper);
  font-size: .82rem;
  letter-spacing: .04em;
}

.comparison-v2 tbody th {
  font-family: var(--site-font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.comparison-v2 tbody tr:last-child th,
.comparison-v2 tbody tr:last-child td { border-bottom: 0; }

.comparison-v2 .cv2-steps { display: grid; gap: var(--site-space-3); }

.comparison-v2 .cv2-step {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--site-space-3);
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1rem, 2.5vw, 1.5rem);
}

.comparison-v2 .cv2-step h3,
.comparison-v2 .cv2-step p { margin: 0; }

.comparison-v2 .cv2-step-state + .cv2-step-state {
  padding-left: var(--site-space-3);
  border-left: 1px solid var(--site-line);
}

.comparison-v2 .cv2-step-state > p:first-child {
  margin-bottom: .45rem;
}

.comparison-v2 .cv2-step-state span {
  display: inline-block;
  margin-left: .35rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--site-soft);
  color: var(--site-accent-dark);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.comparison-v2 .cv2-proof {
  color: var(--site-muted);
  font-size: .95rem;
}

.comparison-v2 .cv2-proof strong,
.comparison-v2 .cv2-final-signal strong {
  color: inherit;
}

.comparison-v2 .cv2-final {
  padding-block: clamp(3rem, 5vw, 5rem);
  border-bottom: 0;
}

.comparison-v2 .cv2-final .cv2-eyebrow,
.comparison-v2 .cv2-final .cv2-proof {
  color: color-mix(in srgb, var(--site-paper) 78%, transparent);
}

.comparison-v2 .cv2-final-raccord {
  max-width: 75ch;
  margin-bottom: 1.25rem;
}

.comparison-v2 .cv2-final-raccord p,
.comparison-v2 .cv2-final-signal {
  color: var(--site-paper);
}

.comparison-v2 .cv2-final-signal {
  margin-bottom: 1rem;
}

@media (max-width: 760px) {
  .comparison-v2 .cv2-anchorbar > .v2-shell {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
  }
  .comparison-v2 .cv2-anchorbar a { width: auto; }
  .comparison-v2 .cv2-swipe-hint { display: block; }
  .comparison-v2 .cv2-score-grid,
  .comparison-v2 .cv2-tradeoff-grid,
  .comparison-v2 .cv2-price-grid,
  .comparison-v2 .cv2-step { grid-template-columns: 1fr; }
  .comparison-v2 .cv2-step-state + .cv2-step-state {
    padding-top: var(--site-space-3);
    padding-left: 0;
    border-top: 1px solid var(--site-line);
    border-left: 0;
  }
  .comparison-v2 .cv2-table-scroll { border-right: 3px solid var(--site-accent); }
  .comparison-v2 table { min-width: 720px; }
  .comparison-v2 .cv2-links .v2-cta { width: 100%; }
}