/* DPI shared stylesheet — design language: medical, clean, calm.
   Reference direction: navy/slate on white, generous whitespace, quiet
   bordered pills, one solid-navy CTA, no gradients, no emoji. */

:root {
  --navy: #1e3a6e;        /* headings, primary CTA */
  --ink: #24334f;         /* main text ink */
  --body: #3d4a63;        /* body copy */
  --sub: #6b7691;         /* secondary text */
  --line: #e5eaf3;        /* borders */
  --bg: #f6f8fb;          /* page background */
  --card: #ffffff;
  --blue: #4a6bb5;        /* eyebrow / links / slate-blue subheads */
  --blue-bg: #e9effc;
  --yes: #1b7a54;  --yes-bg: #eaf5ef;
  --open: #8a6420; --open-bg: #faf3e2;
  --soon: #4a5fae; --soon-bg: #e9eefc;
  --star: #d9a514;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
       Roboto, sans-serif; background: var(--bg); color: var(--body);
       line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
a { color: var(--blue); text-decoration-color: #c8d4ec; }

/* breadcrumb + eyebrow */
.crumb { font-size: 12.5px; color: var(--sub); margin-bottom: 18px; }
.crumb a { color: var(--sub); text-decoration: none; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em;
           text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }

/* headings */
h1 { font-size: 30px; letter-spacing: -.4px; color: var(--navy);
     font-weight: 700; line-height: 1.2; }
h2 { font-size: 17px; color: var(--navy); font-weight: 700;
     letter-spacing: -.2px; margin-bottom: 4px; }
h3 { color: var(--ink); }
.subhead { color: var(--sub); font-size: 15px; margin: 4px 0 10px; }
.h2sub { font-size: 13.5px; color: var(--sub); margin-bottom: 14px; }
.lede { font-size: 15.5px; color: var(--body); max-width: 70ch; margin-bottom: 6px; }
.updated { font-size: 12.5px; color: var(--sub); margin-bottom: 20px; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: 16px; padding: 28px; margin-bottom: 18px;
        box-shadow: 0 1px 2px rgba(30,58,110,.04); }
.head { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }

/* photo placeholder — quiet, no stripes, no emoji */
.photo { width: 108px; height: 108px; border-radius: 14px; flex: 0 0 auto;
         background: #eef2f8; border: 1px solid var(--line);
         display: flex; align-items: center; justify-content: center;
         text-align: center; color: #93a0b8; font-size: 11px;
         line-height: 1.4; padding: 10px; }

/* badges — quiet bordered pills, reference style */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge { font-size: 12px; font-weight: 600; padding: 5px 12px;
         border-radius: 20px; background: var(--card);
         border: 1px solid var(--line); color: var(--body); }
.b-verify { background: var(--yes-bg); border-color: #d3e8dd; color: var(--yes); }
.b-open  { background: var(--blue-bg); border-color: #d4dff5; color: var(--blue); }
.b-indep { color: var(--body); }
.b-star  { color: #8a6420; border-color: #eaddba; background: #fdf9ee; }
.b-board { background: var(--yes-bg); border-color: #d3e8dd; color: var(--yes); }
.b-svc   { background: var(--blue-bg); border-color: #d4dff5; color: var(--blue); }
.b-rev   { background: #fdf9ee; border-color: #eaddba; color: #8a6420; }

/* facts grid */
.facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr));
         gap: 12px 22px; font-size: 14.5px; color: var(--ink); }
.facts b { display: block; font-size: 10.5px; text-transform: uppercase;
           letter-spacing: .1em; color: var(--sub); font-weight: 700;
           margin-bottom: 1px; }

/* Q&A grid */
.qa { border-top: 1px solid var(--line); padding: 14px 0; display: flex;
      gap: 14px; align-items: flex-start; }
.qa:last-child { padding-bottom: 4px; }
.state { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 4px 9px;
         border-radius: 6px; margin-top: 2px; white-space: nowrap;
         letter-spacing: .04em; }
.s-yes { background: var(--yes-bg); color: var(--yes); }
.s-open { background: var(--open-bg); color: var(--open); }
.s-soon { background: var(--soon-bg); color: var(--soon); }
.qa h3 { font-size: 15px; font-weight: 650; margin-bottom: 3px; }
.qa p { font-size: 14px; }
.qa .why { font-size: 12px; color: var(--sub); margin-top: 4px; }
.qa.dim h3, .qa.dim p { color: #93a0b8; }
.ask { font-size: 12.5px; color: var(--open); font-weight: 600; margin-top: 3px; }

/* activation strip — clean card, solid navy CTA (no gradient) */
.activate { background: var(--card); border: 1px solid var(--line);
            border-left: 4px solid var(--navy); border-radius: 16px;
            padding: 20px 24px; margin-bottom: 18px; display: flex;
            gap: 18px; align-items: center; flex-wrap: wrap; }
.activate .n { font-size: 30px; font-weight: 800; color: var(--navy);
               line-height: 1; }
.activate p { font-size: 14px; color: var(--body); flex: 1; min-width: 240px; }
.activate a { background: var(--navy); color: #fff; font-size: 13.5px;
              font-weight: 600; padding: 10px 18px; border-radius: 10px;
              text-decoration: none; white-space: nowrap; }

/* dentists */
.doc { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
       border-top: 1px solid var(--line); padding-top: 16px; margin-top: 14px; }
.doc:first-of-type { border-top: none; padding-top: 4px; margin-top: 6px; }
.doc .photo { width: 84px; height: 84px; border-radius: 50%; }
.doc h3 { font-size: 16.5px; color: var(--navy); }
.doc .creds { font-size: 13px; color: var(--sub); margin: 2px 0 7px; }
.doc p { font-size: 14px; max-width: 62ch; }
.lic { margin-top: 10px; background: var(--yes-bg); border-radius: 8px;
       padding: 9px 13px; font-size: 12.5px; color: var(--yes); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { background: var(--card); border: 1px solid var(--line);
        font-size: 13px; padding: 5px 12px; border-radius: 8px;
        color: var(--body); }

/* reviews */
.rev { border-top: 1px solid var(--line); padding: 13px 0; }
.rev .meta { font-size: 12.5px; color: var(--sub); margin-bottom: 3px; }
.rev .stars, .stars { color: var(--star); letter-spacing: 1px; }
.rev p { font-size: 13.5px; }

/* ranked pages */
.method { background: var(--card); border: 1px solid var(--line);
          border-radius: 16px; padding: 18px 22px; margin-bottom: 22px;
          font-size: 13.5px; }
.method b { display: block; font-size: 11px; text-transform: uppercase;
            letter-spacing: .1em; color: var(--sub); margin-bottom: 6px; }
.rankcard { background: var(--card); border: 1px solid var(--line);
            border-radius: 16px; padding: 24px; margin-bottom: 14px;
            display: flex; gap: 18px; box-shadow: 0 1px 2px rgba(30,58,110,.04); }
.rank { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
        background: var(--navy); color: #fff; font-weight: 800;
        font-size: 17px; display: flex; align-items: center;
        justify-content: center; }
.rankcard h2 { font-size: 18px; }
.rankcard h2 a { color: var(--navy); text-decoration: none; }
.meta { font-size: 13px; color: var(--sub); margin: 2px 0 8px; }
.why { font-size: 14px; color: var(--body); margin-bottom: 8px; }
.quote { border-left: 3px solid var(--line); padding: 4px 12px;
         font-size: 13.5px; color: var(--sub); font-style: italic;
         margin: 8px 0; }
.quote .who { display: block; font-style: normal; font-size: 12px;
              color: var(--sub); margin-top: 2px; }
.callout { background: var(--blue-bg); border: 1px solid #d4dff5;
           border-radius: 16px; padding: 18px 22px; margin: 22px 0;
           font-size: 14px; color: #2c3f6e; }
.callout b { font-size: 15px; color: var(--navy); }

footer { text-align: center; font-size: 12px; color: var(--sub);
         margin-top: 26px; line-height: 1.8; }