/* The Smile Guide — design system v2
   Morning Light language in Chiu Dental's brand palette, opened up:
   generous spacing, big numbers, strong colour blocking (sage bands like hellochiu.com). */

:root {
  --bg: #F9F4F2;
  --surface: #FFFFFF;
  --ink: #2B2B2B;
  --muted: #61635F;
  --border: #E6DCD6;
  --border-soft: #F0E9E4;
  --panel: #EEE4DF;
  --cta: #906D64;
  --cta-hover: #7C5B53;
  --cta-ink: #FFFFFF;
  --link: #5C5F54;
  --link-hover: #45483F;
  --accent: #737769;
  --accent-soft: #8D9183;
  --band-ink: #FFFFFF;
  --footer-bg: #737769;
  --footer-ink: #EEE4DF;
  --footer-strong: #FFFFFF;
  --footer-rule: #8D9183;
  --radius-a: 24px 24px 64px 24px;
  --radius-b: 64px 24px 24px 24px;
  --radius-c: 24px 64px 24px 24px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17.5px;
  line-height: 1.7;
}

h1, h2, h3, .disp { font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.2vw, 58px); font-weight: 650; margin: 0 0 22px; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; margin: 0 0 18px; }
h3 { font-size: 22px; font-weight: 600; margin: 40px 0 12px; }
p { margin: 0 0 18px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 10px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.prose { max-width: 68ch; }
.prose-narrow { max-width: 60ch; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cta); margin: 0 0 16px;
}
.caption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.lede { font-size: 20px; line-height: 1.6; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.site-header .bar {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap;
}
.site-header .brand { margin-right: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand .disp { font-size: 21px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 15.5px; font-weight: 500; flex-wrap: wrap; }
.site-nav a { color: var(--ink); }
.site-nav a[aria-current="true"] { color: var(--link); font-weight: 700; }
/* Header call button: the full number has room on desktop, a compact "Call" on phones.
   The anchor carries an aria-label with the number, so the accessible name never changes. */
.call-word { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cta); color: var(--cta-ink);
  padding: 15px 28px; border-radius: 999px;
  font-size: 16px; font-weight: 600; border: none; cursor: pointer;
  min-height: 48px;
}
.btn:hover { background: var(--cta-hover); color: var(--cta-ink); text-decoration: none; }
.btn.small { padding: 11px 20px; font-size: 15px; min-height: 44px; }
.btn.light { background: var(--bg); color: var(--ink); }
.btn.light:hover { background: #FFFFFF; color: var(--ink); }
.btn svg { flex: none; }
/* On sage bands, all buttons go ivory — rose-brown would blend into the sage. */
.band .btn, .cta-band.strong .btn { background: var(--bg); color: var(--ink); }
.band .btn:hover, .cta-band.strong .btn:hover { background: #FFFFFF; color: var(--ink); }

/* ---------- sage band (the strong colour statement) ---------- */
.band {
  background: var(--accent); color: var(--band-ink);
}
.band .eyebrow { color: #FFFFFF; opacity: 0.95; }
.band h1, .band h2 { color: #FFFFFF; }
.band .lede { color: #FFFFFF; opacity: 0.94; }
.band .caption { color: #FFFFFF; opacity: 0.96; font-weight: 500; }
.band a:not(.btn) { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.band a:not(.btn):hover { opacity: 0.85; }

/* ---------- hero ---------- */
.hero { display: flex; gap: 72px; align-items: center; padding-block: 88px; }
.hero > .hero-copy { flex: 1.1; min-width: 0; }
.hero > .hero-media { flex: 1; min-width: 0; }
.hero-media img { border-radius: var(--radius-a); }
.hero-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 880px) { .hero { flex-direction: column; gap: 40px; padding-block: 56px; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 28px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

.tint-card {
  background: var(--panel); padding: 34px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.tint-card:nth-child(4n+1) { border-radius: var(--radius-a); }
.tint-card:nth-child(4n+2) { border-radius: 24px 24px 24px 64px; }
.tint-card:nth-child(4n+3) { border-radius: var(--radius-b); }
.tint-card:nth-child(4n+4) { border-radius: var(--radius-c); }
.tint-card .price { font-family: 'Bricolage Grotesque', sans-serif; font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tint-card .label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cta); }
.tint-card .desc { font-size: 15px; color: var(--muted); margin: 0; }
.tint-card .more { margin-top: auto; font-weight: 600; font-size: 15px; }

.split { display: flex; gap: 72px; align-items: center; }
.split > * { flex: 1; min-width: 0; }
.split .media-a img { border-radius: var(--radius-b); }
.split .media-c img { border-radius: var(--radius-c); }
@media (max-width: 880px) { .split { flex-direction: column; align-items: stretch; gap: 36px; } }

.section { padding: 72px 0 0; }
.section:last-of-type { padding-bottom: 72px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head h2 { margin: 0; }

/* ---------- article / pillar pages ---------- */
.breadcrumb { font-size: 13.5px; color: var(--muted); padding: 28px 0 0; }
.breadcrumb a { color: var(--muted); }
.article-head { padding: 32px 0 8px; max-width: 64ch; }
.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted); margin: 24px 0 10px;
}
.byline .chip {
  background: var(--panel); border-radius: 999px; padding: 8px 16px;
  font-weight: 600; color: var(--ink); font-size: 13px;
}
.direct-answer {
  background: var(--panel); border-radius: 24px 24px 64px 24px; padding: 32px 36px; margin: 32px 0 12px;
  font-size: 20px; line-height: 1.6; max-width: 70ch;
}
.direct-answer .da-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cta); margin-bottom: 12px; }

.prose h2 { margin-top: 64px; }
.prose > p, .prose li { color: #3A3B36; }

.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; font-size: 15.5px; }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 28px 0; border-radius: 18px; }
.data-table caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 2px 12px; font-size: 15.5px; }
.data-table th { text-align: left; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.data-table td { padding: 15px 20px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 600; }
.data-table .num, .data-table td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }


.faq { margin: 16px 0 24px; max-width: 70ch; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 12px; padding: 8px 26px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; font-size: 16.5px; }
.faq details p { color: var(--muted); margin: 6px 0 18px; }

.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 24px; margin-top: 56px; max-width: 70ch; }
.sources ul { padding-left: 20px; margin-top: 10px; }
.sources li { margin-bottom: 6px; }

.cta-band {
  background: var(--panel); border-radius: 32px; padding: 44px 48px; margin: 64px 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-band .disp { font-size: 27px; font-weight: 650; margin: 0 0 8px; }
.cta-band p { margin: 0; color: var(--muted); max-width: 48ch; }
.cta-band.strong { background: var(--accent); }
.cta-band.strong .disp { color: #FFFFFF; }
.cta-band.strong p { color: #FFFFFF; opacity: 0.94; }

.related { margin: 56px 0 8px; }
.related h2 { font-size: 24px; margin: 0 0 20px; }
.related .grid a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px; font-weight: 600; color: var(--ink); font-size: 16px; }
.related .grid a:hover { border-color: var(--accent-soft); text-decoration: none; }

/* ---------- hub pages ---------- */
.hub-list { display: flex; flex-direction: column; margin: 16px 0 24px; }
.hub-list a {
  display: flex; align-items: baseline; gap: 24px; justify-content: space-between;
  padding: 26px 6px; border-bottom: 1px solid var(--border); color: var(--ink);
}
.hub-list a:hover { text-decoration: none; background: var(--surface); }
.hub-list .t { font-family: 'Bricolage Grotesque', sans-serif; font-size: 23px; font-weight: 600; flex: 1; }
.hub-list .p { font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; color: var(--cta); }
.hub-list .d { color: var(--muted); font-size: 15px; flex: 1.1; }
@media (max-width: 700px) { .hub-list a { flex-direction: column; gap: 8px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: 96px; }
.site-footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 64px 28px 44px; }
.footer-cols { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: var(--footer-strong); }
.site-footer .col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; min-width: 140px; }
.site-footer .col strong { color: var(--footer-strong); font-size: 15.5px; margin-bottom: 4px; }
.footer-brand { max-width: 42ch; display: flex; flex-direction: column; gap: 12px; }
.footer-brand .disp { font-size: 21px; font-weight: 700; color: var(--footer-strong); }
.footer-legal { border-top: 1px solid var(--footer-rule); margin-top: 40px; padding-top: 22px; font-size: 13px; color: #E3DED6; line-height: 1.7; }

/* ---------- sticky mobile call bar ---------- */
.call-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--cta); color: var(--cta-ink);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 12px;
}
.call-bar a { color: var(--cta-ink); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; flex: none; }
.call-bar .cb-note { font-size: 12.5px; line-height: 1.45; min-width: 0; }
@media (max-width: 760px) {
  body.has-callbar { padding-bottom: 84px; }
  body.has-callbar .call-bar { display: flex; }
}
/* Narrow phones: shrink the bar's type so the note stays two lines and the
   bar stays clear of the page padding above. */
@media (max-width: 420px) {
  .call-bar { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .call-bar a { font-size: 15px; }
  .call-bar .cb-note { font-size: 11.5px; }
}

/* ---------- misc ---------- */
.checkline { display: flex; gap: 18px 44px; flex-wrap: wrap; padding: 30px 0 0; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.checkline span { display: flex; align-items: center; gap: 9px; }
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px 24px; margin: 24px 0; max-width: 70ch; font-size: 15px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }
.footnote { font-size: 14px; color: var(--muted); max-width: 60ch; }

/* ---------- 860px and down: brand + Call on row one, nav links on row two ---------- */
@media (max-width: 860px) {
  .site-header .bar { padding: 12px 24px; gap: 8px 14px; }
  .site-header .brand { order: 1; }
  .site-header .call-btn { order: 2; }
  .site-nav { order: 3; flex: 1 0 100%; justify-content: space-between; gap: 6px 16px; }
}

/* ---------- small screens: header scrolls away, tighter rhythm ---------- */
@media (max-width: 760px) {
  .site-header { position: static; }
  .site-header .bar { padding: 10px 20px; gap: 6px 12px; }
  .site-nav { font-size: 15px; gap: 6px 14px; }
  .call-num { display: none; }
  .call-word { display: inline; }
  .brand .disp { font-size: 19px; }
  .wrap { padding: 0 20px; }
  .hero { padding-block: 48px; }
  .section { padding: 56px 0 0; }
  .section:last-of-type { padding-bottom: 56px; }
  .cta-band { padding: 32px 28px; }
  .direct-answer { padding: 26px 26px; font-size: 18px; }
  h1 { font-size: clamp(32px, 9vw, 40px); }
}

/* ---------- very narrow phones: keep the nav on one line ---------- */
@media (max-width: 380px) {
  .site-nav { font-size: 14px; gap: 6px 10px; }
  .brand .disp { font-size: 18px; }
  .btn.small { padding: 11px 16px; }
}

/* ---------- phones: cost tables stack into one card per row ----------
   These tables need ~540px minimum to hold three columns, so below 640px
   they used to scroll sideways with the caption and first column clipped
   off the edge. Stacked, every row reads top to bottom with its column
   name above each value, and nothing scrolls. display:block drops the
   implicit table semantics, so the markup carries explicit ARIA roles. */
@media (max-width: 640px) {
  .table-scroll { border-radius: 0; margin: 22px 0; }
  .data-table { display: block; border: none; background: none; border-radius: 0; overflow: visible; font-size: 16px; }
  .data-table caption { display: block; padding: 0 0 14px; }
  .data-table thead { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .data-table thead tr, .data-table thead th { display: block; width: 1px; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; padding: 6px 20px 10px; margin-bottom: 14px;
  }
  .data-table td {
    display: block; padding: 12px 0; border-bottom: 1px solid var(--border-soft);
    white-space: normal; vertical-align: baseline; overflow-wrap: anywhere;
  }
  .data-table td:last-child { border-bottom: none; }
  /* Beats the nowrap the second column and .num carry for the wide layout --
     same specificity as those rules, so it has to come after them. */
  .data-table td:nth-child(2), .data-table .num { white-space: normal; }
  .data-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  /* First cell names the row, so it reads as the card's heading. */
  .data-table td:first-child {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    font-size: 19px; font-weight: 600; line-height: 1.25;
    padding-top: 14px; border-bottom: 1px solid var(--border);
  }
  .data-table td:first-child::before { content: none; }
  .data-table td[data-label=""]::before { content: none; }
}

/* ---------- CTA band actions ----------
   The sage band paints every .btn ivory, which flattened the primary and
   secondary actions into two identical pills. .ghost outlines the secondary
   so the filled button is unmistakably the thing to tap. */
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.band .btn.ghost, .cta-band.strong .btn.ghost {
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.band .btn.ghost:hover, .cta-band.strong .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.14); color: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px #FFFFFF;
}
@media (max-width: 640px) {
  /* Full-width so the call is a whole-thumb target, not a small pill in a
     large empty band. */
  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}