/* 20261016: explicit treatment comparison tables only.
   HTML hooks are assigned to the audited 15 tables / four mobile compare modules.
   Review phones, body typography, headers and case comparison controls are untouched. */
html body.treatment-page main#main [data-summary-table-wrap] {
  --summary-line: #bcb2a6;
  --summary-head: #eee8df;
  --summary-row: #f7f4ee;
  --summary-paper: #fff;
  --summary-ink: #302c27;
  border: 1px solid var(--summary-line) !important;
  border-radius: 8px;
  background: var(--summary-paper);
}
html body.treatment-page main#main section[data-treatment-tone="dark"] [data-summary-table-wrap] {
  --summary-line: #716b61;
  --summary-head: #302d28;
  --summary-row: #25231f;
  --summary-paper: #191a1c;
  --summary-ink: #f0eee9;
}
html body.treatment-page main#main [data-summary-table][data-summary-table] {
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--summary-ink);
}
html body.treatment-page main#main [data-summary-table][data-summary-table] > :is(thead,tbody) > tr > :is(th,td) {
  border-bottom: 1px solid var(--summary-line) !important;
  border-inline-end: 1px solid var(--summary-line) !important;
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html body.treatment-page main#main [data-summary-table][data-summary-table] > :is(thead,tbody) > tr > :last-child {
  border-inline-end: 0 !important;
}
html body.treatment-page main#main [data-summary-table][data-summary-table] > thead > tr > th {
  border-bottom-width: 2px !important;
  background-color: var(--summary-head);
  font-weight: 700;
}
html body.treatment-page main#main [data-summary-table][data-summary-table] > tbody > tr > :first-child {
  background-color: var(--summary-row);
}
html body.treatment-page main#main [data-summary-table][data-summary-table] > tbody > tr:last-child > :is(th,td) {
  border-bottom: 0 !important;
}
/* Keep existing emphasized treatment columns; only strengthen their cell edges. */
html body.treatment-page main#main [data-summary-table="laminate"][data-summary-table] > :is(thead,tbody) > tr > :is(th,td) {
  font-size: var(--reading-table-size,18px) !important;
  line-height: 1.7 !important;
}
/* The legacy material table is rendered in an explicitly dark section. */
html body.treatment-page main#main section[data-treatment-tone="dark"] [data-summary-table="legacy"][data-summary-table] > :is(thead,tbody) > tr > :is(th,td) {
  color: var(--summary-ink) !important;
}
html body.treatment-page main#main [data-summary-table-wrap="allon"],
html body.treatment-page main#main [data-summary-table-wrap="laminate"] {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
@media(max-width:760px) {
  /* Preserve the approved stacked comparison layout on small screens. */
  html body.treatment-page main#main :is([data-summary-table-wrap="next"],[data-summary-table-wrap="legacy"]) {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
  }
  html body.treatment-page main#main :is([data-summary-table="next"],[data-summary-table="legacy"])[data-summary-table] > tbody > tr {
    border: 1px solid var(--summary-line) !important;
    border-radius: 7px;
    overflow: hidden;
    background: var(--summary-paper);
  }
  html body.treatment-page main#main :is([data-summary-table="next"],[data-summary-table="legacy"])[data-summary-table] > tbody > tr > :is(th,td) {
    border-inline-end: 0 !important;
    border-bottom: 1px solid var(--summary-line) !important;
  }
  html body.treatment-page main#main :is([data-summary-table="next"],[data-summary-table="legacy"])[data-summary-table] > tbody > tr > :last-child {
    border-bottom: 0 !important;
  }
  /* These four tables already have their own mobile comparison cards. */
  html body.treatment-page main#main [data-summary-cards] > article {
    border-color: #bcb2a6;
  }
  html body.treatment-page main#main [data-summary-cards] .care-mobile-title {
    border-bottom: 1px solid #bcb2a6;
  }
  html body.treatment-page main#main [data-summary-cards] dl > div + div {
    border-top-color: #bcb2a6;
  }
  /* Allon remains a comparison matrix with readable columns inside its scroller. */
  html body.treatment-page main#main [data-summary-table="allon"][data-summary-table] {
    min-width: 640px;
  }
}

/* Visible summaries, accessible original explanations, and treatment flow diagrams. */
html body.treatment-page main#main .vs-flow.vs-flow {
 display:grid!important; grid-template-columns:repeat(var(--vs-steps,4),minmax(0,1fr))!important;
 gap:28px!important; list-style:none!important; margin:34px 0 0!important; padding:0!important;
}
html body.treatment-page main#main .vs-flow > .vs-step {
 position:relative; display:block; min-width:0; margin:0!important; padding:0!important;
 border:0!important; background:transparent!important; text-align:left!important;
}
html body.treatment-page main#main .vs-flow > .vs-step:not(:last-child)::after {
 content:'→'; position:absolute; top:15px; right:-23px; color:#a69883; font-size:23px; line-height:1;
}
html body.treatment-page main#main .vs-flow .vs-step-head {
 display:flex; align-items:center; gap:12px; margin:0 0 20px;
}
html body.treatment-page main#main .vs-flow .vs-icon {
 display:block; flex:0 0 58px; width:58px; height:58px; box-sizing:border-box;
 padding:10px; border:1px solid color-mix(in srgb,var(--clinic-ink,#98754a) 25%,transparent);
 border-radius:18px; color:var(--clinic-ink,#98754a); background:var(--clinic-wash,#f5f0e8);
}
html body.treatment-page main#main .vs-flow .step-number {font-size:13px!important;line-height:1.5;color:#867a6a;}
html body.treatment-page main#main .vs-flow.vs-flow h3 {
 font-family:inherit!important; font-size:22px!important;line-height:1.5!important;
 color:inherit!important; font-weight:650!important;letter-spacing:-.025em!important;
 margin:0 0 12px!important; word-break:keep-all;text-wrap:wrap;
}
html body.treatment-page main#main .vs-flow.vs-flow p {
 margin:0!important;font-size:18px!important;line-height:1.8!important;
 text-align:left!important;word-break:keep-all;overflow-wrap:anywhere;
}
html body.treatment-page main#main .vs-detail {
 clear:both; max-width:100%; margin:14px 0 0; padding:0; border-top:1px solid #d3cbc0;
 background:transparent;
}
html body.treatment-page main#main .vs-detail > summary {
 display:flex; align-items:center;justify-content:space-between;gap:20px;
 padding:13px 0; font-size:16px!important;line-height:1.7!important;font-weight:600!important;
 color:inherit!important;cursor:pointer;list-style:none;text-align:left;
}
html body.treatment-page main#main .vs-detail > summary::-webkit-details-marker {display:none;}
html body.treatment-page main#main .vs-detail > summary::after {content:'＋';flex:0 0 auto;font-size:18px;}
html body.treatment-page main#main .vs-detail[open] > summary::after {content:'−';}
html body.treatment-page main#main .vs-detail > summary:focus-visible {outline:2px solid var(--clinic-ink,#98754a);outline-offset:5px;}
html body.treatment-page main#main .vs-detail-body {padding:8px 0 20px;}
html body.treatment-page main#main .vs-detail-body > p {margin:0 0 14px!important;}
html body.treatment-page main#main .vs-detail-body > p:last-child {margin-bottom:0!important;}
html body.treatment-page main#main section[data-treatment-tone='dark'] .vs-detail {border-color:#5e5a55;}
html body.treatment-page main#main section[data-treatment-tone='dark'] .vs-flow .step-number {color:#b9afa0;}
html body.treatment-page main#main .vs-emphasis {
 display:inline-block!important; max-width:100%; vertical-align:baseline;
 font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;
 letter-spacing:inherit!important;word-break:keep-all;
}
html body.treatment-page main#main .vs-emphasis-front::before {content:'\A';white-space:pre;}
/* Only audited editorial photos are balanced. No clinical comparison or review images match. */
@media(min-width:761px){
 html body.treatment-page main#main [data-vs-pair] {align-items:start!important;}
 html body.treatment-page main#main [data-vs-pair] > [data-vs-media] {align-self:start!important;min-width:0;}
 html body.treatment-page main#main [data-vs-pair] > [data-vs-copy] {align-self:start!important;min-width:0;}
 html body.treatment-page main#main [data-vs-pair] [data-vs-photo-frame][data-vs-photo-frame] {
   display:flex!important;align-items:flex-start;justify-content:center;
   width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
   max-height:none!important;aspect-ratio:auto!important;overflow:visible!important;
   padding:0!important;background:transparent!important;
 }
 html body.treatment-page main#main [data-vs-pair] img[data-vs-photo][data-vs-photo] {
   display:block!important;position:static!important;inset:auto!important;
   width:auto!important;height:auto!important;max-width:100%!important;
   min-height:0!important;max-height:var(--vs-photo-cap,560px)!important;
   aspect-ratio:auto!important;object-fit:contain!important;transform:none!important;
   margin-inline:auto!important;
 }
 html body.treatment-page main#main [data-vs-pair='portrait'] {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;}
}
html body.treatment-page main#main .vs-pair-followup {margin-top:26px;}
html body.treatment-page main#main .vs-pair-followup.clinic-points {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
html body.treatment-page main#main .vs-pair-followup .clinic-point {margin:0;}
/* Inlay: actual usage photographs and a schematic fitting step. */
html body.treatment-page main#main .vs-inlay-flow {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:34px 0 0;list-style:none;padding:0;}
html body.treatment-page main#main .vs-inlay-flow > li {min-width:0;position:relative;}
html body.treatment-page main#main .vs-inlay-photo {aspect-ratio:4/3;background:#ede9e1;overflow:hidden;display:flex;align-items:center;justify-content:center;}
html body.treatment-page main#main .vs-inlay-photo img {width:100%;height:100%;object-fit:contain!important;display:block;max-height:none;}
html body.treatment-page main#main .vs-inlay-photo svg {width:86px;height:86px;color:#887049;}
html body.treatment-page main#main .vs-inlay-flow h3 {font-size:22px!important;line-height:1.5!important;margin:16px 0 8px!important;color:inherit!important;}
html body.treatment-page main#main .vs-inlay-flow p {margin:0!important;}
html body.treatment-page main#main .vs-inlay-index {font-size:13px!important;color:#8c7656;font-weight:600;margin-right:8px;}
html body.treatment-page main#main .vs-inlay-flow > li:not(:last-child)::after {content:'→';position:absolute;top:calc((100vw - 180px)/12);right:-19px;color:#9a886b;font-size:21px;}
html body.treatment-page main#main .vs-inlay-note {font-size:16px!important;line-height:1.75!important;margin:22px 0 0!important;color:inherit;}
html body.treatment-page main#main .vs-source {font-size:15px!important;line-height:1.7!important;margin:14px 0 0!important;}
@media(max-width:1050px) and (min-width:761px){
 html body.treatment-page main#main .vs-flow.vs-flow {gap:20px!important;}
 html body.treatment-page main#main .vs-flow.vs-flow h3 {font-size:20px!important;}
 html body.treatment-page main#main .vs-flow > .vs-step:not(:last-child)::after {right:-18px;}
}
@media(max-width:760px){
 html body.treatment-page main#main .vs-flow.vs-flow {grid-template-columns:1fr!important;gap:0!important;margin-top:26px!important;}
 html body.treatment-page main#main .vs-flow > .vs-step {display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;padding:0 0 28px!important;}
 html body.treatment-page main#main .vs-flow .vs-step-head {grid-column:1;grid-row:1 / span 2;display:block;margin:0;}
 html body.treatment-page main#main .vs-flow .vs-icon {width:52px;height:52px;padding:8px;border-radius:16px;}
 html body.treatment-page main#main .vs-flow .step-number {display:block;text-align:center;margin-top:7px;}
 html body.treatment-page main#main .vs-flow > .vs-step:not(:last-child)::after {content:'';top:83px;bottom:8px;left:25px;right:auto;width:1px;background:#c6baaa;}
 html body.treatment-page main#main .vs-flow.vs-flow h3 {grid-column:2;margin:0 0 8px!important;font-size:21px!important;}
 html body.treatment-page main#main .vs-flow.vs-flow p {grid-column:2;font-size:17px!important;line-height:1.8!important;}
 html body.treatment-page main#main .vs-detail > summary {font-size:15px!important;padding:12px 0;}
 html body.treatment-page main#main .vs-pair-followup.clinic-points {grid-template-columns:1fr;gap:16px;}
 html body.treatment-page main#main .vs-inlay-flow {grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:26px;}
 html body.treatment-page main#main .vs-inlay-flow h3 {font-size:20px!important;}
 html body.treatment-page main#main .vs-inlay-flow > li::after {display:none;}
 html body.treatment-page main#main .vs-inlay-note {font-size:15px!important;}
 html body.treatment-page main#main .vs-source {font-size:14px!important;}
 html body.treatment-page main#main [data-vs-pair] img[data-vs-photo][data-vs-photo] {height:auto!important;width:auto!important;max-width:100%!important;max-height:520px!important;object-fit:contain!important;aspect-ratio:auto!important;margin-inline:auto;}
 html body.treatment-page main#main [data-vs-pair] [data-vs-photo-frame][data-vs-photo-frame] {height:auto!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important;background:transparent!important;}
}

/* 1day.html only: preserve React nodes while placing detailed steps below the photo/copy pair. */
@media(min-width:761px){
 html.cp-page-1day #root .vs-main-pair {display:grid;grid-template-areas:"photo kicker" "photo title" "photo description" "links links" "steps steps" "note note";grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:54px;row-gap:0;align-items:start;}
 html.cp-page-1day #root .vs-main-pair > .day-lower-feature-copy {display:contents;}
 html.cp-page-1day #root .vs-main-pair > figure {grid-area:photo;margin:0;align-self:start;}
 html.cp-page-1day #root .vs-main-pair .day-lower-kicker {grid-area:kicker;margin:0 0 18px;}
 html.cp-page-1day #root .vs-main-pair .day-lower-feature-copy > h3 {grid-area:title;margin:0 0 22px;}
 html.cp-page-1day #root .vs-main-pair .day-lower-description {grid-area:description;margin:0 0 22px;}
 html.cp-page-1day #root .vs-main-pair .day-lower-links {grid-area:links;margin:24px 0 0;align-self:start;}
 html.cp-page-1day #root .vs-main-pair .day-lower-steps {grid-area:steps;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0 0;padding:20px 0 0;border-top:1px solid #d7cfc3;}
 html.cp-page-1day #root .vs-main-pair .day-lower-steps > li {display:flex;gap:12px;align-items:center;margin:0;line-height:1.65;}
 html.cp-page-1day #root .vs-main-pair .day-lower-steps > li > span {display:none;}
 html.cp-page-1day #root .vs-main-pair .day-lower-note {grid-area:note;margin:18px 0 0;}
 html.cp-page-1day #root .vs-main-pair .day-lower-image {display:flex;align-items:flex-start;justify-content:center;height:auto;max-height:none;aspect-ratio:auto;overflow:visible;background:transparent;}
 html.cp-page-1day #root .vs-main-pair .day-lower-image img {display:block;width:auto;height:auto;max-width:100%;max-height:var(--vs-photo-cap,420px);object-fit:contain;aspect-ratio:auto;transform:none;margin-inline:auto;}
 html.cp-page-1day #root .vs-main-pair[data-vs-pair='portrait'] {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
}
html.cp-page-1day #root .vs-main-icon {flex:0 0 34px;width:34px;height:34px;color:#98754a;}
@media(max-width:760px){html.cp-page-1day #root .vs-main-pair .day-lower-steps > li {display:flex;align-items:center;gap:12px;}html.cp-page-1day #root .vs-main-pair .day-lower-steps > li > span {display:none;}html.cp-page-1day #root .vs-main-icon {width:28px;height:28px;flex-basis:28px;}}
/* Non-sequential clinic strengths do not receive process arrows. */
html body.treatment-page main#main .vs-flow.vs-benefits > li::after {display:none!important;}
html body.treatment-page main#main #treatment-process {scroll-margin-top:110px;}
html body.treatment-page main#main .vs-inlay-photo {position:relative;overflow:visible;}
html body.treatment-page main#main .vs-inlay-flow > li::after {display:none;}
html body.treatment-page main#main .vs-inlay-flow > li:not(:last-child) .vs-inlay-photo::after {content:'→';position:absolute;top:50%;right:-20px;transform:translateY(-50%);color:#9a886b;font-size:21px;}
@media(max-width:760px){html body.treatment-page main#main .vs-inlay-flow > li .vs-inlay-photo::after {display:none!important;}}

@media(min-width:761px){
html body.treatment-page main#main [data-vs-pair='photo-stack'] > [data-vs-media] {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;}
html body.treatment-page main#main .vs-metrics-followup .clinic-plan-metrics {grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(min-width:761px){html body.treatment-page main#main #doctor-plan img[data-vs-photo][data-vs-photo]{width:auto!important;height:auto!important;max-height:var(--vs-photo-cap,480px)!important;object-fit:contain!important;} }

html body.treatment-page main#main .vs-context-title {font-size:22px!important;line-height:1.5!important;margin:0 0 14px!important;color:inherit!important;}
@media(min-width:761px){html body.treatment-page main#main [data-vs-pair='photo-stack'] {display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:48px!important;}html body.treatment-page main#main [data-vs-pair='photo-stack'] > * {width:auto!important;}}

html body.treatment-page main#main .vs-stage-detail + .vs-stage-detail {margin-top:22px;}
html body.treatment-page main#main .vs-stage-detail h4 {font-size:20px!important;line-height:1.5!important;margin:0 0 8px!important;color:inherit!important;}
html body.treatment-page main#main .vs-stage-detail p {font-size:18px!important;line-height:1.8!important;margin:0!important;}
@media(max-width:760px){html body.treatment-page main#main .vs-stage-detail h4{font-size:19px!important;}html body.treatment-page main#main .vs-stage-detail p{font-size:17px!important;}}
