/* Toothpillow PDP — program page primitives (styled from Home's retained
   stylesheet tokens + the route's rendered HTML structure; the program route's
   own CSS was not screenshot-retained, so values are token-derived). */

/* ── Hero ─────────────────────────────────────────────────────── */
.tp-pdp-hero {
  position: relative;
  overflow: hidden;
  background: #2f2f2f;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.tp-pdp-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.tp-pdp-hero__bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; min-width: 100%; height: 100vw; min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.tp-pdp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(47,47,47,0.92) 0%, rgba(47,47,47,0.55) 55%, rgba(47,47,47,0.15) 100%);
}
.tp-pdp-hero__content { position: relative; padding: 72px 0; max-width: 720px; }
.tp-pdp-hero__icons { display: flex; margin-bottom: 20px; }
.tp-pdp-hero__icon {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FEF8EE;
  background: #FEF8EE;
}
.tp-pdp-hero__icon + .tp-pdp-hero__icon { margin-left: -22px; }
.tp-pdp-hero__title { color: #fff; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.08; margin: 0 0 14px; }
.tp-pdp-hero__subtitle { color: #fff; font-size: clamp(16px, 2vw, 21px); margin: 0; }
@media (max-width: 767px) {
  .tp-pdp-hero { min-height: 340px; }
  .tp-pdp-hero__icon { width: 72px; height: 72px; }
}

/* ── Anchor nav (source sidebar adapted to a sticky pill bar) ─── */
.tp-pdp-nav { background: #FEF8EE; border-bottom: 1px solid rgba(0,0,0,0.06); }
.tp-pdp-nav__list {
  list-style: none; margin: 0; padding: 14px 0;
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.tp-pdp-nav__list::-webkit-scrollbar { display: none; }
.tp-pdp-nav__link {
  display: inline-block; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; text-decoration: none; color: #000;
  border: 1px solid rgba(0,0,0,0.14);
  transition: background-color .15s, border-color .15s;
}
.tp-pdp-nav__link:hover { background: #E4EFFC; border-color: #B6CAE3; }

/* ── Section rhythm + intro ───────────────────────────────────── */
.tp-pdp-section { padding: 64px 0; }
.tp-pdp-section--cream { background: #FEF8EE; }
.tp-pdp-section__inner { max-width: 920px; margin: 0 auto; }
.tp-section-intro { margin-bottom: 32px; }
.tp-section-intro__eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  color: #3A6EA4; margin: 0 0 8px;
}
.tp-section-intro__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin: 0 0 14px; }
.tp-section-intro__subtitle { font-size: clamp(18px, 2vw, 22px); font-weight: 600; margin: 0 0 12px; }
.tp-section-intro__body { font-size: 16.5px; line-height: 1.65; margin: 0; }

/* ── CTA card (repeating "Get Started" card) ──────────────────── */
.tp-cta-card {
  position: relative;
  background: #E4EFFC;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 40px;
}
.tp-cta-card__gold-bar { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: #FBC274; }
.tp-cta-card__inner {
  display: grid; grid-template-columns: 186px 1fr;
  gap: 28px; align-items: center;
  padding: 36px 36px 32px;
}
.tp-cta-card__image img { width: 100%; max-width: 186px; height: auto; display: block; }
.tp-cta-card__text { font-size: clamp(18px, 2vw, 22px); line-height: 1.35; margin: 0 0 18px; }
.tp-cta-card__body-text { font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.tp-cta-card__subtext { font-size: 14.5px; margin: 16px 0 0; }
.tp-cta-card__subtext a { color: #3A6EA4; }
.tp-cta-card__tagline { font-size: 13.5px; letter-spacing: .02em; margin: 16px 0 0; color: rgba(0,0,0,0.65); }
@media (max-width: 767px) {
  .tp-cta-card__inner { grid-template-columns: 1fr; text-align: center; padding: 28px 20px 26px; }
  .tp-cta-card__image { margin: 0 auto; }
}

/* ── Core elements card ───────────────────────────────────────── */
.tp-core-elements { border-radius: 20px; overflow: hidden; margin-top: 8px; }
.tp-core-elements__top { background: #FEF8EE; padding: 36px 32px; }
.tp-core-elements__heading { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 20px; }
.tp-core-elements__hero-img img { width: 100%; height: auto; display: block; margin-bottom: 24px; }
.tp-core-elements__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tp-core-elements__item-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.tp-core-elements__item-body { font-size: 14.5px; line-height: 1.6; margin: 0; }
.tp-core-elements__bottom { background: #3A6EA4; color: #fff; padding: 28px 32px; }
.tp-core-elements__bottom-title { color: #fff; font-size: 19px; margin: 0 0 10px; }
.tp-core-elements__bottom-body { color: #fff; font-size: 14.5px; line-height: 1.65; margin: 0 0 8px; }
.tp-core-elements__bottom-body:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .tp-core-elements__grid { grid-template-columns: 1fr; }
}

/* ── Click-to-play video ──────────────────────────────────────── */
.tp-video-player { position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; }
.tp-video-player__thumb { width: 100%; height: auto; display: block; }
.tp-video-player__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.tp-video-player__play-icon { width: 64px; height: 64px; }
.tp-video-player iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* ── Guidance rows ────────────────────────────────────────────── */
.tp-guidance-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px; align-items: center;
  margin-bottom: 48px;
}
.tp-guidance-row--reverse .tp-guidance-row__img { order: 2; }
.tp-guidance-row--reverse .tp-guidance-row__text { order: 1; }
.tp-guidance-row__img img,
.tp-guidance-row__img video { width: 100%; height: auto; display: block; border-radius: 16px; }
.tp-guidance-row__title { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 12px; }
.tp-guidance-row__body { font-size: 15.5px; line-height: 1.65; margin: 0; }
@media (max-width: 767px) {
  .tp-guidance-row { grid-template-columns: 1fr; gap: 20px; }
  .tp-guidance-row--reverse .tp-guidance-row__img,
  .tp-guidance-row--reverse .tp-guidance-row__text { order: unset; }
}

/* ── Steps accordion ──────────────────────────────────────────── */
.tp-pdp-steps__item { border-bottom: 1px solid rgba(0,0,0,0.12); }
.tp-pdp-steps__btn {
  width: 100%; display: flex; align-items: center; gap: 18px;
  background: transparent; border: 0; cursor: pointer;
  padding: 22px 4px; text-align: left; font: inherit;
}
.tp-pdp-steps__number { font-size: 34px; font-weight: 700; line-height: 1; min-width: 30px; }
.tp-pdp-steps__divider { width: 1px; align-self: stretch; background: rgba(0,0,0,0.15); }
.tp-pdp-steps__q-text { flex: 1; font-size: clamp(17px, 2vw, 22px); font-weight: 600; }
.tp-pdp-steps__q-text em { font-style: italic; font-weight: 400; }
.tp-pdp-steps__icon { flex-shrink: 0; transition: transform .2s; }
.tp-pdp-steps__btn[aria-expanded="true"] .tp-pdp-steps__icon-vline { opacity: 0; }
.tp-pdp-steps__answer { display: none; padding: 0 4px 28px; }
.tp-pdp-steps__item.is-open .tp-pdp-steps__answer { display: block; }
.tp-pdp-steps__body { font-size: 15.5px; line-height: 1.65; margin: 0 0 20px; }
.tp-steps-photos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tp-steps-photos__img { width: 100%; height: auto; display: block; border-radius: 12px; }
.tp-steps-photos__label { text-align: center; font-size: 14px; margin: 8px 0 0; }
.tp-video-cta {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px; padding: 14px 18px;
  background: #E4EFFC; border-radius: 14px;
  text-decoration: none; color: inherit;
}
.tp-video-cta__thumb { width: 112px; height: auto; border-radius: 8px; display: block; }
.tp-video-cta__text { flex: 1; font-size: 14.5px; }
.tp-video-cta__arrow { width: 15px; height: 15px; }
.tp-steps__image img { width: 100%; height: auto; display: block; }
.tp-tools__guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 24px; }
.tp-tools__guide-img img { width: 100%; max-width: 162px; height: auto; display: block; margin: 0 auto 10px; }
.tp-tools__guide-title { font-weight: 700; font-size: 15.5px; margin: 0 0 6px; text-align: center; }
.tp-tools__guide-desc { font-size: 14px; line-height: 1.55; margin: 0; text-align: center; }
.tp-tools__info-row { display: grid; grid-template-columns: 162px 1fr; gap: 20px; align-items: center; margin-top: 20px; }
.tp-tools__info-row img { width: 100%; height: auto; display: block; }
.tp-tools__info-row .tp-tools__guide-title,
.tp-tools__info-row .tp-tools__guide-desc { text-align: left; }
.tp-steps-phones__track { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.tp-steps-phones__img { width: 180px; height: auto; flex-shrink: 0; }
.tp-milestones__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tp-milestones__img { width: 100%; height: auto; display: block; border-radius: 12px; }
.tp-milestones__label { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 8px; }
.tp-milestones__caption { text-align: center; font-size: 14px; margin: 8px 0 0; }
.tp-steps-beyond { background: #FEF8EE; border-radius: 16px; padding: 26px 28px; margin-top: 36px; }
.tp-steps-beyond__title { font-size: 20px; margin: 0 0 10px; }
.tp-steps-beyond__body { font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
  .tp-steps-photos__grid { grid-template-columns: repeat(2, 1fr); }
  .tp-tools__guides { grid-template-columns: 1fr; }
  .tp-tools__info-row { grid-template-columns: 1fr; }
  .tp-milestones__grid { grid-template-columns: 1fr; }
}

/* ── Pillars ──────────────────────────────────────────────────── */
.tp-pillar { margin-top: 44px; }
.tp-pillar__heading { font-size: clamp(21px, 2.6vw, 28px); margin: 0 0 18px; }
.tp-pillar__image img { width: 100%; height: auto; display: block; border-radius: 16px; }
.tp-pillar__video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 16px; display: block; }
.tp-pillar__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 24px; align-items: start; }
.tp-pillar__grid--callout-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tp-pillar__subtitle { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.tp-pillar__body { font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.tp-pillar__callout {
  display: flex; gap: 16px; align-items: flex-end;
  background: #FBCCC5; border-radius: 16px; padding: 22px 20px 0;
}
.tp-pillar__callout--full { margin-top: 32px; }
.tp-pillar__callout-title { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.tp-pillar__callout-body { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.tp-pillar__callout-doctor { width: 110px; height: auto; flex-shrink: 0; align-self: flex-end; }
@media (max-width: 767px) {
  .tp-pillar__grid, .tp-pillar__grid--callout-first { grid-template-columns: 1fr; }
}

/* ── Who rows ─────────────────────────────────────────────────── */
.tp-who__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 36px; }
.tp-who__row--reverse .tp-who__media { order: 2; }
.tp-who__row--reverse .tp-who__text { order: 1; }
.tp-who__media img, .tp-who__media video { width: 100%; height: auto; display: block; border-radius: 16px; }
.tp-who__title { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.tp-who__body { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
@media (max-width: 767px) {
  .tp-who__row { grid-template-columns: 1fr; gap: 18px; }
  .tp-who__row--reverse .tp-who__media, .tp-who__row--reverse .tp-who__text { order: unset; }
}

/* ── Results / testimonials ───────────────────────────────────── */
.tp-results__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 40px; }
.tp-results__row--reverse .tp-results__quote { order: 2; }
.tp-results__row--reverse .tp-results__text { order: 1; }
.tp-results__quote { background: #FEF8EE; border-radius: 18px; padding: 30px 28px; }
.tp-results__quote-mark { font-size: 44px; line-height: 0.6; display: block; color: #3A6EA4; }
.tp-results__quote-text { font-size: 15px; line-height: 1.65; margin: 14px 0 16px; }
.tp-results__reviewer { font-size: 13.5px; font-weight: 600; margin: 0 0 10px; }
.tp-results__stars { width: 140px; height: auto; display: block; }
.tp-results__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.tp-results__body { font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 767px) {
  .tp-results__row { grid-template-columns: 1fr; gap: 18px; }
  .tp-results__row--reverse .tp-results__quote, .tp-results__row--reverse .tp-results__text { order: unset; }
}

/* ── Learn panels + explore cards ─────────────────────────────── */
.tp-learn__heading { font-size: clamp(21px, 2.6vw, 28px); margin: 40px 0 24px; }
.tp-learn__panel {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px; align-items: center;
  border-radius: 18px; padding: 30px 30px; margin-bottom: 20px;
}
.tp-learn__panel--blue { background: #E4EFFC; }
.tp-learn__panel--purple { background: #F3E4F0; }
.tp-learn__panel--teal { background: #E1F1EF; }
.tp-learn__panel--cream { background: #FEF8EE; }
.tp-learn__panel--img-left { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.tp-learn__panel-img img { width: 100%; max-width: 384px; height: auto; display: block; margin: 0 auto; }
.tp-learn__panel-title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.tp-learn__panel-body { font-size: 15px; line-height: 1.65; margin: 0; }
.tp-explore { margin-top: 48px; }
.tp-explore__heading { font-size: clamp(21px, 2.6vw, 28px); margin: 0 0 14px; }
.tp-explore__body { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.tp-explore__label { font-weight: 700; font-size: 15px; margin: 0 0 20px; }
.tp-explore__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tp-explore__card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; }
.tp-explore__card-img { display: flex; align-items: center; justify-content: center; padding: 26px 20px; min-height: 190px; }
.tp-explore__card-img--teal { background: #E1F1EF; }
.tp-explore__card-img--blue { background: #E4EFFC; }
.tp-explore__card-img--purple { background: #F3E4F0; }
.tp-explore__card-img img { max-width: 100%; height: auto; display: block; }
.tp-explore__card-content { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tp-explore__card-text { font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; }
.tp-explore__card-btn {
  display: inline-block; text-align: center;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid #000; color: #000; text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.tp-explore__card-btn:hover { background: #C1D5EF; border-color: #C1D5EF; }
.tp-explore__alt-intro { margin-top: 36px; }
.tp-explore__alt-text { font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 767px) {
  .tp-learn__panel, .tp-learn__panel--img-left { grid-template-columns: 1fr; }
  .tp-explore__cards { grid-template-columns: 1fr; }
}

/* ── Why start today ──────────────────────────────────────────── */
.tp-why-start__list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.tp-why-start__item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.tp-why-start__icon { width: 30px; height: 30px; }
.tp-why-start__text { font-size: 16px; line-height: 1.6; margin: 0; }