/* ==========================================================================
   NuTeeth Dental Implant Center — Landing Page
   Brand colour, logo and content from https://nuteethimplantcenter.com/

   --brand       #155cc1   primary blue, read from the NuTeeth logo SVG
   --brand-deep  #0d3f8f   filled-button background
   --ink         #0b2545   headings, footer background
   --body        #4a5f7d   body copy
   --muted       #7089a8   secondary text
   --line        #e3e9f1   borders
   --tint        #eaf2fd   band, eyebrow and icon-tile fills
   --page        #fafafa   page background
   gradient      #4a9bf0 -> #155cc1
   ========================================================================== */

:root {
  --brand: #155cc1;
  --brand-deep: #0d3f8f;
  --brand-light: #4a9bf0;
  --ink: #0b2545;
  --ink-700: #16325c;
  --body: #4a5f7d;
  --muted: #7089a8;
  --line: #e3e9f1;
  --line-soft: #eef1f6;
  --tint: #eaf2fd;
  --page: #fafafa;
  --white: #fff;
  --gold: #f5a623;
  --green: #11845b;

  --grad: linear-gradient(90deg, #4a9bf0 20%, #155cc1 80%);

  --shadow-nav: 0 4px 24px #0b25450d;
  --shadow-01: 0 2px 10px #0b25450a;
  --shadow-03: 0 10px 34px #0b254514;
  --shadow-05: 0 24px 60px #0b25451f;

  --radius-btn: 48px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --container: 1200px;
  --section-gap: 60px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the nav is sticky at top:0, so an anchor jump would land the target
     underneath it. Measured nav height is 92px here, 80px at 991, 76px at 767;
     each value below adds ~20px of breathing room. */
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  font-family: Lexend, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  color: var(--body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* kill UA default margins — unclassed <p>/<figure> otherwise break flex spacing */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

img, svg, video { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- typography ---------- */
.h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 500;
  line-height: 126%;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.h2 {
  margin: 0;
  max-width: 800px;
  font-size: 40px;
  font-weight: 500;
  line-height: 122%;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.h3 { margin: 0; font-size: 28px; font-weight: 600; line-height: 132%; color: var(--ink); }
.h4 { margin: 0; font-size: 19px; font-weight: 600; line-height: 138%; color: var(--ink); }

.p { margin: 0; font-size: 16px; line-height: 165%; color: var(--body); }
.p-s { margin: 0; font-size: 17px; line-height: 165%; color: var(--body); }
.p-small { margin: 0; font-size: 14px; line-height: 155%; color: var(--body); }
.p-tiny { margin: 0; font-size: 12px; line-height: 150%; color: var(--muted); }

.grad-span {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */
.section {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin: var(--section-gap) auto;
  padding: 0 24px;
}

/* ---------- buttons (48px pill, 16/32 padding) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-filled {
  background: var(--brand-deep);
  color: var(--white);
  box-shadow: 0 6px 18px #155cc12e;
}
.btn-filled:hover { background: var(--brand); box-shadow: 0 10px 26px #155cc142; }

.btn-outline { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }

.btn-white { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-01); }
.btn-white:hover { border-color: var(--brand); color: var(--brand); }

.btn-ghost-light { background: var(--white); color: var(--brand); }
.btn-ghost-light:hover { background: var(--tint); }

.btn .icon { width: 19px; height: 19px; flex: none; }

/* ---------- nav (floating white pill on grey) ---------- */
.nav-container {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 24px 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 10px 10px 26px;
  background: var(--white);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-nav);
}

.logo-container { display: flex; align-items: center; flex: none; }
.logo { width: 132px; height: auto; }

.navlinks {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.navlinks a {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  padding: 4px 0;
  transition: color .18s ease;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--brand);
  transition: width .22s ease;
}
.navlinks a:hover { color: var(--brand); }
.navlinks a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  background: var(--brand-deep);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease;
}
.nav-phone:hover { background: var(--brand); transform: translateY(-1px); }
.nav-phone .icon { width: 17px; height: 17px; }

.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}
.nav-menu-btn span {
  position: relative;
  display: block;
  width: 17px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background-color .2s ease;
}
.nav-menu-btn span::before,
.nav-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease;
}
.nav-menu-btn span::before { top: -6px; }
.nav-menu-btn span::after { top: 6px; }
.nav-menu-btn.is-open span { background: transparent; }
.nav-menu-btn.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-menu-btn.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: 56px 24px 0; }

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: 24px;
}

.hero-text { display: flex; flex-direction: column; gap: 22px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
  box-shadow: var(--shadow-01);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #11845b24;
}

/* single-column checklist with filled circular ticks */
.checklist { display: flex; flex-direction: column; gap: 13px; }

.checkpoint { display: flex; align-items: flex-start; gap: 11px; }
.checkpoint .check {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: grid;
  place-items: center;
}
.checkpoint .check svg { width: 12px; height: 12px; }
.checkpoint p { font-size: 16px; color: var(--ink-700); line-height: 150%; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* index-v8 only: the Target Smile AI button moves under the hero image once the
   hero stacks. There are two copies of it in v8's markup and exactly one is ever
   shown — CSS cannot reparent an element, and moving the original would change
   the desktop layout. Hidden here; the 991 block below swaps which one shows. */
.hero-cta-mobile { display: none; }

.hero-trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.hero-trust .badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--radius-btn);
  background: var(--white);
  box-shadow: var(--shadow-01);
}
.hero-trust .badge img { height: 30px; width: auto; }
.hero-trust .badge span { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.hero-trust .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }

/* hero visual — layered composition: photo card with floating cards */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px 40px 40px;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 420px; height: 420px;
  /* Decorative only, but a fixed 420px is wider than a phone: below about 420px
     of viewport it pushed the document's scrollWidth past the screen and the
     whole page scrolled sideways. Clamping keeps the glow centred and stops it
     driving layout. */
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #dbe9fb 0%, #fafafa00 68%);
  z-index: 0;
}

.hero-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 366px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-05);
}
.hero-main img { width: 100%; height: 430px; object-fit: cover; object-position: center 28%; }

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-03);
}
.float-card .label { font-size: 11px; color: var(--muted); line-height: 1.35; }
.float-card .value { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }

.float-rating { top: 52px; right: 4px; }
.float-rating .stars { color: var(--gold); font-size: 13px; letter-spacing: 1.5px; }

.float-guarantee { top: 176px; left: 0; }
.float-guarantee img { width: 38px; height: 38px; }

/* index-v2: price mark replaces the guarantee badge in the hero */
.float-price-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand);
  font-size: 19px;
  font-weight: 600;
}

.float-ba {
  bottom: 26px; right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  width: 190px;
}
.float-ba .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.float-ba figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; }
.float-ba img { width: 100%; height: 66px; object-fit: cover; object-position: center 55%; }
.float-ba figcaption {
  position: absolute;
  left: 4px; bottom: 4px;
  padding: 2px 7px;
  border-radius: 20px;
  background: #ffffffe8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.float-ba .pair figure + figure figcaption { background: var(--brand); color: var(--white); }

/* ---------- impact stats (white cards, gradient numerals) ---------- */
.impact-content { display: flex; flex-direction: column; align-items: center; gap: 40px; }

.impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }

.impact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.impact-number {
  font-size: 68px;
  font-weight: 500;
  line-height: 118%;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- band (tinted full-width section) ---------- */
.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px;
  border-radius: var(--radius-lg);
  background: var(--tint);
}

.band-text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.band-text .h2 { text-align: left; }

.band-media { flex: none; display: flex; align-items: center; gap: 20px; }
.band-media img { width: 128px; height: auto; }

/* ---------- section heads ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 44px;
}
.section-head .h2 { text-align: center; }
.section-head .p-s { max-width: 700px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-btn);
  background: var(--tint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* index-v4: the locations row carries a fourth office, which will not sit in .grid-3 */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: #cadcf5; box-shadow: var(--shadow-03); }

.card-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-step .num { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--brand); }
.card-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--tint); }
.card-icon img { width: 28px; height: 28px; }

/* ---------- comparison table ---------- */
.compare-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.compare-scroll { overflow-x: auto; }

table.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }

table.compare th, table.compare td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.compare thead th {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  white-space: nowrap;
}
table.compare thead th.is-brand { background: var(--brand); }
table.compare thead th:first-child { background: var(--ink); }

table.compare tbody th { font-weight: 500; color: var(--ink); background: #fbfcfe; white-space: nowrap; }
table.compare td.yes { color: var(--ink); font-weight: 500; }
table.compare td.no { color: var(--muted); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }

.tick, .cross {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: -4px;
}
.tick { background: #def2e6; color: var(--green); }
.cross { background: #ffeff0; color: #dc2b2b; }
.tick svg, .cross svg { width: 11px; height: 11px; }

/* ---------- pricing panel (index-v2 only) ---------- */
.price-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-01);
}

.price-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 48px;
  background:
    radial-gradient(520px 260px at 20% 0%, #ffffff1f 0%, #ffffff00 70%),
    linear-gradient(150deg, var(--brand-deep) 0%, var(--brand) 65%, #2a7ae0 100%);
}
.price-amount { font-size: 60px; font-weight: 500; line-height: 1.05; color: var(--white); letter-spacing: -0.02em; }
.price-caption { font-size: 15px; line-height: 1.5; color: #ffffffd6; }
.price-rule { width: 56px; height: 2px; background: #ffffff4d; border-radius: 2px; }

.price-points { display: flex; flex-direction: column; gap: 10px; }
.price-point { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #ffffffeb; }
.price-point svg { flex: none; width: 17px; height: 17px; margin-top: 3px; }

.price-included { display: flex; flex-direction: column; gap: 20px; padding: 48px; }
.price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }

.price-insurance {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: auto;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--tint);
}
.price-insurance img { flex: none; width: 62px; height: auto; border-radius: 8px; }
.price-insurance-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* ---------- transformations ---------- */
.transformations { display: flex; flex-direction: column; gap: 40px; }

.transformations-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.transformations-head .text { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.transformations-head .h2 { text-align: left; }

.slider-nav { display: flex; gap: 12px; flex: none; }
.slider-nav button {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.slider-nav button:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.slider-nav svg { width: 16px; height: 16px; }

.slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.slider::-webkit-scrollbar { display: none; }

.video-card {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-soft);
}

.ba-split { display: grid; grid-template-columns: 1fr 1fr; }
.ba-split figure { position: relative; margin: 0; background: var(--tint); }
.ba-split img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.ba-split figcaption {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 11px;
  border-radius: var(--radius-btn);
  background: #ffffffeb;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}
.ba-split figure + figure figcaption { background: var(--brand); color: var(--white); }

.video-overlay { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.video-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.video-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.video-tag {
  padding: 5px 12px;
  border-radius: var(--radius-btn);
  background: var(--tint);
  font-size: 12px;
  color: var(--brand);
}

/* ---------- reviews ---------- */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-03); }
.review-stars { color: var(--gold); font-size: 15px; letter-spacing: 3px; }
.review-card blockquote { margin: 0; font-size: 16px; line-height: 165%; color: var(--body); }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--tint);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.review-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }

.review-card.is-cta { background: var(--tint); border-color: transparent; justify-content: center; align-items: flex-start; }
.review-card.is-cta .h3 { font-size: 23px; }

/* ---------- consultation offer ---------- */
.offer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--white);
}

.offer-media { position: relative; background: var(--tint); }
.offer-media img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

.offer-price {
  position: absolute;
  top: 22px; left: 22px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  background: var(--white);
  box-shadow: var(--shadow-03);
}
.offer-price .value { font-size: 19px; font-weight: 600; color: var(--brand); line-height: 1.2; }
.offer-price .label { font-size: 12px; color: var(--muted); }

.offer-body { display: flex; flex-direction: column; gap: 18px; padding: 48px; }
.offer-body .h2 { text-align: left; font-size: 32px; }
.offer-list { display: flex; flex-direction: column; gap: 12px; }

/* ---------- doctor ---------- */
.doctor { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 52px; }
.doctor-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-03); }
.doctor-img img { width: 100%; height: 440px; object-fit: cover; object-position: center top; }
.doctor-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.doctor-text .h2 { text-align: left; }
.doctor-creds { display: flex; flex-direction: column; gap: 11px; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 32px; }

.faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.faq-head .h2 { text-align: left; }

.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }

.faq-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open { border-color: #bcd6f5; box-shadow: var(--shadow-01); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  line-height: 135%;
  color: var(--ink);
  text-align: left;
}

.faq-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand);
  transition: transform .25s ease, background-color .2s ease, color .2s ease;
}
.faq-icon svg { width: 13px; height: 13px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--brand); color: var(--white); }

.faq-answer { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
/* Collapsed only while JS is there to open it again. Same failsafe as .reveal:
   if main.js never confirms, the answers open at 2s rather than stay sealed. */
.js .faq-answer { grid-template-rows: 0fr; animation: faq-failsafe 0s linear 2s forwards; }
.js.reveal-ready .faq-answer { animation: none; }
@keyframes faq-failsafe { to { grid-template-rows: 1fr; } }
.js .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { padding: 0 24px 22px; max-width: 780px; }

/* ---------- articles ---------- */
.articles { display: flex; flex-direction: column; gap: 40px; }

.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-03); }

.article-thumb { height: 190px; background: var(--tint); overflow: hidden; }
.article-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.article-thumb.is-pattern {
  background: linear-gradient(135deg, #155cc1 0%, #4a9bf0 100%);
  display: grid;
  place-items: center;
}
.article-thumb.is-pattern img {
  width: 76px; height: 76px;
  padding: 0;
  object-fit: contain;
  opacity: .9;
  filter: brightness(0) invert(1);
}
.article-body { display: flex; flex-direction: column; gap: 11px; padding: 24px; }
.article-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.article-cat { padding: 4px 12px; border-radius: var(--radius-btn); background: var(--tint); color: var(--brand); font-weight: 500; }

/* ---------- locations ---------- */
.location-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.location-card:hover { transform: translateY(-4px); border-color: #cadcf5; box-shadow: var(--shadow-03); }
.location-card .city { font-size: 20px; font-weight: 600; color: var(--ink); }
.location-card .hours { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.location-link { color: var(--brand); font-weight: 500; font-size: 14px; margin-top: auto; }
.location-link:hover { text-decoration: underline; }

/* ---------- CTA strip ---------- */
.cta-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: 68px 48px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 50% 0%, #ffffff1f 0%, #ffffff00 70%),
    linear-gradient(120deg, var(--brand-deep) 0%, var(--brand) 62%, #2a7ae0 100%);
}
.cta-strip .h2 { color: var(--white); text-align: center; }
.cta-strip .p-s { color: #ffffffdb; max-width: 620px; }
.cta-strip .buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- footer ---------- */
.footer-section { width: 100%; max-width: calc(var(--container) + 48px); margin: var(--section-gap) auto 0; padding: 0 24px 24px; }

.footer {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 52px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #ffffffcc;
}

.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }

.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 300px; }
.footer-logo { width: 160px; }
.footer-brand p { color: #ffffffab; font-size: 15px; line-height: 160%; }

.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col .title, .footer-contact .title { font-size: 14px; font-weight: 600; color: var(--white); letter-spacing: .03em; }
.footer-link { font-size: 14px; color: #ffffffab; transition: color .18s ease; }
.footer-link:hover { color: var(--white); }

.footer-contact { display: flex; flex-direction: column; gap: 13px; }
.footer-contact .label { font-size: 11px; color: #ffffff7a; text-transform: uppercase; letter-spacing: .08em; }
.footer-contact .value { font-size: 14px; color: #ffffffc4; line-height: 155%; }

.footer-divider { height: 1px; background: #ffffff1a; }

.footer-disclosure { display: flex; flex-direction: column; gap: 8px; }
.footer-disclosure .p-tiny { color: #ffffff7a; font-size: 11px; line-height: 165%; }
.footer-disclosure strong { color: #ffffffab; font-weight: 500; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  color: #ffffffab;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.footer-social a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }

.copyright { font-size: 13px; color: #ffffff7a; }

/* ---------- text-the-doctor CTA (index-v3 only) ---------- */
.btn-sms { background: var(--tint); border-color: #c9dcf6; color: var(--brand-deep); }
.btn-sms:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* same pill on the dark CTA strip */
.btn-sms-light { background: #ffffff1f; border-color: #ffffff66; color: var(--white); }
.btn-sms-light:hover { background: #ffffff33; border-color: var(--white); }

.sms-note { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--body); }
.sms-note svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--brand); }
.sms-note a { font-weight: 600; color: var(--brand); border-bottom: 1px solid #155cc140; }
.sms-note a:hover { border-bottom-color: var(--brand); }

/* nav: SMS pill sits to the left of the phone pill */
.nav-sms {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-sms:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.nav-sms .icon { width: 17px; height: 17px; }

/* index-v4: with the phone gone this pill is the only nav CTA, so it takes
   the filled treatment .nav-phone used to carry */
.nav-sms.is-solid { padding: 14px 26px; border-color: transparent; background: var(--brand-deep); color: var(--white); }
.nav-sms.is-solid:hover { background: var(--brand); border-color: transparent; color: var(--white); }

/* index-v3: price mark stands in for the removed quality-guarantee badge in .band-media */
.band-pricemark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 34px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-03);
}
.band-pricemark .figure { font-size: 38px; font-weight: 500; letter-spacing: -.02em; color: var(--brand-deep); }
.band-pricemark .note { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ---------- video feature (index-v3 only) ---------- */
.video-feature {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-01);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-03);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-feature-text { display: flex; flex-direction: column; gap: 16px; }
.video-feature-text .h2 { text-align: left; }

/* ==========================================================================
   Target Smile widget (index-v5 onward)

   The vendor page carries <html class="dark"> in its markup but renders light,
   so the panel is a white card in the house style — the same treatment as
   .video-feature. An ink panel here reads as a heavy navy border round a white
   widget. Re-check this if the vendor ever actually ships the dark theme.
   ========================================================================== */

.smile-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-01);
}

.smile-frame iframe {
  display: block;
  width: 100%;
  height: 800px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--white);
}

/* index-v7: tall enough that the widget does not scroll inside its own frame.
   Arch-OS publishes no resize API - the only two postMessage calls in their
   bundle are React's internal scheduler - so the height cannot track the
   content and has to be set from measurement.

   Re-measured 2026-10-19, after the vendor added its own "Your details" form
   (~470px taller; identical on arch-os.ai and targetsmile.com). Document
   height of the widget at each real frame width, which already includes ~80px
   of the widget's own bottom whitespace:

     frame width   270   310   340   380   430   550   686   717   909  1018  1166
     needs        1900  1792  1793  1724  1703  1682  1630  1639  1644  1686  1703

   Each value below is the tallest need in its breakpoint's width range plus
   ~20px. The widget is taller when narrow, so the steps do not shrink with the
   viewport. Inner scrolling is deliberately left possible rather than
   clipped, so a taller later step in the flow is still reachable.
   Re-measure if the vendor changes the widget; method in PROGRESS.md. */
.smile-frame.is-fitted iframe { height: 1720px; }

/* index-v9: name gate in front of the iframe. The v5 original sat on an ink
   panel; this is the same layout redrawn for the white card, using the
   site's own input and button language. */
.smile-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 32px;
  text-align: center;
}
.smile-gate[hidden], .smile-frame[hidden] { display: none; }
.smile-lede { max-width: 540px; font-size: 16px; line-height: 165%; color: var(--body); }

.smile-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 560px; }

.smile-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--page);
  font-family: inherit;
  font-size: 16px;
  line-height: 23px;
  color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.smile-input::placeholder { color: var(--muted); }
.smile-input:focus { outline: 0; border-color: var(--brand); background: var(--white); box-shadow: 0 0 0 4px var(--tint); }

/* index-v10: name, email and phone. Name runs full width, email and phone
   share a row, and the button sits underneath at full width. */
.smile-form.is-stacked { display: grid; grid-template-columns: 1fr 1fr; }
.smile-form.is-stacked .is-wide,
.smile-form.is-stacked .btn { grid-column: 1 / -1; }
.smile-form.is-stacked .smile-input { width: 100%; }

.smile-note { max-width: 520px; font-size: 13px; line-height: 155%; color: var(--muted); }

/* visually hidden, still read aloud - used for the name field's label */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* only ever shown when the page is not on a secure origin */
.smile-warning[hidden] { display: none; }
.smile-warning {
  margin: 0 auto 4px;
  max-width: 680px;
  padding: 14px 18px;
  border: 1px solid #f5a62359;
  border-radius: var(--radius-card);
  background: #fff6e8;
  font-size: 13px;
  line-height: 158%;
  text-align: center;
  color: #7a5213;
}
.smile-warning strong { color: #9a5b00; }
.smile-warning code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* ==========================================================================
   Legal pages (terms.html / privacy.html)

   These use the landing page's own nav and footer verbatim — they are pages of
   the site, not standalone documents. Only the content column is new: a white
   card inside the normal .section container, holding long-form prose.
   ========================================================================== */

.legal-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-01);
}

/* prose, so margins do the spacing here rather than flex gap */
.legal-body { font-size: 16px; line-height: 172%; color: var(--body); }
.legal-body p { margin: 0 0 18px; }
.legal-body h2 { margin: 40px 0 14px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.legal-body h2:first-of-type { border-top: 0; }
.legal-body h3 { margin: 26px 0 10px; }
.legal-body > :first-child { margin-top: 0; }
.legal-body > :last-child { margin-bottom: 0; }

/* the reset strips list-style and padding globally — legal prose wants them back */
.legal-body ul { list-style: disc; margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin-bottom: 9px; padding-left: 4px; }
.legal-body li::marker { color: var(--brand); }

/* ---------- mobile floating CTA ---------- */
.floating-cta {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 70;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-btn);
  background: #ffffffeb;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-05);
}
.floating-cta .btn { flex: 1; padding: 13px 16px; font-size: 14px; }

/* ---------- reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 10%, 0);
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);
  /* Failsafe. main.js adds .reveal-ready, which cancels this. If it never loads,
     this fires at 2s and the page is readable rather than blank below the hero.
     Deliberately CSS, not a timer: it cannot itself be broken by the thing it
     is guarding against. */
  animation: reveal-failsafe 0s linear 2s forwards;
}
.js.reveal-ready .reveal { animation: none; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; animation: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover, .article-card:hover, .review-card:hover, .location-card:hover { transform: none; }
}

/* ==========================================================================
   Responsive — breakpoints: 991 / 767 / 479
   ========================================================================== */

@media (max-width: 1100px) {
  .navlinks { gap: 20px; }
  .navlinks a { font-size: 14px; }
  .nav-phone { padding: 13px 20px; font-size: 14px; }
  .logo { width: 118px; }
}

@media (max-width: 991px) {
  :root { --section-gap: 44px; }
  html { scroll-padding-top: 100px; }

  .js .navlinks, .js .nav-cta { display: none; }
  .nav { padding: 10px 12px 10px 20px; }
  .js .nav-menu-btn { display: flex; }
  /* no script: the links are visible instead, so let the pill wrap to fit them */
  html:not(.js) .nav { flex-wrap: wrap; }

  .nav-container.is-open .navlinks {
    display: flex;
    position: absolute;
    top: calc(100% + 8px); left: 24px; right: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 16px 24px 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-03);
  }
  .nav-container.is-open .navlinks a { width: 100%; padding: 11px 0; font-size: 16px; }

  .hero { padding-top: 40px; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; padding: 12px 30px 30px; }

  /* index-v8: image, then the Target Smile AI button, then the text. Both this
     and .hero-visual take order:-1, so they keep source order between them and
     land ahead of .hero-text. The copy inside .hero-buttons hides to match. */
  .hero-cta-mobile { display: flex; order: -1; }
  .has-mobile-cta .hero-buttons .btn-filled { display: none; }
  .hero-main { max-width: 340px; }
  .hero-main img { height: 320px; }

  .h1 { font-size: 38px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 22px; }

  .impact-number { font-size: 48px; }
  .impact-stat { padding: 32px 20px; }
  .impact-stats { gap: 16px; }

  .band { flex-direction: column; align-items: flex-start; padding: 40px; }

  /* index-v3 */
  .video-feature { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
  .video-feature-text .h2 { font-size: 27px; }

  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }  /* index-v4 */

  .transformations-head { flex-direction: column; align-items: flex-start; }
  .slider { grid-auto-columns: minmax(300px, 1fr); }

  .offer { grid-template-columns: 1fr; }
  .offer-media img { min-height: 280px; }
  .offer-body { padding: 34px; }
  .offer-body .h2 { font-size: 27px; }

  .price-panel { grid-template-columns: 1fr; }
  .price-figure, .price-included { padding: 34px; }
  .price-amount { font-size: 48px; }

  .doctor { grid-template-columns: 1fr; gap: 30px; }
  .doctor-img img { height: 360px; }

  .faq-head { flex-direction: column; align-items: flex-start; }
  .faq-question { font-size: 17px; padding: 20px; }
  .faq-answer p { padding: 0 20px 20px; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer { padding: 40px; }

  .cta-strip { padding: 52px 32px; }

  /* index-v5 / v6 */
  .smile-frame iframe { height: 720px; }
  .smile-frame.is-fitted iframe { height: 1670px; }  /* index-v7+: frame 686-909 */
  .smile-gate { padding: 44px 24px; }  /* index-v9 */

  /* legal pages */
  .legal-card { padding: 38px; }
  .legal-body h2 { margin-top: 32px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 96px; }

  .section { padding: 0 14px; }
  .footer-section { padding: 0 14px 14px; }
  .hero { padding: 30px 14px 0; }
  .nav-container { padding: 12px 14px 0; }
  .nav-container.is-open .navlinks { left: 14px; right: 14px; }

  .impact-stats { grid-template-columns: 1fr; gap: 14px; }
  .impact-number { font-size: 44px; }
  .impact-stat { padding: 28px 20px; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }  /* index-v4 */

  .band { padding: 32px 24px; }
  .band-media img { width: 104px; }

  /* index-v3 */
  .band-pricemark { padding: 20px 26px; }
  .band-pricemark .figure { font-size: 32px; }
  .video-feature { padding: 22px; gap: 24px; }

  .card { padding: 24px; }
  .offer-body { padding: 26px; }

  .price-list { grid-template-columns: 1fr; }
  .price-figure, .price-included { padding: 26px; }
  .price-amount { font-size: 42px; }
  .price-insurance { flex-direction: column; gap: 12px; }

  .float-ba { display: none; }
  .float-rating { top: 20px; right: -4px; }
  /* top: auto matters. The base rule sets top: 176px; leaving it set alongside
     bottom here stretched the card between the two, so it rendered 166px tall
     around 38px of content on every mobile view. */
  .float-guarantee { top: auto; bottom: 20px; left: -4px; }

  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer { padding: 32px 22px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cta-strip { padding: 42px 22px; }
  .cta-strip .buttons { width: 100%; flex-direction: column; }
  .cta-strip .btn { width: 100%; }

  .floating-cta { display: flex; }
  body { padding-bottom: 78px; }

  .slider { grid-auto-columns: minmax(260px, 86%); }

  /* index-v5 / v6 */
  .smile-panel { padding: 10px; }
  .smile-frame iframe { height: 640px; }
  .smile-frame.is-fitted iframe { height: 1720px; }  /* index-v7+: frame 430-717 */
  /* index-v9 */
  .smile-gate { padding: 34px 12px; }
  .smile-form { flex-direction: column; }
  /* the row-direction flex-basis would become a 240px HEIGHT once stacked */
  .smile-input { flex: 0 0 auto; width: 100%; }
  .smile-form .btn { width: 100%; }
  .smile-form.is-stacked { grid-template-columns: 1fr; }  /* index-v10 */

  /* legal pages */
  .legal-card { padding: 26px 22px; }
}

@media (max-width: 479px) {
  /* .btn is nowrap by design, but a long label - "Text Dr. Choi - 469-962-4858",
     "Book your free consultation" - then sets a min-content width that its whole
     container inherits. On a 320px screen that dragged the pricing panel, the
     review cards and the offer body past the viewport and scrolled the page
     sideways. Letting labels wrap costs a second line only where they would not
     otherwise fit. */
  .btn { white-space: normal; }

  .h1 { font-size: 31px; }
  .h2 { font-size: 24px; }
  .logo { width: 116px; }
  .btn { padding: 14px 22px; font-size: 15px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; }
  .hero-visual { padding: 8px 14px 24px; }
  .hero-main img { height: 260px; }

  /* index-v3: three pills instead of two need to share the narrow bar */
  .floating-cta.is-three .btn { padding: 13px 8px; font-size: 13px; }

  .smile-frame.is-fitted iframe { height: 1810px; }  /* index-v7+: frame 310-429 */
}

/* Outside the 991 / 767 / 479 set on purpose: the widget is ~110px taller again
   in the 270px frame of a 320px phone than at 310, and one value for all of
   <=479 would leave a 360-479 phone with a white gap that size. */
@media (max-width: 359px) {
  .smile-frame.is-fitted iframe { height: 1920px; }  /* index-v7+: frame 270-309 */
}