/* Driver comparison Hub composition. Foundation owns type, controls and rail. */
.tp-compare-hub .tp-compare-hub__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(104px + var(--tp-site-announcement-height) + var(--tp-site-header-height));
  padding-bottom: 112px;
}
.tp-compare-hub__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.tp-compare-hub__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--tpl-ink-deep) 0%, var(--tpl-ink-deep) 26%, transparent 82%);
}
.tp-compare-hub__hero-rail { position: relative; }
.tp-compare-hub .navpro-hero__content { max-width: 590px; }
.tp-compare-hub .navpro-hero h1 { max-width: 16ch; }
/* Section headings retain H2 semantics with a subordinate Foundation type role. */
#navpro-main .tp-compare-hub h2 {
  font-size: var(--tp-type-heading-3-size);
  line-height: var(--tp-type-heading-3-line);
  font-weight: var(--tp-type-heading-3-weight);
}

.tp-compare-hub .navpro-hero__description { max-width: 49ch; color: var(--tpl-white); }
.tp-compare-hub .tp-compare-hub__choices { background: var(--tpl-surface-alt); padding-top: 64px; padding-bottom: 64px; }
.tp-compare-hub__choices { scroll-margin-top: 130px; }
.tp-compare-hub__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.tp-compare-hub__group { min-width: 0; }
.tp-compare-hub__group h3 { margin: 0 0 16px; }
#navpro-main .tp-compare-hub__group p { margin: 0 0 20px; color: var(--tpl-ink-muted); }
.tp-compare-hub__group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.tp-compare-hub__group li { margin: 0; }
#navpro-main .tp-compare-hub__context {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--tpl-line);
  color: var(--tpl-ink-muted);
  font-size: var(--tp-type-body-small-size);
  line-height: var(--tp-type-body-small-line);
}
.tp-compare-hub #navpro-faq-title { scroll-margin-top: 130px; }
/* Keep the compact FAQ spacing; section surfaces now provide the boundary. */
.tp-compare-hub > .navpro-section[aria-labelledby="navpro-faq-title"] {
  padding-top: 64px;
}
@media (max-width: 809px) {
  .tp-compare-hub > .navpro-section[aria-labelledby="navpro-faq-title"] { padding-top: 48px; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .tp-compare-hub .navpro-hero__content { max-width: 52%; }
  .tp-compare-hub .navpro-hero h1 { font-size: var(--tp-type-heading-2-size); }
  .tp-compare-hub__groups { gap: 24px; }
}
@media (max-width: 809px) {
  .tp-compare-hub .tp-compare-hub__hero {
    padding-top: calc(48px + var(--tp-site-announcement-height) + var(--tp-site-header-height));
    padding-bottom: 250px;
  }
  .tp-compare-hub .navpro-hero__content { max-width: none; }
  .tp-compare-hub__photo { top: auto; bottom: 0; height: 290px; object-position: right bottom; }
  .tp-compare-hub__hero::before {
    top: auto; bottom: 0; height: 291px;
    background: linear-gradient(180deg, var(--tpl-ink-deep), transparent 70%);
  }
  .tp-compare-hub .tp-compare-hub__choices { padding-top: 48px; padding-bottom: 48px; }
  .tp-compare-hub__groups { grid-template-columns: 1fr; gap: 32px; }
  .tp-compare-hub__group + .tp-compare-hub__group { padding-top: 32px; border-top: 1px solid var(--tpl-line); }
}

/* The Hub adds media composition; card and carousel foundations stay shared. */
.tp-compare-hub__group-image { margin-bottom: 24px; }