/* ============================================================================
   AI PATIENT CONVERSION SYSTEM: landing page
   ----------------------------------------------------------------------------
   Self-contained: this page does not load the main site's style.css, so the
   teal clinic palette never fights the dark blue brand styling used elsewhere.

   1.  Tokens
   2.  Base & layout
   3.  Type
   4.  Buttons, pills, cards
   5.  Nav
   6.  Hero + chat card
   7.  Problem
   8.  Before / after
   9.  Interactive demo
   10. What it does
   11. What your team sees
   12. Where it plugs in
   13. ROI
   14. AI / team split
   15. Industries
   16. Demo call + pilot
   17. FAQ
   18. Pricing
   19. Final CTA + footer
   20. Demo modal
   21. Mobile sticky bar + WhatsApp button
   22. Responsive
   23. Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --bg:          #FAFAF8;
  --surface:     #FFFFFF;
  --surface-alt: #F4F3F0;
  --ink:         #16181D;
  --body:        #3F444D;
  --muted:       #6B7280;
  --border:      #E7E5E1;
  --accent:      #0E7C66;
  --accent-ink:  #0A5A4A;
  --accent-soft: #E8F2EF;
  --gold:        #C9A227;

  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-sm:   12px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.06);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.05), 0 24px 64px rgba(16,24,40,.10);

  --container: 1200px;
  --section-y: clamp(72px, 9vw, 140px);
  --gut: clamp(20px, 5vw, 48px);
  --nav-h: 72px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------ 2. BASE/LAYOUT */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
dl, dd { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow-md);
  transform: translateY(-180%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut); }

section { position: relative; scroll-margin-top: calc(var(--nav-h) + 12px); }
.sec { padding-block: var(--section-y); }
.sec--alt { background: var(--surface-alt); }

/* section reveal, driven by patient-conversion.js */
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 3. TYPE */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

h1, .h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
h2, .h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.h2--display { font-family: var(--display); font-weight: 400; }
h3, .h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }

.lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--body); }
.note-line { font-size: 12px; line-height: 1.5; color: var(--muted); }
.demo-label { font-size: 11px; letter-spacing: .02em; color: var(--muted); }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head .lead { margin-top: 16px; }

/* ------------------------------------------------- 4. BUTTONS, PILLS, CARDS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); }
.btn--secondary { border-color: var(--border); color: var(--ink); }
.btn--secondary:hover { background: var(--surface-alt); }
.btn--block { width: 100%; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn[disabled] { opacity: .7; cursor: default; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; color: var(--body);
}

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500;
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* -------------------------------------------------------------------- 5. NAV */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              backdrop-filter .2s var(--ease), box-shadow .2s var(--ease);
}
.nav[data-state="scrolled"] {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.nav__inner {
  height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; gap: 24px;
}
.nav__brand { display: flex; flex-direction: column; margin-right: auto; line-height: 1.15; }
.nav__brand b { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.nav__brand span { font-size: 11.5px; color: var(--muted); }
.nav__brand span a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.nav__brand span a:hover { color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-size: 15px; color: var(--body); transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--ink); }

.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.nav__bars { display: block; width: 18px; margin-inline: auto; }
.nav__bars i { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav__bars i + i { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  padding: calc(var(--nav-h) + 24px) var(--gut) 40px;
  overflow-y: auto;
  opacity: 0; transition: opacity .2s var(--ease);
}
.sheet[hidden] { display: none; }
.sheet.is-open { opacity: 1; }
.sheet__inner { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin-inline: auto; }
.sheet a:not(.btn) {
  padding: 18px 2px; border-bottom: 1px solid var(--border);
  font-size: 22px; font-weight: 500; color: var(--ink);
}
.sheet .btn { margin-top: 24px; }

/* ------------------------------------------------------- 6. HERO + CHAT CARD */
.hero { padding-block: clamp(48px, 6vw, 96px) var(--section-y); }
.hero__grid {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 18px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .hl { color: var(--accent); }
.hero__sub { max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__channels { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* chat card, shared by the hero and the interactive demo */
.chat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.chat__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.chat__who { margin-right: auto; font-size: 15px; font-weight: 600; color: var(--ink); }
.chat__head .status { color: var(--accent); }

.chat__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; transition: opacity .15s var(--ease); }
.msg { display: flex; }
.msg--ai { justify-content: flex-end; }
.msg p {
  max-width: 82%; min-width: 0; padding: 12px 15px;
  border-radius: 16px; font-size: 15px; line-height: 1.55;
}
.msg--patient p { background: var(--surface-alt); color: var(--body); border-bottom-left-radius: 6px; }
.msg--ai p { background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 6px; }

/* staggered entrance */
.msg { opacity: 0; transform: translateY(8px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.msg.is-in { opacity: 1; transform: none; }

.slots {
  margin: 4px 20px 20px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt);
  opacity: 0; transform: translateY(8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.slots.is-in { opacity: 1; transform: none; }
.slots__title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.slots__list { display: grid; gap: 8px; margin-bottom: 14px; }
.slots__list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); font-size: 14px; color: var(--ink);
}
.slots__list li span:last-child { color: var(--body); }
.slots__done { margin-top: 10px; font-size: 13px; color: var(--accent); }

.chat__foot { padding: 0 20px 16px; }

.metrics-row {
  display: flex; flex-wrap: wrap; margin-top: 28px;
  border-top: 1px solid var(--border);
}
.metrics-row li { flex: 1 1 200px; min-width: 0; padding: 20px 20px 0 0; }
.metrics-row li + li { border-left: 1px solid var(--border); padding-left: 20px; }
.metrics-row b { display: block; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.metrics-row span { font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------- 7. PROBLEM */
.problem__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.problem__card { padding: clamp(24px, 2.6vw, 32px); }
.problem__card svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 18px; }
.problem__card h3 { margin-bottom: 10px; }
.problem__card p { font-size: 15.5px; }
.problem__close {
  max-width: 30ch; margin: clamp(40px, 4.5vw, 60px) auto 0; text-align: center;
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; color: var(--ink); font-weight: 500;
  letter-spacing: -.015em;
}

/* ---------------------------------------------------------- 8. BEFORE/AFTER */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.tl {
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius-card); border: 1px solid var(--border);
}
.tl--before { background: var(--surface-alt); }
.tl--after { background: var(--surface); border-left: 3px solid var(--accent); }
.tl__label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px;
}
.tl--after .tl__label { color: var(--accent); }
.tl__list { position: relative; display: grid; gap: 22px; }
.tl__list::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px;
  background: var(--border);
}
.tl__row { position: relative; display: grid; gap: 4px; padding-left: 34px; }
.tl__row::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
}
.tl--after .tl__row::before {
  background: var(--accent); border-color: var(--accent);
}
.tl--after .tl__row::after {
  content: ""; position: absolute; left: 5.6px; top: 9.4px;
  width: 5px; height: 2.6px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}
.tl__time { font-size: 12.5px; color: var(--muted); }
.tl__text { font-size: 15.5px; color: var(--ink); }
.tl__row--lost .tl__text { color: var(--muted); font-style: italic; }
.split__note { margin-top: 28px; text-align: center; }

/* ------------------------------------------------------- 9. INTERACTIVE DEMO */
.tabs {
  display: flex; gap: 8px; margin-bottom: 24px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; height: 42px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--body);
  font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { border-color: var(--accent); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.demo__card { max-width: 720px; margin-inline: auto; }
.demo__card .chat__body { min-height: 320px; }
/* shared by the demo tabs and the hero's own auto-cycling conversations */
.chat.is-swapping .chat__body, .chat.is-swapping .slots { opacity: 0; }

/* --------------------------------------------------------- 10. WHAT IT DOES */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.step { position: relative; }
.step__n {
  display: block; font-size: 28px; font-weight: 400; color: var(--accent);
  letter-spacing: -.02em; margin-bottom: 14px;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 15.5px; }
.step__note { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------- 11. WHAT YOUR TEAM SEES */
.team__grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.panel { position: relative; padding: clamp(24px, 2.6vw, 32px); }
.panel__tag { position: absolute; top: 18px; right: 20px; }
.panel h3 { margin-bottom: 22px; }

.lead-list { display: grid; gap: 14px; }
.lead-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lead-list dt { font-size: 14px; color: var(--muted); }
.lead-list dd { font-size: 15px; color: var(--ink); font-weight: 500; text-align: right; }
.lead-next {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.lead-next span { display: block; font-size: 14px; color: var(--muted); }
.lead-next b { font-size: 15.5px; color: var(--ink); font-weight: 500; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.tile { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.tile b { display: block; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.tile span { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: block; margin-top: 4px; }

.chart { margin-bottom: 26px; }
.chart svg { width: 100%; height: auto; }
.chart__days { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--muted); }

.conv-list { display: grid; gap: 10px; }
.conv-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14.5px; color: var(--ink);
}
.tag {
  flex: none; padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
}
.tag--positive { background: var(--accent-soft); color: var(--accent); }
.tag--muted { background: var(--surface-alt); color: var(--muted); }
.team__close {
  margin-top: clamp(36px, 4vw, 52px); text-align: center;
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; color: var(--ink); letter-spacing: -.015em;
}

/* ------------------------------------------------------- 12. WHERE IT PLUGS IN */
.plug__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.plug { padding: clamp(20px, 2.2vw, 26px); }
.plug h3 { margin: 22px 0 8px; }
.plug p { font-size: 15.5px; }

.mock { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border); }
.mock__msg {
  max-width: 86%; padding: 8px 11px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45;
}
.mock__msg--patient { background: var(--surface); color: var(--body); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.mock__msg--ai { background: var(--accent-soft); color: var(--ink); margin-left: auto; border-bottom-right-radius: 4px; }

.mock--browser .mock__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.mock__url {
  margin-left: 8px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-alt); font-size: 11px; color: var(--muted);
}
.mock--browser .mock__screen { display: grid; gap: 8px; padding: 18px 14px; min-height: 150px; }

.mock--phone, .mock--call { display: grid; place-items: center; padding: 18px 0 0; background: var(--surface-alt); }
.mock__phone {
  position: relative; width: 168px; padding: 18px 12px 14px;
  border-radius: 22px 22px 0 0; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
}
.mock__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 5px; border-radius: var(--radius-pill); background: var(--border);
}
.mock__thread { display: grid; gap: 7px; margin-top: 8px; }
.mock__call { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 18px 4px 10px; }
.mock__call-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.mock__call-num { font-size: 11.5px; color: var(--muted); }
.mock__call-status {
  margin-top: 6px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 500;
}

.integrations { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(36px, 4vw, 52px); }
.integrations svg { width: 16px; height: 16px; color: var(--accent); }
.plug__line {
  margin-top: 28px; text-align: center;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; color: var(--ink); letter-spacing: -.015em;
}

/* -------------------------------------------------------------------- 13. ROI */
.roi__statement {
  margin-top: 18px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25;
  font-weight: 500; color: var(--ink); letter-spacing: -.02em;
}
.roi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 3vw, 44px);
}
.roi__inputs { display: grid; gap: 22px; align-content: start; }
.roi__field { display: grid; gap: 9px; }
.roi__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.roi__inputs input {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.roi__inputs input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.toggle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); width: max-content; }
.toggle__btn {
  min-width: 64px; height: 38px; padding: 0 16px;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  font-size: 14px; font-weight: 500; color: var(--body); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.toggle__btn.is-on { background: var(--accent); color: #fff; }

.roi__result {
  display: grid; align-content: center; gap: 12px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--accent-soft); border-radius: var(--radius-card);
}
.roi__result-label { font-size: 14px; color: var(--accent-ink); }
.roi__number {
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.03em;
  font-weight: 600; color: var(--accent);
}
.roi__sub { font-size: 16px; color: var(--ink); }

/* ------------------------------------------------------------- 14. AI / TEAM */
.check-list { display: grid; gap: 11px; }
.check-list li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--body); }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: .5em;
  width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.check-list--ink li::before { border-color: var(--ink); }
.statement {
  margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.6vw, 32px);
  background: var(--accent-soft); border-radius: var(--radius-card); text-align: center;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; color: var(--ink); letter-spacing: -.01em;
}

/* ------------------------------------------------------------ 15. INDUSTRIES
   A fixed 3-column grid rather than a centred flex-wrap: six items in a wrap
   left a lone sixth pill stranded on its own row. Three-and-three reads as a
   deliberate block instead of a list that ran out. */
.industries {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.industries .industry {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 16px 20px; font-size: 15px; color: var(--ink); font-weight: 500;
}
.industries svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.industries__credit {
  margin-top: clamp(24px, 3vw, 34px); text-align: center;
  font-size: 13.5px; color: var(--muted);
}
.industries__credit a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.industries__credit sup { font-size: .7em; vertical-align: super; }

/* -------------------------------------------------------- 16. DEMO CALL/PILOT */
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilot {
  margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--accent); border-radius: var(--radius-card);
  background: var(--accent-soft);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  font-size: clamp(16px, 1.4vw, 18px); color: var(--ink);
}
.pilot b { font-weight: 600; }
.pilot span { color: var(--body); }

/* -------------------------------------------------------------------- 17. FAQ */
.faq { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__q {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 22px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 500; color: var(--ink); letter-spacing: -.01em;
}
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; margin-left: auto; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.8px;
  background: var(--accent); border-radius: 2px; transform: translateY(-50%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 40px 24px 2px; font-size: 16px; color: var(--body); }

/* ---------------------------------------------------------------- 18. PRICING */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }
.tier { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.8vw, 36px); }
.tier--featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.tier__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tier__price { margin: 14px 0 6px; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.tier__for { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }
.tier .check-list { margin-bottom: 28px; }
.tier .btn { margin-top: auto; }

/* ----------------------------------------------------- 19. FINAL CTA + FOOTER */
.final { background: var(--ink); color: #fff; padding-block: clamp(80px, 10vw, 150px); text-align: center; }
.final h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.final__body { max-width: 54ch; margin: 22px auto 0; color: rgba(255,255,255,.8); font-size: clamp(16px, 1.3vw, 18px); }
.final__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.final__ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.final__ghost:hover { background: rgba(255,255,255,.08); }
.final__note { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.55); }

.foot { background: var(--ink); border-top: 1px solid rgba(255,255,255,.12); padding-block: 40px; color: rgba(255,255,255,.65); }
.foot__inner { display: grid; gap: 18px; }
.foot b { color: #fff; font-size: 16px; font-weight: 600; }
.foot p { font-size: 14px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot__links a { font-size: 14px; transition: color .2s var(--ease); }
.foot__links a:hover { color: #fff; }
.foot__mail { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.foot__copy { font-size: 13px; color: rgba(255,255,255,.45); }

/* ------------------------------------------------------------ 20. DEMO MODAL */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(16,24,29,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s linear;
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  padding: clamp(26px, 3vw, 38px);
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__x {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
  color: var(--body); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.modal__x:hover { background: var(--surface-alt); }
.modal__x svg { width: 16px; height: 16px; }
.modal__sub { margin-top: 10px; margin-bottom: 24px; font-size: 15px; color: var(--body); }
.modal__small { margin-top: 14px; text-align: center; }
.modal__success { text-align: center; padding: 12px 0; }
.modal__success .btn { margin-top: 8px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field input {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: #C0392B; }
.field__err { font-size: 13px; color: #C0392B; }
.field__err:empty { display: none; }
.form__error {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: #FDECEA; color: #922B21; font-size: 14px;
}

/* ------------------------------------------- 21. STICKY CTA + WHATSAPP BUTTON */
.sticky-cta {
  position: fixed; z-index: 150; left: 0; right: 0;
  bottom: 0; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform .25s var(--ease);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-in { transform: none; }

.wa {
  position: fixed; z-index: 160;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.6);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s, bottom .25s var(--ease);
}
.wa.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wa__icon {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(145deg, #34E27A, #1EBE5A); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.8), 0 2px 6px rgba(0,0,0,.25);
  transition: transform .35s var(--ease);
}
.wa__icon svg { width: 30px; height: 30px; }
.wa:hover .wa__icon { transform: scale(1.08); }
.wa__halo {
  position: absolute; inset: -12px; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,211,102,.55) 30%, rgba(37,211,102,0) 70%);
  opacity: .4; animation: wa-glow 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes wa-glow { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }

/* lifted above the mobile bar while it is showing */
body.has-sticky-cta .wa { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* The button's own z-index (160) is meant to keep it above page content, but
   that also put it above the full-screen mobile nav menu (95): it sat there
   undimmed, on top of an otherwise empty stretch of the menu. The sticky CTA
   bar has a JS-driven equivalent (it already hides itself the same way it
   already does for the booking modal); this is the button's own, since
   nothing else drives its visibility once its entrance has played. */
body.nav-open .wa, body.nav-open .wa.is-in {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease), visibility 0s linear .15s;
}

/* ------------------------------------------------------------ 22. RESPONSIVE */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plug__grid { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .tier--featured { order: -1; }
  .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .roi { grid-template-columns: minmax(0, 1fr); }
  .steps--three { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  /* was 32px: that gap applied once, between the two columns. Once
     .hero__copy unwraps below, this same "gap" would land between every
     formerly-internal element too, so it moves to each element's own margin
     instead (section 47, at the end of the file, where it can win the
     cascade against the unconditional rules that set those margins for
     desktop). */
  .hero__grid { gap: 0; }

  /* On a phone this used to stack eight separate text blocks before the chat
     demo even appeared, roughly a screen and a half of reading before any
     proof, and on smaller phones the "Book a Demo" button itself sat below
     the fold. `display: contents` unwraps the copy column so its children
     become directly orderable against the demo card: the CTA now leads
     straight into the demo, and the stat chips (added to balance desktop's
     two columns, not needed here) move after it instead of before it. The
     channels line is dropped outright on mobile: "24/7" already appears in
     the headline, and WhatsApp/website both show up in the demo one scroll
     away, so it was saying the same thing a third time. */
  .hero__copy { display: contents; }
  .hero__panel { order: 7; }
  .metrics-row { order: 8; }
  .hero__channels { display: none; }

  .problem__grid { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-row li, .metrics-row li + li { border-left: 0; padding-left: 0; }
  .industries { grid-template-columns: minmax(0, 1fr); }
  .industries .industry { justify-content: flex-start; }
  .final__cta .btn { width: 100%; }
}

/* ---------------------------------------------------- 23. MOTION AND PRINT */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms; animation-iteration-count: 1;
    transition-duration: .001ms; scroll-behavior: auto;
  }
  [data-reveal], .msg, .slots { opacity: 1; transform: none; }
  .wa__halo { animation: wa-glow 2.4s ease-in-out infinite; }
}

@media print {
  .nav, .sheet, .sticky-cta, .wa, .modal { display: none; }
  .final, .foot { background: #fff; color: #000; }
  .final h2, .foot b { color: #000; }
}

/* ------------------------------------------------------------- 24. POLISH */
/* the brand is a block, not a link, so the "by" credit can link separately */
.nav__brand b { display: block; }

/* tabs wrap on desktop so no treatment is cut off, and scroll on mobile */
.tabs { flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) {
  .tabs { flex-wrap: nowrap; justify-content: flex-start; }
}

/* keep the three channel mockups the same height and readable */
.plug { display: flex; flex-direction: column; }
.mock { min-height: 230px; }
.mock--phone, .mock--call { align-content: end; }
.mock__phone { width: 190px; }
.mock__thread .mock__msg { max-width: 92%; }
.mock--browser .mock__screen { min-height: 186px; }

/* --------------------------------------------------------- 25. TAP TARGETS
   Every control a finger has to hit is at least 44px tall. */
.btn--sm { height: 44px; }
.tab { height: 44px; }
.toggle__btn { height: 44px; }
.modal__x { width: 44px; height: 44px; }
.foot__links a { display: inline-block; padding: 11px 0; }
.foot__mail { display: inline-block; padding: 11px 0; }
.nav__brand a { display: inline-block; padding: 2px 0; }

/* ------------------------------------------------------------ 26. CONTRAST
   WCAG AA for small text: the original --muted scored 4.35 on --surface-alt
   and teal-on-teal-tint scored 4.48, both just under the 4.5 threshold. */
:root { --muted: #5D6470; }                 /* 5.3 on --surface-alt */
.chat__avatar { color: var(--accent-ink); } /* 7.1 on --accent-soft */
.tag--positive { color: var(--accent-ink); }
.mock__call-status { color: var(--accent-ink); }
.slots__done { color: var(--accent-ink); }

/* the header wordmark needs a 24px tap area, with space around the credit */
.nav__brand a { padding: 4px 0; }
.nav__brand span { margin-top: 2px; }
.foot__copy { color: rgba(255,255,255,.62); }   /* was .45: scored 4.49 on --ink */

/* ----------------------------------------------------- 27. LAYOUT STABILITY
   The conversation is injected by JS and the times panel appears a moment
   later. Both used to grow the card after first paint, which is what moved
   the page (CLS 0.386). The panel now always occupies its space and only
   fades in, and the message area reserves the height it will end up with. */
.slots { visibility: hidden; }
.slots.is-in { visibility: visible; }

.hero__panel .chat__body { min-height: 410px; }
@media (max-width: 1024px) { .hero__panel .chat__body { min-height: 320px; } }
@media (max-width: 760px)  { .hero__panel .chat__body { min-height: 480px; } }

/* The appointment rows are injected by JS too, so the panel used to grow from
   empty to 151px after first paint. Reserve it, and reserve the demo card's
   message area so switching treatments does not nudge the page either. */
.slots__list { min-height: 151px; }
.demo__card .chat__body { min-height: 380px; }
@media (max-width: 760px) { .demo__card .chat__body { min-height: 490px; } }

/* ------------------------------------------------------- 28. FONT FALLBACKS
   The headline used to re-wrap when Instrument Serif finished loading, which
   moved the whole hero up by 36px (mobile CLS 0.256). Measured at 34px, the
   same headline is 608px wide in Instrument Serif but 815px in Georgia, so the
   fallback is scaled to 608/815 = 74.6% and wraps onto the same lines as the
   real font. Inter is a little wider than the system sans, hence 106.8%.
   If local() finds neither face, the plain stacks below still apply. */
@font-face {
  font-family: "Display Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 74.6%;
  font-display: swap;
}
@font-face {
  font-family: "Sans Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 106.8%;
  font-display: swap;
}
:root {
  --sans: "Inter", "Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", "Display Fallback", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------ 29. NO SIDE SCROLL
   The treatment tabs used to sit in a horizontally scrolling strip on phones,
   which is the only thing on the page that could be dragged sideways. They now
   wrap onto as many rows as they need, so nothing scrolls horizontally. */
@media (max-width: 760px) {
  .tabs { flex-wrap: wrap; justify-content: flex-start; overflow-x: visible; }
  .tab { flex: 0 1 auto; }
}
@media (max-width: 480px) {
  .tab { height: 42px; padding: 0 14px; font-size: 13.5px; }
}

/* --------------------------------------------------- 30. CONVERSATION LIFE
   Bubbles ease in, the agent "types" before each reply, and the online dot
   breathes. Only opacity and transform animate, so nothing moves the page. */
.msg {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .3s var(--ease), transform .36s var(--ease);
}
.msg.is-in { opacity: 1; transform: none; }
.msg--patient { transform-origin: left bottom; }
.msg--ai { transform-origin: right bottom; }

.msg p { position: relative; }
.msg__text { display: block; transition: opacity .3s var(--ease); }
.msg.is-typing .msg__text { opacity: 0; }

.msg__typing {
  position: absolute; inset: 0;
  display: none; align-items: center; gap: 5px;
  padding-left: 15px;
}
.msg.is-typing .msg__typing { display: flex; }
.msg__typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: .3;
  animation: msg-dot 1.1s ease-in-out infinite;
}
.msg__typing i:nth-child(2) { animation-delay: .15s; }
.msg__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-dot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

.chat__head .status::before { animation: status-dot 2.4s ease-in-out infinite; }
@keyframes status-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,124,102,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(14,124,102,0); }
}

@media (prefers-reduced-motion: reduce) {
  .msg { opacity: 1; transform: none; }
  .msg__typing { display: none; }
  .msg.is-typing .msg__text { opacity: 1; }
}

/* The reserved bubble stays invisible while the agent is "typing", and the
   dots sit in a small pill at its corner, so it reads as a short composing
   message rather than an empty box. The bubble itself never changes size. */
.msg p { transition: background-color .25s var(--ease); }
.msg.is-typing p { background: transparent; }
.msg__typing {
  inset: auto auto auto 0;
  width: max-content; padding: 13px 16px;
  background: var(--surface-alt); border-radius: 16px 16px 16px 6px;
}
.msg--ai .msg__typing {
  inset: auto 0 auto auto;
  background: var(--accent-soft); border-radius: 16px 16px 6px 16px;
}
/* anchor the typing pill to the top of the reserved bubble, so it appears
   directly under the previous message instead of floating below a gap */
.msg__typing { inset: 0 auto auto 0; }
.msg--ai .msg__typing { inset: 0 0 auto auto; }

/* ========================================================== 31. HERO REFRESH
   Depth and motion in the style of a modern product page: ambient colour
   blooms, a masked dot field, a chip badge, a tighter headline with a gradient
   accent, staged entrance and pointer parallax.

   Paint-timing rule: the headline and the chat card animate with transform
   only. Fading them in would delay the largest-paint measurement and cost
   Performance points, so opacity is reserved for the smaller elements. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 104px) var(--section-y);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.bloom {
  position: absolute; border-radius: 50%;
  transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 12px), 0);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.bloom--a {
  width: min(78vw, 860px); aspect-ratio: 1; top: -26%; right: -16%;
  background: radial-gradient(circle at 50% 50%, rgba(14,124,102,.22), rgba(14,124,102,.07) 45%, transparent 70%);
  animation: bloom-drift-a 26s ease-in-out infinite alternate;
}
.bloom--b {
  width: min(64vw, 720px); aspect-ratio: 1; bottom: -32%; left: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(16,24,40,.07), rgba(16,24,40,.02) 45%, transparent 70%);
  animation: bloom-drift-b 32s ease-in-out infinite alternate;
}
@keyframes bloom-drift-a { to { translate: 5% 4%; scale: 1.08; } }
@keyframes bloom-drift-b { to { translate: -4% -3%; scale: 1.06; } }

.hero__dots {
  position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(22,24,29,.13) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(74% 62% at 50% 32%, #000 8%, transparent 72%);
  mask-image: radial-gradient(74% 62% at 50% 32%, #000 8%, transparent 72%);
}

/* chip badge */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px; padding: 8px 16px 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(14,124,102,.16);
}

/* headline: modern sans, tight, with a gradient accent phrase */
.hero__title {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(38px, 5.7vw, 68px); line-height: 1.04; letter-spacing: -.035em;
  margin-bottom: 24px;
}
.hero__title .hl {
  position: relative;
  background: linear-gradient(96deg, var(--accent-ink), #17A085 48%, var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .055em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14,124,102,.55), rgba(23,160,133,.18));
  transform: scaleX(0); transform-origin: left;
  animation: hl-draw .85s cubic-bezier(.22,1,.36,1) .45s forwards;
}
@keyframes hl-draw { to { transform: scaleX(1); } }

.hero__sub { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--body); }
.hero__cta { gap: 14px; }
.hero__cta .btn--primary { box-shadow: 0 12px 32px -14px rgba(14,124,102,.75); }
.hero__cta .btn--primary:hover { transform: translateY(-1px); }
.hero__cta .btn--secondary {
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* card stage: soft glow behind, gentle parallax */
.hero__stage { position: relative; }
.hero__glow {
  position: absolute; inset: -7% -5% -9%; z-index: -1; border-radius: 44px;
  background: radial-gradient(58% 56% at 50% 38%, rgba(14,124,102,.20), transparent 72%);
}
.hero__panel .chat {
  box-shadow: 0 40px 90px -52px rgba(16,24,40,.5), 0 2px 8px rgba(16,24,40,.05);
  transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -7px), 0);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

/* stat chips under the card */
.metrics-row { gap: 10px; border-top: 0; margin-top: 22px; }
.metrics-row li {
  flex: 1 1 180px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.metrics-row li + li { border-left: 1px solid var(--border); padding-left: 18px; }
.metrics-row b { font-size: 20px; }
.metrics-row span { font-size: 13px; }

/* staged entrance */
.hero__title { transform: translateY(16px); animation: hero-rise .75s cubic-bezier(.22,1,.36,1) .04s forwards; }
.hero__stage { transform: translateY(20px) scale(.984); animation: hero-rise .85s cubic-bezier(.22,1,.36,1) .12s forwards; }
@keyframes hero-rise { to { transform: none; } }

.badge, .hero__sub, .hero__cta, .hero__guarantee, .hero__channels, .metrics-row {
  opacity: 0; transform: translateY(14px);
  animation: hero-in .6s cubic-bezier(.22,1,.36,1) forwards;
}
.badge         { animation-delay: .02s; }
.hero__sub     { animation-delay: .16s; }
.hero__cta     { animation-delay: .26s; }
.hero__guarantee{ animation-delay: .32s; }
.hero__channels{ animation-delay: .38s; }
.metrics-row   { animation-delay: .46s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .hero__glow { inset: -5% -4% -7%; }
}

/* Reduce Motion: everything sits still at its final state. These selectors
   outrank the blanket rule in section 23, so they repeat the override here. */
@media (prefers-reduced-motion: reduce) {
  .bloom, .bloom--a, .bloom--b { animation: none; transform: none; transition: none; }
  .hero__title, .hero__stage { animation: none; transform: none; }
  .hero__title .hl::after { animation: none; transform: scaleX(1); }
  .badge, .hero__sub, .hero__cta, .hero__guarantee, .hero__channels, .metrics-row {
    animation: none; opacity: 1; transform: none;
  }
  .hero__panel .chat { transform: none; transition: none; }
}

/* ------------------------------------------- 32. HERO COST CONTROL ON PHONES
   The live blur behind the chips, the drifting blooms and the masked dot field
   are cheap on a desktop GPU and expensive on a phone: they pushed style and
   layout work to 579ms and the largest paint from 1.5s to 3.0s. Phones keep
   the same composition with static gradients and solid translucent chips. */
@media (max-width: 900px) {
  .badge,
  .hero__cta .btn--secondary,
  .metrics-row li {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface);
  }
  .bloom--a, .bloom--b { animation: none; }
  .hero__dots { display: none; }
}

/* The headline is the largest element on screen, so it is what paint-timing
   measures. Animating it invites that measurement to be attributed to the end
   of the animation, so it now sits still and the movement around it carries
   the entrance instead. */
.hero__title { transform: none; animation: none; }

/* ======================================================= 33. ?motion=1 SWITCH
   With Reduce Motion on, everything above sits still, which is correct but
   makes the page impossible to demonstrate on a machine that has the setting
   enabled. Loading the page with ?motion=1 adds .motion-on to <html> and puts
   the animations back, just for that visit. */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .bloom--a { animation: bloom-drift-a 26s ease-in-out infinite alternate; }
  html.motion-on .bloom--b { animation: bloom-drift-b 32s ease-in-out infinite alternate; }
  html.motion-on .bloom,
  html.motion-on .hero__panel .chat { transition: transform .6s var(--ease); }

  html.motion-on .hero__title .hl::after {
    transform: scaleX(0); animation: hl-draw .85s var(--ease) .45s forwards;
  }
  html.motion-on .hero__stage {
    transform: translateY(20px) scale(.984); animation: hero-rise .85s var(--ease) .12s forwards;
  }
  html.motion-on .badge,
  html.motion-on .hero__sub,
  html.motion-on .hero__cta,
  html.motion-on .hero__guarantee,
  html.motion-on .hero__channels,
  html.motion-on .metrics-row {
    opacity: 0; transform: translateY(14px); animation: hero-in .6s var(--ease) forwards;
  }
  html.motion-on .badge          { animation-delay: .02s; }
  html.motion-on .hero__sub      { animation-delay: .16s; }
  html.motion-on .hero__cta      { animation-delay: .26s; }
  html.motion-on .hero__guarantee{ animation-delay: .32s; }
  html.motion-on .hero__channels { animation-delay: .38s; }
  html.motion-on .metrics-row    { animation-delay: .46s; }

  html.motion-on [data-reveal] {
    opacity: 0; transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  html.motion-on [data-reveal].is-in { opacity: 1; transform: none; }

  html.motion-on .msg {
    opacity: 0; transform: translateY(10px) scale(.97);
    transition: opacity .3s var(--ease), transform .36s var(--ease);
  }
  html.motion-on .msg.is-in { opacity: 1; transform: none; }
  html.motion-on .msg.is-typing .msg__text { opacity: 0; }
  html.motion-on .msg.is-typing .msg__typing { display: flex; }
  html.motion-on .msg__typing i { animation: msg-dot 1.1s ease-in-out infinite; }
  html.motion-on .slots { transition: opacity .32s var(--ease), transform .32s var(--ease); }

  html.motion-on .chat__head .status::before { animation: status-dot 2.4s ease-in-out infinite; }
  html.motion-on .wa__halo { animation: wa-glow 2.4s ease-in-out infinite; }
  html.motion-on .wa {
    transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
  }
  html.motion-on .faq__a { transition: grid-template-rows .25s var(--ease); }
  /* the demo tabs and the hero's own cycling both swap card contents faster
     than the .32s default reveal above, which is tuned for a once-only entrance */
  html.motion-on .chat__body { transition: opacity .15s var(--ease); }
  html.motion-on .demo__card .slots,
  html.motion-on .hero__panel .slots { transition: opacity .15s var(--ease); }
}

/* ==================================================== 34. BEFORE/AFTER STORY
   Guidance applied from the ui-ux-pro-max database (Scroll Reveal, Subtle
   tier): viewport-entry trigger, 300-400ms per item, ease-out, 8-16px offsets
   so each row reads as a fade rather than a slide. Its Animation rules also
   warn against a single duration everywhere and against infinite decorative
   motion, so the two columns run at deliberately different cadences and the
   one celebratory pulse repeats twice, not forever.

   The "Without AI" timeline crawls: 300ms between rows, connector drawing over
   1.7s. The AI timeline snaps: 110ms between rows, connector in 0.75s. The
   speed difference is the argument the section is making.

   Everything here sits under .motion-live, which the script adds only when
   motion is allowed, so with reduced motion or no JavaScript the timelines
   simply render finished. */
html.motion-live .tl__list::before { transform: scaleY(0); transform-origin: top; }
html.motion-live .tl--before.is-in .tl__list::before { transform: scaleY(1); transition: transform 1.7s var(--ease) .1s; }
html.motion-live .tl--after.is-in .tl__list::before  { transform: scaleY(1); transition: transform .75s var(--ease) .1s; }

html.motion-live .tl__row { opacity: 0; transform: translateY(12px); }
html.motion-live .tl.is-in .tl__row {
  opacity: 1; transform: none;
  transition: opacity .36s var(--ease), transform .36s var(--ease);
}

/* left column: slow, 300ms apart */
html.motion-live .tl--before.is-in .tl__row:nth-child(1) { transition-delay: .12s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(2) { transition-delay: .42s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(3) { transition-delay: .72s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(4) { transition-delay: 1.02s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(5) { transition-delay: 1.32s; }

/* right column: fast, 110ms apart */
html.motion-live .tl--after.is-in .tl__row:nth-child(1) { transition-delay: .10s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(2) { transition-delay: .21s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(3) { transition-delay: .32s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(4) { transition-delay: .43s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(5) { transition-delay: .54s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(6) { transition-delay: .65s; }

/* markers: the muted circles ease up, the teal ticks pop */
html.motion-live .tl--before .tl__row::before { transform: scale(.4); }
html.motion-live .tl--before.is-in .tl__row::before { transform: scale(1); transition: transform .3s var(--ease); }
html.motion-live .tl--after .tl__row::before { transform: scale(0); }
html.motion-live .tl--after.is-in .tl__row::before {
  transform: scale(1); transition: transform .34s cubic-bezier(.34,1.56,.64,1);
}
html.motion-live .tl--after .tl__row::after { opacity: 0; }
html.motion-live .tl--after.is-in .tl__row::after { opacity: 1; transition: opacity .2s var(--ease) .12s; }

html.motion-live .tl--before.is-in .tl__row:nth-child(1)::before { transition-delay: .12s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(2)::before { transition-delay: .42s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(3)::before { transition-delay: .72s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(4)::before { transition-delay: 1.02s; }
html.motion-live .tl--before.is-in .tl__row:nth-child(5)::before { transition-delay: 1.32s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(1)::before { transition-delay: .14s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(2)::before { transition-delay: .25s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(3)::before { transition-delay: .36s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(4)::before { transition-delay: .47s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(5)::before { transition-delay: .58s; }
html.motion-live .tl--after.is-in .tl__row:nth-child(6)::before { transition-delay: .69s; }

/* the captured patient gets one short ring, twice, then stops */
@keyframes captured-ring {
  from { box-shadow: 0 0 0 0 rgba(14,124,102,.5); }
  to   { box-shadow: 0 0 0 11px rgba(14,124,102,0); }
}
html.motion-live .tl--after.is-in .tl__row:last-child::before {
  animation: captured-ring .9s var(--ease) 1.05s 2;
}

/* the lost enquiry settles a beat later and stays muted */
html.motion-live .tl--before.is-in .tl__row--lost { transition-delay: 1.5s; }
html.motion-live .tl--before.is-in .tl__row--lost::before { transition-delay: 1.5s; }

/* ============================================ 35. HERO TRUST LINE + CHIPS
   The hero columns were uneven on desktop: the card side ran 973px against
   651px of copy, leaving 161px of dead space above the badge and the same
   below the buttons. The stat chips now sit under the call to action, where
   they back the click, and a line of real registrations fills the top. */
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-bottom: 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.hero__trust span { display: inline-flex; align-items: center; }
.hero__trust span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; margin-right: 14px;
}
.hero__trust sup { font-size: .7em; vertical-align: super; line-height: 0; }

.hero__copy .metrics-row { margin-top: 30px; }
.hero__copy .metrics-row li { flex: 1 1 200px; }

/* ---------------------------------------------------- 36. MESSAGE TYPEWRITER
   Only the first patient message types, and only where motion is allowed.
   Characters are hidden with visibility rather than added one by one, so the
   layout is identical from the first frame to the last. */
html.motion-live .msg__text--type .ch { visibility: hidden; }
html.motion-live .msg__text--type .ch.is-on { visibility: visible; }

.caret { position: relative; display: inline-block; width: 0; }
.caret::before {
  content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 2px;
  background: var(--accent); opacity: .9;
}
html.motion-live .caret::before { animation: caret-blink 1.05s steps(1, end) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: .9; } 50%, 100% { opacity: 0; } }
.caret.is-done { display: none; }

/* Separator dots now ride with the item before them, so a wrapped trust line
   never starts with a dangling dot, and the registered mark gets some air. */
.hero__trust { gap: 6px 0; }
.hero__trust span { white-space: nowrap; }
.hero__trust span + span::before { content: none; }
.hero__trust span:not(:last-child)::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; margin: 0 13px;
}
.hero__trust sup { margin-right: .22em; }

/* The caret is a zero-width inline-block, so it had no height of its own and
   the bar inside it (pinned top/bottom) resolved to nothing and never painted.
   Giving it an explicit height fixes that; the width stays 0, so the text it
   sits beside cannot move. */
.caret { height: 1.05em; vertical-align: -0.17em; }
.caret::before { top: 0; bottom: 0; }

/* The caret used to be its own element appended after the whole string. Hidden
   characters still occupy space, so it sat at the end of the invisible
   sentence and never appeared beside the text being typed. The cursor now
   rides the character currently revealed: an absolutely positioned bar on that
   span, so it tracks the typing and still takes no space in the flow. */
.msg__text--type .ch { position: relative; }
.msg__text--type .ch.is-cursor::after {
  content: ""; position: absolute; right: -2px; top: .08em;
  width: 2px; height: 1.05em;
  background: var(--accent); opacity: .9;
}
html.motion-live .msg__text--type .ch.is-cursor::after {
  animation: caret-blink 1.05s steps(1, end) infinite;
}
.caret { display: none; }

/* ================================================ 37. PROBLEM CARD HOVER
   Decoration only: the skill's "Hover vs Tap" rule (High) says never reveal
   content on hover, because touch devices have none. Nothing here appears or
   disappears, it only warms up. */
.problem__card {
  position: relative; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.problem__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(14,124,102,.09), transparent 62%);
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.problem__card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--accent), rgba(23,160,133,.35));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.problem__card > * { position: relative; z-index: 1; }
.problem__card svg {
  padding: 9px; margin-left: -9px; border-radius: 12px;
  box-sizing: content-box; background: transparent;
  transition: background-color .3s var(--ease), transform .35s var(--ease), color .3s var(--ease);
}
.problem__card h3 { transition: color .3s var(--ease); }

.problem__card:hover { transform: translateY(-4px); border-color: rgba(14,124,102,.28); box-shadow: var(--shadow-md); }
.problem__card:hover::before { opacity: 1; }
.problem__card:hover::after { transform: scaleX(1); }
.problem__card:hover svg { background: var(--accent-soft); transform: translateY(-2px) scale(1.04); color: var(--accent-ink); }

@media (hover: none) {
  .problem__card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .problem__card:hover::before, .problem__card:hover::after { opacity: 0; transform: scaleX(0); }
  .problem__card:hover svg { background: transparent; transform: none; }
}

/* ==================================================== 38. PROCESS RING
   The six steps stay a plain ordered list in the markup. The script arranges
   them on a ring and adds the centre panel and controls, so without JavaScript,
   and below 761px, the readable list is exactly what remains.

   Auto-rotation follows the skill's Auto-Rotating Content rule (High): there
   are previous / play-pause / next controls, it stops on hover and on focus,
   and it never starts under reduced motion. */
.ring { display: grid; justify-items: center; gap: clamp(20px, 2.4vw, 30px); }

@media (min-width: 761px) {
  .steps.is-ring {
    position: relative; display: block;
    width: min(640px, 100%); aspect-ratio: 1; margin: 0 auto;
  }
  .ring__orbit {
    position: absolute; inset: 8%; border-radius: 50%;
    border: 1px dashed var(--border);
  }
  .ring__progress { position: absolute; inset: 8%; transform: rotate(-90deg); overflow: visible; }
  .ring__progress circle { fill: none; stroke-width: 2; stroke-linecap: round; }
  .ring__progress .track { stroke: transparent; }
  .ring__progress .bar { stroke: var(--accent); opacity: .85; }

  .steps.is-ring .step {
    position: absolute; left: var(--l); top: var(--t);
    width: 152px; margin: 0; padding: 14px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-sm);
    text-align: center; cursor: pointer;
    translate: -50% -50%; scale: .94;
    transition: scale .42s var(--ease), box-shadow .42s var(--ease),
                border-color .42s var(--ease), background-color .42s var(--ease);
  }
  .steps.is-ring .step p, .steps.is-ring .step .step__note { display: none; }
  .steps.is-ring .step .step__n { margin-bottom: 5px; font-size: 14px; }
  .steps.is-ring .step h3 { font-size: 14.5px; line-height: 1.25; letter-spacing: -.01em; }

  .steps.is-ring .step.is-next {
    scale: 1.02;
    border-color: rgba(14,124,102,.4);
  }
  .steps.is-ring .step[aria-selected="true"] {
    scale: 1.14;
    border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-md);
    cursor: default;
  }
  .steps.is-ring .step[aria-selected="true"] .step__n { color: var(--accent-ink); }

  .ring__centre {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46%; min-height: 190px; display: grid; align-content: center; gap: 10px;
    text-align: center;
  }
  .ring__centre-n { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
  .ring__centre-t { font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.02em; line-height: 1.25; }
  .ring__centre-b { font-size: 14.5px; line-height: 1.55; color: var(--body); }
  .ring__centre.is-swapping > * { opacity: 0; }
  .ring__centre > * { transition: opacity .18s var(--ease); }
}

/* The dial used to be desktop-only. It is not any more: on a phone it shrinks
   to a progress indicator above the rows, so the track and the arc must stay
   visible here. Hiding them left the step number floating in empty space. */
@media (max-width: 760px) {
  .ring__orbit { display: none; }
}

/* The ring's decorative layers and its panel now live in a stage wrapper
   alongside the list, because a role="tablist" may only contain tabs. The
   stage owns the circular geometry; the list simply sits inside it. */
@media (min-width: 761px) {
  .ring__stage {
    position: relative;
    width: min(640px, 100%); aspect-ratio: 1; margin: 0 auto;
  }
  .steps.is-ring { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .ring__stage { width: 100%; }
}

/* ================================================= 39. PROCESS RING, REDRESSED
   Design borrowed from the Miilston milestone ring and recoloured to this
   page: copy and the active step's detail on the left, the dial on the right;
   an SVG track with an accent arc that sweeps as the process advances; a large
   step number and short name in the middle; circular nodes that scale up when
   active. Gold became --accent, navy became our surfaces, cream became --ink.
   The rotation logic underneath is unchanged. */
.ring {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  gap: clamp(30px, 5vw, 60px);
}
.ring__copy { min-width: 0; }
.ring__copy .sec-head { max-width: none; margin: 0 0 26px; text-align: left; }
.ring__detail { min-width: 0; }
.ring__detail-n {
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.ring__detail-t { margin-top: 10px; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.2; letter-spacing: -.02em; }
.ring__detail-b { margin-top: 12px; max-width: 46ch; font-size: 16px; line-height: 1.7; color: var(--body); }

.ring__stage {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 1;
  margin-inline-start: auto;
}
.ring__orbit { display: none; }          /* the SVG track replaces the dashed circle */
.ring__progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__progress .track { fill: none; stroke: var(--border); stroke-width: 2; }
.ring__progress .bar {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .75s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 6px rgba(14,124,102,.35));
}

.ring__centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76%; min-height: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; pointer-events: none;
}
.ring__centre-n { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.ring__centre-n i { font-style: normal; font-size: 15px; color: var(--muted); margin-left: 3px; }
.ring__centre-t { margin-top: 12px; max-width: 230px; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); }
@keyframes ring-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.motion-live .ring__centre-t.pop { animation: ring-pop .34s cubic-bezier(.4, 0, .2, 1) both; }

@media (min-width: 901px) {
  .steps.is-ring .step {
    width: 62px; height: 62px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    box-shadow: none;
    /* Centring lives in `translate` and emphasis in `scale`, never in
       `transform`. The reveal animation sets `transform: none` once an element
       scrolls in, and under Reduce Motion the ?motion=1 rules do it from a
       selector that outranks this one, which wiped the -50% offset and threw
       every unselected node off the track. These properties cannot be clobbered
       by it, and they compose with whatever `transform` the reveal applies. */
    translate: -50% -50%;
    transition: scale .3s cubic-bezier(.34, 1.4, .64, 1), background-color .3s var(--ease),
                border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  }
  /* the title still names the tab for assistive tech, it is only hidden here */
  .steps.is-ring .step h3 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .steps.is-ring .step .step__n { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: inherit; }
  .steps.is-ring .step:hover { border-color: rgba(14,124,102,.5); color: var(--accent-ink); }
  .steps.is-ring .step.is-done { border-color: rgba(14,124,102,.42); color: var(--accent-ink); }
  .steps.is-ring .step.is-next { scale: 1.08; border-color: rgba(14,124,102,.5); }
  .steps.is-ring .step[aria-selected="true"] {
    scale: 1.3;
    background: linear-gradient(140deg, var(--accent), var(--accent-ink));
    border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 6px rgba(14,124,102,.14), 0 12px 26px -12px rgba(16,24,40,.5);
  }
  .steps.is-ring .step[aria-selected="true"] .step__n { color: #fff; }
}

/* Phones: the dial shrinks to a pure progress indicator, the nodes give way to
   tappable rows, and the detail sits underneath. */
@media (max-width: 900px) {
  .ring { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ring__stage { max-width: 230px; margin: 0 auto; order: -1; }
  .ring__progress .track { stroke-width: 3; }
  .ring__progress .bar { stroke-width: 6; }
  .ring__centre { width: 88%; }
  .ring__centre-n { font-size: 34px; }
  .ring__centre-t { margin-top: 8px; max-width: 180px; font-size: 15px; }

  .steps.is-ring {
    position: static; inset: auto; display: flex; flex-direction: column; gap: 8px;
    width: auto; aspect-ratio: auto;
  }
  /* Cards, each carrying its own copy. The ring's offsets are cleared through
     the same properties that set them: `transform: none` would leave a stale
     translate behind. */
  .steps.is-ring .step {
    position: static; translate: none; scale: none; transform: none;
    width: auto; height: auto;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 7px; align-items: baseline;
    min-height: 0; padding: 17px 18px; text-align: left;
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .steps.is-ring .step .step__n {
    margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    color: var(--accent-ink);
  }
  .steps.is-ring .step h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  .steps.is-ring .step p {
    display: block; grid-column: 2; margin: 0;
    font-size: 14.5px; line-height: 1.6; color: var(--body);
  }
}

/* the crossfade moved from the dial to the detail panel */
.ring__detail > * { transition: opacity .18s var(--ease); }
.ring__detail.is-swapping > * { opacity: 0; }
.ring__centre.is-swapping > * { opacity: 1; }

/* ============================================== 45. HERO GUARANTEE LINE
   The 14-day pilot used to appear for the first time ten sections down, after
   most scrollers had already decided. It is the strongest single line on the
   page, so a short version now rides next to the button that acts on it; the
   full explanation still lives where it did, in the demo-call section. */
.hero__guarantee {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 18px; max-width: 46ch;
  font-size: 13.5px; line-height: 1.5; color: var(--accent-ink);
}
.hero__guarantee svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ===================================================== 46. TRUST STRIP
   The compliance points already promised inside one FAQ answer, surfaced
   where a visitor can see them without digging: right after the hero, before
   the page asks anything of them. */
.trust-strip { border-block: 1px solid var(--border); background: var(--surface-alt); }
.trust-strip__inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
  padding-block: 16px;
}
.trust-strip__inner p {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--body); white-space: nowrap;
}
.trust-strip__inner svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
@media (max-width: 640px) {
  .trust-strip__inner p { white-space: normal; }
}

/* ------------------------------------------------ 40. RING GEOMETRY FIXES
   The dial's visuals live in .ring__dial so the step list can leave the square
   on a phone, where the rows need the full width. The SVG now uses a 400-unit
   viewBox with r=164, matching the 41% node radius: the nodes ride the track,
   and a 2-3px stroke reads as a hairline instead of a 14px band. */
.ring__dial { position: absolute; inset: 0; }
.ring__stage { position: relative; }

@media (max-width: 900px) {
  .ring__stage {
    display: grid; gap: 20px; max-width: none; aspect-ratio: auto; margin: 0;
  }
  .ring__dial { position: relative; inset: auto; width: 210px; aspect-ratio: 1; margin: 0 auto; }
  .steps.is-ring { position: static; inset: auto; }

  /* 13px teal on the teal tint measured 4.48 against a required 4.5 */
  .steps.is-ring .step[aria-selected="true"] .step__n { color: var(--accent-ink); }
}

/* ------------------------------------------- 41. RING ORDER ON SMALL SCREENS
   Reading order on a phone is heading, dial, rows, detail, controls. The copy
   column dissolves with display:contents so its heading and detail can sit on
   either side of the dial. Rows carry only the number and the label: the body
   copy lives in the detail panel, and repeating it inside each row turned the
   longer steps into two cramped columns of text. */
@media (max-width: 900px) {
  .ring__copy { display: contents; }
  .ring__copy .sec-head { order: 1; margin-bottom: 2px; }
  .ring__stage { order: 2; }

  /* The dial and the detail panel are both gone here. Each card now carries
     its own copy, so the panel repeated whichever card was selected, and the
     dial sat frozen on step one (it only rotates from 901px up) restating the
     first card a few pixels above it. */
  .ring__dial, .ring__detail { display: none; }

  .steps.is-ring { gap: 11px; }
  .steps.is-ring .step .step__note { display: none; }

  /* a short stagger so the cards arrive in sequence rather than as a slab */
  .steps.is-ring .step:nth-child(1) { --d: 0ms; }
  .steps.is-ring .step:nth-child(2) { --d: 70ms; }
  .steps.is-ring .step:nth-child(3) { --d: 140ms; }
  .steps.is-ring .step:nth-child(4) { --d: 210ms; }
  .steps.is-ring .step:nth-child(5) { --d: 280ms; }
  .steps.is-ring .step:nth-child(6) { --d: 350ms; }
}

/* ------------------------------------------------- 42. RING, HELD STILL
   The nodes must not move as the ring advances: only their fill, size and glow
   change. Two things guarantee that. The detail panel is given a fixed height,
   so the left column cannot grow or shrink as the copy swaps. Without it the
   grid row changed height with the text, the vertically centred dial moved,
   and every node appeared to drift. And each node scales about its own centre,
   so growing the active one never shifts where it sits on the track. */
.ring__detail { min-height: 190px; }
.steps.is-ring .step { transform-origin: 50% 50%; }
.steps.is-ring .step h3 { overflow-wrap: break-word; }

/* -------------------------------------- 44. THE STEPS ARRIVE ONE BY ONE
   Each step fades in as it scrolls into view, offset by its place in the group
   that arrived with it. `--rd` is written by cascade() in the script; the
   delay sits on `opacity` and `translate` alone, so the colour and scale
   transitions the dial depends on stay instant.

   The entrance moves the card with `translate`, never `transform`: the dial
   keeps its node positions in `translate` and `scale`, and a reveal that wrote
   `transform` is exactly what threw those nodes off the track once already.

   All of it hangs off html.motion-live, so reduced motion and a browser with
   JavaScript off both render the finished state. */
html.motion-live .steps.is-ring .step.will-reveal { opacity: 0; }
html.motion-live .steps.is-ring .step.is-revealed { opacity: 1; }

@media (min-width: 901px) {
  /* the beads light up around the circle, quickly: they are small and there
     are six of them in one glance */
  html.motion-live .steps.is-ring .step.will-reveal {
    transition: opacity .5s var(--ease) var(--rd, 0ms),
                scale .3s cubic-bezier(.34, 1.4, .64, 1),
                background-color .3s var(--ease), border-color .3s var(--ease),
                color .3s var(--ease), box-shadow .3s var(--ease);
  }
}

@media (max-width: 900px) {
  /* on a phone they are full cards, so they take their time: 200ms apart,
     rising 20px over .6s */
  html.motion-live .steps.is-ring .step.will-reveal {
    translate: 0 20px;
    transition: opacity .6s var(--ease) var(--rd, 0ms),
                translate .6s cubic-bezier(.22, .61, .36, 1) var(--rd, 0ms);
  }
  html.motion-live .steps.is-ring .step.is-revealed { translate: none; }
}

/* --------------------------------------------- 43. NODES ABOVE THE ARC
   The dial is appended after the list, so its SVG painted on top and the teal
   arc cut straight across whichever node it had reached. The stage is the
   stacking context; lifting the list above the dial inside it puts every node
   on top of the track, and the arc now runs behind the beads and disappears
   cleanly under the active one. */
@media (min-width: 901px) {
  .ring__dial { z-index: 0; }
  .steps.is-ring { z-index: 1; }
}

@media (max-width: 900px) {
  .ring__detail { min-height: 132px; }
  /* section 38 gives the list "margin: 0 auto" from 761px up. Inside the
     stage's grid an auto margin shrink-wraps the item, so between 761 and
     900px the rows were 286px wide in an 810px column. */
  .steps.is-ring { margin: 0; width: 100%; }
  /* the ring grid centres its items; the detail was shrink-wrapping to its
     46ch body and sitting off-centre with left-aligned text */
  .ring__detail { width: 100%; }
}

/* ======================================== 47. MOBILE HERO, LESS TO READ
   Section 22 unwraps .hero__copy and drops its own gap so the chat demo can
   move above the stat chips (see that block for why). What was left, once
   that landed, was every element's DESKTOP margin: trimmed here, in one place
   that is guaranteed to win the cascade against the unconditional rules that
   set those margins in the first place, because it comes after all of them.

   The target is a real number, not a feeling: the "Book a Demo" button fully
   on screen without scrolling on a 375x667 viewport (an iPhone SE, still a
   common small-phone baseline). It used to run 18px past the bottom edge. */
@media (max-width: 760px) {
  /* The registration line (D-U-N-S, FBR) is a desktop-only credential now:
     on a phone it was the very first thing read, ahead of the headline
     itself, for a fact that matters far less to a clinic owner than what the
     product does. It still runs on the main site and in the industries
     section's credit line further down this page. */
  .hero__trust { display: none; }
  .badge { margin-bottom: 14px; }
  .hero__title { margin-bottom: 16px; }
  .hero__cta { margin-top: 20px; }
  /* bridges the gap the grid's own "gap" used to provide between the copy
     column and the demo card, now that both are unwrapped into one flow */
  .hero__panel { margin-top: 28px; }
}