/* ─── Page banner (rounded dark card) ────────────────────── */
.td-banner {
  padding: 1.5rem 0 0;
  background-color: var(--color-bg);
}

.td-banner__card {
  background-color: #111;
  color: #fff;
  border-radius: 28px;
  padding: 4.5rem 2rem 3.75rem;
  text-align: center;
}

.td-banner__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}

.td-banner__crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #888;
}

.td-banner__crumbs a {
  color: #888;
  transition: color 0.2s ease;
}

.td-banner__crumbs a:hover {
  color: #fff;
}

.td-banner__crumbs .is-current {
  color: #fff;
}

/* ─── Main: sticky sidenav alongside ALL flowing content ─── */
/* The sidenav is sticky relative to .td-main__layout — by keeping
   intro, image, pillars and FAQ all inside this single grid, the
   sidenav stays visible the whole way down and only releases at the
   end of the section (just before the footer). */
.td-main {
  padding: 3rem 0 5rem;
  background-color: var(--color-bg);
}

.td-main__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* Sidenav: cream rounded panel with stacked white pill links + arrows. */
.td-sidenav {
  background-color: var(--color-bg-secondary);
  border-radius: 24px;
  padding: 1.75rem 1.25rem 1.25rem;
  position: sticky;
  top: 6rem;
}

.td-sidenav__title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 1.25rem;
  padding: 0 0.5rem;
}

.td-sidenav__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.td-sidenav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--color-bg-white);
  padding: 1rem 1.25rem;
  border-radius: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.td-sidenav__link:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.td-sidenav__arrow {
  flex-shrink: 0;
  color: var(--color-text);
  transition: transform 0.2s ease;
}

.td-sidenav__link:hover .td-sidenav__arrow {
  transform: translateX(4px);
}

.td-main__content {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  /* min-width: 0 prevents grid blowout when long content (image, pillar
     descriptions) sits inside a minmax(0, 1fr) column. */
  min-width: 0;
}

/* ─── Intro content ──────────────────────────────────────── */
.td-content__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
}

.td-content__lead,
.td-content__body {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 65ch;
}

.td-content__sub {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 2.25rem 0 0.875rem;
}

/* Pages whose first body element is a sub-heading (not a paragraph)
   shouldn't double up the gap from .td-content__title's margin-bottom. */
.td-content__title + .td-content__sub {
  margin-top: 0;
}

/* Active sidenav pill — used when current page is included in cluster list. */
.td-sidenav__link.is-active {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.td-content__cta {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.td-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  max-width: 720px;
}

.td-features__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.td-features__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.td-features__check svg {
  width: 12px;
  height: 12px;
}

/* ─── Wide image (sits in content column) ───────────────── */
.td-image {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 24px;
}

/* ─── Pillar cards (2x2 alternating dark/light) ───────────── */
.td-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.td-pillar-card {
  border-radius: 24px;
  padding: 2.25rem 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 240px;
}

.td-pillar-card--dark {
  background-color: #111;
  color: #fff;
}

.td-pillar-card--light {
  background-color: var(--color-bg-white);
  color: var(--color-text);
}

.td-pillar-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transform: rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}

/* Hover the card → icon chip flips a full 360° (and back when the
   pointer leaves). One CSS rule, applies to every treatment page. */
.td-pillar-card:hover .td-pillar-card__icon {
  transform: rotateY(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .td-pillar-card__icon,
  .td-pillar-card:hover .td-pillar-card__icon {
    transition: none;
    transform: none;
  }
}

.td-pillar-card--dark .td-pillar-card__icon {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.td-pillar-card--light .td-pillar-card__icon {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

.td-pillar-card__icon svg {
  width: 22px;
  height: 22px;
}

.td-pillar-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.td-pillar-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.td-pillar-card--dark .td-pillar-card__desc {
  color: #9ca3af;
}

.td-pillar-card--light .td-pillar-card__desc {
  color: var(--color-text-muted);
}

.td-pillars__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* ─── FAQ (light variant, page-local) ────────────────────── */
.td-faq__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  margin-bottom: 1.75rem;
  letter-spacing: -0.04em;
}

.td-faq__list {
  border-top: 1px solid var(--color-border);
}

.td-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.td-faq__question {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text);
}

.td-faq__question::-webkit-details-marker {
  display: none;
}

.td-faq__chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.td-faq__item[open] .td-faq__chevron {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.td-faq__answer {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  padding: 0 0.25rem 1.5rem;
  max-width: 70ch;
}

.td-faq__cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.25rem;
}

/* ─── Responsive ─────────────────────────────────────────── */
/* Tablet & mobile (≤1024px): layout collapses to a single column,
   sidenav drops to the BOTTOM via `order: 2` (so it appears after
   the FAQ — last block in source order in .td-main__content), and
   the banner card goes full-bleed edge-to-edge. */
@media (max-width: 1024px) {
  .td-main__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .td-sidenav {
    position: static;
    order: 2;
  }

  .td-pillars__grid {
    grid-template-columns: 1fr;
  }

  /* Full-bleed banner: container loses its inline padding/max-width
     and the card loses its rounded corners so it spans edge to edge. */
  .td-banner {
    padding-top: 0;
  }

  .td-banner > .container {
    max-width: none;
    padding-inline: 0;
  }

  .td-banner__card {
    border-radius: 0;
    padding: 3.5rem 1.5rem 3rem;
  }
}

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

  .td-image {
    border-radius: 16px;
  }

  .td-pillar-card {
    padding: 1.75rem;
    border-radius: 20px;
  }

  .td-banner__card {
    padding: 3rem 1.25rem 2.5rem;
  }

  .td-main__content {
    gap: 2.75rem;
  }
}