@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================
   Design tokens (dental palette, 8px spacing, 16px radius)
   ========================================================= */
:root {
  --dp-navy: #1B2A41;
  --dp-teal: #0FA3B1;
  --dp-teal-strong: #0B7F8A;   /* text/buttons on white (WCAG AA) */
  --dp-teal-hover: #096D76;
  --dp-coral: #F18F01;
  --dp-coral-hover: #D97C00;
  --dp-white: #FFFFFF;
  --dp-mist: #F4FAFB;
  --dp-mint: #E0F5F7;
  --dp-text: #1B2A41;
  --dp-muted: #4A5A70;         /* 7:1 on white */
  --dp-border: rgba(27, 42, 65, 0.08);
  --dp-radius: 16px;
  --dp-shadow: 0 8px 24px rgba(27, 42, 65, 0.08);
  --dp-shadow-lg: 0 16px 40px rgba(27, 42, 65, 0.12);
  --dp-space-1: 8px;
  --dp-space-2: 16px;
  --dp-space-3: 24px;
  --dp-space-4: 32px;
  --dp-space-6: 48px;
  --dp-space-8: 64px;
  --dp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =========================================================
   Base
   ========================================================= */
body {
  font-family: var(--dp-font);
  color: var(--dp-text);
  background: var(--dp-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  color: var(--dp-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.2; }

a { color: var(--dp-teal-strong); }
a:hover { color: var(--dp-teal-hover); }

:focus-visible {
  outline: 3px solid var(--dp-teal-strong);
  outline-offset: 2px;
}

.dp-section {
  padding: var(--dp-space-8) 0;
}

.dp-section-alt {
  background: var(--dp-mist);
}

.dp-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dp-teal-strong);
  margin-bottom: var(--dp-space-1);
}

.dp-lead {
  color: var(--dp-muted);
  font-size: 1.125rem;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-dp-cta {
  background-color: var(--dp-coral);
  border: 0;
  color: var(--dp-navy);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  -webkit-box-shadow: 0 4px 12px rgba(241, 143, 1, 0.25);
          box-shadow: 0 4px 12px rgba(241, 143, 1, 0.25);
}
.btn-dp-cta:hover,
.btn-dp-cta:focus {
  background-color: var(--dp-coral-hover);
  color: var(--dp-navy);
}

.btn-dp-primary {
  background-color: var(--dp-teal-strong);
  border: 0;
  color: var(--dp-white);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
}
.btn-dp-primary:hover,
.btn-dp-primary:focus {
  background-color: var(--dp-teal-hover);
  color: var(--dp-white);
}

.btn-dp-outline {
  background-color: transparent;
  border: 2px solid var(--dp-teal-strong);
  color: var(--dp-teal-strong);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
}
.btn-dp-outline:hover,
.btn-dp-outline:focus {
  background-color: var(--dp-teal-strong);
  color: var(--dp-white);
}

/* =========================================================
   Navigation
   ========================================================= */
.dp-navbar {
  background: var(--dp-white);
  border-bottom: 1px solid var(--dp-border);
  -webkit-box-shadow: 0 2px 12px rgba(27, 42, 65, 0.05);
          box-shadow: 0 2px 12px rgba(27, 42, 65, 0.05);
}

.dp-brand {
  color: var(--dp-navy);
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--dp-space-1);
}
.dp-brand:hover { color: var(--dp-navy); }
.dp-brand i { color: var(--dp-teal-strong); }

.dp-navbar .nav-link {
  color: var(--dp-navy);
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
}
.dp-navbar .nav-link:hover,
.dp-navbar .nav-link.active {
  color: var(--dp-teal-strong);
  background: var(--dp-mint);
}

/* =========================================================
   Hero
   ========================================================= */
.dp-hero {
  background: linear-gradient(135deg, var(--dp-mist) 0%, var(--dp-mint) 100%);
  padding: var(--dp-space-8) 0;
}

.dp-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--dp-space-1);
  background: var(--dp-white);
  color: var(--dp-navy);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  -webkit-box-shadow: var(--dp-shadow);
          box-shadow: var(--dp-shadow);
}
.dp-pill i { color: var(--dp-coral); }

.dp-trust-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--dp-space-1);
  font-weight: 500;
  color: var(--dp-navy);
}
.dp-trust-item i { color: var(--dp-teal-strong); }

.dp-hero-media {
  border-radius: var(--dp-radius);
  -webkit-box-shadow: var(--dp-shadow-lg);
          box-shadow: var(--dp-shadow-lg);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================================================
   Cards
   ========================================================= */
.dp-card {
  background: var(--dp-white);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  -webkit-box-shadow: var(--dp-shadow);
          box-shadow: var(--dp-shadow);
  padding: var(--dp-space-3);
  height: 100%;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.dp-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: var(--dp-shadow-lg);
          box-shadow: var(--dp-shadow-lg);
}

.dp-card h3 {
  font-size: 1.25rem;
  margin-top: var(--dp-space-2);
}

.dp-card p {
  color: var(--dp-muted);
}

.dp-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--dp-radius);
  background: var(--dp-mint);
  color: var(--dp-teal-strong);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.5rem;
}

.dp-price {
  font-weight: 700;
  color: var(--dp-navy);
}
.dp-price small {
  color: var(--dp-muted);
  font-weight: 500;
}

.dp-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--dp-radius);
  background: var(--dp-mint);
}

.dp-quote {
  font-size: 1rem;
  color: var(--dp-navy);
  font-style: normal;
  margin-bottom: var(--dp-space-2);
}

.dp-stars {
  color: var(--dp-coral);
  letter-spacing: 2px;
}

/* =========================================================
   Insurance / payment panel
   ========================================================= */
.dp-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dp-check-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--dp-space-1);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0.5rem 0;
  color: var(--dp-navy);
}
.dp-check-list i {
  color: var(--dp-teal-strong);
  margin-top: 0.3rem;
}

/* =========================================================
   FAQ accordion
   ========================================================= */
.dp-accordion .accordion-item {
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius) !important;
  margin-bottom: var(--dp-space-2);
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(27, 42, 65, 0.04);
          box-shadow: 0 2px 8px rgba(27, 42, 65, 0.04);
}

.dp-accordion .accordion-button {
  font-weight: 600;
  color: var(--dp-navy);
  background: var(--dp-white);
  padding: var(--dp-space-2) var(--dp-space-3);
}

.dp-accordion .accordion-button:not(.collapsed) {
  color: var(--dp-navy);
  background: var(--dp-mint);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.dp-accordion .accordion-button:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(11, 127, 138, 0.25);
          box-shadow: 0 0 0 3px rgba(11, 127, 138, 0.25);
}

.dp-accordion .accordion-body {
  color: var(--dp-muted);
  padding: var(--dp-space-2) var(--dp-space-3) var(--dp-space-3);
}

/* =========================================================
   Closing call-to-action band
   ========================================================= */
.dp-cta-band {
  background: var(--dp-navy);
  color: var(--dp-white);
  border-radius: var(--dp-radius);
  padding: var(--dp-space-6) var(--dp-space-4);
  -webkit-box-shadow: var(--dp-shadow-lg);
          box-shadow: var(--dp-shadow-lg);
}
.dp-cta-band h2 { color: var(--dp-white); }
.dp-cta-band p { color: #D6E4EA; }

/* =========================================================
   Sticky mobile action bar
   ========================================================= */
.dp-mobile-bar {
  background: var(--dp-white);
  border-top: 1px solid var(--dp-border);
  -webkit-box-shadow: 0 -6px 20px rgba(27, 42, 65, 0.1);
          box-shadow: 0 -6px 20px rgba(27, 42, 65, 0.1);
  padding: var(--dp-space-1) var(--dp-space-2);
  z-index: 1030;
}

body.dp-has-mobile-bar {
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  body.dp-has-mobile-bar {
    padding-bottom: 0;
  }
}

/* =========================================================
   Footer
   ========================================================= */
.dp-footer {
  background: var(--dp-navy);
  color: #D6E4EA;
  padding: var(--dp-space-8) 0 var(--dp-space-4);
}

.dp-footer h2,
.dp-footer h3,
.dp-footer h4 {
  color: var(--dp-white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--dp-space-2);
}

.dp-footer a {
  color: #D6E4EA;
  text-decoration: none;
}
.dp-footer a:hover {
  color: var(--dp-white);
  text-decoration: underline;
}

.dp-footer .dp-brand {
  color: var(--dp-white);
}
.dp-footer .dp-brand i {
  color: var(--dp-teal);
}

.dp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--dp-space-6);
  padding-top: var(--dp-space-3);
  font-size: 0.875rem;
}

/* =========================================================
   Motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .dp-card,
  .dp-card:hover {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
            transform: none;
  }
}