/* Site-wide styles for thedentist.ai (live site).
   Tokens come from colors_and_type.css (loaded first). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.skip-link { position:absolute; left:-9999px; top:0; padding:8px 12px; background:var(--ink); color:var(--paper); }
.skip-link:focus { left:8px; top:8px; z-index:9999; }

/* ──────── shell ──────── */
.shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .shell { padding: 0 16px; } }

/* ──────── masthead ──────── */
.mast {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 0.5px solid rgba(10,31,51,0.08);
}
.mast .row { display:flex; align-items:center; gap:24px; height:64px; }
.mast .brand { display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:22px; letter-spacing:-0.5px; font-weight:600; }
.mast .brand .dot { color: var(--seal); }
.mast .brand .tooth { width:26px; height:26px; }
.mast nav { margin-left:auto; display:flex; gap:4px; align-items:center; }
.mast nav a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 14px; color: var(--ink-2); font-weight: 500;
}
.mast nav a:hover { color: var(--ink); background: var(--bone); }
.mast nav a.on { color: var(--ink); background: var(--bone); }
.mast .lang { display:flex; gap:2px; padding:3px; background:var(--bone); border-radius:999px; font-size:11px; }
.mast .lang button { padding:4px 8px; border-radius:999px; border:none; background:transparent; color:var(--ink-2); }
.mast .lang button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft); }
.mast .cta { background: var(--seal); color: var(--paper); border:none; padding:10px 16px; border-radius:12px; font-weight:600; font-size:14px; }
.mast .cta:hover { filter: brightness(0.95); }

@media (max-width: 720px) {
  .mast nav a { padding:6px 10px; font-size:13px; }
  .mast .lang, .mast .cta { display:none; }
}

/* ──────── hero ──────── */
.hero { padding: 72px 0 48px; }
.hero .mantra { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 7vw, 84px); line-height: 1.02; letter-spacing: -2px;
  margin: 0 0 16px; max-width: 14ch; }
.hero .mantra em { font-style: italic; color: var(--seal); }
.hero .lede { font-size: 19px; line-height: 1.55; max-width: 56ch; color: var(--ink-2); margin: 0 0 28px; }
.hero .actions { display:flex; gap:12px; flex-wrap: wrap; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; padding:14px 22px; border-radius:12px; font-weight:600; font-size:15px;
  transition: filter 120ms, transform 100ms, box-shadow 120ms;
}
.btn:hover { box-shadow: var(--shadow-soft); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--seal); color: var(--paper); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost { background: transparent; color: var(--ink); border: 0.5px solid rgba(10,31,51,0.18); }
.btn-ghost:hover { background: var(--bone); }
.btn-ink { background: var(--ink); color: var(--paper); }

/* ──────── trust strip ──────── */
.trust {
  display:flex; gap:24px; flex-wrap: wrap; padding: 16px 0;
  border-top: 0.5px solid rgba(10,31,51,0.08);
  border-bottom: 0.5px solid rgba(10,31,51,0.08);
  font-size: 13px; color: var(--ink-2);
}
.trust .item { display:flex; gap:8px; align-items:center; }
.trust .item::before { content: "✓"; color: var(--sage); font-weight: 700; }

/* ──────── sections ──────── */
section { padding: 64px 0; }
.eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin: 0 0 16px; }
h2.section-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -1px; margin: 0 0 16px; max-width: 22ch; }
.section-lede { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 0 0 32px; }

/* ──────── card grid (router / tools / education) ──────── */
.cards { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--bone);
  border: 0.5px solid rgba(10,31,51,0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 150ms, background 150ms, box-shadow 150ms;
  text-align: left; width: 100%;
  cursor: pointer;
}
.card:hover { background: #ECE7DC; box-shadow: var(--shadow-soft); }
.card .ico { width: 40px; height: 40px; color: var(--seal); }
.card h3 { margin:0; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.4px; }
.card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.card .toolkit { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--ink-2); border-top: 0.5px solid rgba(10,31,51,0.08); }
.card .toolkit b { color: var(--ink); font-weight: 600; }

/* The router cards lean a touch larger — they're the centerpiece */
.router .card { padding: 28px; min-height: 200px; }

/* ──────── quiet panel (used for "why we ask", AB 3030 disclosure, methodology) ──────── */
.quiet {
  background: var(--bone);
  border: 0.5px solid rgba(10,31,51,0.08);
  border-radius: 16px;
  padding: 24px;
}
.quiet h4 { font-family: var(--font-display); font-weight:500; font-size:18px; margin: 0 0 8px; }
.quiet p { margin: 0; color: var(--ink-2); font-size: 14px; }

.disclosure { font-feature-settings: "tnum"; font-size: 11px; color: var(--ink-2); padding: 16px 0; border-top: 0.5px solid rgba(10,31,51,0.08); }

/* ──────── how-it-works ──────── */
.steps { display:grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { background: var(--paper); border: 0.5px solid rgba(10,31,51,0.08); border-radius: 16px; padding: 24px; }
.step .n { font-family: var(--font-display); font-size: 36px; color: var(--seal); line-height: 1; margin-bottom: 8px; }
.step h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight:500; font-size: 20px; }
.step p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* ──────── faq ──────── */
.faq { display:grid; gap: 0; }
.faq details { padding: 20px 0; border-top: 0.5px solid rgba(10,31,51,0.08); }
.faq details:last-child { border-bottom: 0.5px solid rgba(10,31,51,0.08); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 22px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--seal); font-size: 24px; transition: transform 200ms; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--ink-2); margin: 12px 0 0; max-width: 60ch; font-size: 16px; }

/* ──────── footer ──────── */
footer.foot { background: var(--ink); color: var(--paper); padding: 56px 0 32px; margin-top: 64px; }
footer.foot a { color: rgba(250,248,244,0.7); }
footer.foot a:hover { color: var(--paper); }
footer.foot .row { display:grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 720px) { footer.foot .row { grid-template-columns: 1fr 1fr; } }
footer.foot h5 { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(250,248,244,0.5); margin: 0 0 12px; font-weight: 600; }
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
footer.foot .meta { margin-top: 32px; padding-top: 20px; border-top: 0.5px solid rgba(250,248,244,0.12); font-size: 12px; color: rgba(250,248,244,0.55); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer.foot .brand { display:flex; align-items:center; gap:12px; font-family: var(--font-display); font-size: 28px; letter-spacing: -0.5px; }
footer.foot .brand .dot { color: var(--seal); }
footer.foot .mantra { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(250,248,244,0.75); margin: 12px 0 16px; }

/* ──────── photo capture ──────── */
.capture { display:grid; gap: 24px; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 880px) { .capture { grid-template-columns: 1fr; } }
.capture .stage {
  aspect-ratio: 4/3;
  background: var(--ink); color: var(--paper);
  border-radius: 16px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.capture .stage video, .capture .stage img { width: 100%; height: 100%; object-fit: cover; }
.capture .stage .overlay { position: absolute; inset: 16px; border: 1.5px dashed rgba(250,248,244,0.4); border-radius: 12px; pointer-events: none; }
.capture .stage .hint { position:absolute; bottom:16px; left:16px; right:16px; text-align:center; font-size:13px; color:rgba(250,248,244,0.85); }
.capture .controls { display:flex; gap: 12px; padding: 12px 0; }

/* ──────── tooth-grid (audit step 1) ──────── */
.toothgrid { display:flex; flex-direction:column; gap: 8px; align-items:center; padding: 24px; background: var(--bone); border-radius: 16px; }

/* ──────── progress bar ──────── */
.progress { display:flex; gap: 8px; padding: 0 0 24px; align-items:center; font-size:12px; color: var(--ink-2); }
.progress .pip { width: 28px; height: 4px; background: rgba(10,31,51,0.12); border-radius: 999px; }
.progress .pip.on { background: var(--seal); }

/* ──────── recognition tier ring ──────── */
.tier-ring { display:inline-flex; align-items:center; gap:8px; padding: 4px 10px; border-radius:999px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; }
.tier-ring.gold { background: linear-gradient(135deg, #F4E5BC 0%, #C9A24A 100%); color: #4A3914; }
.tier-ring.silver { background: linear-gradient(135deg, #ECECEC 0%, #B8B8B8 100%); color: #2A2A2A; }
.tier-ring.bronze { background: linear-gradient(135deg, #E6C49A 0%, #A87338 100%); color: #3D2812; }

/* ──────── performance bars on profile ──────── */
.perfbars { display:grid; gap: 14px; }
.perfbar { display:grid; grid-template-columns: 180px 1fr 56px; gap: 14px; align-items: center; font-size: 14px; }
.perfbar .label { color: var(--ink); font-weight: 500; }
.perfbar .track { height: 6px; background: rgba(10,31,51,0.08); border-radius: 999px; overflow: hidden; }
.perfbar .fill { height: 100%; background: var(--sage); border-radius: 999px; transition: width 600ms ease-out; }
.perfbar .fill.high { background: var(--seal); }
.perfbar .num { font-feature-settings: "tnum"; font-weight: 600; color: var(--ink); text-align: right; }
.perfbar.below { opacity: 0.4; }

/* ──────── emergency overlay ──────── */
.emergency-pill { display:inline-flex; align-items:center; gap:6px; padding: 6px 12px; background:#C0392B; color:white; border-radius:999px; font-size:12px; font-weight:600; }