/* patient.css: the design system for Manya Dental's patient-facing paid landing pages
   (/aligners, /aligners-cost, /braces-vs-aligners, /dental-implants, /dental-implant-cost and
   their thank-you pages).

   Why a second stylesheet: styles.css belongs to the sedation-workshop pages, a deliberately
   austere, dark, ruled "protocol chart" lane written for dentists. Patient pages built on it
   read as cold and thin, and looked nothing like manyadental.in. This system is read from the
   client's own site instead: Inter, a light rose-tinted ground, soft radial blobs behind the
   hero, rounded cards with quiet shadows, maroon pill buttons, a white sticky header, a stats
   strip under the hero, a WhatsApp float. The paid pages now look like Manya's pages.

   Colours are Manya's (read from manyadental.in): ink #2a0f0f, maroon #900e0e, crimson
   #b5072d, rose #fb7185, and the rose tints #fff1f2 / #ffe4e6 the site uses as its ground. */

:root {
  --ink: #2a0f0f;
  --ink-2: #553333;
  --mute: #8b6464;
  --line: #f0dcdc;
  --maroon: #900e0e;
  --crimson: #b5072d;
  --rose: #fb7185;
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --paper: #fcf8f8;
  --white: #fffdfd;
  --star: #f5b400;
  --ok: #15803d;
  --wa: #25d366;
  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 10px 30px rgba(42, 15, 15, 0.08), 0 2px 6px rgba(42, 15, 15, 0.05);
  --shadow-lg: 0 24px 60px rgba(42, 15, 15, 0.14), 0 4px 12px rgba(42, 15, 15, 0.06);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); color: var(--ink-2); background: var(--paper); line-height: 1.65; font-size: 1.02rem; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0 0 1rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem; border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms, background-color 160ms; }
.btn-primary { background: var(--maroon); color: #fff; box-shadow: 0 8px 20px rgba(144, 14, 14, 0.22); }
.btn-primary:hover { background: var(--crimson); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.btn-ghost:hover { background: var(--rose-50); }
.btn-wa { background: var(--wa); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
.site { position: sticky; top: 0; z-index: 40; background: rgba(255, 253, 253, 0.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; }
.site .logo img { height: 44px; width: auto; }
.site nav { display: none; align-items: center; gap: 1.1rem; }
@media (min-width: 880px) { .site nav { display: flex; } }
.site nav a.tel { color: var(--maroon); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.site nav a.tel svg { width: 18px; height: 18px; flex: none; }
.site nav .btn { padding: 0.65rem 1.2rem; font-size: 0.92rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--rose-50) 100%); }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.hero::before { width: 560px; height: 560px; left: -180px; top: -120px; background: radial-gradient(closest-side, rgba(251,113,133,0.28), rgba(251,113,133,0)); }
.hero::after { width: 720px; height: 720px; right: -220px; bottom: -280px; background: radial-gradient(closest-side, rgba(251,113,133,0.22), rgba(251,113,133,0)); }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: 2.2rem; padding-top: clamp(2.2rem, 5vw, 4.5rem); padding-bottom: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--rose-100); color: var(--maroon); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.42rem 0.85rem; border-radius: 999px; margin-bottom: 1.1rem; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); }
.hero h1 { font-size: clamp(2.35rem, 4.6vw, 3.7rem); color: var(--crimson); letter-spacing: -0.03em; max-width: 14ch; }
.hero h1 span { color: var(--ink); }
.hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 52ch; margin: 1.1rem 0 1.5rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.hero .cta .tel { color: var(--ink-2); font-size: 0.95rem; }
.hero .cta .tel b { color: var(--maroon); }
/* provider marks: the two systems' own logos, in the pill's slot above the headline */
.hero .brands { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1rem; margin-bottom: 1.2rem; }
.hero .brands span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--maroon); }
.hero .brands img { height: 30px; width: auto; display: block; }
.hero .brands img.spark { height: 25px; }
.hero .brands i { width: 1px; height: 22px; background: #e2c4c4; }

/* the form card, styled like the site's rounded image card */
.formcard { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 1.5rem; border: 1px solid #fff; }
@media (min-width: 640px) { .formcard { padding: 1.9rem; } }
.formcard h2 { font-size: 1.45rem; margin-bottom: 0.35rem; }
.formcard .fsub { color: var(--mute); font-size: 0.93rem; margin-bottom: 0.9rem; }
.formcard .fscope { font-size: 0.8rem; color: var(--ink-2); background: var(--rose-50); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; margin-bottom: 1rem; line-height: 1.5; }
.field { margin-bottom: 0.85rem; }
.field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.35rem; }
.field input, .field select { width: 100%; height: 50px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 0.95rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23900e0e' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.field input:focus, .field select:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(181, 7, 45, 0.12); }
.consent { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: var(--ink-2); margin: 0.2rem 0 1rem; }
.consent input { margin-top: 0.25rem; accent-color: var(--maroon); }
.hp { position: absolute; left: -9999px; }
.formcard .btn-primary { width: 100%; height: 54px; font-size: 1.02rem; }
.formerr { display: none; color: var(--crimson); font-size: 0.85rem; margin-top: 0.6rem; }
.formerr.on { display: block; }
.fnote { font-size: 0.74rem; color: var(--mute); margin: 0.8rem 0 0; line-height: 1.5; }

/* ---------- stats strip ---------- */
.stats { position: relative; z-index: 2; margin-top: -1.2rem; }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (min-width: 720px) { .stats ul { grid-template-columns: repeat(4, 1fr); } }
.stats li { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.stats b { display: block; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--maroon); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: 0.82rem; color: var(--mute); margin-top: 0.25rem; }

/* ---------- sections ---------- */
.sect { padding: clamp(3.2rem, 7vw, 6rem) 0; }
.sect.tint { background: var(--rose-50); }
.sect.white { background: var(--white); }
.sect h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); max-width: 22ch; }
.sect h2 em { font-style: normal; color: var(--crimson); }
.sect .intro { font-size: 1.08rem; color: var(--ink-2); max-width: 62ch; margin: 1rem 0 0; }
.sect .intro + * { margin-top: 2rem; }
.eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.8rem; }

/* split: image card and copy */
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .split.flip > figure { order: 2; } }
.split figure { margin: 0; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.split img.tall { aspect-ratio: 4 / 5; }
.split figcaption { font-size: 0.8rem; color: var(--mute); margin-top: 0.6rem; }
.split h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.split .cta { margin-top: 1.4rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* two photographs, captioned */
.pair { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.pair figure { margin: 0; background: var(--white); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pair figcaption { padding: 1rem 1.2rem 1.2rem; font-size: 0.95rem; color: var(--ink); font-weight: 600; }
.pair figcaption span { display: block; font-weight: 400; color: var(--mute); font-size: 0.86rem; margin-top: 0.2rem; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1100px) { .steps.five { grid-template-columns: repeat(5, 1fr); } }
.steps li { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.4rem 1.3rem 1.5rem; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rose-100); color: var(--maroon); font-weight: 800; font-size: 0.9rem; margin-bottom: 0.9rem; }
.steps b { display: block; color: var(--ink); font-size: 1.08rem; margin-bottom: 0.35rem; }
.steps span { display: block; font-size: 0.93rem; color: var(--ink-2); line-height: 1.55; }
.steps .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.4rem; }

/* doctors */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .docs { grid-template-columns: repeat(3, 1fr); } }
.docs li { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.3rem; display: grid; grid-template-columns: 56px 1fr; gap: 0.9rem; align-items: start; }
.docs .mono { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--maroon), var(--crimson)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 0.02em; font-size: 1.05rem; }
.docs b { display: block; color: var(--ink); font-size: 1.05rem; }
.docs .q { display: block; font-size: 0.82rem; color: var(--maroon); font-weight: 600; margin-top: 0.15rem; }
.docs .s { display: block; font-size: 0.9rem; color: var(--ink-2); margin-top: 0.2rem; }
.docs .y { display: inline-block; margin-top: 0.55rem; background: var(--rose-50); color: var(--maroon); font-size: 0.74rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; }

/* comparison table */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; margin-top: 1.8rem; }
.cmp th, .cmp td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 0.95rem; line-height: 1.5; }
.cmp thead th { background: var(--rose-50); color: var(--ink); font-weight: 700; font-size: 0.92rem; }
.cmp thead th.us { background: #fff; color: var(--maroon); box-shadow: inset 0 4px 0 var(--maroon); padding-top: 1.25rem; }
.cmp thead th.us img { display: block; height: 22px; width: auto; margin-bottom: 0.45rem; }
.cmp thead th.us img.spark { height: 19px; }
.cmp thead th.us small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp tbody th { color: var(--mute); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; width: 12rem; }
.cmp td.us { background: #fff8f8; color: var(--ink); font-weight: 600; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .ok::before { content: '✓'; color: var(--ok); font-weight: 800; margin-right: 0.45rem; }
.cmp .no::before { content: '✕'; color: var(--crimson); font-weight: 800; margin-right: 0.45rem; }
.srcnote { font-size: 0.78rem; color: var(--mute); margin-top: 0.9rem; max-width: 76ch; line-height: 1.5; }
@media (max-width: 719px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .cmp tbody th { border: 0; padding: 0.2rem 1rem; width: auto; }
  .cmp td { border: 0; padding: 0.25rem 1rem; }
  .cmp td::before { content: attr(data-col) ': '; font-weight: 700; color: var(--ink); }
  /* the tick and cross cells keep their column label on the phone, glyph first */
  .cmp td.ok::before { content: '✓ ' attr(data-col) ': '; color: var(--ok); }
  .cmp td.no::before { content: '✕ ' attr(data-col) ': '; color: var(--crimson); }
}

/* reviews */
.reviews { display: grid; gap: 1rem; }
@media (min-width: 720px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.rv { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.rv .stars { color: var(--star); letter-spacing: 0.06em; font-size: 1rem; }
.rv p { margin: 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; }
.rv footer { margin-top: auto; display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--mute); }
.rv .av { width: 36px; height: 36px; border-radius: 50%; background: var(--rose-100); color: var(--maroon); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; flex: none; }
.rv footer b { color: var(--ink); display: block; }
.rv .g { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.55rem; }

/* clinics */
.clinics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .clinics { grid-template-columns: repeat(4, 1fr); } }
.clinics li { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1.15rem; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.6rem; align-items: start; min-width: 0; }
.clinics li > div { min-width: 0; }
.clinics li.on { outline: 2px solid var(--crimson); outline-offset: -2px; }
.clinics svg { width: 22px; height: 22px; color: var(--crimson); margin-top: 0.1rem; }
.clinics b { display: block; color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.clinics span { display: block; font-size: 0.8rem; color: var(--mute); margin-top: 0.2rem; }
.clinics .flag { display: inline-block; margin-top: 0.45rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon); background: var(--rose-100); padding: 0.2rem 0.5rem; border-radius: 999px; }

/* partnership */
.partner { display: grid; gap: 1.5rem; align-items: center; background: var(--white); border-radius: 20px; box-shadow: var(--shadow); padding: 1.6rem; }
@media (min-width: 880px) { .partner { grid-template-columns: 260px 1fr; gap: 2.5rem; padding: 2rem 2.4rem; } }
.partner img { width: 100%; max-width: 260px; height: auto; }
.partner h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.partner p { margin: 0; color: var(--ink-2); }
.partner ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.partner li { background: var(--rose-50); color: var(--maroon); font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.75rem; border-radius: 999px; }

/* offers */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .offers { grid-template-columns: repeat(4, 1fr); } }
.offers li { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.3rem; }
.offers svg { width: 30px; height: 30px; color: var(--crimson); margin-bottom: 0.7rem; }
.offers b { display: block; color: var(--ink); font-size: 1.02rem; }
.offers span { display: block; font-size: 0.88rem; color: var(--ink-2); margin-top: 0.3rem; line-height: 1.5; }

/* before / after */
.ba { display: grid; gap: 1rem; }
@media (min-width: 720px) { .ba { grid-template-columns: 1fr 1fr 1.3fr; align-items: start; } }
.ba figure { margin: 0; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.ba img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ba figure.wide img { aspect-ratio: 16 / 9; }
.ba figcaption { padding: 0.7rem 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon); }
.ba figure.wide figcaption { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.ba-note { grid-column: 1 / -1; font-size: 0.85rem; color: var(--mute); margin: 0.4rem 0 0; }

/* FAQ */
.faq { display: grid; gap: 0.7rem; margin-top: 1.8rem; max-width: 820px; }
.faq details { background: var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 0 1.2rem; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.2rem; top: 0.85rem; font-size: 1.4rem; color: var(--crimson); line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 1.1rem; margin: 0; color: var(--ink-2); font-size: 0.96rem; }

/* CTA band */
.band { background: linear-gradient(120deg, var(--maroon), var(--crimson)); color: #fff; border-radius: 24px; padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1.2rem; align-items: center; box-shadow: var(--shadow-lg); }
@media (min-width: 880px) { .band { grid-template-columns: 1fr auto; } }
.band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 24ch; }
.band p { color: rgba(255,255,255,0.86); margin: 0.5rem 0 0; max-width: 52ch; }
.band .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.band .btn-primary { background: #fff; color: var(--maroon); box-shadow: none; }
.band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.7); }
.band .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* footer */
.foot { background: var(--white); border-top: 1px solid var(--line); padding: 2.5rem 0 6rem; font-size: 0.9rem; color: var(--ink-2); }
.foot .wrap { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .foot .wrap { grid-template-columns: 1.2fr 1fr 1fr; padding-bottom: 0; } .foot { padding-bottom: 2.5rem; } }
.foot img { height: 36px; width: auto; margin-bottom: 0.8rem; }
.foot b { display: block; color: var(--ink); margin-bottom: 0.4rem; }
.foot a { color: var(--ink-2); }
.foot .legal { grid-column: 1 / -1; font-size: 0.76rem; color: var(--mute); border-top: 1px solid var(--line); padding-top: 1rem; }

/* WhatsApp float and mobile sticky */
.wafloat { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); }
.wafloat svg { width: 30px; height: 30px; }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: none; gap: 0.5rem; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255,253,253,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.sticky.on { transform: none; }
.sticky .btn { flex: 1; padding: 0.75rem 0.6rem; font-size: 0.9rem; }
.sticky .btn-primary { flex: 1.6; }
@media (max-width: 879px) { .sticky { display: flex; } .wafloat { bottom: 5.2rem; } body.has-sticky { padding-bottom: 4.6rem; } }

/* thank-you */
.thanks .hero .wrap { grid-template-columns: 1fr; }
.thanks .hero h1 { max-width: 18ch; }

/* Phones: a tighter hero so the form's first field lands inside the 844px fold. The brand line
   and the "or call" line are already in the sticky bar and header, so they go on small screens. */
@media (max-width: 959px) {
  .hero .wrap { padding-top: 1.4rem; gap: 1.3rem; }
  .hero h1 { font-size: clamp(2rem, 8.2vw, 2.5rem); }
  .hero .lead { font-size: 1rem; margin: 0.8rem 0 1rem; }
  .hero .cta .tel { display: none; }
  .hero .brands { margin-bottom: 0.8rem; gap: 0.6rem 0.8rem; }
  .hero .brands img { height: 24px; }
  .hero .brands img.spark { height: 20px; }
  .pill { margin-bottom: 0.7rem; }
  .formcard { padding: 1.25rem; }
  .formcard h2 { font-size: 1.3rem; }
  .formcard .fsub { font-size: 0.88rem; margin-bottom: 0.7rem; }
  .formcard .fscope { font-size: 0.76rem; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem; }
}

/* ---------- the two systems: product cards under their own marks ---------- */
.systems { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .systems { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.systems article { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.systems figure { margin: 0; }
.systems figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.systems article > div { padding: 1.3rem 1.4rem 1.5rem; }
.systems .lg { height: 28px; width: auto; display: block; margin-bottom: 0.8rem; }
.systems .lg.spark { height: 24px; }
.systems p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- implant systems: three named systems as text cards ---------- */
@media (min-width: 900px) { .systems.three { grid-template-columns: repeat(3, 1fr); } }
.systems.three { margin-top: 2rem; }
.systems.three article > div { padding: 1.5rem 1.5rem 1.6rem; }
.systems .sysname { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.45rem; }
.systems h3 { font-size: 1.15rem; color: var(--ink); margin: 0 0 0.5rem; line-height: 1.25; }
/* a supplied infographic carries its own text, so it is shown whole, never cropped */
.split img.info { height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }


/* Trust pages: clinics, about, contact, privacy, home. Added 21 Sep 2026 to fix the
   landing page experience component, which Google scored BELOW_AVERAGE on every keyword
   because the domain carried no business identity, no addresses and no navigable pages. */
.sitefoot{background:#0f1720;color:#c9d4de;padding:3.5rem 0 2.5rem;margin-top:4rem}
.sitefoot .ft-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sitefoot b{color:#fff;display:block;margin-bottom:.7rem;font-size:.95rem;letter-spacing:.01em}
.sitefoot p{font-size:.88rem;line-height:1.65;color:#9fb0bf;margin:0}
.sitefoot ul{list-style:none;padding:0;margin:0}
.sitefoot li{font-size:.88rem;line-height:2;color:#9fb0bf}
.sitefoot a{color:#c9d4de;text-decoration:none}
.sitefoot a:hover{color:#fff;text-decoration:underline}
.ft-legal{margin-top:2.5rem!important;padding-top:1.5rem;border-top:1px solid #23303c;font-size:.78rem!important;color:#7d8d9b!important}
.branch{border:1px solid var(--line,#e3e8ee);border-radius:14px;padding:1.5rem;background:#fff;margin-bottom:1rem}
.branch h3{margin:0 0 .35rem;font-size:1.12rem}
.branch .area{display:block;font-size:.85rem;color:#6b7a88;margin-bottom:.8rem}
.branch address{font-style:normal;font-size:.95rem;line-height:1.6;color:#33414e;margin:0 0 .9rem}
.branch .acts{display:flex;gap:.6rem;flex-wrap:wrap}
.branch .acts a{font-size:.87rem;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--line,#e3e8ee);text-decoration:none;color:var(--ink,#16202a)}
.branch .acts a.p{background:var(--crimson,#c8102e);border-color:var(--crimson,#c8102e);color:#fff}
@media(min-width:800px){.branches{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.branch{margin-bottom:0}}
.prose p{font-size:1.02rem;line-height:1.75;margin:0 0 1.1rem;color:#33414e}
.prose h2{margin:2.2rem 0 .9rem}
.prose h3{margin:1.6rem 0 .6rem;font-size:1.05rem}
.prose ul{margin:0 0 1.2rem 1.2rem}.prose li{line-height:1.8;color:#33414e}