/* Extend the existing ALDental palette. Clinical pixels stay unchanged;
   small CSS rotations level the smiles without retouching their shade. */
.whitening-case h2,
.whitening-explainer h2 { letter-spacing: -.035em; }
.whitening-case-intro { color: var(--muted); max-width: 65ch; margin: 20px 0 32px; }
.whitening-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.whitening-comparison figure { margin: 0; min-width: 0; }
.whitening-comparison figcaption { font-size: 1.05rem; color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.whitening-photo { display: grid; place-items: center; aspect-ratio: 1.9; background: var(--cream); border-radius: 12px; }
.whitening-photo img { width: 94%; height: auto; transform: rotate(3deg); }
.whitening-photo--after img { transform: rotate(-3deg); }
.whitening-case-note { color: var(--muted); margin: 22px 0 0; font-size: .9rem; max-width: 70ch; }
.whitening-explainer { background: var(--aqua-soft); }
.whitening-explainer > .wrap > h2 { max-width: 820px; text-wrap: balance; }
.whitening-explainer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 38px; }
.whitening-explainer h3 { color: var(--navy); font-size: 1.35rem; line-height: 1.3; margin: 0 0 16px; }
.whitening-explainer p { color: #455e6e; max-width: 70ch; }
.whitening-explainer-grid p { margin: 0 0 16px; }
.whitening-matching { margin: 20px 0 0; }
.whitening-matching > div { display: grid; grid-template-columns: 100px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid #c6dddd; }
.whitening-matching dt { color: var(--navy); font-weight: 700; }
.whitening-matching dd { margin: 0; color: #455e6e; }
.whitening-direction { margin-top: 40px; padding-top: 32px; border-top: 1px solid #c6dddd; }
.whitening-shade-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 24px 0 12px; }
.whitening-shade-scale li { min-width: 0; padding: 17px 10px; color: var(--navy); text-align: center; border-radius: 8px; background: #dfc498; }
.whitening-shade-scale li:nth-child(2) { background: #e8d4b0; }
.whitening-shade-scale li:nth-child(3) { background: #efdfc5; }
.whitening-shade-scale li:nth-child(4) { background: #f4e9d6; }
.whitening-shade-scale li:nth-child(5) { background: #fcf8ec; }
.whitening-shade-scale b { display: block; font-size: 1.6rem; line-height: 1.2; }
.whitening-shade-scale span { display: block; font-size: .8rem; margin-top: 4px; }
.whitening-shade-caption { display: flex; justify-content: space-between; gap: 18px; font-size: .9rem; color: var(--navy); font-weight: 700; }
.whitening-screen-note { font-size: .8rem; margin: 10px 0 22px; }
.whitening-bleach-reference { margin: 24px 0; }
.whitening-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.whitening-cta p { margin: 0; max-width: 38ch; font-weight: 500; }
.whitening-sources { margin: 28px 0 0; font-size: .8rem; }
.whitening-sources a { text-decoration: underline; text-underline-offset: 3px; }
.whitening-explainer a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (max-width: 700px) {
  .whitening-comparison, .whitening-explainer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .whitening-matching > div { grid-template-columns: 94px 1fr; gap: 12px; }
  .whitening-shade-scale { gap: 5px; }
  .whitening-shade-scale li { padding: 14px 4px; }
  .whitening-cta { align-items: stretch; }
  .whitening-cta .btn { width: 100%; text-align: center; }
}

@media (max-width: 620px) {
  .whitening-page .page-hero h1 { font-size: clamp(2.35rem, 12.5vw, 3.1rem); }
}