/* =========================================================
   hanah — brand palette (warm brown / cream / orange)
   ========================================================= */
:root {
  --ink:        #2e190d;   /* dark brown */
  --ink-2:      #4a2918;   /* hover/accents */
  --lime:       #e68a54;   /* primary accent (warm orange) */
  --lime-2:     #d47540;   /* hover orange */
  --mint:       #f5d9c4;   /* soft surface */
  --sage:       #f8ede4;   /* neutral surface */
  --cream:      #fffaf8;   /* page bg */
  --line:       rgba(46, 25, 13, 0.12);
  --muted:      rgba(46, 25, 13, 0.7);
  --shadow-sm:  0 1px 2px rgba(46, 25, 13, 0.06), 0 2px 6px rgba(46, 25, 13, 0.04);
  --shadow-lg:  0 20px 40px -20px rgba(46, 25, 13, 0.25), 0 8px 16px -8px rgba(46, 25, 13, 0.12);
  --radius:     14px;
  --radius-lg:  22px;
  --nav-h:      78px;      /* sticky nav height — hero pins below it and subtracts it; must match the nav's real rendered height or the hero drifts on scroll */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Type ---------- */
.h1, .h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin: 0 0 20px; text-wrap: balance; }
.h1 em { font-style: italic; color: var(--ink-2); }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); margin: 0 0 14px; text-wrap: balance; }
.h2--light { color: var(--cream); }
.h2 em { font-style: italic; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--mint); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow--light { background: rgba(230, 138, 84, 0.18); color: var(--lime); }
.lede { font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--muted); margin: 0 0 28px; max-width: 60ch; }
.lede--center { margin-left: auto; margin-right: auto; text-align: center; }
.lede--light { color: rgba(255, 250, 248, 0.8); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--sage); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-2); }
.btn--link { color: var(--ink); padding: 12px 4px; }
.btn--link:hover { color: var(--ink-2); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--full { width: 100%; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; }
.logo__mark { height: 32px; width: auto; }
.logo__word { font-family: 'Fraunces', serif; font-weight: 600; font-size: 32px; fill: var(--ink); letter-spacing: -0.02em; }
.logo__dots circle { fill: var(--lime); }
img.logo__mark--light { filter: brightness(0) invert(1); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 248, 0.85);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 32px; padding: 14px 24px; }
.nav__links { display: flex; gap: 26px; margin-left: 24px; flex: 1; }
.nav__links a { font-size: 15px; color: var(--ink); opacity: .8; }
.nav__links a:hover { opacity: 1; }
.nav__cta { display: flex; gap: 10px; }
.nav__toggle { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- Hero (full-bleed video, pinned; the page sheet scrolls up over it) ---------- */
.hero {
  position: sticky; top: var(--nav-h); z-index: 1;
  /* shorter than the viewport (minus the nav it sits below) so the page sheet peeks in ~70px */
  height: calc(100vh - var(--nav-h) - 36px); height: calc(100dvh - var(--nav-h) - 36px);
  min-height: 480px;
  display: flex; align-items: stretch;
  overflow: hidden;
  background: var(--ink);
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* darken the video just enough that white copy stays legible on any footage:
   a strong left-anchored wash where the text lives, fading to clear on the right,
   plus a soft floor for the stats and a faint top tint for the nav. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(33,17,8,.88) 0%, rgba(33,17,8,.66) 30%, rgba(33,17,8,.30) 54%, rgba(33,17,8,0) 80%),
    linear-gradient(0deg,   rgba(33,17,8,.55) 0%, rgba(33,17,8,0) 38%),
    linear-gradient(180deg, rgba(33,17,8,.30) 0%, rgba(33,17,8,0) 22%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 80px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero__copy { max-width: 520px; text-shadow: 0 1px 28px rgba(18,9,3,.5); }
.hero__honesty { margin: 16px 0 0; font-size: .92rem; color: rgba(255, 250, 248, 0.72); }
.hero__honesty a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.hero__honesty a:hover { text-decoration-color: var(--lime-2); }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero__cta { flex: 0 0 auto; }
.h1--hero { color: #fff; }
.h1--hero em { color: var(--mint); }
.lede--hero { color: rgba(255, 250, 248, 0.86); margin-bottom: 0; text-wrap: balance; }
/* proof stats as glass pills, top of the hero */
.hero__pills {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hero__pills li {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; color: rgba(255, 250, 248, 0.82);
  background: rgba(255, 250, 248, 0.12);
  border: 1px solid rgba(255, 250, 248, 0.24);
  backdrop-filter: saturate(1.2) blur(6px);
}
.hero__pills strong {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: #fff;
}

/* scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border: 2px solid rgba(255, 250, 248, 0.6); border-radius: 14px;
  display: flex; justify-content: center;
}
.hero__cue span {
  width: 4px; height: 8px; margin-top: 7px; border-radius: 2px; background: #fff;
  animation: heroCue 1.6s ease-in-out infinite;
}
@keyframes heroCue {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(11px); }
}

/* ---------- Page sheet — opaque, rounded lip that rises over the pinned hero ---------- */
.page-sheet {
  position: relative; z-index: 2;
  background: var(--cream);
  border-radius: 10px 10px 0 0;     /* matches the app's ContentSurface (rounded-[10px]) */
  margin-top: -34px;
  overflow: hidden;                 /* clip first section to the rounded top */
  /* Same macOS-style rim light as the app's ContentSurface — a bright 1px top
     edge with softer highlights down the sides and a short glow falloff —
     layered over the existing lift shadow that raises the sheet above the hero. */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.22),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.22),
    inset 0 2px 6px -3px rgba(255, 255, 255, 0.30),
    0 -22px 50px -18px rgba(46, 25, 13, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue span { animation: none; }
}

/* ---------- Walkthrough — vertical timeline ("how it works") ----------
   NB: named .journey (not .flow) — a separate .flow component already exists
   for the dashboard mockup, and its `.flow span` rule would hijack these. */
.journey {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 760px; position: relative;
}
/* the connecting rail down the left: faint track + a fill that grows with scroll */
.journey::before, .journey::after {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
}
.journey::before { background: var(--line); z-index: 1; }            /* track */
.journey::after {                                                    /* fill */
  background: linear-gradient(var(--lime), var(--lime-2)); z-index: 1;
  transform-origin: top center; transform: scaleY(var(--journey-progress, 0));
  will-change: transform;
}
.journey__step { position: relative; padding-left: 48px; padding-bottom: 72px; }
.journey__step:last-child { padding-bottom: 0; }
.journey__marker {
  position: absolute; left: 0; top: 4px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--line);
  box-shadow: 0 0 0 5px var(--sage);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.journey__marker.is-on { background: var(--lime); border-color: var(--lime); transform: scale(1.05); }
.journey__num {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lime); margin-bottom: 8px;
}
.journey__body h3 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 10px; }
.journey__body p { color: var(--muted); max-width: 54ch; margin: 0; }
.journey__media {
  margin: 22px 0 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--sage);   /* matches the section so images blend straight into the page */
}
.journey__media img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 860; object-fit: cover; }
/* Scroll-scrubbed sequences ship as 16:9 transparent frames — give them their
   own slot so the frame isn't cropped, and let the sage section show through. */
.journey__media--seq { background: transparent; }
.journey__media--seq img { aspect-ratio: 16 / 9; object-fit: contain; }
/* The flow-3 source frames carry a stray 1px rule along their bottom edge — clip it
   off. clip-path doesn't reflow, and the sliver just shows the section through.
   Keyed to the asset (not nth-child) because the home journey drops step 3 while
   /physios + /allied-health keep it, so step positions no longer line up. */
.journey__media--seq img[src*="flow-3/"] { clip-path: inset(0 0 1% 0); }

/* gentle scroll-in — progressive enhancement only. Steps are visible by default;
   the hidden-then-reveal state is applied solely when JS is active (html.js), so
   content can never be stranded invisible if the script or observer doesn't run. */
.js .journey__step { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .journey__step.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .journey__step { opacity: 1; transform: none; transition: none; }
}

/* ---------- Wide screens: alternating two-column timeline ----------
   The stacked single column (max-width 760px) leaves this section stranded as a
   thin ribbon on desktop. Here each step splits into text | media with the rail
   re-centred and the media side alternating per step. The scroll JS reads only
   the markers' *vertical* positions and drives a scaleY fill, so re-centring the
   rail leaves the progress fill + sequence-scrubbing untouched. Mobile (< 900px)
   keeps the original stacked layout. */
@media (min-width: 900px) {
  .journey { max-width: 1120px; }   /* fill the container instead of sitting inset inside it */

  /* rail + markers travel from the far left to the horizontal centre */
  .journey::before, .journey::after { left: 50%; margin-left: -1px; }
  .journey__step { padding-left: 0; }
  .journey__marker { left: 50%; margin-left: -10px; }

  /* Each step becomes copy | illustration. The copy stays in normal flow in one
     half (so its lines never spread apart), while the illustration is pinned in
     the other half and vertically centred. min-height reserves the illustration's
     slot so the absolutely-placed media can't overlap the next step. The rail
     runs down the 64px centre gutter (32px clearance each side). The legacy
     engage step keeps its own centred layout, so exclude it throughout. */
  .journey__step:not(.journey__step--engage) .journey__body {
    position: relative; min-height: 300px;
  }
  /* direct children only — docked mocks nest their own p's inside the body */
  .journey__step:not(.journey__step--engage) .journey__body > .journey__num,
  .journey__step:not(.journey__step--engage) .journey__body > h3,
  .journey__step:not(.journey__step--engage) .journey__body > p { width: calc(50% - 32px); }
  .journey__step:not(.journey__step--engage) .journey__body > p { max-width: none; }
  .journey__step:not(.journey__step--engage) .journey__media {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    width: calc(50% - 32px); max-width: 600px;    /* never upscale past the 640px source */
    margin: 0;
  }

  /* alternate: even steps flip the copy to the right, the illustration to the left */
  .journey__step:not(.journey__step--engage):nth-child(even) .journey__body > .journey__num,
  .journey__step:not(.journey__step--engage):nth-child(even) .journey__body > h3,
  .journey__step:not(.journey__step--engage):nth-child(even) .journey__body > p { margin-left: calc(50% + 32px); }
  .journey__step:not(.journey__step--engage):nth-child(even) .journey__media { right: auto; left: 0; }

  /* The final "engagement" step is the payoff, not a timeline stop: drop its
     marker and lift it above the rail with the section's own background so the
     rail ends cleanly above it, then centre the copy + self-booking button. */
  .journey__step--engage { position: relative; z-index: 2; background: var(--sage); padding-top: 48px; }
  /* hide the dot but keep its box — step 5's frame-scrub JS reads this marker's
     position as its end bound, and display:none would report top:0 and break it */
  .journey__step--engage .journey__marker { visibility: hidden; }
  .journey__step--engage .journey__body { max-width: 620px; margin-inline: auto; text-align: center; }
  .journey__step--engage .journey__body p { max-width: none; }
}

/* ---------- Journey: capability chips + docked UI mocks (home page) ----------
   The merged how-it-works carries the old feature accordion's job: each step
   names its capability in a chip and docks a live product mock onto the scene
   illustration — the scene sells the moment, the inset proves the product.
   Cards for surfaces (chat, forms, patient summary); a chromeless fragment for
   the recording pill, where the point is how little UI there is. */
.journey__kick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.journey__kick .journey__num { margin-bottom: 0; }
/* Capability labels read as a continuation of the "STEP N" eyebrow — same warm
   step colour, brownish tone to sit a shade under the orange step number — not a
   pill, so they don't collide visually with the product-mock pills in the scene.
   A hairline middot divides the step number from its labels (and multiple labels
   from each other). */
.journey__chip {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-2);
}
.journey__chip::before {
  content: "\00B7"; margin-right: 8px; color: rgba(46, 25, 13, 0.35); font-weight: 700;
}

/* the stack variant hosts an absolutely-docked mock, so it can't clip overflow;
   the seq frames are transparent 16:9 plates, so losing the rounding is moot.
   z-index sits above the engage step's lift (z 2): the phone card hangs below
   its scene, so its downward-opening popover must paint over that step. */
.journey__media--stack { position: relative; overflow: visible; z-index: 3; }
.journey__mock {
  position: absolute; right: 2%; bottom: -18px; width: 58%; max-width: 340px; z-index: 2;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; box-shadow: 0 10px 22px -14px rgba(46, 25, 13, .35);
}
/* mock includes ship wrapped in .fw-mock (display:none inside the accordion
   widget) — inside a journey mock they're always shown */
.journey__mock .fw-mock { display: block; width: 100%; }

/* recording pill — chromeless fragment: the fw-rec pill IS the surface */
.journey__mock--pill {
  left: 6%; right: 6%; bottom: -8px; width: auto; max-width: none;
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
.journey__mock--pill .fw-rec { margin-top: 0; box-shadow: 0 18px 40px -16px rgba(46, 25, 13, .45); }

/* fragment clusters — loose UI elements floating over the scene (no host card),
   same spirit as the recording pill: focus on the elements, not a block */
.journey__mock--frags {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  width: auto; max-width: 60%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.journey__frag {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; color: var(--muted);
  box-shadow: 0 14px 30px -14px rgba(46, 25, 13, .4);
}
.journey__frag b { color: var(--ink); font-weight: 600; }
.journey__frag em { font-style: normal; color: var(--lime-2); font-weight: 700; }
.journey__frag svg { width: 14px; height: 14px; color: var(--lime); flex: 0 0 auto; align-self: center; }
.journey__frag--hi { background: #fff7ec; border-color: #fcd9a4; }
/* stagger the stack sideways so it reads as floating elements, not a column */
.journey__mock--frags .journey__frag:nth-child(1) { margin-right: 16px; }
.journey__mock--frags .journey__frag:nth-child(3) { margin-right: 10px; }
/* forms cluster wraps into loose rows instead of a stack */
.journey__mock--forms { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 66%; }
.journey__mock--forms .journey__frag { margin-right: 0 !important; }

/* fragments pop in one after the other as the step reveals */
.js .journey__frag { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.js .journey__step.is-in .journey__frag { opacity: 1; transform: none; }
.js .journey__step.is-in .journey__frag:nth-child(2) { transition-delay: .18s; }
.js .journey__step.is-in .journey__frag:nth-child(3) { transition-delay: .36s; }
.js .journey__step.is-in .journey__frag:nth-child(4) { transition-delay: .54s; }
.js .journey__step.is-in .journey__frag:nth-child(5) { transition-delay: .72s; }

/* prep brief card (step 1) — "walk in prepared" is the only INVISIBLE capability
   (no photographable act like recording or a form), and its value is consolidation.
   The rich At-a-glance card and a scene compete for the same space (a big card just
   covers the scene), so here the card IS the step's visual — standalone, no scene
   behind it — rather than a docked inset. Mirrors the app brief: titled label · value
   stat table + a highlighted "Today" line. */
.journey__media--brief { background: transparent; overflow: visible; }
.journey__mock--brief { position: static; width: 100%; max-width: 360px; margin: 0 auto; padding: 15px 17px; }
.jbrief__head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--lime-2);
}
.jbrief__spark { color: var(--lime); font-size: .82rem; }
.jbrief__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: .82rem;
}
.jbrief__row .k { color: var(--muted); white-space: nowrap; }
.jbrief__row .v { color: var(--ink); font-weight: 600; text-align: right; }
.jbrief__row .v em { font-style: normal; color: var(--lime-2); }
.jbrief__today {
  margin-top: 9px; padding: 8px 11px; border-radius: 10px;
  background: #fff7ec; border: 1px solid #fcd9a4;
  font-size: .78rem; line-height: 1.45; color: var(--ink);
}
.jbrief__today b { color: var(--lime-2); margin-right: 3px; }
/* rows assemble top-to-bottom as the step reveals — the "brief being gathered" beat */
.js .journey__mock--brief > * { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.js .journey__step.is-in .journey__mock--brief > * { opacity: 1; transform: none; }
.js .journey__step.is-in .journey__mock--brief > :nth-child(2) { transition-delay: .1s; }
.js .journey__step.is-in .journey__mock--brief > :nth-child(3) { transition-delay: .2s; }
.js .journey__step.is-in .journey__mock--brief > :nth-child(4) { transition-delay: .3s; }
.js .journey__step.is-in .journey__mock--brief > :nth-child(5) { transition-delay: .4s; }

/* HEP card (physios step 3) — the accordion's slider thumb is sized for the
   big device frame; inside the docked card it needs to sit in proportion */
.journey__mock .fw-slider__thumb { width: 44px; height: 44px; font-size: 28px; }

/* patient card — phone-ish: narrower, rounder, tighter type. The card carries
   just the title + note, so hide the shared include's "For …" pill and give
   the title the spacing that pill row used to provide. */
.journey__mock--phone { width: 72%; max-width: 380px; border-radius: 22px; padding: 16px 18px; bottom: -73px; box-shadow: none; }
.journey__mock--phone .fw-ihl__head { margin-bottom: 8px; }
.journey__mock--phone .fw-ihl__for { display: none; }
.journey__mock--phone .fw-ihl__title { margin-top: 0; font-size: 1.05rem; }
.journey__mock--phone .fw-ihl__body { font-size: .9rem; line-height: 1.85; }
/* inside the phone the summary sits at the top of the card — drop the term
   popovers BELOW their terms so they never cover the card's own header */
.journey__mock--phone .fw-term__pop { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -4px); }
.journey__mock--phone .fw-term.is-open .fw-term__pop { transform: translate(-50%, 0); }
.journey__mock--phone .fw-term__pop::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink);
}

@media (min-width: 900px) {
  /* the kicker row follows the same half-width + alternating layout as num/h3/p */
  .journey__step:not(.journey__step--engage) .journey__kick { width: calc(50% - 32px); }
  .journey__step:not(.journey__step--engage):nth-child(even) .journey__kick { margin-left: calc(50% + 32px); }
}
@media (max-width: 560px) {
  /* the scene is too short to host a taller card here — drop the mock into
     flow with a slight upward overlap so it still reads as docked */
  .journey__mock { position: static; width: 88%; max-width: 330px; margin: -26px 0 0 auto; padding: 12px; }
  .journey__mock--pill { width: 100%; max-width: none; margin-top: -10px; padding: 0; }
  .journey__mock--frags { width: auto; max-width: none; padding: 0; margin-top: -14px; }
  .journey__frag { font-size: .74rem; padding: 6px 12px; }
  /* brief is standalone (no scene above), so drop the scene-overlap pull-up */
  .journey__mock--brief { width: 100%; max-width: 360px; margin: 4px auto 0; padding: 14px 16px; }
  /* forms chips: drop the icons so two fit per row instead of a long column */
  .journey__mock--forms { gap: 6px; }
  .journey__mock--forms .journey__frag svg { display: none; }
}

/* ---------- Engagement payoff: the loop closes (the follow-up books itself) ----------
   A 6th journey step ("Engagement"). The booking button taps itself via a cursor
   that flies in on scroll, then the closer echoes Step 1 ("already prepared") to
   land the loop. Base state (no .is-play) is a clean static button + closer, so if
   JS or the observer never runs nothing is stranded; .is-play (added by the
   IntersectionObserver in script.js) runs the choreography once on scroll-in. */
.engage { margin-top: 26px; }
/* the cursor flies in from well outside the stage, so the stage itself must not
   clip it; the page-widening guard lives on #how instead, whose edge is the
   full-bleed section, so the cursor only ever clips at the viewport boundary */
#how { overflow-x: clip; }
.engage__stage {
  position: relative; display: flex; justify-content: center;
  padding: 34px 70px; overflow: visible;
  min-height: 120px;
}
.engage__btn {
  position: relative; display: grid; place-items: center;  /* both labels share one cell → width fits the wider one */
  background: var(--ink); color: #fff; font-weight: 650; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; white-space: nowrap; cursor: default;
  box-shadow: 0 12px 26px -10px rgba(46, 25, 13, 0.55);
}
.engage__lbl { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; }
.engage__lbl--done { opacity: 0; }
.engage__ripple {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
}
.engage__cursor {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; z-index: 5;
  transform: translate(420px, -70px); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(40, 25, 15, 0.32));
}
.journey__body .engage__closer {       /* beat .journey__body p (muted, 54ch, left) */
  margin: 26px 0 0; max-width: none; color: var(--ink); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  cursor: pointer;                     /* clicking it scrolls back to the top — the loop closes */
}
.journey__body .engage__closer:hover { text-decoration: underline; text-underline-offset: 3px; }
.engage__loop {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: var(--lime); font-size: 1.05rem; border: 2px solid var(--mint);
  transition: transform .5s ease, color .2s ease, border-color .2s ease;
}
.engage__closer:hover .engage__loop {  /* the ↻ spins on hover, hinting "go round again" */
  transform: rotate(-360deg); color: var(--lime-2); border-color: var(--lime);
}

/* choreography — scroll-scrubbed (.is-scrub, added by JS). Each element runs ONE
   full-timeline animation that is PAUSED; the displayed frame is chosen by a negative
   animation-delay derived from --engp (0→1), which JS feeds from the step's scroll
   position. So the cursor flies in, taps, and the label flips as you scroll down —
   and reverses as you scroll back up. Same trick the per-step image sequences use,
   just expressed in CSS. Base state (no .is-scrub) stays a static button + closer. */
.journey__step--engage.is-scrub .engage__btn,
.journey__step--engage.is-scrub .engage__lbl--book,
.journey__step--engage.is-scrub .engage__lbl--done,
.journey__step--engage.is-scrub .engage__ripple,
.journey__step--engage.is-scrub .engage__cursor,
.journey__step--engage.is-scrub .engage__closer {
  animation-duration: 1s; animation-timing-function: linear;
  animation-fill-mode: both; animation-play-state: paused;
  animation-delay: calc(var(--engp, 0) * -1s);   /* paused + negative delay = scrub to frame --engp */
}
.journey__step--engage.is-scrub .engage__btn       { animation-name: engBtn; }
.journey__step--engage.is-scrub .engage__lbl--book  { animation-name: engBook; }
.journey__step--engage.is-scrub .engage__lbl--done  { animation-name: engDone; }
.journey__step--engage.is-scrub .engage__ripple     { animation-name: engRipple; }
.journey__step--engage.is-scrub .engage__cursor     { animation-name: engCursor; }
.journey__step--engage.is-scrub .engage__closer     { animation-name: engCloser; }

@keyframes engBtn {
  0%   { opacity: 0; transform: scale(.6); }
  8%   { opacity: 0; transform: scale(.6); }
  21%  { opacity: 1; transform: scale(1); }
  50%  { transform: scale(1); }
  56%  { transform: scale(.92); }      /* the press dip, synced to the cursor tap */
  62%  { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes engBook   { 0%, 60% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes engDone   { 0%, 61% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes engRipple {
  0%, 49% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  50%     { opacity: .5; transform: translate(-50%, -50%) scale(.4); }
  62%     { opacity: 0; transform: translate(-50%, -50%) scale(6); }
  100%    { opacity: 0; }
}
@keyframes engCursor {
  0%   { opacity: 0; transform: translate(420px, -70px); }   /* waiting off-stage, right */
  14%  { opacity: 0; transform: translate(420px, -70px); }
  22%  { opacity: 1; }                                        /* fades in as it flies */
  50%  { opacity: 1; transform: translate(-4px, -6px); }      /* lands on the button */
  56%  { transform: translate(2px, 3px) scale(.9); }          /* the tap */
  62%  { opacity: 1; transform: translate(-4px, -6px); }
  80%  { opacity: 1; transform: translate(-4px, -6px); }
  100% { opacity: 0; transform: translate(60px, 40px); }      /* drifts away, booked */
}
@keyframes engCloser { 0%, 80% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* ---------- ACE lead-in story ("why we built it") ---------- */
.ace-story {
  max-width: 56ch; margin: 0 auto 20px; text-align: center;
  color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6;
}
.ace-story strong { color: var(--ink); font-weight: 600; }

.card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 20px; position: absolute;
  will-change: transform, opacity;
}

/* --- Hero card choreography --- */
[data-hero-card] { opacity: 0; }

@keyframes heroEnter1 {
  0%   { opacity: 0; transform: translate3d(-30px, 24px, 0) rotate(-1.5deg) scale(.95); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes heroEnter2 {
  0%   { opacity: 0; transform: translate3d(30px, 24px, 0) rotate(1.5deg) scale(.95); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes heroEnter3 {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0) scale(.85); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroDrift1 { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes heroDrift2 { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 6px, 0); } }
@keyframes heroDrift3 { 0%,100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -4px, 0) scale(1.02); } }

.card--scribe {
  animation:
    heroEnter1 .9s cubic-bezier(.2, .85, .25, 1) .15s both,
    heroDrift1 7s ease-in-out 1.1s infinite;
}
.card--engage {
  animation:
    heroEnter2 .9s cubic-bezier(.2, .85, .25, 1) .4s both,
    heroDrift2 8s ease-in-out 1.4s infinite;
}
.card--kpi {
  animation:
    heroEnter3 .8s cubic-bezier(.2, .85, .25, 1) .65s both,
    heroDrift3 6.5s ease-in-out 1.6s infinite;
}

/* pop animation when KPI cycles */
@keyframes kpiPop {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.kpi--changing [data-kpi-num],
.kpi--changing [data-kpi-desc],
.kpi--changing [data-kpi-suffix],
.kpi--changing [data-kpi-prefix] {
  animation: kpiPop .5s ease both;
}

/* progress bar animates smoothly when --v updates */
.progress__bar { transition: width .9s cubic-bezier(.3,.8,.2,1); }

/* engage row value update pulse */
@keyframes rowPulse {
  0% { background: transparent; }
  20% { background: rgba(230, 138, 84, 0.35); }
  100% { background: transparent; }
}
.engage-row.is-updating {
  animation: rowPulse 1s ease;
  border-radius: 6px;
}
.engage-row b { transition: color .3s ease; }
.engage-row.is-updating b { color: var(--ink-2); }

/* spark line draws in */
.spark polyline { stroke-dasharray: 300; stroke-dashoffset: 300; animation: sparkDraw 1.6s cubic-bezier(.4, 0, .2, 1) 1s forwards; }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .card--scribe, .card--engage, .card--kpi { animation: none; opacity: 1; }
  .spark polyline { animation: none; stroke-dashoffset: 0; }
  .wave span { animation: none; transform: scaleY(.6); }
}
.card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.card__title { flex: 1; font-weight: 600; color: var(--ink); }
.card__time { font-variant-numeric: tabular-nums; }
.card__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot--live { background: var(--lime); box-shadow: 0 0 0 4px rgba(230, 138, 84, 0.25); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(230, 138, 84, 0.25); } 50% { box-shadow: 0 0 0 9px rgba(230, 138, 84, 0); } }
.pill { background: var(--sage); padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--ink); }

.card--scribe { top: 0; left: 0; width: 88%; }
.card--scribe .card__note { font-size: 13px; line-height: 1.6; color: var(--ink); }
.card--scribe .card__note p { margin: 4px 0; }
.typing .caret { display: inline-block; width: 6px; height: 13px; vertical-align: -2px; background: var(--lime); margin-left: 2px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wave { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-bottom: 14px; }
.wave span {
  flex: 1; background: linear-gradient(180deg, var(--lime), var(--mint));
  border-radius: 3px; animation: wave 1.4s ease-in-out infinite;
}
.wave span:nth-child(2) { animation-delay: .1s; }
.wave span:nth-child(3) { animation-delay: .2s; }
.wave span:nth-child(4) { animation-delay: .3s; }
.wave span:nth-child(5) { animation-delay: .4s; }
.wave span:nth-child(6) { animation-delay: .5s; }
.wave span:nth-child(7) { animation-delay: .6s; }
.wave span:nth-child(8) { animation-delay: .7s; }
.wave span:nth-child(9) { animation-delay: .35s; }
.wave span:nth-child(10) { animation-delay: .25s; }
.wave span:nth-child(11) { animation-delay: .15s; }
.wave span:nth-child(12) { animation-delay: .05s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

.card--engage { bottom: 40px; right: 0; width: 64%; }
.progress { height: 8px; background: var(--sage); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.progress__bar { height: 100%; width: var(--v, 50%); background: linear-gradient(90deg, var(--lime), var(--ink)); border-radius: 999px; }
.engage-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.engage-row:last-child { border-bottom: 0; }
.engage-row b { color: var(--ink); }

.card--kpi { bottom: 0; left: 6%; padding: 16px 22px; display: flex; align-items: center; gap: 18px; }
.card--kpi .kpi { display: flex; flex-direction: column; line-height: 1; min-width: 130px; }
.card--kpi .kpi__value {
  font-family: 'Fraunces', serif; font-size: 32px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 1px; line-height: 1;
}
.card--kpi .kpi__desc {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px;
  color: var(--muted); margin-top: 6px; letter-spacing: .02em;
}
.spark { width: 120px; height: 40px; }
.spark polyline { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark--big { width: 100%; height: 80px; }
.spark--big polyline { stroke-width: 2.5; }

/* ---------- Logo strip ---------- */
.strip { padding: 40px 0; background: var(--sage); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip__label { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 20px; letter-spacing: .08em; text-transform: uppercase; }
.strip__logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 56px;
  font-family: 'Fraunces', serif; font-size: 20px; color: var(--ink); opacity: .6;
}
.strip__logos--featured {
  opacity: 1; gap: 16px; align-items: stretch;
}
.strip__logos--featured li {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 14px 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--cream); font-size: 18px; line-height: 1.1;
}
.strip__logos--featured li span {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; color: var(--muted);
}
.strip__primary {
  background: var(--ink) !important; color: var(--cream); border-color: var(--ink) !important;
}
.strip__primary span { color: var(--lime) !important; }
.strip__soon { color: var(--muted); }
.strip__cta {
  text-align: center; font-size: 13px; color: var(--muted);
  margin: 20px 0 0;
}
.strip__cta a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.strip__cta a:hover { border-color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--alt { background: var(--sage); }
.section--dark { background: var(--ink); color: var(--cream); }
.section__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

/* ---------- ACE pillars ---------- */
.ace-section { background: var(--sage); }
.ace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ace-grid--four { grid-template-columns: repeat(4, 1fr); }
.ace-pillar {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px 32px; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ace-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ace-pillar__letter {
  font-family: 'Fraunces', serif; font-weight: 600; font-style: italic;
  font-size: 140px; line-height: 0.85; color: var(--lime);
  position: absolute; top: 10px; right: 20px; opacity: .55;
  pointer-events: none; user-select: none;
}
.ace-pillar h3 {
  font-family: 'Fraunces', serif; font-size: 1.5rem; margin: 0 0 10px;
  position: relative; z-index: 1;
}
.ace-pillar p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted);
  max-width: 28ch; position: relative; z-index: 1;
}

/* Per-pillar tints — Attentive (cool blue), Continuous (warm orange), Empowering (action coral) */
.ace-pillar--attentive  { background: #eef3f8; }
.ace-pillar--attentive  .ace-pillar__letter { color: #5b8aa4; }
.ace-pillar--continuous { background: #fde6d4; }
.ace-pillar--continuous .ace-pillar__letter { color: var(--lime); }
.ace-pillar--empowering { background: #fbe1db; }
.ace-pillar--empowering .ace-pillar__letter { color: #dc5c4e; }
.ace-pillar--care       { background: #e7f0e9; }
.ace-pillar--care       .ace-pillar__letter { color: #6a9a78; }

/* ---------- Features grid ---------- */
.features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px;
}
.feature-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(46, 25, 13, 0.2); }
.feature-card__mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--mint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature-card__mark svg { width: 22px; height: 22px; }
.feature-card h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 4px 0 0; }
.feature-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.features-foot { text-align: center; font-size: 14px; color: var(--muted); margin: 0; }
.features-foot a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.features-foot a:hover { border-color: var(--ink); }

/* ---------- Features tabs (legacy — retained only for spacing if re-enabled) ---------- */
.features {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px;
  background: var(--sage); padding: 8px; border-radius: 999px; max-width: fit-content; margin-inline: auto; margin-bottom: 48px;
}
.feature-tab { padding: 10px 20px; border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--muted); transition: all .2s; }
.feature-tab:hover { color: var(--ink); }
.feature-tab.is-active { background: var(--ink); color: var(--cream); }

.feature-panel { display: none; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-panel.is-active { display: grid; }
.feature-panel h3 { font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 14px; }
.check { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.check li {
  position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5;
}
.check li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--lime);
}
.check li::after {
  content: ''; position: absolute; left: 5px; top: 9px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Feature mocks */
.mock {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock__bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--sage); }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock__body { padding: 24px; font-size: 14px; line-height: 1.6; }
.mock__body h4 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 4px 0 16px; }
.tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); background: var(--lime); padding: 4px 10px; border-radius: 999px; margin: 0 0 8px; }

.mock--phone { display: flex; justify-content: center; background: transparent; border: 0; box-shadow: none; }
.mock__phone {
  width: 280px; background: var(--cream); border-radius: 32px; padding: 28px 22px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); position: relative;
}
.mock__notch { width: 80px; height: 6px; background: var(--ink); border-radius: 999px; margin: -12px auto 18px; }
.mock__phone h4 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 0 0 16px; }
.task { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
.task.done { background: var(--sage); text-decoration: line-through; color: var(--muted); }
.task i { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); align-items: center; justify-content: center; background: var(--cream); font-style: normal; font-size: 12px; }
.task.done i { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.mini { font-size: 13px; color: var(--muted); margin-top: 14px; }
.mini b { color: var(--ink); }

.mock--flow { padding: 28px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; }
.flow span { padding: 10px 16px; background: var(--mint); color: var(--ink); border-radius: 999px; font-size: 13px; font-weight: 500; }
.flow i { color: var(--muted); font-style: normal; }

.mock--dash { padding: 24px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.kpi-grid > div { background: var(--sage); padding: 14px 16px; border-radius: 12px; }
.kpi-grid span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.kpi-grid b { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; }

.roadmap {
  margin-top: 20px; padding: 14px 16px; background: var(--mint);
  border-radius: 12px; font-size: 13px; color: var(--ink); line-height: 1.5;
}
.roadmap b { display: inline; margin-right: 4px; }
.roadmap a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.roadmap a:hover { color: var(--ink-2); }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps li { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; }
.step__num { font-family: 'Fraunces', serif; font-size: 14px; color: var(--lime-2); background: var(--ink); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.steps h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 0 0 8px; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ---------- Practice section ---------- */
.practice { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }
.practice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.practice__grid b { font-family: 'Fraunces', serif; font-size: 1.05rem; display: block; margin-bottom: 4px; }
.practice__grid p { font-size: 14px; color: var(--muted); margin: 0; }
.quote { margin: 0; background: var(--mint); padding: 40px; border-radius: var(--radius-lg); position: relative; }
.quote blockquote { margin: 0 0 16px; font-family: 'Fraunces', serif; font-size: 1.25rem; line-height: 1.4; font-style: italic; }
.quote figcaption { font-size: 13px; color: var(--muted); }

/* ---------- Practice management section ---------- */
.cliniko, .emr { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.cliniko__copy .check, .emr__copy .check { margin-bottom: 24px; }
.cliniko__fine, .emr__fine {
  font-size: 13px; color: var(--muted); padding: 14px 16px;
  background: var(--cream); border: 1px dashed var(--line); border-radius: 12px;
  margin: 0; line-height: 1.5;
}
.cliniko__fine a, .emr__fine a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); }

.mock--sync { padding: 28px; }
.sync-row {
  display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 20px;
}
.sync-app {
  font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600;
  padding: 14px 20px; border-radius: 14px; background: var(--ink); color: var(--cream);
  flex-shrink: 0;
}
.sync-app--cliniko, .sync-app--emr { background: var(--lime); color: var(--ink); }

/* Vendor logo strip under the sync list. Logos are third-party marks in their
   own shapes/colours — greyscale + a fixed box height is what makes eight of
   them read as one row instead of eight competing brands. */
.sync-logos { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.sync-logos__label {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
/* Flex-wrap, not a grid: the marks have wildly different aspect ratios, so
   letting them flow (and centring the last row) beats forcing equal columns. */
.sync-logos ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 26px;
}
.sync-logos li { display: flex; align-items: center; }
/* Fixed height, auto width: several of these are viewBox-only SVGs with no
   intrinsic size, which collapse to 0 inside a flex row unless one axis is set. */
.sync-logos img {
  height: 22px; width: auto; max-width: 124px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55;
}
/* Live-today integrations keep their brand colour and sit at full strength —
   the eye lands on them first without the copy ever singling them out. */
.sync-logos img.is-live { filter: none; opacity: 1; }
/* Marks whose glyphs fill the full cap-height (Nookal's heavy slab) read
   bigger than the others at the same box height — trim them to balance. */
.sync-logos img.is-tall { height: 17px; }
.sync-line {
  flex: 1; height: 2px; background: linear-gradient(90deg, var(--ink), var(--lime));
  position: relative; border-radius: 2px;
}
.sync-dot {
  position: absolute; top: -4px; left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 4px rgba(230, 138, 84, 0.25);
  animation: syncMove 2.4s ease-in-out infinite;
}
@keyframes syncMove {
  0%   { left: 0;    transform: scale(1); }
  45%  { left: calc(100% - 10px); transform: scale(1.1); }
  50%  { left: calc(100% - 10px); transform: scale(1.1); }
  95%  { left: 0;    transform: scale(1); }
  100% { left: 0;    transform: scale(1); }
}

.sync-list { list-style: none; padding: 0; margin: 0; }
.sync-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-radius: 10px; background: var(--sage);
  font-size: 14px; margin-bottom: 8px;
}
.sync-list li i {
  font-style: normal; font-size: 12px; color: var(--ink-2); font-weight: 600;
  background: var(--mint); padding: 4px 10px; border-radius: 999px;
}

/* ---------- Security ---------- */
/* Single column since the claim list was removed — the Trust Center links are
   the evidence. Capped so the lede doesn't run to an unreadable measure. */
.security { display: grid; grid-template-columns: 1fr; gap: 60px; max-width: 640px; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; position: relative; }
.plan h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; margin: 0 0 16px; }
.plan__price { font-family: 'Fraunces', serif; font-size: 3rem; font-weight: 600; margin: 0 0 24px; line-height: 1; }
.plan__price .plan__cur { font-size: 1.4rem; vertical-align: top; margin-right: 2px; font-weight: 600; }
.plan__price .plan__amt { font-size: inherit; font-weight: inherit; }
.plan__price small { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); display: block; margin-top: 6px; }
.plan__price small span { font-size: inherit; font-family: inherit; font-weight: inherit; color: inherit; }
.plan__price--custom { font-size: 2.2rem; }
.plan__price--free { font-size: 2.6rem; }
.plan__price--free small { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); display: block; margin-top: 6px; }

/* Make sure the /month line stays legible on the dark featured card */
.plan--featured .plan__price small,
.plan--featured .plan__price small span {
  color: rgba(255, 250, 248, 0.75);
}

/* Billing toggle */
.billing-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 40px;
  background: var(--sage); border-radius: 999px;
  justify-content: center; align-items: center;
}
.section .billing-toggle { display: flex; max-width: fit-content; margin-left: auto; margin-right: auto; }
.billing-toggle__opt {
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14px;
  color: var(--muted); transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle__opt:hover { color: var(--ink); }
.billing-toggle__opt.is-active { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-sm); }
.billing-toggle__badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--lime); color: var(--ink); letter-spacing: .04em;
}
.billing-toggle__opt.is-active .billing-toggle__badge { background: var(--lime); color: var(--ink); }

/* Smooth price swap */
.plan__amt { display: inline-block; transition: opacity .2s ease; }
.plan__amt.is-swapping { opacity: 0; }
.plan .check { margin-bottom: 28px; flex: 1; }
.plan--featured { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-8px); }
.plan--featured h3, .plan--featured .plan__price { color: var(--cream); }
.plan--featured .check li { color: var(--cream); }
.plan--featured .check li::before { background: var(--lime); }
.plan--featured .btn--primary { background: var(--lime); color: var(--ink); }
.plan--featured .btn--primary:hover { background: var(--lime-2); color: var(--ink); }
.plan__tag { position: absolute; top: -12px; left: 28px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); padding: 96px 0; color: var(--cream); }
.cta__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.cta__form { display: flex; flex-direction: column; gap: 12px; }
.cta__form input {
  padding: 16px 20px; border-radius: 999px; border: 1px solid rgba(255, 250, 248, 0.2);
  background: rgba(255, 250, 248, 0.06); color: var(--cream); font: inherit;
}
.cta__form input::placeholder { color: rgba(255, 250, 248, 0.5); }
.cta__form input:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.cta__ok { color: var(--lime); font-size: 14px; margin: 4px 0 0; }
.cta__alt { color: rgba(255, 250, 248, 0.7); font-size: 14px; margin: 4px 0 0; }
.cta__alt a { color: var(--lime); text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 250, 248, 0.7); padding: 64px 0 24px; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 250, 248, 0.1); }
.footer__brand p { margin: 16px 0 0; font-size: 14px; max-width: 32ch; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__cols h5 { color: var(--cream); margin: 0 0 14px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.footer__cols a { display: block; font-size: 14px; padding: 4px 0; }
.footer__cols a:hover { color: var(--cream); }
.footer__base { display: flex; justify-content: space-between; padding-top: 20px; font-size: 13px; }
.footer__base a { color: var(--lime); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --nav-h: 67px; }  /* hamburger nav is shorter than the desktop bar */
  .nav__links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--cream); flex-direction: column; padding: 20px 24px; border-bottom: 1px solid var(--line); gap: 12px; }
  .nav__links.is-open { display: flex; }
  .nav__inner { gap: 16px; }
  .nav__cta .btn--ghost { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__toggle { display: flex; }
  .hero__copy { max-width: none; }
  .feature-panel.is-active { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .practice, .security, .cta__inner, .footer__inner, .cliniko, .emr { grid-template-columns: 1fr; gap: 40px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ace-grid { grid-template-columns: 1fr; gap: 16px; }
  .ace-grid--four { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section__head { margin-bottom: 32px; }
  .hero { min-height: 520px; }
  .hero__inner { padding-top: 84px; padding-bottom: 28px; }
  .h1 { font-size: 2.1rem; line-height: 1.1; }
  .h2 { font-size: 1.65rem; }
  .lede { font-size: .98rem; margin-bottom: 20px; }
  .nav__inner { padding: 12px 20px; gap: 10px; }
  .nav__cta .btn--primary { padding: 10px 16px; font-size: 14px; }
  .hero__cta { gap: 10px; margin-bottom: 24px; }
  .hero__cta .btn--lg { padding: 14px 22px; }
  .hero__proof { gap: 16px 24px; padding-top: 18px; }
  .hero__proof strong { font-size: 22px; }
  .card--scribe { width: 92%; padding: 16px; }
  .card--scribe .card__note { font-size: 12px; }
  .card--engage { width: 72%; padding: 16px; }
  .card--kpi { padding: 12px 16px; gap: 12px; }
  .strip { padding: 28px 0; }
  .strip__logos--featured { gap: 10px; }
  .strip__logos--featured li { padding: 10px 14px; font-size: 15px; }
  .steps, .kpi-grid, .practice__grid, .badges, .features-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 22px 20px; gap: 10px; }
  .ace-grid--four { grid-template-columns: 1fr; }
  .ace-pillar { padding: 28px 22px 24px; }
  .ace-pillar__letter { font-size: 100px; top: 4px; right: 14px; }
  .plan { padding: 24px 22px; }
  .plan__price { font-size: 2.4rem; }
  .plan__price--free { font-size: 2.2rem; }
  .quote { padding: 28px 24px; }
  .quote blockquote { font-size: 1.05rem; }
  .cta { padding: 64px 0; }
  .footer { padding: 48px 0 20px; }
  .footer__inner { padding-bottom: 32px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__base { flex-direction: column; gap: 8px; }
  .billing-toggle { margin-bottom: 28px; }
  .billing-toggle__opt { padding: 8px 14px; font-size: 13px; }
  .mock--sync { padding: 20px; }
  .sync-app { padding: 10px 14px; font-size: 18px; }
}

/* =========================================================
   FAQ accordion (used on /pricing/)
   ========================================================= */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; transition: border-color .18s ease, box-shadow .18s ease;
}
.faq__item[open] { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.faq__item > summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: '+'; font-family: 'Fraunces', serif; font-size: 24px; line-height: 1;
  color: var(--ink-2); transition: transform .25s ease;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage); border-radius: 50%;
}
.faq__item[open] > summary::after { content: '−'; background: var(--lime); color: var(--ink); }
.faq__item p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.faq__item p a { color: var(--ink); border-bottom: 1px solid var(--line); font-weight: 600; }
.faq__item p a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* Pricing hero — slim top section above the calculator on /pricing/ */
.pricing-hero { padding-bottom: 24px; }
.pricing-hero .section__head { margin-bottom: 0; }

/* =========================================================
   Pricing section extras (divider + footer link)
   ========================================================= */
.pricing__divider {
  display: flex; align-items: center; gap: 18px;
  margin: 56px 0 28px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pricing__divider::before,
.pricing__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.pricing__divider span { white-space: nowrap; }
.pricing__foot {
  text-align: center; margin: 32px 0 0; color: var(--muted); font-size: 15px;
}
.pricing__foot a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.pricing__foot a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* =========================================================
   Savings calculator
   ========================================================= */
.calc {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

/* ---- Inputs side ---- */
.calc__inputs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.calc__inputs-head { display: flex; flex-direction: column; gap: 6px; }
.calc__inputs-head .eyebrow { margin-bottom: 4px; }
.calc__h3 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.4rem; line-height: 1.15; margin: 0;
  letter-spacing: -0.01em;
}

.calc-field { display: flex; flex-direction: column; gap: 10px; }
.calc-field__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.calc-field__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc-field__hint  { font-size: 12px; color: var(--muted); }
.calc-field__value {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1; color: var(--ink);
  background: var(--mint); padding: 4px 12px; border-radius: 999px;
  min-width: 52px; text-align: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.calc-field__value.is-pop { animation: calcPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes calcPop {
  0%   { transform: scale(1);   background: var(--mint); }
  40%  { transform: scale(1.12); background: rgba(230, 138, 84, 0.25); }
  100% { transform: scale(1);   background: var(--mint); }
}

/* ---- Custom range slider ---- */
.calc-slider {
  position: relative;
  height: 28px;
  display: flex; align-items: center;
}
.calc-slider::before {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 6px; transform: translateY(-50%);
  background: var(--sage); border-radius: 999px;
}
.calc-slider__fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-2), var(--lime));
  transition: width .18s ease;
  pointer-events: none;
}
.calc-slider input[type="range"] {
  position: relative; z-index: 2;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; margin: 0; padding: 0;
}
.calc-slider input[type="range"]:focus { outline: none; }
.calc-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.calc-slider input[type="range"]::-moz-range-track             { background: transparent; height: 28px; }
.calc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--ink);
  margin-top: 3px;
  box-shadow: 0 4px 10px -2px rgba(46, 25, 13, 0.25);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.calc-slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15); cursor: grabbing;
  box-shadow: 0 0 0 8px rgba(230, 138, 84, 0.18), 0 4px 10px -2px rgba(46, 25, 13, 0.25);
}
.calc-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(230, 138, 84, 0.28), 0 4px 10px -2px rgba(46, 25, 13, 0.25);
}
.calc-slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--ink);
  box-shadow: 0 4px 10px -2px rgba(46, 25, 13, 0.25);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.calc-slider input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.15); cursor: grabbing;
  box-shadow: 0 0 0 8px rgba(230, 138, 84, 0.18), 0 4px 10px -2px rgba(46, 25, 13, 0.25);
}
.calc-slider__ticks {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); padding: 2px 2px 0;
  font-variant-numeric: tabular-nums;
}

/* ---- Multi-select pills ---- */
.calc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 10px; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.calc-pill:hover { border-color: var(--ink); transform: translateY(-1px); }
.calc-pill__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--cream); color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.calc-pill__check svg { width: 11px; height: 11px; }
.calc-pill.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.calc-pill.is-on .calc-pill__check {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
}
.calc-pill.is-bump { animation: calcBump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes calcBump {
  0%   { transform: translateY(0)     scale(1); }
  40%  { transform: translateY(-2px)  scale(1.06); }
  100% { transform: translateY(0)     scale(1); }
}

/* ---- Output side ---- */
.calc__output {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(230, 138, 84, 0.18), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--cream);
  display: flex; flex-direction: column;
  isolation: isolate;
}
.calc__output-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.calc__blob {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .6;
  animation: calcFloat 14s ease-in-out infinite alternate;
}
.calc__blob--a { width: 240px; height: 240px; background: rgba(230, 138, 84, 0.45); top: -60px; right: -40px; }
.calc__blob--b { width: 200px; height: 200px; background: rgba(245, 217, 196, 0.35); bottom: -60px; left: -40px; animation-delay: -6s; }
@keyframes calcFloat {
  0%   { transform: translate3d(0, 0, 0)         scale(1); }
  100% { transform: translate3d(20px, -16px, 0)  scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .calc__blob { animation: none; } }

.calc__output-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.calc__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lime);
  background: rgba(230, 138, 84, 0.15); padding: 5px 11px; border-radius: 999px; align-self: flex-start;
}
.calc__hero {
  margin: 4px 0 0;
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 3.8rem); line-height: 1; color: var(--cream);
  letter-spacing: -0.025em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.calc__hero-num {
  background: linear-gradient(180deg, var(--cream) 0%, var(--lime) 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.calc__hero-unit {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
  color: rgba(255, 250, 248, 0.7); letter-spacing: 0;
}
.calc__hero-sub {
  margin: 0; font-size: 14px; color: rgba(255, 250, 248, 0.75);
}
.calc__hero-sub strong {
  color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums;
}

.calc__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px;
}
.calc-card {
  position: relative;
  background: rgba(255, 250, 248, 0.07);
  border: 1px solid rgba(255, 250, 248, 0.12);
  border-radius: var(--radius);
  padding: 14px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
  backdrop-filter: blur(6px);
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.calc-card:hover { background: rgba(255, 250, 248, 0.11); transform: translateY(-2px); border-color: rgba(255, 250, 248, 0.22); }
.calc-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(230, 138, 84, 0.18); color: var(--lime);
}
.calc-card__icon svg { width: 16px; height: 16px; }
.calc-card__big {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: rgba(255, 250, 248, 0.8); line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
}
.calc-card__big strong {
  font-family: 'Fraunces', serif; font-size: 1.55rem; font-weight: 600;
  color: var(--cream); letter-spacing: -0.01em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-card__sub { font-size: 12px; color: rgba(255, 250, 248, 0.55); margin-top: auto; }

.calc__foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.calc__foot .btn--primary { background: var(--lime); color: var(--ink); align-self: flex-start; }
.calc__foot .btn--primary:hover { background: var(--lime-2); color: var(--ink); }
.calc__fine { margin: 0; font-size: 11.5px; color: rgba(255, 250, 248, 0.5); }

/* Empty state when no appointment lengths are selected */
.calc.is-empty .calc__hero-num,
.calc.is-empty .calc-card__big strong,
.calc.is-empty .calc__hero-sub strong {
  opacity: .35;
}
.calc.is-empty .calc__hero::after {
  content: 'Pick at least one appointment length';
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--lime); align-self: center;
  background: rgba(230, 138, 84, 0.15); padding: 5px 11px; border-radius: 999px;
}

/* Subtle pulse on result update */
.calc__output.is-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(230, 138, 84, 0.35);
  animation: calcPulse .55s ease-out;
  pointer-events: none; z-index: 2;
}
@keyframes calcPulse {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .calc__output.is-pulse::before { display: none; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .calc__cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .calc { padding: 18px; border-radius: var(--radius); }
  .calc__output { padding: 22px; border-radius: var(--radius); }
  .calc__h3 { font-size: 1.2rem; }
  .calc__hero { font-size: 2.4rem; gap: 8px; }
  .calc-card__big strong { font-size: 1.35rem; }
}

/* =========================================================
   Feature widget — accordion + swapping product mockup
   ========================================================= */
#features { overflow: hidden; }   /* contain the device's left bleed */
.feature-widget {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center;
}
.feature-widget__stage { position: relative; display: flex; align-items: center; min-width: 0; min-height: 420px; }
/* organic warm glow behind the device — no hard box edge */
.feature-widget__stage::before {
  content: ""; position: absolute; z-index: 0; inset: -14% -10% -16% -16%;
  background:
    radial-gradient(58% 56% at 38% 32%, rgba(230, 138, 84, .30), transparent 70%),
    radial-gradient(56% 56% at 78% 82%, rgba(245, 217, 196, .65), transparent 72%);
  filter: blur(40px); pointer-events: none;
}
.feature-widget__list { display: flex; flex-direction: column; }

/* full-bleed product window: a real screen, tilted, bleeding off the left edge */
.fw-device {
  position: relative; z-index: 1; width: 112%; margin-left: -12%;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
}
/* docs cards bleed beyond the frame, so the frame no longer clips; only the
   scrolling scribe transcript needs its own clip. */
.fw-device__screen { border-radius: 0 0 20px 20px; }
.fw-device__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(#fff, #fdf6f1); border-radius: 20px 20px 0 0; }
.fw-device__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.fw-device__bar i:first-child { background: #e2735a; }
.fw-device__bar i:nth-child(2) { background: #e9b24e; }
.fw-device__bar i:nth-child(3) { background: #5fb07a; }
/* fixed height so swapping tabs never resizes the device; content centered */
.fw-device__screen { position: relative; padding: 26px; height: 472px; display: flex; flex-direction: column; justify-content: center; }

.fw-item { border-top: 1px solid var(--line); }
.fw-item:first-child { border-top: 0; }
.fw-item__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; text-align: left; }
.fw-item__title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.25rem; }
.fw-item__chev { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .25s ease; opacity: .5; }
.fw-item.is-open .fw-item__chev { transform: rotate(180deg); opacity: 1; }
.fw-item__body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .28s ease; }
.fw-item.is-open .fw-item__body { grid-template-rows: 1fr; }
.fw-item__bodyinner { min-height: 0; overflow: hidden; }
.fw-item__body p { margin: 0 0 14px; color: var(--muted); }
.fw-langs { display: block; font-family: 'Fraunces', serif; font-style: italic; color: var(--lime-2); padding-bottom: 4px; }
.fw-langs span { margin-right: 12px; }
.fw-cta { align-self: flex-start; margin-top: 20px; }

.fw-mock { display: none; width: 100%; }
.fw-mock.is-active { display: block; animation: fwFade .32s ease both; }
@keyframes fwFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the device frame IS the surface now — inner card is just a content wrapper */
.fw-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.fw-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .9rem; margin-bottom: 8px; }
.fw-row--sub { color: var(--muted); font-size: .84rem; }
.fw-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--sage); flex: 0 0 auto; }

/* scribe mock — recording pill, mirrors the webapp CaptureControls:
   mic · mono timer · scrolling live transcript · pause · stop, in an
   animated audio-reactive orange border. */
.fw-rec { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 18px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 8px; overflow: hidden; }
.fw-rec > * { position: relative; z-index: 1; }
.fw-rec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; padding: 1.5px;
  background: linear-gradient(90deg, var(--lime), #f6c2a0, var(--lime)); background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: fwBorder 2.6s linear infinite; pointer-events: none;
}
@keyframes fwBorder { to { background-position: -200% 0; } }
.fw-rec__mic { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sage); color: var(--ink); flex: 0 0 auto; }
.fw-rec__mic svg { width: 16px; height: 16px; }
.fw-rec__time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--ink); flex: 0 0 auto; }
.fw-rec__stream { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.fw-rec__streamtext { display: inline-block; white-space: nowrap; font-size: .76rem; color: var(--muted); padding-left: 100%; animation: fwStream 30s linear infinite; }
.fw-rec__streamtext b { font-weight: 600; color: var(--ink); }
@keyframes fwStream { to { transform: translateX(-100%); } }
.fw-rec__btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); flex: 0 0 auto; }
.fw-rec__btn svg { width: 15px; height: 15px; }
.fw-rec__btn--stop { background: #dc2626; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .fw-rec__streamtext { animation: none; padding-left: 0; }
  .fw-rec::before { animation: none; }
}

/* docs mock — overlapping floating cards: a generated care plan, a document
   menu, and a visit summary. Headers are real; bodies are skeleton bars.
   Cards float past the device edge for a layered, popped-out look. */
.fw-docs { position: relative; height: 432px; }
.fw-doc {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(60, 40, 30, .55);
}

/* skeleton placeholder bars (real text is reserved for headers only) */
.fw-sk { display: block; height: 9px; border-radius: 5px; background: var(--sage); }
.fw-sk--gap { margin-top: 8px; }

/* main: generated care plan — floats off the LEFT edge */
.fw-doc--letter { top: 12px; left: -10%; width: 62%; padding: 16px 18px; z-index: 2; }
.fw-doc__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.fw-doc__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.fw-doc__title svg { width: 14px; height: 14px; color: var(--muted); }
.fw-doc__tools { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.fw-doc__tools svg { width: 16px; height: 16px; }
.fw-doc__body { display: flex; flex-direction: column; gap: 12px; }

.fw-doc--menu { top: 22px; right: -10%; width: 60%; padding: 7px; z-index: 3; }
.fw-doc__menutitle { font-weight: 600; font-size: .86rem; padding: 7px 10px 10px; }
.fw-menu__row { display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 9px; font-size: .82rem; color: var(--ink); white-space: nowrap; }
.fw-menu__row + .fw-menu__row { border-top: 1px solid var(--line); }
.fw-menu__row svg { width: 15px; height: 15px; color: var(--lime); flex: 0 0 auto; }

/* visit summary — floats off the LEFT-bottom corner */
.fw-doc--summary { left: -6%; width: 58%; bottom: -30px; padding: 15px 17px; z-index: 4; }
.fw-sum__head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; margin-bottom: 14px; }
.fw-sum__head svg { width: 13px; height: 13px; color: var(--muted); }
.fw-sum__body { display: flex; flex-direction: column; gap: 12px; }

/* hep mock */
.fw-vid { position: relative; aspect-ratio: 16/9; border-radius: 10px; background: linear-gradient(135deg, #d8c3b3, var(--mint)); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.fw-vid__play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: .8rem; }
.fw-hepmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fw-hepmeta strong { font-size: .96rem; }
.fw-hepmeta span { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.fw-prom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; }
.fw-slider { position: relative; height: 8px; border-radius: 999px; background: var(--sage); margin: 18px 0 8px; }
.fw-slider__fill { position: absolute; left: 0; top: 0; height: 100%; width: 58%; border-radius: 999px; background: var(--lime); }
.fw-slider__thumb { position: absolute; left: 58%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: 48px; line-height: 1; z-index: 2; }

/* agent mock */
.fw-chat { display: flex; flex-direction: column; gap: 8px; }
.fw-bub { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .84rem; line-height: 1.4; }
.fw-bub--you { align-self: flex-end; background: var(--lime); color: #fff; border-bottom-right-radius: 4px; }
.fw-bub--ai { align-self: flex-start; background: var(--sage); color: var(--ink); border-bottom-left-radius: 4px; }

/* Patient Health Literacy mock — a patient-facing visit summary. JS (the
   [data-ihl] block in script.js) drives three phases by toggling classes:
   1. .is-scanning — the whole body shimmers with the rainbow IHL gradient
      (ported verbatim from the webapp's RainbowOverlay).
   2. terms settle into amber "?" pills (the persistent inline IHL hashes).
   3. .is-open on a term reveals its plain-language explanation popover. */
.fw-ihl__head { margin-bottom: 14px; }
.fw-ihl__for { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--lime); background: rgba(230, 138, 84, 0.14); padding: 3px 9px; border-radius: 999px; }
.fw-ihl__title { display: block; margin-top: 10px; font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.fw-ihl__body { margin: 0; font-size: .98rem; line-height: 1.95; color: var(--ink); }

/* phase 1 — rainbow scan over every text descendant of the body */
@keyframes fwRainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.fw-ihl.is-scanning .fw-ihl__body,
.fw-ihl.is-scanning .fw-ihl__body * {
  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: fwRainbow 2.4s ease-in-out infinite;
}
/* while scanning the pills read as plain prose — strip the chrome and "?" badge
   but DON'T blank the background: the rainbow rule above paints the term text
   too, so the words being improved stay visible (just shimmering) all the way
   through the scan, then pop into pills when it settles. */
.fw-ihl.is-scanning .fw-term { border-color: transparent; padding: 0; }
.fw-ihl.is-scanning .fw-term__q { opacity: 0; width: 0; margin: 0; padding: 0; }

/* phase 2 — terms as clickable amber pills with a "?" badge */
.fw-term {
  position: relative; white-space: nowrap; border-radius: 7px;
  border: 1px solid #fcd9a4; background: #fff7ec; color: #0369a1;
  padding: 1px 5px; transition: background .2s ease, border-color .2s ease;
}
.fw-term:hover { background: #fdeccd; }
.fw-term__q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; vertical-align: text-top;
  border-radius: 50%; background: var(--lime); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 1;
  transition: opacity .25s ease .15s, width .2s ease;
}
.fw-term__q:hover { background: var(--lime-2); }

/* phase 3 — explanation popover above the tapped term */
.fw-term__pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
  width: 232px; transform: translate(-50%, 4px);
  background: var(--ink); color: var(--cream); text-align: left;
  font-size: .78rem; line-height: 1.5; white-space: normal;
  padding: 11px 13px; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(46, 25, 13, .7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.fw-term__pop b { color: #fff; }
.fw-term__pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--ink);
}
.fw-term.is-open .fw-term__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fw-term.is-open { background: #fdeccd; border-color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .fw-ihl.is-scanning .fw-ihl__body,
  .fw-ihl.is-scanning .fw-ihl__body * { animation: none; }
}

@media (max-width: 860px) {
  .feature-widget { grid-template-columns: 1fr; gap: 0; }
  .feature-widget__list { order: 1; }
  /* JS moves the device inside the open accordion panel, so the stage is empty */
  .feature-widget--js .feature-widget__stage { display: none; }
  /* no-JS fallback: device stays in the stage below the list */
  .feature-widget__stage { min-height: 0; order: 2; margin-top: 32px; }
  /* inside the accordion: flat, no bleed/tilt, content-height; inset so the
     drop shadow isn't clipped by the panel's overflow and there's a gap below */
  .fw-device { width: auto; transform: none; margin: 16px 10px 30px; }
  .fw-device__screen { height: auto; padding: 22px; display: block; }
}
@media (max-width: 560px) {
  .fw-item__title { font-size: 1.1rem; }
  .fw-device__screen { padding: 18px; }
}

/* =========================================================
   /cliniko/ — PMS landing page
   One block lives only on this page: the integration split —
   copy left, one product capture right.
   ========================================================= */

/* Hero with two CTAs side by side. The second sits on the video, so it needs
   a light outline instead of the page-surface ghost treatment. */
.hero__cta--pair { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--ghost-light { color: #fff; border-color: rgba(255, 250, 248, 0.45); background: rgba(255, 250, 248, 0.08); backdrop-filter: saturate(1.2) blur(6px); }
.btn--ghost-light:hover { background: rgba(255, 250, 248, 0.18); }

/* Integration split — copy left, one product capture right. The image column
   takes the larger share: it's a wide screenshot, and every point it loses to
   the copy comes straight off the legibility of the pill and panel inside it. */
.pmsx { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 48px; align-items: center; }
.pmsx__copy .lede { margin-bottom: 0; }
.pmsx__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.pmsx__shot { min-width: 0; }

/* Unretouched product captures get a real border + lift — they should read as
   windows, not as illustrations. */
.shot { margin: 0; }
.shot img, .shot video { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; }
.shot figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.shot figcaption strong { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .pmsx { grid-template-columns: 1fr; gap: 36px; }
}