/* ========== FONTS — self-hosted (latin subset, woff2 only) ==========
 * Pulled from Google Fonts once and committed under /assets/fonts/.
 * Removes the 300–800 ms penalty of fonts.googleapis.com on every visit and
 * keeps Tely off the Google CDN allowlist in our CSP.
 * size-adjust + ascent/descent overrides keep CLS near zero by matching the
 * fallback (Georgia / system-ui) metrics to the webfont metrics. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/manrope-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/newsreader-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/newsreader-500.woff2') format('woff2');
}

/* ========== RESET & TOKENS ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #fffefb;
  --warm: #faf7f0;
  --warm2: #f5f2ec;
  --ink: #0a111a;
  --muted: #6b6860;
  --muted2: #616161;
  --border: #d4d2cb;
  --border2: #ece9e0;
  --cyan: #06b6d4;
  --green: #76cd4d;
  --white: #ffffff;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --max: 1240px;
  --gutter: 80px;

  /* ---- Typography tokens ----
     Section heading (Newsreader Light, fluid up to 46px, tight line-height).
     Applied on home HIW step h2 and featured customer-stories card h3. */
  --fs-section-title: clamp(32px, 3.2vw, 46px);
  --lh-section-title: 1.1;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ========== NAV ========== */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  /* Align nav with .hero-content / .trust-strip (156 px) so the logo sits on
     the same left vertical as the H1 / paragraph / button / trust line, and
     the actions block ends on the same right vertical. */
  padding: 32px 156px 0;
  background: transparent;
  /* Smooth transition when the backdrop fades in on scroll. */
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* ---- Scroll-pinned nav: outer bar stays transparent, only the centered
   nav-links group becomes an Apple-style frosted-glass capsule ---- */
body.is-scrolled .nav {
  position: fixed;
  padding-top: 16px;
  padding-bottom: 16px;
  background: transparent;        /* no full-width bar */
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.is-scrolled.has-light-nav .nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner {
  display: flex; align-items: center;
  width: 100%;
  position: relative;
  /* Soft fade-in of the frosted pill when .is-scrolled toggles (was abrupt). */
  transition: background .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease,
              box-shadow .4s ease, padding .4s ease, border-radius .4s ease;
}
.nav-logo {
  margin-right: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-logo-img {
  height: 50px; width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
/* Two-variant logo: --default is the white-text version (used on the dark
   hero), --ink is the dark-text version (used on the scrolled glass capsule
   and on any light-bg page like blog / article). */
.nav-logo-img--ink {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
/* Show ink logo only when the nav sits over a LIGHT section.
   `body.nav-over-dark` (set from JS) cancels the swap so the white-text
   logo stays visible while the hero / CTA video bg is behind the nav. */
body.is-scrolled:not(.nav-over-dark) .nav-logo-img--default,
body.has-light-nav:not(.nav-over-dark) .nav-logo-img--default {
  opacity: 0;
}
body.is-scrolled:not(.nav-over-dark) .nav-logo-img--ink,
body.has-light-nav:not(.nav-over-dark) .nav-logo-img--ink {
  opacity: 1;
}

.nav-links {
  display: flex; align-items: center; gap: 24px;
  position: absolute; left: 50%; transform: translateX(-50%);
  /* Smooth fade-in of the frosted capsule on scroll. Fully rounded
     (999 px) — the Apple-style pill. */
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0.5px solid transparent;
  box-shadow: 0 0 0 rgba(10, 17, 26, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

/* ---- Scrolled: links wrap themselves into a floating Apple-glass card ----
   Logo and Book-a-Demo button stay outside the card — it starts ≥16 px from
   the logo's right edge and ends ≥16 px from the button's left edge.
   Lighter background + hairline border for a subtler glass look. */
body.is-scrolled .nav-links {
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 6px 18px rgba(10, 17, 26, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
/* When the capsule appears, switch link text to ink for readability on white */
body.is-scrolled .nav-link {
  color: var(--ink);
}
/* …unless the capsule sits over a dark section (.hero / .cta / .case-hero) —
   keep the links white so they stay readable against the dark backdrop. */
body.is-scrolled.nav-over-dark .nav-link {
  color: var(--white);
}
body.is-scrolled .nav-link-dropdown svg { opacity: 0.8; }

/* ---- Scrolled Book-a-Demo: solid ink pill ----
   Same dark color as the ink logo and case-study buttons. No transparency
   so it stays punchy on light page sections. */
body.is-scrolled .nav-demo {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: 0 6px 18px rgba(10, 17, 26, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.is-scrolled .nav-demo:hover { background: #1c2632; border-color: #1c2632; }
body.is-scrolled .nav-demo-arrow {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}
/* Over dark sections (hero / CTA video / case hero) flip back to the
   light glass treatment so the button doesn't disappear into the dark bg. */
body.is-scrolled.nav-over-dark .nav-demo {
  background: rgba(255, 255, 255, 0.35);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 6px 18px rgba(10, 17, 26, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
body.is-scrolled.nav-over-dark .nav-demo:hover { background: rgba(255, 255, 255, 0.55); }
body.is-scrolled.nav-over-dark .nav-demo-arrow {
  background: rgba(10, 17, 26, 0.1);
  color: var(--ink);
}

.nav-link {
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--white); letter-spacing: -0.4px;
  transition: color 0.3s ease, opacity 0.3s; white-space: nowrap;
}
.nav-link:hover { opacity: 0.7; }
.nav-link-dropdown { display: flex; align-items: center; gap: 2px; }
.nav-link-dropdown svg { opacity: 0.7; }

.nav-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.nav-login {
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--white); letter-spacing: -0.4px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50px; padding: 12px 22px;
  transition: all 0.3s; white-space: nowrap;
}
.nav-login:hover { background: rgba(255,255,255,0.1); }
.nav-demo {
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--ink); letter-spacing: -0.4px; line-height: 1;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px; padding: 12px 22px;
  display: inline-flex; align-items: center; gap: 11px;
  transition: all 0.3s; white-space: nowrap;
}
.nav-demo:hover { background: rgba(255,255,255,0.85); }
.nav-demo-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(10,17,26,0.1);
  color: var(--ink);
  flex-shrink: 0;
}
.nav-demo-arrow svg { display: block; }

/* Burger button — hidden on desktop, shown on mobile/tablet */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  cursor: pointer;
  margin-left: auto;
  transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  z-index: 102;
}
.nav-burger:hover { background: rgba(255,255,255,0.2); }
.nav-burger-line {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}
body.nav-open .nav-burger-line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-burger-line:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
body.has-light-nav .nav-burger { background: rgba(10,17,26,0.06); border-color: rgba(10,17,26,0.2); }
body.has-light-nav .nav-burger-line { background: var(--ink); }

/* Drawer */
.nav-drawer {
  position: fixed; top: 0; right: 0; left: 0;
  width: 100%; max-width: none;
  height: 100vh; height: 100dvh;
  background: var(--warm);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 101;
  display: none;
  overflow-y: auto;
}
body.nav-open .nav-drawer { transform: translateX(0); }
.nav-drawer-inner {
  display: flex; flex-direction: column; gap: 0;
  padding: 110px 32px 40px;
}
.nav-drawer-link {
  font-family: var(--sans); font-weight: 400; font-size: 22px;
  color: var(--ink); padding: 20px 0;
  border-bottom: 1px solid rgba(10,17,26,0.1);
  transition: opacity 0.2s;
}
.nav-drawer-link:hover { opacity: 0.6; }
.nav-drawer-login {
  margin-top: 32px;
  padding: 14px 22px; text-align: center;
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--ink); border: 1px solid var(--ink);
  border-radius: 50px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.nav-drawer-login:hover { background: var(--ink); color: var(--warm); }
.nav-drawer-demo {
  /* Default: Login is hidden, so demo is the first action — open a big gap
     from the last menu link. */
  margin-top: 40px;
  padding: 14px 22px; text-align: center;
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--warm); background: var(--ink);
  border-radius: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: opacity 0.2s;
}
/* When Login button is visible right above, tighten to button-cluster spacing. */
.nav-drawer-login + .nav-drawer-demo { margin-top: 12px; }
.nav-drawer-demo:hover { opacity: 0.85; }
.nav-drawer-demo .nav-demo-arrow {
  background: rgba(255,255,255,0.18);
  color: var(--warm);
}
body.nav-open .nav-burger {
  background: rgba(10,17,26,0.06);
  border-color: rgba(10,17,26,0.2);
}
body.nav-open .nav-burger-line { background: var(--ink); }

@media (max-width: 1200px) {
  .nav { padding: 32px 48px 0; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer { display: block; }
  .nav { padding: 40px 36px 0; }
}
body.nav-open { overflow: hidden; }

/* ========== HERO BUTTON ========== */
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px;
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  background: var(--white); color: var(--ink);
  border-radius: 8px; transition: background 0.3s; white-space: nowrap;
}
.hero-btn:hover { background: #f0eeea; }

/* ========== 1. HERO ========== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* On narrow viewports the subject sits on the right of the photo — shift
   the crop so his face doesn't get clipped at the right edge. */
@media (max-width: 768px) {
  .hero-bg img { object-position: 72% top; }
}
@media (max-width: 480px) {
  .hero-bg img { object-position: 66% top; }
}
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 48%, rgba(0,0,0,0) 100%); }
.hero-content {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: flex-end;
  padding: 140px 156px 96px;
  width: 100%;
}
.hero-left { max-width: 713px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero-h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(29px, 2.96vw, 43px);
  line-height: 1.19; color: var(--white);
}
/* Structural "line" spans replace <br> inside the H1 so screen readers and
   AI engines see a single coherent headline. */
.hero-h1 > .hero-h1-line { display: block; }
/* Second physical line holds "from" + the rotating engine logo. Flex with
   nowrap keeps them together — the logo never drops to its own line, even
   on tablet / narrow desktop where it currently does. */
.hero-h1-line--engine {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.25em;
}
.hero-rotate-wrap {
  display: inline-flex; align-items: baseline; gap: 8px;
  overflow: hidden; height: 1.25em;
  /* Baseline-align with the surrounding "from" text so the engine name
     ("Gemini" / "Perplexity" / …) sits on the same baseline as "from". */
  vertical-align: baseline;
  position: relative;
}
.hero-rotate-slide {
  display: flex; flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-rotate-item {
  /* align-items: baseline so the engine name text baseline = wrap baseline =
     "from" baseline. Icon overrides with align-self: center below to stay on
     cap-centre of the letter rather than dropping to baseline. */
  display: inline-flex; align-items: baseline; gap: 10px;
  height: 1.25em; flex-shrink: 0; white-space: nowrap;
}
.hero-rotate-item::after { content: ','; }
.hero-rotate-icon {
  display: inline-flex; align-items: center; justify-content: center;
  /* Sized in em (not px) so the logo scales with the headline and always fits
     inside the 1.25em clip box — a fixed px icon overflowed and got clipped
     once the H1 shrank. 0.87em reproduces the original 47px-at-54px ratio; the
     47px ceiling keeps the larger practice-hero headline's logo at its old size. */
  width: 0.87em; height: 0.87em;
  max-width: 47px; max-height: 47px;
  background: transparent;
  flex-shrink: 0;
  /* Override item's baseline alignment — icon centres on the line-box, then
     a small lift puts that centre at the cap-centre of the engine letter
     (Newsreader Light has a descender slot below baseline). */
  align-self: center;
  transform: translateY(-0.18em);
}
.hero-rotate-icon img { width: 100%; height: 100%; object-fit: contain; }
.hero-sub {
  font-weight: 300; font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.4; color: var(--white); max-width: 540px;
}
/* The platform-definition sentence ("Tely Health is an AI patient acquisition
   platform…") stays in the DOM for SEO / AI engines but is hidden on every
   screen — the hero shows only the action sentence ("We get you cited…"). */
.hero-sub-lead { display: none; }

/* Trust strip — aligned with heading, not full width */
.trust-strip {
  position: relative; z-index: 1;
  padding: 0 156px 44px;
  width: 100%;
}
.trust-strip-inner {
  display: flex; align-items: center; gap: 33px;
  border-top: 1px solid rgba(236,233,224,0.3);
  padding-top: 48px;
}
.trust-label {
  font-size: 16px; font-weight: 400;
  color: rgba(255,255,255,0.5);
  min-width: 200px; line-height: 1.3;
  letter-spacing: -0.32px;
}
.logo-carousel { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.logo-track { display: flex; gap: 48px; animation: scroll 25s linear infinite; width: max-content; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.logo-item { font-family: var(--serif); font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.4); white-space: nowrap; }

@media (max-width: 1200px) {
  .hero-content { padding: 0 80px; }
  .trust-strip { padding: 0 80px 32px; }
}
@media (max-width: 1024px) {
  .hero { margin: 24px; }
  .hero-content { padding: 0 48px; }
  .trust-strip { padding: 0 48px 24px; }
}
@media (max-width: 768px) {
  .hero { margin: 16px; }
  .hero-content { padding: 60px 24px; align-items: center; }
  .trust-strip { padding: 0 24px 20px; }
  .trust-strip-inner { flex-direction: row; align-items: center; gap: 16px; }
  .trust-label { min-width: auto; }
}

/* ========== 2. HOW IT WORKS ========== */
.hiw { padding: 40px 164px; }
.hiw-inner { padding: 40px 58px 80px; background: var(--warm); }

.hiw-kicker, .stories-kicker {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 80px;
  font-weight: 300; font-size: 18px; letter-spacing: 0.54px; text-transform: uppercase; color: var(--ink);
}
.hiw-diamond { width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg); flex-shrink: 0; }

/* Each step */
.hiw-step {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding-bottom: 60px; margin-bottom: 80px;
  border-bottom: 1px solid var(--border2);
}
.hiw-step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.hiw-step-reverse { flex-direction: row-reverse; }

.hiw-text { flex: 0 0 47%; max-width: 576px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; align-self: stretch; padding: 24px 0; }
.hiw-text h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-section-title); line-height: var(--lh-section-title); }
.hiw-text p { font-weight: 300; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.35; }

.hiw-img-wrap {
  flex: 0 0 50%; max-width: 608px;
  background: var(--warm2); border: 1px solid var(--border2);
  padding: 32px; position: relative;
  aspect-ratio: 1 / 1;
}
.hiw-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Step 1: glass overlay + ChatGPT badge */
.hiw-badge-logo { position: absolute; top: 40px; left: 25px; width: 54px; height: 54px; z-index: 2; }
.hiw-glass {
  position: absolute; bottom: 56px; left: 56px; right: 56px;
  background: rgba(136,135,130,0.2);
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  border: 1px solid rgba(188,173,155,0.3);
  border-radius: 16px;
  padding: 24px 24px 24px;
  z-index: 2;
}
.hiw-glass-query { font-weight: 300; font-size: clamp(14px, 1.4vw, 20px); line-height: 1.2; color: var(--white); margin-bottom: 16px; }
.hiw-glass-foot { display: flex; align-items: center; gap: 10px; }
.ai-glass-icon { opacity: 0.4; width: 15px; height: 15px; }
.ai-glass-icon-globe { opacity: 0.4; width: 20px; height: 20px; }
.hiw-glass-auto { font-weight: 500; font-size: 16px; color: #aeaba9; opacity: 0.4; }

/* ========== HIW STEP 1 ANIMATION ========== */
.hiw-anim { overflow: hidden; position: relative; }

/* Background images */
.hiw-anim .hiw-anim-bg { position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); object-fit: cover; z-index: 1; transition: opacity 0.6s ease; }
.hiw-anim .hiw-anim-bg--camera { opacity: 1; }
.hiw-anim .hiw-anim-bg--phone { opacity: 0; }
.hiw-anim[data-frame="4"] .hiw-anim-bg--phone { opacity: 0; }
.hiw-anim[data-frame="4"] .hiw-anim-bg--camera { opacity: 1; }

/* ChatGPT badge — top left aligned with glass bar */
.hiw-anim-chatgpt-badge {
  position: absolute; top: 56px; left: 56px;
  width: 36px; height: 36px; z-index: 4;
  opacity: 0; transition: opacity 0.6s ease;
}

/* All animated elements hidden by default */
.hiw-anim .hiw-anim-glass,
.hiw-anim .hiw-overlay,
.hiw-anim .hiw-site-card { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }

/* Full-screen overlays */
.hiw-overlay {
  position: absolute; inset: 32px; z-index: 3;
  display: flex; align-items: flex-start; padding-top: 80px;
  padding: 32px;
}
.hiw-overlay--response {
  background: transparent;
}
.hiw-overlay-inner { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.hiw-overlay-user { display: flex; align-items: center; gap: 10px; }
.hiw-overlay-avatar {
  width: 40px; height: 40px; border-radius: 100px; overflow: hidden; flex-shrink: 0;
}
.hiw-overlay-avatar img { width: 243%; height: 243%; object-fit: cover; margin-left: -102%; margin-top: -22%; }
.hiw-overlay-name { font-weight: 400; font-size: 20px; color: var(--border); line-height: 27px; }
.hiw-overlay-text {
  font-weight: 300; font-size: clamp(18px, 2vw, 25px); line-height: 1.28; color: var(--white); padding-bottom: 16px;
}
.hiw-overlay-gpt-logo { width: 32px; height: 32px; flex-shrink: 0; }
.hiw-overlay-answer { display: flex; flex-direction: column; gap: 24px; padding-bottom: 16px; align-items: flex-start; }
.hiw-overlay-doctor-name { font-weight: 600; font-size: clamp(18px, 2vw, 25px); line-height: 1.28; color: var(--white); }
.hiw-overlay-doctor-text { font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.35; color: var(--white); }
.hiw-overlay-link {
  display: inline-flex; align-items: center; padding: 10px 16px;
  background: rgba(236,233,224,0.2); border-radius: 40px;
  font-weight: 500; font-size: 14px; color: var(--white); line-height: 22px; white-space: nowrap;
  align-self: flex-start;
  transition: opacity 0.4s ease, transform 0.15s ease, background 0.15s ease;
}
.hiw-overlay-link.clicked {
  transform: scale(0.95);
  background: rgba(236,233,224,0.4);
}

/* Frame 6: Website card */
.hiw-site-card {
  position: absolute; left: 56px; right: 56px; bottom: 56px; z-index: 3;
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 14px 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--white);
}
.hiw-site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.hiw-site-logo { height: 32px; width: auto; }
.hiw-site-icons { display: flex; gap: 16px; align-items: center; }
.hiw-site-doctor {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.hiw-site-doctor-info { display: flex; flex-direction: column; gap: 6px; }
.hiw-site-doctor-name { font-weight: 500; font-size: 18px; line-height: 20px; }
.hiw-site-doctor-title { font-weight: 300; font-size: 13px; line-height: 16px; opacity: 0.6; }
.hiw-site-doctor-spec { font-weight: 400; font-size: 13px; line-height: 16px; text-decoration: underline; }
.hiw-site-doctor-photo { width: 54px; height: 58px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.hiw-site-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.hiw-site-details { display: flex; flex-direction: column; gap: 10px; }
.hiw-site-dept { font-weight: 500; font-size: 12px; line-height: 15px; }
.hiw-site-contact { font-weight: 400; font-size: 12px; line-height: 14px; opacity: 0.6; }
.hiw-site-appt {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 30px;
  font-weight: 400; font-size: 14px; line-height: 27px; white-space: nowrap;
}

/* Glass bar transitions */
.hiw-anim .hiw-anim-glass {
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Expand state: glass fills photo with clip-path circle */
.hiw-anim .hiw-anim-glass.expanding {
  top: 32px; left: 32px; right: 32px; bottom: 32px;
  border-radius: 0;
  background: rgba(144,127,103,0.6);
  backdrop-filter: blur(42px); -webkit-backdrop-filter: blur(42px);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hiw-anim .hiw-anim-glass.expanding.expand-go {
  clip-path: circle(150% at 50% 100%);
}
.hiw-anim .hiw-glass-query,
.hiw-anim .hiw-glass-foot { transition: opacity 0.4s ease; }
.hiw-anim .hiw-anim-glass.expanding .hiw-glass-query,
.hiw-anim .hiw-anim-glass.expanding .hiw-glass-foot { opacity: 0; }

/* Animation states */
/* Frame 1: photo + ChatGPT badge + glass typing bar */
.hiw-anim[data-frame="1"] .hiw-anim-chatgpt-badge { opacity: 1; }
.hiw-anim[data-frame="1"] .hiw-anim-glass { opacity: 1; transform: translateY(0); }

/* Frame 1-expand: badge fades */
.hiw-anim[data-frame="1-expand"] .hiw-anim-chatgpt-badge { opacity: 0; }
.hiw-anim[data-frame="1-expand"] .hiw-anim-glass { opacity: 1; transform: translateY(0); }

/* Frame 2: full overlay with user question */
.hiw-anim[data-frame="2"] .hiw-overlay--question { opacity: 1; }

/* Frame 3: keep expanded glass as background, response on top */
.hiw-anim[data-frame="3"] .hiw-anim-glass {
  opacity: 1; transform: translateY(0);
  top: 32px; left: 32px; right: 32px; bottom: 32px;
  border-radius: 0;
  background: rgba(144,127,103,0.6);
  backdrop-filter: blur(42px); -webkit-backdrop-filter: blur(42px);
  clip-path: circle(150% at 50% 100%);
}
.hiw-anim[data-frame="3"] .hiw-glass-query,
.hiw-anim[data-frame="3"] .hiw-glass-foot { opacity: 0; }
.hiw-anim[data-frame="3"] .hiw-overlay--response { opacity: 1; }
.hiw-overlay-answer { opacity: 0; transition: opacity 0.5s ease; }
.hiw-overlay--response.show-answer .hiw-overlay-answer { opacity: 1; }
.hiw-overlay-link { opacity: 0; transition: opacity 0.4s ease; }
.hiw-overlay--response.show-link .hiw-overlay-link { opacity: 1; }

/* Frame 4: camera photo + website card, hide glass */
.hiw-anim[data-frame="4"] .hiw-anim-glass { opacity: 0; }
.hiw-anim[data-frame="4"] .hiw-site-card { opacity: 1; }

/* ========== HIW STEP 2 ANIMATION ========== */
/* Frame 1: chat bubble */
.hiw2-chat-bubble {
  position: absolute; bottom: 136px; left: 56px; right: 56px; z-index: 3;
  background: rgba(136,135,130,0.2);
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  border: 1px solid rgba(188,173,155,0.3);
  border-radius: 16px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.6s ease, top 0.01s, left 0.01s, right 0.01s, bottom 0.01s, border-radius 0.01s, clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, backdrop-filter 0.3s ease;
}
.hiw2-chat-msg { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px; margin-bottom: 16px; transition: opacity 0.4s ease; }
.hiw2-chat-text { font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--white); }
.hiw2-chat-actions { display: flex; align-items: center; justify-content: space-between; transition: opacity 0.4s ease; }
.hiw2-chat-avatars { height: 35px; width: auto; }
.hiw2-chat-call {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 30px;
  font-weight: 300; font-size: 14px; color: var(--white); white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hiw2-chat-call.clicked { transform: scale(0.93); background: rgba(255,255,255,0.25); }

/* Sound waveform — inline in chat actions */
.hiw2-waveform {
  display: flex; align-items: center; gap: 2px; height: 30px;
}
.hiw2-wave-bar {
  width: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.7);
  animation: waveAnim var(--d, 0.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes waveAnim {
  0%, 100% { height: 4px; }
  50% { height: var(--h, 20px); }
}

/* Input bar */
.hiw2-input-bar {
  position: absolute; bottom: 56px; left: 56px; right: 56px; z-index: 3;
  background: rgba(136,135,130,0.1);
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  border: 1px solid rgba(188,173,155,0.3);
  border-radius: 56px; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transition: opacity 0.6s ease;
}
.hiw2-input-text { font-weight: 300; font-size: 14px; color: var(--white); }
.hiw2-input-send {
  background: var(--white); border-radius: 40px; padding: 8px;
  display: flex; align-items: center;
}

/* Expand — the chat bubble itself grows via clip-path */

/* Conversation overlay */
.hiw2-conv-overlay {
  position: absolute; inset: 32px; z-index: 3;
  display: flex; flex-direction: column;
  padding: 32px;
  opacity: 0; transition: opacity 0.5s ease;
  overflow: hidden;
}

/* Message slots — stack on top of each other */
.hiw2-msg-slot {
  position: absolute; left: 32px; right: 32px; top: 18%;
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; transform: translateY(60px);
  transition: opacity 0.7s ease, transform 0.7s ease, font-size 0.7s ease;
}
/* States */
.hiw2-msg-slot.active {
  opacity: 1; transform: translateY(0);
}
.hiw2-msg-slot.exiting {
  opacity: 0.2; transform: translateY(0); top: 32px;
  max-height: 40px; overflow: hidden;
}
.hiw2-msg-slot.exiting .hiw2-conv-header { display: none; }
.hiw2-msg-slot.exiting .hiw2-conv-text {
  font-size: 12px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hiw2-conv-header { display: flex; align-items: center; gap: 10px; }
.hiw2-conv-avatar { width: 40px; height: 40px; border-radius: 100px; overflow: hidden; flex-shrink: 0; background-size: 150%; background-position: center; }
.hiw2-conv-name { font-weight: 400; font-size: 18px; color: var(--border); line-height: 27px; }
.hiw2-conv-text { font-weight: 300; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.35; color: var(--white); }

/* Waveform at bottom */
.hiw2-conv-waveform {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  height: 50px; flex-shrink: 0; margin-top: auto;
}
.hiw2-conv-wave-bar {
  width: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,0.7);
  animation: waveAnim var(--d, 0.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Booked card */
.hiw2-booked-card {
  position: absolute; left: 56px; right: 56px; bottom: 56px; z-index: 3;
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  background: rgba(136,135,130,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 14px 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--white);
  opacity: 0; transition: opacity 0.6s ease;
}
.hiw2-booked-header { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.hiw2-booked-check { background: var(--green); border-radius: 40px; padding: 4px; display: flex; flex-shrink: 0; }
.hiw2-booked-info { padding-top: 4px; }
.hiw2-booked-title { font-weight: 400; font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
.hiw2-booked-sub { font-weight: 300; font-size: 13px; opacity: 0.6; }
.hiw2-booked-date { display: flex; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.hiw2-booked-cal { flex-shrink: 0; }
.hiw2-booked-datetime { flex: 1; }
.hiw2-booked-day, .hiw2-booked-time { font-weight: 400; font-size: 16px; }
.hiw2-booked-sep { color: var(--border); margin: 0 6px; font-weight: 300; font-size: 20px; }
.hiw2-booked-doc { font-weight: 300; font-size: 14px; opacity: 0.6; margin-top: 4px; }
.hiw2-booked-add, .hiw2-booked-contact {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 30px;
  font-weight: 400; font-size: 12px; white-space: nowrap; flex-shrink: 0;
}
.hiw2-booked-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.hiw2-booked-sent { font-weight: 500; font-size: 12px; line-height: 15px; }
.hiw2-booked-q { font-weight: 400; font-size: 11px; opacity: 0.6; margin-top: 4px; }

/* HIW2 animation states */
#hiwAnim2[data-frame="1"] .hiw2-chat-bubble { opacity: 1; clip-path: none; }
#hiwAnim2[data-frame="1"] .hiw2-input-bar { opacity: 1; }
/* 1-expand: chat bubble grows to fill photo */
#hiwAnim2[data-frame="1-expand"] .hiw2-chat-bubble,
#hiwAnim2.conv-active .hiw2-chat-bubble {
  opacity: 1;
  top: 32px; left: 32px; right: 32px; bottom: 32px;
  border-radius: 0;
  background: rgba(102,120,151,0.6);
  backdrop-filter: blur(42px); -webkit-backdrop-filter: blur(42px);
  clip-path: circle(150% at 50% 100%);
}
#hiwAnim2[data-frame="1-expand"] .hiw2-chat-msg,
#hiwAnim2[data-frame="1-expand"] .hiw2-chat-actions,
#hiwAnim2.conv-active .hiw2-chat-msg,
#hiwAnim2.conv-active .hiw2-chat-actions { opacity: 0; }
#hiwAnim2[data-frame="1-expand"] .hiw2-input-bar { opacity: 0; pointer-events: none; }
#hiwAnim2.conv-active .hiw2-input-bar { opacity: 0; pointer-events: none; }
#hiwAnim2.conv-active .hiw2-conv-overlay { opacity: 1; }
/* Frame 6 transition sequence */
/* Step 1: waveform shrinks */
#hiwAnim2.exit-waveform .hiw2-conv-waveform {
  transform: scale(0);
  transition: transform 0.25s ease-in;
}
/* Step 2: text fades */
#hiwAnim2.exit-text .hiw2-conv-inner,
#hiwAnim2.exit-text .hiw2-conv-prev { opacity: 0; transition: opacity 0.4s ease; }
/* Step 3: blur overlay fades revealing photo */
#hiwAnim2.exit-blur .hiw2-chat-bubble {
  opacity: 0 !important;
  transition: opacity 0.7s ease !important;
}
#hiwAnim2.exit-blur .hiw2-conv-overlay { opacity: 0; transition: opacity 0.7s ease; }

/* Booked card — slide up from bottom */
.hiw2-booked-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#hiwAnim2[data-frame="6"] .hiw2-booked-card {
  opacity: 1;
  transform: translateY(0);
}
#hiwAnim2[data-frame="6"] .hiw2-conv-overlay { opacity: 0; }
#hiwAnim2[data-frame="6"] .hiw2-chat-bubble { opacity: 0 !important; }

/* Animated checkmark */
.hiw2-check-circle {
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  transition: stroke-dashoffset 0.4s ease;
}
.hiw2-check-tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease 0.4s;
}
#hiwAnim2[data-frame="6"] .hiw2-check-circle { stroke-dashoffset: 0; }
#hiwAnim2[data-frame="6"] .hiw2-check-tick { stroke-dashoffset: 0; }

/* Fade out final frame */
#hiwAnim2.fade-out .hiw2-booked-card {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.6s ease;
}

/* ========== HIW STEP 3 ANIMATION (Instagram + Site) ========== */
.hiw3-insta-card {
  position: absolute; left: 48px; right: auto; bottom: 48px; z-index: 3;
  width: 304px;
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  background: rgba(136,135,130,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  color: var(--white);
  opacity: 0; transition: opacity 0.6s ease;
}
#hiwAnim3[data-frame="2"] .hiw3-insta-card,
#hiwAnim3[data-frame="2b"] .hiw3-insta-card { opacity: 1; }

.hiw3-insta-header {
  display: flex; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.hiw3-insta-logo-img { height: 18px; width: auto; }
.hiw3-insta-icons { margin-left: auto; display: flex; gap: 14px; align-items: center; }

.hiw3-insta-account {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hiw3-insta-avatar-img { width: 36px; height: 36px; border-radius: 50%; background: white; padding: 6px; object-fit: contain; }
.hiw3-insta-user { flex: 1; }
.hiw3-insta-username { font-weight: 500; font-size: 14px; }
.hiw3-insta-sponsored { font-weight: 300; font-size: 11px; opacity: 0.6; }
.hiw3-insta-menu { opacity: 0.6; }

.hiw3-insta-ad-wrap {
  border: 0.8px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  overflow: hidden;
}
.hiw3-insta-ad {
  display: flex; gap: 10px; align-items: center;
  background: rgba(255,255,255,0.13);
  padding: 16px 18px 21px 18px;
}
.hiw3-insta-ad-text { flex: 1; }
.hiw3-insta-ad-title { font-weight: 400; font-size: 16px; line-height: 1.19; margin-bottom: 12px; }
.hiw3-insta-ad-sub { font-weight: 400; font-size: 11px; line-height: 1.27; }
.hiw3-insta-knee { width: 44px; height: 84px; object-fit: contain; opacity: 0.7; flex-shrink: 0; }

.hiw3-insta-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px 18px;
  border-top: 0.8px solid rgba(255,255,255,0.2);
  font-weight: 500; font-size: 12px;
  transition: background 0.2s ease;
}
.hiw3-insta-cta.hover {
  background: rgba(255,255,255,0.1);
}
.hiw3-insta-arrow { font-size: 20px; }

/* Frame 3: UCSF questionnaire card */
.hiw3-site-card {
  position: absolute; left: 56px; right: 56px; bottom: 56px; top: auto; z-index: 4;
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 16px 24px 19px;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--white);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#hiwAnim3[data-frame="3"] .hiw3-site-card { opacity: 1; transform: translateY(0); }
#hiwAnim3[data-frame="3"] .hiw3-insta-card { opacity: 0; }

.hiw3-site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.hiw3-site-logo { height: 40px; width: auto; }
.hiw3-site-icons { display: flex; gap: 16px; align-items: center; }

.hiw3-site-question {
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.hiw3-site-q-label { font-weight: 400; font-size: 14px; opacity: 0.6; line-height: 20px; margin-bottom: 1px; }
.hiw3-site-q-title { font-weight: 500; font-size: 19px; line-height: 20px; }

.hiw3-site-options { display: flex; flex-direction: column; gap: 4px; }
.hiw3-site-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  font-weight: 300; font-size: 14px; line-height: 20px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hiw3-site-option.selected {
  background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5);
}
.hiw3-site-radio {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.5);
  position: relative;
  transition: border-color 0.2s ease;
}
.hiw3-site-option.selected .hiw3-site-radio {
  border-color: var(--white);
}
.hiw3-site-option.selected .hiw3-site-radio::after {
  content: ''; position: absolute; inset: 2px;
  background: var(--white); border-radius: 50%;
}

.hiw3-site-footer {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.hiw3-site-schedule-text { font-weight: 400; font-size: 14px; line-height: 17px; max-width: 207px; }
.hiw3-site-book-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 30px;
  font-weight: 400; font-size: 14px; line-height: 27px; white-space: nowrap; flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hiw3-site-book-btn.clicked { transform: scale(0.94); background: rgba(255,255,255,0.3); }

/* Step 4: EHR overlay card */
.hiw-img-ehr { overflow: hidden; }
.ehr-card {
  position: absolute; left: 63px; right: 63px; bottom: 56px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(136,135,130,0.06);
  backdrop-filter: blur(27px); -webkit-backdrop-filter: blur(27px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 2; color: var(--white);
}
.ehr-header { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ehr-epic { background: white; border-radius: 8px; padding: 8px; }
.ehr-meta { display: flex; flex: 1; justify-content: space-between; font-size: 14px; padding-top: 4px; }
.ehr-time { opacity: 0.6; }
.ehr-row { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ehr-avatar { border-radius: 50%; flex-shrink: 0; }
.ehr-details { flex: 1; }
.ehr-date { font-size: 14px; font-weight: 400; margin-bottom: 4px; }
.ehr-sep { color: var(--border); margin: 0 4px; font-weight: 300; font-size: 18px; }
.ehr-name { font-size: 14px; opacity: 0.6; font-weight: 300; }
.ehr-pill { font-size: 12px; font-weight: 400; background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 30px; white-space: nowrap; flex-shrink: 0; }
.ehr-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.ehr-procedure { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.ehr-checks { display: flex; flex-direction: column; gap: 6px; }
.ehr-check { font-size: 13px; font-weight: 400; opacity: 0.6; display: flex; align-items: center; gap: 8px; }
.ehr-check::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 4l2 2 3-3.5' stroke='white' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 10px; }
.ehr-appt-icon { flex-shrink: 0; border-radius: 8px; }
.ehr-pill { display: flex; align-items: center; gap: 8px; }

/* EHR animation states */
#hiwAnim4[data-frame="2"] .ehr-card { opacity: 1; transform: translateY(0); }
.ehr-check { opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ehr-check.visible { opacity: 0.6; transform: translateX(0); }
.ehr-pill-chart { transition: transform 0.15s ease, background 0.15s ease; }
.ehr-pill-chart.clicked { transform: scale(0.94); background: rgba(255,255,255,0.25); }

/* ========== 3. CUSTOMER STORIES ========== */
.stories { padding: 40px 164px; }
.stories-inner { padding: 40px 58px 80px; background: var(--warm); }
.stories-heading { margin-bottom: 64px; }
.stories-heading h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  /* Let the browser balance the two-line break so "for healthcare practices"
     wraps to its own line evenly. */
  text-wrap: balance;
  max-width: 1100px;
}
.stories-rotate-wrap {
  display: inline-flex; align-items: baseline; gap: 8px;
  overflow: hidden; height: 1.25em;
  vertical-align: baseline;
  position: relative;
}
.stories-rotate-slide {
  display: flex; flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stories-rotate-item {
  display: inline-flex; align-items: baseline; gap: 10px;
  height: 1.25em; flex-shrink: 0; white-space: nowrap;
}
.stories-rotate-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  background: transparent;
  flex-shrink: 0;
  align-self: center;
  transform: translateY(-0.18em);
}
.stories-rotate-icon img { width: 100%; height: 100%; object-fit: contain; }

.stories-card {
  display: flex; gap: 50px; align-items: stretch;
  background: var(--warm2); border: 1px solid var(--border2);
  padding: 40px;
}
.stories-photo-wrap { position: relative; width: 340px; height: 340px; flex-shrink: 0; }
.stories-photo { width: 100%; height: 100%; object-fit: cover; }
.stories-photo-logo { position: absolute; bottom: 30px; left: 30px; height: 35px; width: auto; opacity: 0.8; }
.stories-card-text { display: flex; flex-direction: column; justify-content: space-between; padding: 24px 0; }
.stories-card-text h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-section-title); line-height: var(--lh-section-title); }
.stories-card-text p { font-weight: 300; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.35; }

.stories-nav { display: none; }
.stories-btn {
  width: 60px; height: 60px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); color: var(--ink); transition: all 0.3s;
}
.stories-btn-prev { background: var(--warm); }
.stories-btn-next { background: var(--warm2); }
.stories-btn:hover { border-color: var(--ink); }


/* ========== SPECIALTIES ========== */
.specialties { padding: 40px 164px; }
.specialties-inner {
  padding: 40px 58px 80px;
  background: var(--warm);
  display: flex; flex-direction: column; gap: 80px;
}
.specialties-kicker {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 1.6; letter-spacing: 0.54px; text-transform: uppercase;
  color: var(--ink);
}
.specialties-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.specialties-heading {
  font-family: var(--serif); font-weight: 300;
  font-size: 64px; line-height: 1.18;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.specialties-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.specialties-card {
  background: transparent; border: 1px solid var(--border2);
  padding: 32px 16px;
  display: flex;
  /* Align icon with the FIRST line of the title — when the name wraps to 2
     lines, the icon stays at the cap-centre of the first word instead of
     drifting to the middle of the whole text block. */
  align-items: flex-start;
  gap: 12px;
  color: var(--ink);
}
.specialties-card.is-linked { transition: background 0.25s, border-color 0.25s, transform 0.2s; cursor: pointer; }
.specialties-card.is-linked:hover { background: rgba(10,17,26,0.03); border-color: var(--border); transform: translateY(-2px); }
.specialties-icon-wrap {
  flex-shrink: 0;
  /* Match the title font-size so em-based dimensions resolve against it. */
  font-size: 22px;
  width: 1.85em;
  height: 1.85em;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6, 182, 212, 0.12);   /* cyan tint */
  border-radius: 50%;
  /* Vertically centre the icon on the cap-line of the first text line.
     Title line-height is 1.35em; lifting by half the (line-height − icon-size)
     diff puts the icon centre on the first line centre. */
  margin-top: calc((1.35em - 1.85em) / 2);
}
.specialties-icon {
  width: 1.1em; height: 1.1em;
  object-fit: contain; display: block;
}
.specialties-name {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: 22px; line-height: 1.35;
  color: var(--ink);
}

/* ---- "Most popular" group + "Show all" reveal ---- */
.specialties-body { display: flex; flex-direction: column; gap: 18px; }

.specialties-group-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px; padding: 0 2px;
  font-family: var(--sans); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.specialties-star {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cyan);
}

/* Popular cards get a faint cyan wash so the group reads as featured without
   shouting — the line icons + names stay identical to the rest. */
.specialties-grid--popular .specialties-card {
  background: rgba(6, 182, 212, 0.05);
  border-color: rgba(6, 182, 212, 0.22);
}
.specialties-grid--popular .specialties-card.is-linked:hover {
  background: rgba(6, 182, 212, 0.09);
  border-color: rgba(6, 182, 212, 0.4);
}

/* The rest of the grid is collapsed until "Show all" is pressed. */
.specialties-rest { margin-top: 16px; }
.specialties-rest:not([data-static]) { display: none; }
.specialties-rest.is-open { display: block; animation: specialtiesReveal 0.4s ease both; }
@keyframes specialtiesReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .specialties-rest.is-open { animation: none; }
}

.specialties-actions { display: flex; justify-content: center; margin-top: 28px; }
.specialties-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border2); border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.specialties-toggle:hover { background: rgba(10,17,26,0.03); border-color: var(--border); transform: translateY(-1px); }
.specialties-toggle-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); transition: transform 0.25s ease;
}
.specialties-toggle[aria-expanded="true"] .specialties-toggle-chevron { transform: rotate(180deg); }

/* ========== INTEGRATIONS ========== */
.integrations { padding: 40px 164px; }
.integrations-inner { }

.integrations-heading { margin-bottom: 100px; }
.integrations-heading h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: 64px; line-height: 1.18;
}

.integrations-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.integrations-card {
  background: var(--warm); border: 1px solid var(--border2);
  padding: 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.integrations-icon { width: 64px; height: 64px; object-fit: contain; }
.integrations-card-text { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.integrations-card-text h4 { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.26; color: #0A111A; }
.integrations-card-text p { font-weight: 300; font-size: 20px; line-height: 1.35; color: #757575; }

.integrations-link {
  display: none; /* hidden temporarily */
  align-items: center; gap: 8px;
  margin-top: 40px; margin-left: auto;
  font-family: var(--sans); font-weight: 300; font-size: 18px;
  color: #0A111A; transition: color 0.3s;
  width: fit-content;
}
.integrations-link:hover { color: #06B6D4; }
.integrations-arrow { font-size: 22px; transition: transform 0.3s; }
.integrations-link:hover .integrations-arrow { transform: translateX(4px); }

/* ========== HIPAA COMPLIANCE ========== */
.hipaa { padding: 40px 164px; }
.hipaa-inner {
  padding: 40px 58px 80px;
  background: var(--warm);
  display: flex; flex-direction: column; gap: 56px;
}
.hipaa-kicker {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 300; font-size: 18px; letter-spacing: 0.54px;
  text-transform: uppercase; color: var(--ink);
}
.hipaa-head {
  display: block;
}
.hipaa-copy {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 720px;
}
.hipaa-heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 3.6vw, 54px);
  line-height: 1.18; color: var(--ink);
  margin: 0;
}
.hipaa-sub {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4; color: var(--ink);
  letter-spacing: -0.2px;
  max-width: 640px; margin: 0;
}
.hipaa-badge {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  flex-shrink: 0;
}

/* 3-up pillar grid */
.hipaa-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hipaa-pillar {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  background: transparent;
  border: 1px solid var(--border2);
}
.hipaa-pillar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan);
  flex-shrink: 0;
}
.hipaa-pillar-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.28; letter-spacing: -0.2px;
  color: var(--ink); margin: 0;
}
.hipaa-pillar-text {
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 1.5;
  color: var(--muted2);
  margin: 0;
}

/* ========== 4. EXPERTISE ========== */
.expertise { padding: 40px 0; }
.expertise-inner { margin: 0 auto; padding: 0 164px; }
.expertise-header { margin-bottom: 80px; }
.expertise-header h2 { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: 1.18; margin-bottom: 60px; }
.expertise-indent, .heading-right { display: inline-block; text-align: right; width: 100%; }
.expertise-sub { font-weight: 300; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.32; max-width: 686px; margin-left: auto; }

.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.expertise-card { background: var(--warm); display: flex; flex-direction: column; }
.expertise-card-img { height: 230px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.expertise-card-img img { max-height: 100%; width: auto; }
.expertise-card-img svg { max-height: 100%; width: auto; }
.expertise-card-body { padding: 24px 0 50px; margin: 0 32px; border-top: 1px solid var(--border2); }
.expertise-card-body h4 { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.26; color: #0A111A; margin-bottom: 8px; padding-top: 24px; }
.expertise-card-body p { font-weight: 300; font-size: 20px; line-height: 1.35; color: #757575; }

/* ========== EXPERTISE CARD ANIMATIONS ========== */
/* Card 1: pulse dot transition */
.exp1-dot { transition: fill 0.2s ease, transform 0.2s ease; }
.exp1-dot.pulse { fill: #06B6D4; }

/* Card 2: dot highlight transition */
.exp-svg-2 circle { transition: fill 0.3s ease, stroke 0.3s ease, r 0.3s ease; }

/* Card 3: node/line highlight transition */
.exp-svg-3 circle { transition: fill 0.25s ease, stroke 0.25s ease; }
.exp-svg-3 path { transition: stroke 0.25s ease; }

/* ========== CTA ========== */
.cta {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  margin-top: 60px;
  /* Reserve the absolutely-positioned footer strip's height so the centered
     content sits in the space above it, not behind it. */
  padding-bottom: 124px;
}
.cta-bg { position: absolute; inset: 0; overflow: hidden; background: #0A111A; }
.cta-bg .cta-bg-poster,
.cta-bg .cta-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Full-bleed background on every screen: the clip covers the whole CTA (cropped
   as needed) like the hero — no letterbox bars against the dark background. */
.cta-bg .cta-bg-poster img,
.cta-bg .cta-bg-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Video sits above poster but is hidden until JS adds .is-playing. */
.cta-bg .cta-bg-video { opacity: 0; transition: opacity .4s ease; }
.cta-bg.is-playing .cta-bg-video { opacity: 1; }
.cta-bg.is-playing .cta-bg-poster { opacity: 0; }

/* Video plays on all sizes now; the poster only hides once it actually
   starts (JS adds .is-playing on the `playing` event), so if autoplay is
   blocked (e.g. Low Power Mode) the poster scene stays — never blank. */
/* Skip-to-content link — visually hidden until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #0A111A; color: #fff;
  padding: .75rem 1rem; z-index: 9999;
  text-decoration: none; font: 500 14px/1.2 var(--sans, system-ui);
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 3px solid #3FF; }
.cta-gradient { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); }
.cta-content {
  position: relative; z-index: 1;
  padding: 0 0 0 156px;
  max-width: 50%;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.cta-content h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 3.7vw, 54px); line-height: 1.19;
  color: var(--white);
}
.cta-sub {
  font-weight: 300; font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4; color: var(--white); opacity: 0.8;
  padding-bottom: 60px;
}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px;
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  background: var(--white); color: var(--ink);
  border-radius: 8px; transition: background 0.3s; white-space: nowrap;
}
.cta-btn:hover { background: #f0eeea; }

/* Site footer wraps the strip and sits as a flex child of .cta so the strip
   overlays the video bg, not below it on the page background. */
.cta > .site-footer {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  width: 100%;
}

/* CTA footer strip */
.cta-strip {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 156px 44px;
}
.cta-strip-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 32px;
}
.cta-strip-left { display: flex; align-items: center; gap: 24px; }
.cta-strip-left .nav-logo-img { height: 36px; }
.cta-strip-desc { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.4; }
.cta-strip-center { text-align: center; }
.cta-strip-center p { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.6; }
.cta-strip-right { text-align: right; }
.cta-strip-right p { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.6; }


/* ========== FOOTER ========== */
.footer { border-top: 1px solid rgba(212,210,203,0.4); padding: 48px 0; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-logo { font-weight: 500; font-size: 17px; }
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.footer-links { display: flex; gap: 32px; }
.footer-links a { font-size: 14px; color: var(--muted); transition: color 0.3s; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { width: 100%; text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }

/* ========== RESPONSIVE ========== */

/* iPad / Tablet (1024px) */
@media (max-width: 1024px) {
  :root { --gutter: 40px; }
  .nav { padding: 24px 32px 0; }
  .nav-links { display: none; }

  .hero-content { padding: 80px 48px 60px; align-items: center; }
  .hero-h1 { font-size: 42px; }
  .hero-rotate-icon { width: 38px; height: 38px; }
  .stories-rotate-icon { width: 42px; height: 42px; }
  .trust-strip { padding: 0 48px 24px; }

  .hiw { padding: 40px 24px; }
  .hiw-inner { padding: 40px 32px 60px; }
  .hiw-step, .hiw-step-reverse { flex-direction: column; }
  .hiw-text, .hiw-img-wrap { flex: none; max-width: 100%; width: 100%; }
  .hiw-img-wrap { aspect-ratio: 1/1; height: auto; min-height: 400px; }
  .hiw3-site-card { top: auto; bottom: 24px; left: 32px; right: 32px; }
  .hiw3-insta-card { left: 32px; width: auto; right: auto; }

  .stories { padding: 40px 24px; }
  .stories-inner { padding: 40px 32px 60px; }
  .stories-heading h2 { font-size: 48px; }
  .stories-card { flex-direction: column; }
  /* Tablet: taller image so the doctor's head isn't cropped */
  .stories-photo-wrap { width: 100%; height: 520px; }
  .stories-photo { object-position: center top; }

  .expertise { padding: 40px 0; }
  .expertise-inner { padding: 0 48px; }
  .expertise-header h2 { font-size: 48px; }
  .expertise-grid { grid-template-columns: 1fr 1fr; }

  .integrations { padding: 40px 48px; }
  .integrations-heading h2 { font-size: 48px; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }

  .hipaa { padding: 40px 48px; }
  .hipaa-inner { padding: 32px 32px 60px; gap: 40px; }
  .hipaa-head { grid-template-columns: 1fr; gap: 24px; }
  .hipaa-badge { width: 64px; height: 64px; order: -1; }
  .hipaa-badge svg { width: 64px; height: 64px; }
  .hipaa-pillars { grid-template-columns: 1fr 1fr; }

  .specialties { padding: 40px 24px; }
  .specialties-inner { padding: 40px 32px 60px; gap: 48px; }
  .specialties-heading { font-size: 48px; }
  .specialties-grid { grid-template-columns: 1fr 1fr; }

  .cta { margin-top: 40px; }
  .cta-content { padding: 140px 0 60px 48px; max-width: 60%; }
  .cta-content h2 { font-size: 42px; }
  .cta-strip { padding: 0 48px 32px; }
}

/* iPhone / Mobile (768px) */
@media (max-width: 768px) {
  :root { --gutter: 16px; }
  .nav { padding: 0; }
  .nav-inner { padding: 16px 16px 0; }
  .nav-login { padding: 10px 16px; font-size: 16px; }
  .nav-demo { padding: 10px 16px; font-size: 16px; }

  .hero { margin: 12px; min-height: 90vh; }
  .hero-content { padding: 80px 20px 40px; }
  .hero-h1 { font-size: 32px; }
  .hero-rotate-icon { width: 32px; height: 32px; }
  .hero-rotate-wrap { gap: 6px; }
  .stories-rotate-icon { width: 28px; height: 28px; }
  .stories-rotate-wrap { gap: 6px; }
  /* The desktop scrim is a left→right fade; on mobile the text spans the whole
     width over the subject's face, so use a stronger top-down scrim + a soft
     text-shadow to keep the white headline + copy readable. */
  .hero-gradient {
    background: linear-gradient(170deg,
      rgba(10,17,26,0.74) 0%,
      rgba(10,17,26,0.52) 42%,
      rgba(10,17,26,0.40) 70%,
      rgba(10,17,26,0.60) 100%);
  }
  .hero-h1 { font-size: 32px; text-shadow: 0 1px 18px rgba(0,0,0,0.42); }
  .hero-sub { font-size: 16px; text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
  .hero-btn-note { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
  .hero-btn { padding: 14px 24px; font-size: 16px; }
  .trust-strip { padding: 0 20px 44px; }
  .trust-strip-inner { flex-direction: row; align-items: center; gap: 16px; padding-top: 24px; }
  .trust-label { font-size: 14px; min-width: auto; }

  .hiw { padding: 24px 12px; }
  .hiw-inner { padding: 24px 16px 40px; }
  .hiw-kicker, .stories-kicker { margin-bottom: 32px; font-size: 14px; }
  .hiw-text h2 { font-size: 28px; }
  .hiw-text p { font-size: 16px; }
  .hiw-step { margin-bottom: 32px; padding-bottom: 32px; gap: 24px; }
  .hiw-img-wrap { min-height: 320px; padding: 12px; }
  .hiw-anim .hiw-anim-bg {
    inset: 12px;
    width: calc(100% - 24px); height: calc(100% - 24px);
  }
  .hiw-badge-logo { top: 20px; left: 16px; width: 40px; height: 40px; }
  .hiw-anim-chatgpt-badge { top: 20px; left: 16px; width: 40px; height: 40px; }
  .hiw-glass { left: 24px; right: 24px; bottom: 24px; padding: 14px; }
  .hiw-glass-query { font-size: 14px; margin-bottom: 12px; }
  .hiw-overlay { padding: 20px; }
  .hiw-overlay-inner { gap: 16px; }
  .hiw-overlay-doctor-name { font-size: 18px; }
  .hiw-overlay-doctor-text { font-size: 14px; }
  .hiw-site-card { left: 24px; right: 24px; bottom: 24px; padding: 14px; }
  .hiw-site-doctor-name { font-size: 14px; }
  .hiw-site-dept { font-size: 11px; }
  .hiw-site-contact { font-size: 10px; }
  .hiw-site-appt { font-size: 10px; padding: 4px 8px; }
  .ehr-card { left: 24px; right: 24px; bottom: 24px; padding: 12px 14px 16px; }
  .ehr-meta { font-size: 12px; }
  .ehr-date { font-size: 12px; }
  .ehr-pill { font-size: 10px; padding: 3px 8px; }
  .hiw2-chat-bubble { left: 24px; right: 24px; padding: 12px; }
  .hiw2-input-bar { left: 24px; right: 24px; bottom: 24px; padding: 10px 14px; }
  .hiw2-conv-overlay { left: 24px; right: 24px; bottom: 24px; }
  .hiw2-booked-card { left: 24px; right: 24px; bottom: 24px; }
  .hiw3-insta-card { left: 24px; right: 24px; bottom: 24px; width: auto; max-width: calc(100% - 48px); }
  .hiw3-site-card { left: 24px; right: 24px; bottom: 24px; padding: 12px 14px; }
  .hiw3-site-q-title { font-size: 14px; }
  .hiw3-site-option { font-size: 11px; padding: 5px 8px; }
  .hiw3-site-schedule-text { font-size: 11px; max-width: 140px; }
  .hiw3-site-book-btn { font-size: 11px; padding: 3px 8px; }
  .hiw3-site-logo { height: 24px; }
  .hiw3-site-q-label { font-size: 12px; }
  .hiw3-site-footer { gap: 8px; }

  .stories { padding: 24px 12px; }
  .stories-inner { padding: 24px 16px 40px; }
  .stories-heading h2 { font-size: 32px; }
  .stories-card { padding: 20px; gap: 24px; }
  .stories-photo-wrap { width: 100%; height: 240px; }
  .stories-card-text h3 { font-size: 24px; }
  .stories-card-text p { font-size: 16px; }
  .stories-nav { margin-top: 20px; }
  .stories-btn { width: 48px; height: 48px; }

  .expertise { padding: 32px 0; }
  .expertise-inner { padding: 0 16px; }
  .expertise-header { margin-bottom: 40px; }
  .expertise-header h2 { font-size: 32px; margin-bottom: 24px; }
  .expertise-sub { font-size: 16px; }
  .expertise-grid { grid-template-columns: 1fr; gap: 12px; }
  .expertise-card-img { height: 180px; }
  .expertise-card-body { margin: 0 20px; padding: 16px 0 32px; }
  .expertise-card-body h4 { font-size: 24px; margin-bottom: 6px; padding-top: 16px; }
  .expertise-card-body p { font-size: 16px; }

  .integrations { padding: 32px 16px; }
  .integrations-heading { margin-bottom: 40px; }
  .integrations-heading h2 { font-size: 32px; }
  .integrations-grid { grid-template-columns: 1fr; gap: 12px; }
  .integrations-card { padding: 24px; gap: 16px; }
  .integrations-icon { width: 48px; height: 48px; }
  .integrations-card-text h4 { font-size: 24px; }
  .integrations-card-text p { font-size: 16px; }

  .hipaa { padding: 24px 16px; }
  .hipaa-inner { padding: 24px 20px 40px; gap: 32px; }
  .hipaa-head { grid-template-columns: 1fr; gap: 16px; }
  .hipaa-heading { font-size: 32px; }
  .hipaa-sub { font-size: 16px; }
  .hipaa-pillars { grid-template-columns: 1fr; gap: 12px; }
  .hipaa-pillar { padding: 20px; }
  .hipaa-pillar-icon { width: 48px; height: 48px; }
  .hipaa-pillar-icon svg { width: 28px; height: 28px; }
  .hipaa-pillar-title { font-size: 20px; }
  .hipaa-pillar-text { font-size: 15px; }

  .specialties { padding: 24px 12px; }
  .specialties-inner { padding: 24px 16px 40px; gap: 32px; }
  .specialties-kicker { font-size: 12px; letter-spacing: 0.4px; }
  .specialties-heading { font-size: 32px; }
  .specialties-grid { grid-template-columns: 1fr; gap: 12px; }
  .specialties-card { padding: 20px 16px; gap: 14px; }
  /* em-based sizes from base rule still apply — no override needed */
  .specialties-name { font-size: 22px; }

  .cta { min-height: 80vh; margin-top: 32px; }
  .cta-content { padding: 100px 0 40px 20px; max-width: 85%; gap: 16px; }
  .cta-content h2 { font-size: 32px; }
  .cta-sub { font-size: 16px; }
  .cta-btn { padding: 14px 24px; font-size: 16px; }
  .cta-strip { padding: 0 20px 20px; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; }
  .cta-strip-left { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cta-strip-center { text-align: left; }
  .cta-strip-right { text-align: left; }
}

/* ========== SCROLL REVEAL ========== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ========== NAV — RESOURCES DROPDOWN ========== */
.nav-link-group { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 320px; padding: 8px;
  background: rgba(255, 254, 251, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(10, 17, 26, 0.18), 0 2px 4px rgba(10, 17, 26, 0.04);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 110;
}
.nav-link-group:hover .nav-dropdown,
.nav-link-group:focus-within .nav-dropdown {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: auto; visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.nav-dropdown-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-radius: 8px;
  color: var(--ink); transition: background 0.2s ease;
}
.nav-dropdown-item:hover { background: var(--warm); }
.nav-dropdown-title { font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: -0.3px; }
.nav-dropdown-desc  { font-family: var(--sans); font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Nav theming on light pages (blog index, archive, single) */
body.has-light-nav .nav { position: relative; padding: 24px 156px 0; background: var(--bg); }
body.has-light-nav .nav-link,
body.has-light-nav .nav-login { color: var(--ink); }
body.has-light-nav .nav-login { border-color: var(--border); }
body.has-light-nav .nav-login:hover { background: var(--warm); }
body.has-light-nav .nav-demo {
  background: var(--ink); color: var(--white); border-color: var(--ink);
}
body.has-light-nav .nav-demo:hover { background: #1c2632; }
body.has-light-nav .nav-demo-arrow { background: rgba(255,255,255,0.18); color: var(--white); }
@media (max-width: 1200px) { body.has-light-nav .nav { padding: 24px 48px 0; } }
@media (max-width: 1024px) { body.has-light-nav .nav { padding: 20px 32px 0; } }
@media (max-width: 768px)  { body.has-light-nav .nav { padding: 16px 16px 0; } }

/* =====================================================================
 * BLOG — Figma design (node 129:8738)
 * Tokens (Figma): surface/0 #FFF · surface/50 #FAF7F0 · surface/100 #F5F2EC
 *                 surface/200 #ECE9E0 · surface/300 #D4D2CB · surface/500 #9E9E9E
 *                 surface/600 #757575 · surface/900 #0A111A
 *                 cyan/500 #06B6D4 · cyan/600 #0094A7 · purple #BFA9FE
 * ===================================================================== */

.blog-page {
  --blog-pad-x: 188px;          /* Figma left pad ≈ 188px @ 1728 frame */
  --blog-pad-x-md: 48px;
  --blog-pad-x-sm: 16px;
  --blog-max: 1352px;           /* inner content max (Figma) */
  --blog-radius: 0px;           /* Figma cards are square-edged */
  --blog-surface-50: #faf7f0;
  --blog-surface-100: #f5f2ec;
  --blog-surface-200: #ece9e0;
  --blog-surface-300: #d4d2cb;
  --blog-surface-500: #9e9e9e;
  --blog-surface-600: #757575;
  --blog-ink: #0a111a;
  --blog-cyan: #06b6d4;
  --blog-cyan-dark: #0094a7;
  --blog-purple: #bfa9fe;
  color: var(--blog-ink);
  background: var(--bg);
}

/* ========== BLOG — HERO ========== */
.blog-hero {
  padding: 132px var(--blog-pad-x) 32px;
}
.blog-hero-inner {
  max-width: var(--blog-max);
  margin: 0 auto;
}
.blog-h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--blog-ink);
  display: flex; flex-direction: column;
  margin: 0;
}
.blog-h1-line { display: block; }
.blog-h1-line--lead { text-align: left; }
.blog-h1-line--tail {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: flex-end;
  gap: 0 24px;
  text-align: right;
}
.blog-h1-text { white-space: nowrap; }
.blog-h1-brand {
  display: inline-flex; align-items: center; gap: 16px;
  white-space: nowrap;
}
.blog-h1-brand-logo {
  width: clamp(48px, 4.4vw, 72px);
  height: clamp(48px, 4.4vw, 72px);
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* ----- Blog hero rotation: cycles ChatGPT / Perplexity / Gemini / Google / Claude ----- */
.blog-h1-rotate-wrap {
  /* align-items must be flex-start: the slide is a tall column (one item per
     engine) clipped to one line. Centering it pushes the lit item out of the
     overflow:hidden window, so the rotator renders blank. */
  display: inline-flex; align-items: flex-start;
  overflow: hidden;
  height: 1.18em;
  vertical-align: middle;
  position: relative;
}
.blog-h1-rotate-slide {
  display: flex; flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-h1-rotate-item {
  display: inline-flex; align-items: center; gap: 16px;
  height: 1.18em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.blog-h1-rotate-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(48px, 4.4vw, 64px);
  height: clamp(48px, 4.4vw, 64px);
  background: transparent;
  flex-shrink: 0;
  /* Lift the icon so its centre lines up with the cap-centre of the first
     letter of the engine name (Newsreader Light has a descender slot that
     pushes the line-box centre below the cap-centre). */
  transform: translateY(-0.08em);
}
.blog-h1-rotate-icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.blog-h1-rotate-word { font-family: var(--serif); }
.blog-h1-brand-word { font-family: var(--serif); }

.blog-hero-sub {
  margin: 56px 0 0 auto;
  max-width: 845px;
  display: flex; flex-direction: column; gap: 18px;
}
.blog-hero-sub-lead {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.32;
  letter-spacing: -0.2px;
  color: var(--blog-ink);
  margin: 0;
}
.blog-hero-sub-body {
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.16px;
  color: var(--blog-ink);
  opacity: 0.78;
}
.blog-hero-sub-body p { font-weight: 300; margin: 0; }
.blog-hero-sub-body a {
  color: var(--blog-ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--blog-surface-300);
}
.blog-hero-sub-body a:hover { text-decoration-color: var(--blog-cyan); }

/* ========== BLOG — FEATURED SECTION ========== */
.blog-featured {
  /* Match the homepage page-edge padding (.hiw / .stories) */
  padding: 64px 164px 0;
  background: transparent;
}
.blog-featured-inner {
  padding: 40px 58px 80px;
  background: var(--blog-surface-50);
  display: flex; flex-direction: column; gap: 80px;
}
.blog-featured-kicker {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--blog-surface-300);
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; letter-spacing: 0.54px;
  text-transform: uppercase; color: var(--blog-ink);
  line-height: 32px;
}
.blog-diamond {
  width: 8px; height: 8px;
  background: var(--blog-cyan); transform: rotate(45deg);
  flex-shrink: 0;
}
.blog-featured-stack {
  display: flex; flex-direction: column; gap: 60px;
}

/* ----- Featured BIG card ----- */
.blog-card.blog-card--featured-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--blog-surface-200);
  flex-direction: initial;   /* override flex-column from .blog-card */
}
.blog-card.blog-card--featured-big .blog-card-body {
  border-left: none;          /* big card has no left-border */
  padding: 0;
  gap: 0;
}
.blog-card--featured-big .blog-card-media--big {
  width: 100%;
  height: 100%;
  background: var(--blog-surface-100);
  border: 1px solid var(--blog-surface-200);
  padding: 31px;
  display: block;
  overflow: hidden;
}
.blog-card--featured-big .blog-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-card--featured-big .blog-card-img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--blog-surface-100), var(--blog-surface-200));
}
.blog-card-body--big {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
  min-width: 0;
}
.blog-card-head { display: flex; flex-direction: column; gap: 24px; }
/* Featured-big card: extra breathing room between the title and the
   author byline so the right column reads taller and matches the
   square media column height. */
.blog-card-body--big .blog-card-head { gap: 24px; }
.blog-card-body--big .blog-card-head .blog-author { margin-top: 96px; }
.blog-card-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.blog-card-tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--blog-surface-200);
  border-radius: 30px;
  padding: 6px 16px;
  font-family: var(--sans); font-weight: 300; font-size: 16px;
  color: var(--blog-ink); line-height: 1.5;
  background: transparent;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.blog-card-tag:hover { background: var(--blog-surface-100); border-color: var(--blog-surface-300); }
.blog-card-date--big {
  font-family: var(--sans); font-weight: 300; font-size: 16px;
  color: var(--blog-surface-600); line-height: 1.5;
}
.blog-card-title.blog-card-title--big {
  /* matches .hiw-text h2 in the How-it-works section — fixed at 46px */
  font-family: var(--serif); font-weight: 300;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--blog-ink);
  margin: 0;
}
.blog-card-title.blog-card-title--big a { color: inherit; transition: opacity 0.2s; }
.blog-card-title.blog-card-title--big a:hover { opacity: 0.7; }
.blog-card-foot {
  display: flex; flex-direction: column; gap: 46px;
  padding-top: 32px;
}
.blog-card-sep {
  display: block; height: 1px; width: 100%;
  background: var(--blog-surface-300);
  opacity: 0.6;
}
.blog-card-excerpt.blog-card-excerpt--big {
  /* matches .hiw-text p in the How-it-works section */
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.35;
  color: var(--blog-ink);
  margin: 0;
  /* full text visible — no line clamp on the big card */
  display: block;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: visible;
  height: auto;
}
.blog-card-read-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.4;
  color: var(--blog-ink);
  text-decoration: none;
  align-self: flex-start;
  width: fit-content;
  transition: color 0.3s ease;
}
.blog-card-read-link:hover { color: var(--blog-cyan); }
.blog-card-read-link svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.blog-card-read-link:hover svg { transform: translateX(4px); }

/* ----- Featured small row (3-up) ----- */
.blog-featured-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ========== BLOG — STANDARD CARDS (grid + featured-small share this) ========== */
.blog-card {
  display: flex; flex-direction: column; gap: 56px;
  min-width: 0;
}
.blog-card-media {
  display: block; overflow: hidden;
  background: var(--blog-surface-100);
  height: 280px;
  width: 100%;
}
.blog-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card-media:hover .blog-card-img { transform: scale(1.03); }
.blog-card-img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--blog-surface-100), var(--blog-surface-200));
}

.blog-card-body {
  display: flex; flex-direction: column; gap: 80px;
  border-left: 1px solid rgba(10, 17, 26, 0.1);
  padding: 8px 16px 0;
  min-width: 0;
}
.blog-card-text {
  display: flex; flex-direction: column; gap: 16px;
  max-width: none;
  padding-right: 24px;
}
.blog-card-text > .blog-card-chip { margin-bottom: 0; }
.blog-card-text > .blog-card-date { margin: 0; }
.blog-card-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 30px; line-height: 1.3;
  letter-spacing: -0.6px;
  color: var(--blog-ink);
  margin: 0;
}
.blog-card-title a { color: inherit; transition: opacity 0.2s; }
.blog-card-title a:hover { opacity: 0.7; }
.blog-card-excerpt {
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.4;
  letter-spacing: -0.36px;
  color: var(--blog-ink);
  margin: 0;
  /* full text, never clipped — card grows to fit */
  display: block;
  overflow: visible;
  height: auto;
}
/* (legacy meta-row, no longer used on grid cards — kept for big card) */
.blog-card-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border-radius: 0;
  font-family: var(--sans); font-weight: 300; font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--blog-cyan-dark);
  background: transparent;
  transition: color 0.2s;
}
.blog-card-chip:hover { color: var(--blog-ink); }
.blog-card-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blog-cyan-dark);
}
.blog-card .blog-card-date {
  font-family: var(--sans); font-weight: 300; font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--blog-ink); opacity: 0.3;
}

/* ========== BLOG — AUTHOR BYLINE ========== */
.blog-author {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--blog-ink);
  max-width: 373px;
  transition: opacity 0.2s;
}
.blog-author:hover { opacity: 0.8; }
.blog-author-avatar-wrap {
  width: var(--blog-avatar-size, 52px);
  height: var(--blog-avatar-size, 52px);
  border-radius: 50%;
  background: var(--blog-purple);
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.blog-author-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.blog-author-info {
  display: flex; flex-direction: column;
  font-family: var(--sans); font-weight: 300;
  color: var(--blog-ink);
  min-width: 0;
}
.blog-author-name {
  font-family: var(--serif); font-weight: 300;
  font-size: 20px; line-height: 1.2;
  letter-spacing: -0.4px;
}
.blog-author-role {
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; line-height: 1.2;
  letter-spacing: -0.24px;
  color: var(--blog-ink); opacity: 0.5;
  /* clamp to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Quote-icon block (Figma — square ECE9E0 tile with "❝" mark inside) */
.blog-author-mark {
  width: var(--blog-avatar-size, 52px);
  height: var(--blog-avatar-size, 52px);
  flex-shrink: 0;
  display: block;
}
.blog-author--big .blog-author-mark { width: 56px; height: 56px; }
.blog-author--sm  .blog-author-mark { width: 52px; height: 52px; }

/* Big-byline variant inside the big featured card */
.blog-author--big { max-width: none; gap: 16px; }
.blog-author--big .blog-author-info { gap: 4px; min-width: 0; flex: 1 1 auto; }
.blog-author--big .blog-author-name { font-size: 22px; letter-spacing: -0.44px; }
.blog-author--big .blog-author-role {
  font-size: 16px; letter-spacing: -0.32px;
  /* big-card byline has room for one line */
  display: block;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: visible;
  white-space: normal;
}

/* ========== BLOG — MAIN SECTION (sidebar + grid) ========== */
.blog-section {
  padding: 80px var(--blog-pad-x) 0;
}
.blog-layout {
  max-width: var(--blog-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 326px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

/* ========== BLOG — STICKY SIDEBAR ========== */
.blog-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blog-surface-300) transparent;
  padding-right: 4px;
}
.blog-sidebar::-webkit-scrollbar { width: 6px; }
.blog-sidebar::-webkit-scrollbar-thumb { background: var(--blog-surface-300); border-radius: 6px; }
.blog-sidebar::-webkit-scrollbar-track { background: transparent; }

.blog-sidebar-inner {
  display: flex; flex-direction: column; gap: 38px;
}

/* Heading + search group */
.blog-filter-head {
  display: flex; flex-direction: column; gap: 18px;
}
.blog-sidebar-heading {
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 36px;
  color: var(--blog-ink);
  text-align: right;
  margin: 0;
}
.blog-search {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid rgba(10, 17, 26, 0.2);
  border-radius: 32px;
  padding: 6px 12px 6px 24px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-search:focus-within {
  border-color: var(--blog-ink);
  box-shadow: 0 0 0 4px rgba(10, 17, 26, 0.06);
}
.blog-search-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.blog-search-input {
  flex: 1; min-width: 0;
  padding: 16px 0;
  border: none; background: transparent;
  font-family: var(--sans); font-weight: 300; font-size: 18px;
  color: var(--blog-ink); outline: none;
}
.blog-search-input::placeholder { color: var(--blog-ink); opacity: 0.5; }
.blog-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.blog-search-submit {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--blog-ink);
  border-radius: 50px;
  transition: background 0.2s;
}
.blog-search-submit:hover { background: var(--blog-surface-100); }
.blog-search-submit svg { width: 22px; height: 22px; }

/* Filter groups */
.blog-filter-group {
  display: flex; flex-direction: column; gap: 16px;
}
.blog-filter-group-label {
  font-family: var(--sans); font-weight: 400;
  font-size: 18px; line-height: 26px;
  letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--blog-surface-500);
  padding: 0 8px;
  margin: 0;
}
.blog-filter-items {
  display: flex; flex-direction: column;
}
.blog-filter-item {
  display: flex; align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--blog-surface-100);
  background: transparent;
  color: var(--blog-ink);
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 26px;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}
.blog-filter-item:last-child { border-bottom: 1px solid var(--blog-surface-100); }
.blog-filter-item:hover { background: rgba(245, 242, 236, 0.5); }
.blog-filter-item.is-active {
  background: var(--blog-surface-100);
  justify-content: flex-end;
}
.blog-filter-item.is-active .blog-filter-item-text { text-align: right; }
.blog-filter-item-text { flex: 1 0 0; min-width: 0; }
.blog-filter-item.is-active .blog-filter-item-text { flex: 0 0 auto; }

/* ========== BLOG — MAIN COLUMN GRID ========== */
.blog-main {
  display: flex; flex-direction: column; gap: 60px;
  min-width: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 18px;
}

/* ========== BLOG — PAGINATION (pill style, right-aligned) ========== */
.blog-pagination {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  padding-right: 16px;
}
.blog-pagination-divider {
  width: 100%; height: 24px;
  opacity: 0.2;
}
.blog-pagination-list {
  display: inline-flex; gap: 2px;
  list-style: none; padding: 0; margin: 0;
  border-radius: 50px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.blog-pagination-item { list-style: none; }
.blog-pagination-list .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 10px 8px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; letter-spacing: -0.32px; line-height: 1.4;
  color: var(--blog-surface-500);
  background: transparent;
  border-radius: 50px;
  transition: background 0.2s, color 0.2s;
}
.blog-pagination-list .page-numbers:hover {
  background: var(--blog-surface-100);
  color: var(--blog-ink);
}
.blog-pagination-list .page-numbers.current,
.blog-pagination-list .page-numbers.is-active {
  background: transparent;
  color: var(--blog-ink);
  font-family: var(--sans); font-weight: 400;
}
.blog-pagination-list .page-numbers.dots {
  background: transparent;
  color: var(--blog-surface-500);
}

/* ========== BLOG — NEWSLETTER (full-width warm-50) ========== */
.blog-newsletter {
  /* Match the homepage page-edge padding (.hiw / .stories) */
  padding: 96px 164px 0;
  background: transparent;
}
.blog-newsletter-inner {
  padding: 64px 80px;
  background: var(--blog-surface-50);
  display: flex; flex-direction: column; gap: 16px;
}
.blog-newsletter-frame { width: 100%; height: 20px; display: block; }
.blog-newsletter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  padding: 0 43px 0 31px;
}
.blog-newsletter-copy {
  max-width: 602px;
  display: flex; flex-direction: column; gap: 8px;
}
.blog-newsletter-heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.4;
  letter-spacing: -0.88px;
  color: var(--blog-ink);
  margin: 0;
}
.blog-newsletter-sub {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2; letter-spacing: -0.48px;
  color: var(--blog-ink);
  margin: 0;
}
.blog-newsletter-form {
  width: 502px;
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.blog-newsletter-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.blog-newsletter-input-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1px solid rgba(10, 17, 26, 0.1);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-newsletter-input-row:focus-within {
  border-color: var(--blog-ink);
  box-shadow: 0 0 0 4px rgba(10, 17, 26, 0.06);
}
.blog-newsletter-input {
  flex: 1; min-width: 0;
  padding: 14px 0;
  border: none; background: transparent;
  font-family: var(--sans); font-weight: 500;
  font-size: 18px; color: var(--blog-ink);
  outline: none;
}
.blog-newsletter-input::placeholder { color: var(--blog-ink); opacity: 0.5; }
.blog-newsletter-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 16px 14px 20px;
  border-radius: 50px;
  background: var(--blog-ink);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--sans); font-weight: 500;
  font-size: 18px; line-height: 1.4;
  transition: background 0.2s;
}
.blog-newsletter-btn:hover { background: #1c2632; }
.blog-newsletter-btn-arrow {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
}
.blog-newsletter-btn-arrow svg { width: 10px; height: 10px; }
.blog-newsletter-fine {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ========== BLOG — FAQ (kept for SEO/GEO, not in Figma) ========== */
.blog-faq { padding: 96px var(--blog-pad-x) 0; }
.blog-faq-inner {
  max-width: var(--blog-max);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--blog-surface-50, #faf7f0);
  padding: 48px;
  border-radius: 16px;
}
.blog-faq-heading {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.2;
  letter-spacing: -0.3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--blog-surface-300);
  margin: 0;
}
.blog-faq-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--blog-surface-200);
}
.blog-faq-item {
  border-bottom: 1px solid var(--blog-surface-200);
  padding: 22px 0;
}
.blog-faq-q {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--blog-ink); letter-spacing: -0.3px;
  line-height: 1.4; cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.blog-faq-q::-webkit-details-marker { display: none; }
.blog-faq-q::after {
  content: '+'; font-family: var(--sans); font-weight: 300; font-size: 28px;
  line-height: 1; color: var(--blog-surface-600); flex-shrink: 0;
  transition: transform 0.25s;
}
.blog-faq-item[open] .blog-faq-q::after { transform: rotate(45deg); color: var(--blog-ink); }
.blog-faq-a {
  padding-top: 16px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 1.6; color: var(--blog-surface-600);
  max-width: 880px;
}
.blog-faq-a p + p { margin-top: 12px; }

/* ========== BLOG — EMPTY STATE ========== */
.blog-empty {
  padding: 40px 0; text-align: center;
  font-family: var(--serif); font-weight: 300;
  font-size: 22px; color: var(--blog-surface-600);
}

/* ========== BLOG — FOOTER RSS PILL (kept) ========== */
.footer-rss {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.7);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-rss:hover { color: var(--white); border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); }
.footer-rss-dot { width: 7px; height: 7px; background: var(--blog-cyan); border-radius: 50%; flex-shrink: 0; }

/* ========== BLOG — RESPONSIVE ========== */
@media (max-width: 1400px) {
  .blog-page { --blog-pad-x: 80px; }
  .blog-card.blog-card--featured-big {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 40px;
  }
  .blog-card.blog-card--featured-big .blog-card-media--big {
    width: 100%; max-width: 480px; aspect-ratio: 1 / 1; height: auto;
    padding: 28px;
  }
}
@media (max-width: 1200px) {
  .blog-page { --blog-pad-x: 48px; }
  .blog-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
  }
  .blog-card.blog-card--featured-big {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 32px;
  }
  .blog-card.blog-card--featured-big .blog-card-media--big {
    max-width: 380px; padding: 22px;
  }
  /* big-card title/excerpt sizes already responsive via clamp — keep gap reset */
  .blog-card-foot { gap: 32px; padding-top: 24px; }
}
@media (max-width: 1024px) {
  /* Collapse big card to single column only on tablet */
  .blog-card.blog-card--featured-big {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .blog-card.blog-card--featured-big .blog-card-media--big {
    max-width: 100%; padding: 24px;
  }
}
@media (max-width: 1024px) {
  .blog-hero { padding-top: 80px; }
  .blog-h1 { font-size: clamp(36px, 6vw, 56px); }
  /* On tablet/mobile the staggered (right-aligned) tail reads as misaligned —
     left-align it so the whole headline is one uniform left-aligned block. */
  .blog-h1-line--tail { justify-content: flex-start; text-align: left; }
  /* match homepage outer padding step (.hiw { 40px 24px } at this breakpoint) */
  .blog-featured  { padding: 40px 24px 0; }
  .blog-newsletter { padding: 64px 24px 0; }
  .blog-featured-inner { padding: 32px 24px 56px; gap: 56px; }
  .blog-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Sidebar stacks above main */
  .blog-section { padding-top: 56px; }
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .blog-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .blog-sidebar-inner {
    background: var(--blog-surface-50);
    border: 1px solid var(--blog-surface-200);
    padding: 24px;
    gap: 24px;
  }
  .blog-sidebar-heading { text-align: left; }

  .blog-newsletter-inner { padding: 48px 32px; }
  .blog-newsletter-row { flex-direction: column; align-items: stretch; padding: 0; gap: 24px; }
  .blog-newsletter-form { width: 100%; }
}
@media (max-width: 768px) {
  .blog-page { --blog-pad-x: 16px; }
  .blog-hero { padding-top: 56px; padding-bottom: 24px; }
  /* match homepage outer padding step (.hiw { 24px 12px } at this breakpoint) */
  .blog-featured  { padding: 24px 12px 0; }
  .blog-newsletter { padding: 40px 12px 0; }
  .blog-h1 {
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.3px;
  }
  .blog-h1-line--tail { gap: 0 12px; justify-content: flex-start; }
  .blog-h1-brand { gap: 10px; }
  .blog-h1-brand-logo { width: 40px; height: 40px; }
  .blog-h1-rotate-icon { width: 36px; height: 36px; transform: translateY(-0.04em); }
  .blog-h1-rotate-wrap,
  .blog-h1-rotate-item { height: 1.4em; }
  .blog-hero-sub { font-size: 17px; margin-top: 32px; line-height: 1.4; }

  .blog-about { padding-top: 32px; }

  .blog-featured-inner { padding: 24px 16px 40px; gap: 40px; }
  .blog-card.blog-card--featured-big .blog-card-media--big { padding: 16px; }
  .blog-card-title.blog-card-title--big { font-size: 28px; line-height: 1.28; }
  .blog-card-foot { gap: 28px; padding-top: 20px; }
  .blog-featured-row { grid-template-columns: 1fr; }

  .blog-section { padding-top: 40px; }
  .blog-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-card { gap: 32px; }
  .blog-card-body { gap: 32px; }
  .blog-card-title { font-size: 24px; }

  .blog-newsletter-inner { padding: 32px 20px; }
  .blog-newsletter-heading { font-size: 28px; line-height: 1.2; }
  .blog-newsletter-sub { font-size: 16px; }
  .blog-newsletter-input { padding: 10px 0; font-size: 16px; }
  .blog-newsletter-btn { padding: 10px 14px; font-size: 14px; }

  .blog-faq { padding-top: 56px; }
}

/* =====================================================================
 * ARTICLE — single post template (Figma 158:2380)
 * ===================================================================== */

.article-page {
  /* Match `.nav` horizontal padding so the hero/breadcrumb/H1/cards
     line up vertically with the logo on the left and the Book-a-Demo
     button on the right at every breakpoint. */
  --art-pad-x: 164px;
  --art-rail-w: 248px;
  --art-body-w: 913px;
  --art-max: 1352px;
  --art-ink: #0a111a;
  --art-muted: #757575;
  --art-faint: #9e9e9e;
  --art-toc-inactive: #aeaba9;
  --art-stat-label: #424242;
  --art-surface-50: #faf7f0;
  --art-surface-100: #f5f2ec;
  --art-surface-200: #ece9e0;
  --art-surface-300: #d4d2cb;
  --art-cyan: #06b6d4;
  --art-cyan-deep: #059bb4;
  --art-cyan-soft: #b2e8f0;
  color: var(--art-ink);
  background: var(--bg);
}

/* ========== Article hero ========== */
.article-hero {
  padding: 200px var(--art-pad-x) 80px;
}
.article-hero-inner {
  max-width: var(--art-max);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.article-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 400;
  font-size: 13px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--art-faint);
}
.article-breadcrumb a {
  color: var(--art-faint);
  transition: color 0.2s;
}
.article-breadcrumb a:hover { color: var(--art-ink); }
.article-breadcrumb-sep {
  font-size: 14px; line-height: 1;
  color: var(--art-faint);
}
.article-h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.18; letter-spacing: -0.4px;
  color: var(--art-ink);
  max-width: none;
  margin: 0;
}
.article-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--art-surface-300);
}
.article-meta-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.article-meta-label {
  font-family: var(--sans); font-weight: 400;
  font-size: 13px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--art-faint);
}
.article-meta-value {
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.4;
  color: var(--art-ink);
  letter-spacing: -0.2px;
}
a.article-meta-value { transition: color 0.2s; }
a.article-meta-value:hover { color: var(--art-cyan); }

/* ========== Body shell (rail + content) inside warm-50 panel ========== */
.article-panel {
  padding: 0 var(--art-pad-x) 64px;
  background: var(--bg);
}
.article-shell {
  max-width: var(--art-max);
  margin: 0 auto;
  padding: 64px 57px 80px;
  background: var(--art-surface-50);
  display: grid;
  grid-template-columns: var(--art-rail-w) minmax(0, var(--art-body-w));
  justify-content: center;
  gap: 76px;
  align-items: start;
}
.article-rail {
  position: sticky;
  /* Clear the scroll-pinned .nav: 16px top + ~44px capsule + 16px bottom ≈ 76px,
     plus 20px breathing room so the TOC label doesn't kiss the nav. */
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--art-surface-300) transparent;
  padding-right: 4px;
  /* Room below the last block (the author) so it never sits flush against the
     clip edge and reads as cut off. */
  padding-bottom: 40px;
}
.article-rail::-webkit-scrollbar { width: 6px; }
.article-rail::-webkit-scrollbar-thumb { background: var(--art-surface-300); border-radius: 6px; }
.article-rail-inner {
  display: flex; flex-direction: column; gap: 40px;
}

/* ----- Rail label (shared for TOC / Discuss / Author) ----- */
.article-rail-label {
  font-family: var(--sans); font-weight: 400;
  font-size: 18px; line-height: 26px;
  text-transform: uppercase; color: var(--art-faint);
  margin: 0 0 28px;
  letter-spacing: normal;
}

/* ----- TOC: cyan-diamond bullet items -----
   `padding-left: 2px` gives the diamond's rotated 45° corners breathing room
   so they don't get clipped by the rail's overflow on the left edge. */
.article-toc-list {
  list-style: none; padding: 0 0 0 2px; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.article-toc-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--art-surface-200);
  font-family: var(--sans); font-weight: 300; font-size: 18px;
  line-height: 26px; letter-spacing: -0.1px;
  color: var(--art-toc-inactive); opacity: 1;
  transition: color 0.2s, border-color 0.2s;
}
/* `margin-top` math: line-height 26 − diamond 8 → 9 px. Pins diamond to
   the cap-line of the FIRST text line, even when the link wraps. */
.article-toc-diamond {
  width: 8px; height: 8px; flex-shrink: 0;
  background: var(--art-toc-inactive);
  transform: rotate(45deg);
  margin-top: 9px;
  transition: background 0.2s;
}
.article-toc-link:hover { color: var(--art-ink); }
.article-toc-link:hover .article-toc-diamond { background: var(--art-ink); }
.article-toc-item.is-active .article-toc-link {
  color: var(--art-ink); border-bottom-color: var(--art-cyan);
}
.article-toc-item.is-active .article-toc-diamond { background: var(--art-cyan); }

/* ----- Discuss this — 3 labeled buttons ----- */
.article-discuss-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.article-discuss-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px;
  background: transparent;
  border: 1px solid var(--art-surface-200);
  border-radius: 8px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 26px;
  color: var(--art-ink);
  transition: border-color 0.2s, background 0.2s;
}
.article-discuss-btn:hover {
  background: rgba(10,17,26,0.03);
  border-color: var(--art-surface-300);
}
.article-discuss-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px 3px 3px;
  border-right: 1px solid var(--art-surface-200);
  flex-shrink: 0;
}
.article-discuss-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.article-discuss-label {
  flex: 1; min-width: 0;
  letter-spacing: -0.2px;
}
.article-discuss-arrow {
  flex-shrink: 0;
  color: var(--art-ink); opacity: 0.5;
  transition: transform 0.2s, opacity 0.2s;
}
.article-discuss-btn:hover .article-discuss-arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* ----- About author card ----- */
.article-author {
  display: flex; flex-direction: column;
}
.article-author-head {
  display: flex; align-items: center; gap: 10px;
  color: var(--art-ink);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--art-surface-200);
  transition: opacity 0.2s;
}
.article-author-head:hover { opacity: 0.75; }
.article-author-avatar-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: #bfa9fe;
}
.article-author-avatar {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;
}
.article-author-name {
  font-family: var(--serif); font-weight: 300;
  font-size: 24px; line-height: 26px;
  letter-spacing: -0.3px; color: var(--art-ink);
}
.article-author-bio {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 20px;
  color: var(--art-ink);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--art-surface-200);
}
.article-author-bio p { margin: 0; max-width: none; }
.article-author-expertise {
  display: flex; flex-direction: column; gap: 12px;
}
.article-author-expertise-label {
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 20px;
  color: var(--art-ink);
  margin: 0;
}
.article-author-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.article-author-tag {
  display: inline-flex; align-items: center;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--art-surface-200);
  border-radius: 5px;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 20px;
  letter-spacing: -0.1px;
  color: var(--art-ink);
  white-space: nowrap;
}

/* ---- Case team (replaces About author on Customer Story articles) ---- */
.article-case-team {
  display: flex; flex-direction: column;
}
.article-case-team-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.article-case-team-member {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--art-surface-200);
}
.article-case-team-member:last-child { border-bottom: none; }
.article-case-team-side {
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--art-cyan);
}
.article-case-team-member.is-client .article-case-team-side {
  color: var(--art-muted);
}
.article-case-team-row {
  display: flex; align-items: center; gap: 12px;
}
.article-case-team-avatar-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: #bfa9fe;
  display: inline-flex; align-items: center; justify-content: center;
}
.article-case-team-avatar {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;
}
.article-case-team-avatar-wrap--blank {
  background: var(--art-surface-100);
  color: var(--art-ink);
}
.article-case-team-avatar-initials {
  font-family: var(--serif); font-weight: 400;
  font-size: 16px; line-height: 1;
  letter-spacing: -0.2px;
}
.article-case-team-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.article-case-team-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 18px; line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--art-ink);
}
.article-case-team-role {
  font-family: var(--sans); font-weight: 300;
  font-size: 13px; line-height: 1.3;
  color: var(--art-muted);
}

/* =====================================================================
 * ARTICLE — content blocks
 *
 * Targets BOTH core Gutenberg classes AND `.tely-*` custom blocks so the
 * content can be authored via the editor OR pasted as raw HTML.
 * ===================================================================== */

.article-body {
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 24px;
  color: var(--art-ink);
  letter-spacing: -0.2px;
}

/* ----- Section eyebrow + H2 -----
   Eyebrow rendered as a tiny strip above the H2: cyan diamond (::after)
   + uppercase label (::before content from data-eyebrow) + bottom divider.
   The padding-top on the H2 carves the space; absolute children sit on
   the top edge so the first H2 inside .article-body aligns its strip with
   the rail's "Table of contents" label. */
.article-body h2,
.article-body .wp-block-heading.is-style-eyebrow + h2 {
  position: relative;
  font-family: var(--serif); font-weight: 300;
  font-size: 48px;
  line-height: 1.1; letter-spacing: -0.3px;
  color: var(--art-ink);
  margin: 100px 0 56px;
  scroll-margin-top: 32px;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body h2[data-eyebrow] {
  padding-top: 56px;
}
/* Uppercase label strip with divider — ink text */
.article-body h2[data-eyebrow]::before {
  content: attr(data-eyebrow);
  position: absolute;
  top: 0; left: 0; right: 0;
  display: block;
  padding: 0 0 12px 20px;
  border-bottom: 1px solid var(--art-surface-300);
  font-family: var(--sans); font-weight: 300;
  font-size: 14px; line-height: 20px; letter-spacing: 0.42px;
  text-transform: uppercase; color: var(--art-ink);
}
/* Cyan diamond placed at the strip's left edge */
.article-body h2[data-eyebrow]::after {
  content: '';
  position: absolute;
  top: 6px; left: 0;
  width: 8px; height: 8px;
  background: var(--art-cyan);
  transform: rotate(45deg);
}
.article-body h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: 32px; line-height: 34px;
  letter-spacing: -0.4px;
  color: var(--art-ink);
  margin: 40px 0 16px;
}

/* ----- Paragraph ----- */
.article-body p {
  margin: 0 0 24px;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body p a {
  color: var(--art-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--art-surface-300);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.article-body p a:hover { color: var(--art-cyan); text-decoration-color: var(--art-cyan); }

/* Cyan highlight on key phrases */
.article-body mark,
.article-body .has-cyan-highlight {
  background: var(--art-cyan-soft);
  color: var(--art-ink);
  padding: 2px 0;
  border-radius: 0;
  font-weight: inherit;
}

.article-body em, .article-body i {
  font-family: var(--serif); font-style: italic; font-weight: 400;
}
.article-body strong, .article-body b {
  font-weight: 500;
}

/* ----- Pullquote ----- */
.article-body blockquote,
.article-body .wp-block-quote {
  position: relative;
  margin: 48px 0;
  padding: 32px 24px 24px;
  background: var(--art-surface-100);
  border: 1px solid var(--art-surface-300);
  border-radius: 0;
}
.article-body blockquote p,
.article-body .wp-block-quote p {
  font-family: var(--serif); font-weight: 300; font-style: normal;
  font-size: 28px;
  line-height: 32px; color: var(--art-ink);
  margin: 0 0 32px;
}
.article-body blockquote cite,
.article-body .wp-block-quote cite {
  font-family: var(--sans); font-weight: 400;
  font-style: normal;
  font-size: 14px; letter-spacing: -0.2px;
  color: var(--art-muted);
}

/* ----- Image ----- */
.article-body figure,
.article-body .wp-block-image {
  margin: 48px 0;
}
.article-body figure img,
.article-body .wp-block-image img {
  width: 100%; height: auto; display: block;
  background: var(--art-surface-100);
}
.article-body figcaption,
.article-body .wp-block-image figcaption {
  margin-top: 12px;
  font-family: var(--sans); font-weight: 300;
  font-size: 13px; color: var(--art-muted);
  letter-spacing: -0.2px;
  text-align: center;
}

/* ----- Bullet list (cyan diamond) ----- */
.article-body ul,
.article-body .wp-block-list:not(.is-style-numbered) {
  list-style: none; padding: 0;
  margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.article-body ul li,
.article-body .wp-block-list:not(.is-style-numbered) > li {
  position: relative;
  padding-left: 32px;
  font-family: var(--sans); font-weight: 300;
  font-size: 20px; line-height: 28px;
  color: var(--art-ink);
}
.article-body ul li::before,
.article-body .wp-block-list:not(.is-style-numbered) > li::before {
  content: '';
  position: absolute;
  left: 4px; top: 12px;
  width: 8px; height: 8px;
  background: var(--art-cyan);
  transform: rotate(45deg);
}

/* ----- Numbered list — compact (default ol) ----- */
.article-body ol {
  list-style: none; padding: 0;
  margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 12px;
  counter-reset: artnum;
}
.article-body ol > li {
  counter-increment: artnum;
  position: relative;
  padding-left: 36px;
  font-family: var(--sans); font-weight: 300;
  font-size: 17px; line-height: 1.5;
  color: var(--art-ink);
}
.article-body ol > li::before {
  content: counter(artnum, decimal-leading-zero) '.';
  position: absolute;
  left: 0; top: 0;
  font-family: var(--sans); font-weight: 500;
  font-size: 14px; line-height: 1.5;
  color: var(--art-cyan);
  min-width: 28px;
}

/* ----- Numbered list — large (Newsreader № prefix) ----- */
.article-body .tely-numbered {
  list-style: none; padding: 0;
  margin: 32px 0;
  display: flex; flex-direction: column;
  counter-reset: bignum;
}
.article-body .tely-numbered > li {
  counter-increment: bignum;
  position: static;
  display: flex; align-items: baseline; gap: 16px;
  padding: 24px 0;
  padding-left: 0;
  border-bottom: 1px solid var(--art-surface-300);
  font-family: var(--serif); font-weight: 300; font-style: normal;
  font-size: 38px; line-height: 48px; color: var(--art-ink);
  letter-spacing: -0.4px;
}
.article-body .tely-numbered > li:first-child { border-top: 1px solid var(--art-surface-300); }
.article-body .tely-numbered > li::before {
  content: '№' counter(bignum);
  position: static;
  font-family: var(--serif); font-style: normal; font-weight: 300;
  font-size: 38px; line-height: 48px; color: var(--art-cyan-deep);
  min-width: 0; flex-shrink: 0;
  letter-spacing: -0.4px;
}

/* ----- Info-card grid (2-up) ----- */
.tely-info-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0;
}
.tely-info-card {
  display: flex; flex-direction: column; gap: 32px;
  justify-content: space-between;
  padding: 40px;
  background: transparent;
  border: 1px solid var(--border);
}
.tely-info-card-image {
  display: block; width: 100%; height: 180px;
  background: var(--warm2);
  object-fit: cover;
  margin: -40px -40px 8px;
  width: calc(100% + 80px);
}
.tely-info-card h3,
.tely-info-card-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 36px; line-height: 40px; letter-spacing: -0.4px;
  color: var(--ink); margin: 0;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border);
}
.tely-info-card p,
.tely-info-card-text {
  font-family: var(--sans); font-weight: 300;
  font-size: 20px; line-height: 28px; color: var(--ink);
  margin: 0;
}
.tely-info-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding: 12px 16px;
  background: var(--warm2);
  border: none; border-radius: 4px;
  font-family: var(--sans); font-weight: 400;
  font-size: 18px; line-height: 24px; color: var(--ink);
  align-self: flex-start;
  white-space: nowrap;
}
.tely-info-card-tag::before {
  content: '↑';
  font-size: inherit; line-height: inherit;
  color: inherit;
  font-weight: 400;
  flex-shrink: 0;
}
/* Inline phrase highlight — pale-cyan "marker pen" effect inside info-card
   body text. Works on any element: <mark>, <span class="tely-highlight">.
   box-decoration-break: clone makes the bg wrap nicely across line breaks. */
.tely-info-card-text mark,
.tely-info-card-text .tely-highlight,
.tely-highlight {
  background: #B2E8F0;
  color: var(--ink);
  padding: 2px 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ----- Pullquote with speaker photo + role ----- */
.article-body blockquote .quote-speaker,
.tely-quote-speaker {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px;
}
.article-body blockquote .quote-speaker::before,
.tely-quote-speaker::before {
  content: '';
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: url('../assets/quote-icon.svg') center / contain no-repeat;
}
.tely-quote-speaker-photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--art-surface-200);
}
.tely-quote-speaker-info {
  display: flex; flex-direction: column;
  gap: 2px;
}
.tely-quote-speaker-info br { display: none; }
.tely-quote-speaker-name,
.tely-quote-speaker-role { display: block; }
.tely-quote-speaker-name {
  font-family: var(--serif); font-weight: 300;
  font-style: normal;
  font-size: 20px; line-height: 1; color: var(--art-ink);
  letter-spacing: -0.2px;
}
.tely-quote-speaker-role {
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; color: var(--art-muted);
  letter-spacing: -0.1px;
}

/* ----- Stat-card row (ChatGPT / Perplexity / Gemini) ----- */
.tely-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 48px;
}
.tely-stat-card {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  text-align: left;
}
/* Visual order enforced via `order` so the layout (label TOP / divider /
   value BOTTOM) is correct regardless of which Gutenberg block sequence
   the editor writes. */
.tely-stat-label {
  order: 1;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--art-surface-300);
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 1.4;
  letter-spacing: -0.1px;
  text-transform: none;
  color: var(--art-muted);
}
.tely-stat-value {
  order: 2;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 5vw, 78px); line-height: 1;
  color: var(--art-ink); letter-spacing: -1.5px;
}

/* ----- Challenges (3-up text blocks, same grid dimensions as stat cards) ----- */
.tely-challenges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 48px;
}
.tely-challenge-card {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  text-align: left;
}
.tely-challenge-label {
  order: 1;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--art-surface-300);
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 1.4;
  letter-spacing: -0.1px;
  color: var(--art-muted);
}
.tely-challenge-title {
  order: 2;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2; letter-spacing: -0.3px;
  color: var(--art-ink);
  margin: 0 0 12px;
}
.tely-challenge-text {
  order: 3;
  font-family: var(--sans); font-weight: 300;
  font-size: 15px; line-height: 1.5;
  color: var(--art-ink);
  margin: 0;
}

/* ----- Comparison block (Before / With Tely AI) ----- */
.tely-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0;
}
.tely-compare-card {
  display: flex; flex-direction: column; gap: 0;
  padding: 40px;
  background: var(--art-surface-50);
  border: 1px solid var(--art-surface-300);
}
.tely-compare-card-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 36px; line-height: 40px; letter-spacing: -0.4px;
  color: var(--art-ink); margin: 0;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--art-surface-300);
}
.tely-compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.tely-compare-list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--art-surface-300);
  font-family: var(--sans); font-weight: 300;
  font-size: 20px; line-height: 28px; color: var(--art-ink);
}
.tely-compare-list li:first-child { border-top: none; }
.article-body .tely-compare-list li::before {
  content: '';
  position: static;
  width: 16px; height: 28px;
  flex-shrink: 0;
  margin-top: 0;
  background: none;
  transform: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.article-body .tely-compare--bad .tely-compare-list li::before {
  background-image: url('../assets/cross.svg');
}
.article-body .tely-compare--good .tely-compare-list li::before {
  background-image: url('../assets/check.svg');
}

/* ----- Table ----- */
.article-body table,
.article-body .wp-block-table table {
  width: 100%;
  margin: 48px 0;
  border-collapse: collapse;
  font-family: var(--sans); font-weight: 300;
  font-size: 15px; line-height: 1.5;
  color: var(--art-ink);
  background: transparent;
}
.article-body th,
.article-body .wp-block-table th {
  font-family: var(--serif); font-weight: 400;
  font-size: 16px; letter-spacing: -0.2px;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--art-ink);
  background: transparent;
  color: var(--art-ink);
}
.article-body td,
.article-body .wp-block-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--art-surface-200);
  font-weight: 300;
}
.article-body tbody tr:hover {
  background: var(--art-surface-50);
}

/* ----- Chart / diagram embed ----- */
.tely-embed {
  margin: 32px 0;
  padding: 0;
  background: var(--art-surface-50);
  border: 1px solid var(--art-surface-300);
  border-radius: 24px;
  overflow: hidden;
}
.tely-embed-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 20px; line-height: 26px; letter-spacing: 0;
  text-transform: uppercase; color: var(--art-ink);
  margin: 0;
  text-align: left;
  padding: 10px 10px 16px;
  border-bottom: 1px solid var(--art-surface-300);
}
.tely-embed img,
.tely-embed svg {
  display: block; width: 100%; height: auto;
  padding: 24px;
}

/* ----- Article FAQ ----- */
.article-body .article-faq {
  margin-top: 100px;
  display: flex; flex-direction: column;
  background: var(--blog-surface-50, #faf7f0);
  padding: 48px 48px 24px;
  border-radius: 16px;
}
.article-body .article-faq-heading {
  font-family: var(--serif); font-weight: 300;
  font-size: 48px; line-height: 63px; letter-spacing: -0.3px;
  color: var(--art-ink);
  margin: 0 0 48px;
}
.article-faq-list {
  display: flex; flex-direction: column;
}
.article-faq-item {
  border-bottom: 1px solid var(--art-surface-300);
}
.article-faq-q {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans); font-weight: 300;
  font-size: 20px; line-height: 28px; color: var(--art-ink);
  letter-spacing: -0.2px;
}
.article-faq-q::-webkit-details-marker { display: none; }
.article-faq-diamond {
  width: 8px; height: 8px; flex-shrink: 0;
  background: var(--art-cyan);
  transform: rotate(45deg);
}
.article-faq-q-text { flex: 1; min-width: 0; }
.article-faq-chevron {
  flex-shrink: 0;
  color: var(--art-ink);
  transition: transform 0.25s;
}
.article-faq-item[open] .article-faq-chevron { transform: rotate(180deg); }
.article-faq-a {
  padding: 0 32px 24px;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 28px; color: var(--art-ink);
}
.article-faq-a p { margin: 0 0 16px; }
.article-faq-a p:last-child { margin-bottom: 0; }

/* ----- Related posts ----- */
.article-related {
  background: var(--blog-surface-50, #faf7f0);
  margin-top: 64px;
  padding: 64px var(--art-pad-x);
}
.article-related-inner {
  max-width: var(--art-max);
  margin: 0 auto;
}
.article-related-heading {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; letter-spacing: 0.54px;
  text-transform: uppercase; color: var(--art-ink);
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--art-surface-300);
  margin: 0 0 48px;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* ========== DESIGN SYSTEM PAGE ==========
   Living index of every component. Layout-only — components inside are
   styled by their own CSS exactly as they render on real templates. */
.ds-page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px 48px 96px;
}
.ds-nav { position: sticky; top: 96px; align-self: start; }
.ds-nav-title {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.ds-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-nav-list a {
  font-family: var(--sans); font-weight: 400; font-size: 14px;
  color: var(--ink); text-decoration: none; transition: opacity 0.2s;
}
.ds-nav-list a:hover { opacity: 0.55; }

.ds-shell { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
.ds-header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--border2); }
.ds-eyebrow { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin: 0; }
.ds-title { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: 1.1; color: var(--ink); margin: 0; }
.ds-intro { font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--muted2); max-width: 640px; margin: 0; }

.ds-section { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 96px; }
.ds-section-title {
  font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.2;
  color: var(--ink); margin: 0;
  padding-bottom: 12px; border-bottom: 1px solid var(--border2);
}
.ds-section-note {
  font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.55;
  color: var(--muted2); margin: 0; max-width: 720px;
}
.ds-section-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--warm2); padding: 2px 6px; border-radius: 3px; }
.ds-stack { display: flex; flex-direction: column; gap: 32px; }
.ds-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ds-spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--muted); margin: 0 0 8px;
}
.ds-spec--light { color: rgba(255,255,255,0.6); }
.ds-snippet {
  background: var(--warm2); border: 1px solid var(--border2);
  padding: 16px; border-radius: 4px; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  color: var(--ink); overflow-x: auto;
}
.ds-snippet code { font: inherit; color: inherit; background: transparent; padding: 0; }

/* "Used on" chip list — quick map from a component to the live URLs that
   render it, so we always know what a CSS tweak will touch. */
.ds-uses {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0;
}
.ds-uses-label {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
  margin-right: 4px;
}
.ds-use-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--warm); border: 1px solid var(--border2);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--ink); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.ds-use-chip::before { content: '↗'; opacity: 0.45; font-size: 10px; line-height: 1; }
.ds-use-chip:hover { border-color: var(--ink); background: var(--warm2); transform: translateY(-1px); }

@media (max-width: 900px) {
  .ds-page { grid-template-columns: 1fr; padding: 80px 24px 60px; gap: 32px; }
  .ds-nav { position: static; }
  .ds-title { font-size: 40px; }
}

/* ========== CASE STUDY — Hero meta + metric cards ==========
   Faithful to Figma node 190:1981 (Customer Story hero):

   ┌─ 3 metric cards · 1px border · padding 24 · gap 16 ───────┐
   │ ┌────────────────────┐                                    │
   │ │ EST. CLOSED REVENUE│ ← caption (Manrope 18/32 #9e9e9e) │
   │ │ ─────────────────  │ ← border-bottom divider           │
   │ │                    │ ← gap 32                          │
   │ │ $612K              │ ← value (Newsreader 40/48 ink)    │
   │ └────────────────────┘                                    │

   ┌─ 3 meta columns · gap 24 · 1fr each ──────────────────────┐
   │  AUTHOR ─────  DATE  ─────  CATEGORY ─────                │
   │  Askhat …      May 3, 2026   GEO & AEO                    │
   │  (Newsreader 28/36 · letter-spacing 0.84)                 │
*/
.case-hero .article-hero-inner { display: flex; flex-direction: column; gap: 40px; }

.case-metrics {
  /* Subgrid: parent owns 2 rows (label area / value area). Each card
     inherits these rows, so the label divider lines up across cards
     regardless of how many lines the label wraps to, and all values
     bottom-align. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 32px;
  align-items: stretch;
}
.case-metric {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  border: 1px solid var(--border2);
  background: transparent;
  padding: 24px 24px 30px;
}
/* `order` lets the editor write the value first (existing markup) while we
   paint label on top — keeps backward-compat with the importer. */
.case-metric-label {
  order: 1;
  align-self: stretch;
  font-family: var(--sans); font-weight: 300;
  font-size: 16px; line-height: 24px;
  color: #9e9e9e; text-transform: uppercase;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 8px;
  margin: 0; letter-spacing: 0.3px;
}
.case-metric-value {
  order: 2;
  align-self: end;
  font-family: var(--serif); font-weight: 300;
  font-size: 56px; line-height: 1; color: var(--ink);
  letter-spacing: -1.5px; margin: 0;
}

.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  border: 0;
}
.case-meta-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.case-meta-col--wide { /* legacy modifier — Figma uses equal columns */ }
.case-meta-label {
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 32px;
  color: #9e9e9e;
  text-transform: uppercase; letter-spacing: 0.54px;
  border-bottom: 1px solid var(--border2);
  padding: 10px 10px 6px 8px;
}
.case-meta-value {
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 36px;
  color: var(--ink);
  letter-spacing: 0.84px;
  padding: 0 16px 0 8px;
}

.case-hero-date {
  font-family: var(--sans); font-weight: 300; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* ========== CASE STUDY — In-body components ==========
   Scoped under `.case-body` so they outrank the opinionated article-body
   list/paragraph rules above (.case-body .case-X = 0,2,0 beats
   .article-body ol > li = 0,1,2). Explicit resets null out the
   position/padding-left/font that those rules would otherwise inherit. */

/* ----- All in-body case-* components now mirror their .article-body
   counterparts so the Customer Story content reads visually identical to
   a regular article. ----- */

/* Services list ≡ .article-body ul (cyan dot, plain text, vertical list) */
.case-body .case-tags {
  display: flex; flex-direction: column; gap: 12px;
  margin: 32px 0;
  padding: 0;
  list-style: none;
}
.case-body .case-tag {
  position: relative;
  padding: 0 0 0 24px;
  background: transparent; border: none; border-radius: 0;
  font-family: var(--sans); font-weight: 300;
  font-size: 17px; line-height: 1.5;
  color: var(--art-ink);
  display: list-item;
}
.case-body .case-tag::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 7px; height: 7px;
  background: var(--art-cyan);
  border-radius: 50%;
  transform: none;
}

/* Numbered principles ≡ .tely-numbered (№X italic + title row + divider) */
.case-body .case-principles {
  list-style: none; padding: 0;
  margin: 32px 0;
  counter-reset: case-principle;
  display: flex; flex-direction: column;
}
.case-body .case-principle {
  counter-increment: case-principle;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--art-surface-200);
  align-items: baseline;
  position: static; padding-left: 0;
  font-family: var(--sans); font-weight: 400;
  font-size: 17px; line-height: 1.4;
  color: var(--art-ink);
}
.case-body .case-principle:first-child { border-top: 1px solid var(--art-surface-200); }
.case-body .case-principle::before {
  content: '№' counter(case-principle);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1;
  color: var(--art-ink);
  letter-spacing: -0.4px;
  position: static; left: auto; top: auto; min-width: 0;
}
.case-body .case-principle-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-body .case-principle-title {
  font-family: var(--sans); font-weight: 400;
  font-size: 17px; line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--art-ink);
  margin: 0;
}
.case-body .case-principle-text {
  font-family: var(--sans); font-weight: 300;
  font-size: 15px; line-height: 1.5;
  color: var(--art-muted); margin: 0;
}

/* Tely growth chart card — wrapper around the inline 1080×570 SVG ported
   1:1 from tely.ai/customers/nweyeclinic. Warm-50 panel, subtle border,
   rounded corners. The SVG scales fluid-width via preserveAspectRatio. */
.tely-chart-card {
  background: var(--warm);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}
.tely-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Chart wrapper ≡ .tely-embed (white bg, surface-200 border, padding 28) */
.case-body .case-chart {
  background: var(--bg);
  border: 1px solid var(--art-surface-200);
  padding: 28px;
  margin: 32px 0;
  display: flex; flex-direction: column; gap: 16px;
}
.case-body .case-chart-eyebrow {
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--art-muted);
  margin: 0 0 0;
  display: flex; align-items: center; gap: 10px;
  text-align: center;
}
.case-body .case-chart-eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--art-cyan);
  transform: rotate(45deg);
}
.case-chart-svg { width: 100%; height: auto; display: block; }
.case-chart-svg .grid-line { stroke: var(--border2); stroke-width: 1; }
.case-chart-svg .axis-label { font-family: var(--sans); font-weight: 300; font-size: 12px; fill: var(--muted); }
.case-chart-svg .y-label { text-anchor: end; }
.case-chart-svg .x-label { text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; }
.case-chart-svg .traffic-line { stroke: var(--cyan); stroke-width: 2.5; fill: none; }
.case-chart-svg .traffic-area { fill: var(--cyan); opacity: 0.12; }
.case-chart-svg .data-point { fill: var(--cyan); stroke: var(--warm); stroke-width: 2; }

/* ========== CASE STUDY — responsive ========== */
@media (max-width: 1024px) {
  .case-meta-grid { grid-template-columns: 1fr 1fr; }
  .case-meta-col--wide { grid-column: 1 / -1; }
  .case-metrics { grid-template-columns: 1fr; gap: 0; margin: 24px 0 32px; }
  .case-metric { padding: 20px 0 24px; }
  .case-metric-label {
    font-size: 14px; line-height: 1.4;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }
  .case-metric-value { font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
  /* case-principle keeps the article-numbered compact rhythm — no override
     needed (48 px gutter + 24 px gap works at this breakpoint). */
}
@media (max-width: 640px) {
  .case-meta-grid { grid-template-columns: 1fr; padding: 16px 0; gap: 16px; }
  .case-meta-col--wide { grid-column: auto; }
  /* metric value sized via the 1024 breakpoint override */
  .case-body .case-principle { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
}

/* ========== ARTICLE — responsive ========== */
@media (max-width: 1200px) {
  .article-page { --art-pad-x: 48px; --art-rail-w: 220px; --art-body-w: 700px; }
  .article-shell { gap: 64px; }
}
@media (max-width: 1024px) {
  .article-page { --art-pad-x: 32px; }
  .article-hero { padding: 140px var(--art-pad-x) 56px; }
  .article-h1 { font-size: clamp(40px, 6vw, 56px); line-height: 1.15; }
  .article-shell {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 32px 56px;
  }
  .article-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .article-rail-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .article-toc { grid-column: 1 / -1; }
  .article-discuss-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .article-discuss-list > li { flex: 1 1 200px; min-width: 0; }
  .tely-info-cards,
  .tely-compare,
  .article-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tely-stat-row,
  .tely-challenges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-body h2 { font-size: 38px; line-height: 1.12; margin: 72px 0 40px; }
  .article-body h2[data-eyebrow] { padding-top: 48px; }
  .article-body h3 { font-size: 28px; line-height: 1.2; }
  .article-body .tely-numbered > li,
  .article-body .tely-numbered > li::before {
    font-size: 22px; line-height: 1.3;
  }
  .tely-stat-value { font-size: 56px; line-height: 1.1; letter-spacing: -1px; }
  .tely-info-card { padding: 32px; gap: 32px; }
  .tely-info-card-image { margin: -32px -32px 8px; width: calc(100% + 64px); }
  .tely-info-card h3,
  .tely-info-card-title,
  .tely-compare-card-title { font-size: 28px; line-height: 1.18; }
  .tely-compare-card { padding: 32px; }
  .article-body .article-faq { margin-top: 72px; }
  .article-body .article-faq-heading { font-size: 38px; line-height: 1.18; margin-bottom: 32px; }
  .article-related { padding: 56px 32px; }
}
@media (max-width: 768px) {
  .article-page { --art-pad-x: 16px; }
  .article-hero { padding: 100px var(--art-pad-x) 32px; }
  .article-h1 { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.12; letter-spacing: -0.3px; }
  .article-shell { padding: 24px 16px 40px; gap: 32px; }
  .article-meta { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .article-meta-col { min-width: 0; }
  .article-rail-inner { grid-template-columns: 1fr; gap: 28px; }
  .article-discuss-list { flex-direction: column; }
  .article-discuss-list > li { flex: 1 1 auto; }
  .article-body { font-size: 17px; line-height: 1.55; }
  .article-body p { font-size: 17px; }
  .article-body h2 { margin: 56px 0 32px; font-size: 30px; line-height: 1.12; }
  .article-body h2[data-eyebrow] { padding-top: 40px; }
  .article-body h2[data-eyebrow]::before {
    font-size: 12px; line-height: 18px; letter-spacing: 0.4px;
    padding: 0 0 10px 16px;
  }
  .article-body h2[data-eyebrow]::after { top: 4px; width: 7px; height: 7px; }
  .article-body h3 { font-size: 23px; line-height: 1.2; margin: 32px 0 12px; }
  .article-body ul li,
  .article-body .wp-block-list:not(.is-style-numbered) > li,
  .tely-compare-list li,
  .tely-info-card p,
  .tely-info-card-text { font-size: 17px; line-height: 1.55; }
  .article-body .tely-numbered { margin: 24px 0; }
  .article-body .tely-numbered > li {
    flex-wrap: wrap; gap: 8px; padding: 20px 0;
    font-size: 19px; line-height: 1.3;
  }
  .article-body .tely-numbered > li::before { font-size: 19px; line-height: 1.3; }
  .tely-info-cards,
  .tely-compare,
  .article-related-grid { grid-template-columns: 1fr; }
  .tely-stat-row,
  .tely-challenges { grid-template-columns: 1fr; gap: 0; margin: 24px 0 32px; }
  .tely-stat-card,
  .tely-challenge-card { padding: 20px 0 24px; }
  .tely-stat-label,
  .tely-challenge-label {
    font-size: 14px; line-height: 1.4;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }
  .tely-stat-value { font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
  .tely-challenge-title { font-size: 22px; line-height: 1.2; }
  .tely-info-card { padding: 24px; gap: 24px; }
  .tely-info-card-image { margin: -24px -24px 0; width: calc(100% + 48px); height: 160px; }
  .tely-info-card h3,
  .tely-info-card-title,
  .tely-compare-card-title { font-size: 24px; line-height: 1.18; padding-bottom: 14px; }
  .tely-compare-card { padding: 24px; }
  .article-body blockquote,
  .article-body .wp-block-quote { margin: 32px 0; padding: 24px 20px; }
  .article-body blockquote p,
  .article-body .wp-block-quote p { font-size: 20px; line-height: 1.3; margin-bottom: 20px; }
  .article-body figure,
  .article-body .wp-block-image { margin: 32px 0; }
  .tely-embed { margin: 24px 0; }
  .tely-embed-title { font-size: 16px; line-height: 1.3; padding: 10px 12px 14px; }
  .tely-embed img, .tely-embed svg { padding: 16px; }
  .article-body table,
  .article-body .wp-block-table table { font-size: 13px; }
  .article-body th, .article-body .wp-block-table th,
  .article-body td, .article-body .wp-block-table td { padding: 10px 8px; }
  .article-body .article-faq { margin-top: 56px; padding: 28px 24px 8px; border-radius: 12px; }
  .article-body .article-faq-heading { font-size: 30px; line-height: 1.15; margin-bottom: 24px; }
  .article-faq-q {
    gap: 12px; padding: 20px 0;
    font-size: 17px; line-height: 1.4;
  }
  .article-faq-a { padding: 0 0 24px 20px; font-size: 16px; line-height: 1.5; }
  .article-faq-chevron { width: 16px; height: 16px; }
  .article-rail-label { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
  .article-toc-link { font-size: 16px; line-height: 1.4; }
  .article-author-name { font-size: 20px; line-height: 1.2; }
  .article-related { padding: 40px 16px; margin-top: 48px; }
  .article-related-heading { margin-bottom: 28px; font-size: 14px; }
  .article-related-grid { gap: 28px; }
}

/* =====================================================================
 * LARGE SCREENS (≥ 1920 px) — page edge → warm box = 180 px on every
 * warm-50 panel (homepage, blog, article). Below 1920 px the default
 * 164 px (desktop) / 24 px (≤1024) / 12 px (≤768) still applies.
 * ===================================================================== */
@media (min-width: 1920px) {
  /* ---- Outer: page edge → warm/section box edge = 220 px ---- */
  .hiw,
  .stories,
  .specialties,
  .integrations,
  .hipaa,
  .blog-featured,
  .blog-newsletter,
  .practice-proof,
  .practice-roi {
    padding-left: 220px;
    padding-right: 220px;
  }
  .blog-page    { --blog-pad-x: 220px; }
  .article-page { --art-pad-x: 220px; }

  /* ---- Inner: warm/container edge → content = 100 px more
          (for sections that have a real inner container) ---- */
  .hiw-inner,
  .stories-inner,
  .specialties-inner,
  .integrations-inner,
  .hipaa-inner,
  .blog-featured-inner,
  .blog-newsletter-inner {
    padding-left: 100px;
    padding-right: 100px;
  }

  /* ---- Expertise has no nested inner container, so we collapse the two
          levels into one: 220 (outer) + 100 (inner) = 320 px from page edge. */
  .expertise-inner {
    padding-left: 320px;
    padding-right: 320px;
  }
}

/* ========== TAG PILL — standalone chip component ==========
   Small rounded chip with a cyan-diamond marker. Used wherever a row of
   labels needs to read as discrete pills (case-study services, future
   article-tag rows, filter chips, etc.). Independent from the `.case-tag`
   class so the in-body services list can evolve separately. */
.tely-tag-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 32px 0;
  padding: 0; list-style: none;
}
.tely-tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--warm2); border: 1px solid var(--border2);
  border-radius: 999px;
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.2;
  color: var(--ink);
  /* reset whatever the surrounding context (article-body ul li) inherits */
  position: static;
}
.tely-tag-pill::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cyan); transform: rotate(45deg); flex-shrink: 0;
  position: static; left: auto; top: auto; border-radius: 0;
}

/* ========== NUMBERED LIST — compact, cyan №, matched font size ==========
   Standalone component: brand-cyan number on the left at the same size and
   weight as the row text. Independent of `.case-principle` / `.tely-numbered`
   so the styles stay put regardless of the case-* mirror pipeline. */
/* Simple inline numbered list — "1. 2. 3." cyan numbers, same font-size +
   weight as the row text. Indented 64px to match .tely-bullet-list. */
.tely-num-list {
  list-style: none; margin: 24px 0;
  padding-left: 64px;
  counter-reset: tnl;
  display: flex; flex-direction: column; gap: 16px;
}
.tely-num-item {
  counter-increment: tnl;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.5;
  color: var(--ink);
  /* reset .article-body ol > li inherits */
  position: static; padding: 0; border: none;
}
.tely-num-item::before {
  content: counter(tnl) '.';
  flex-shrink: 0;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.5;
  color: var(--cyan);
  min-width: 1.5em;
  /* reset .article-body ol > li::before inherits */
  position: static; left: auto; top: auto;
}

/* ========== MAIN NUMBERED LIST — large serif, single-line titles ==========
   Figma node 200:2132. Number (Newsreader Regular 38/48 in cyan-600) sits
   left of a title (Newsreader Light 38/48). One sentence per item, no
   description. When the title wraps, the number stays anchored to the
   first line via padding-top (matches Figma's exact pt-16 trick on both
   cells). */
.tely-main-num-list {
  list-style: none; padding: 0;
  margin: 32px 0;
  counter-reset: tmnl;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border2);
}
.tely-main-num-item {
  counter-increment: tmnl;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border2);
  /* reset .article-body ol li inherits */
  position: static; padding-left: 0;
}
.tely-main-num-item::before {
  content: '№' counter(tmnl);
  flex-shrink: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.28;
  color: #059BB4;
  white-space: nowrap;
  /* reset .article-body ol li::before */
  position: static; left: auto; top: auto; min-width: 0;
}
.tely-main-num-item-title {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.28;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 768px) {
  .tely-main-num-item { gap: 14px; padding: 14px 0; }
  .tely-main-num-item::before,
  .tely-main-num-item-title { font-size: 22px; }
}

/* Bullet list — plain diamond + text. No pill, no bg, no border.
   Diamond stays at cap-height of the FIRST line when text wraps.
   Selectors are prefixed with `.article-body` (and the base class is
   doubled) so the rules beat `.article-body ul { padding: 0; gap: 24 }`
   without resorting to !important. */
.article-body .tely-bullet-list,
.tely-bullet-list.tely-bullet-list {
  list-style: none;
  margin: 24px 0;
  padding-left: 0;   /* align bullets with the body text (was an oversized 64px indent) */
  display: flex; flex-direction: column; gap: 12px;
}
.article-body .tely-bullet-item,
.tely-bullet-list.tely-bullet-list .tely-bullet-item {
  position: relative;
  padding-left: 24px;
  font-family: var(--sans); font-weight: 300;
  font-size: 18px; line-height: 1.5;
  color: var(--ink);
}
.article-body .tely-bullet-item::before,
.tely-bullet-list.tely-bullet-list .tely-bullet-item::before {
  content: '';
  position: absolute;
  left: 0;
  /* Cap-height of 18px Manrope ≈ 13px; cap-centre sits ~14px from line-box
     top (line-height 27px). Centring an 8px diamond there → top: 10px.
     Absolute positioning + fixed `top` makes the diamond stay on the FIRST
     line regardless of how many lines the item wraps to. */
  top: 10px;
  width: 8px; height: 8px;
  background: var(--cyan);
  transform: rotate(45deg);
}

/* Modifier: each item gets a divider line below; first item gets a top
   divider too. Same diamond + cap-height behavior as the base list. */
.article-body .tely-bullet-list--divided,
.tely-bullet-list--divided.tely-bullet-list--divided { gap: 0; }
.article-body .tely-bullet-list--divided .tely-bullet-item,
.tely-bullet-list--divided.tely-bullet-list--divided .tely-bullet-item {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border2);
}
.article-body .tely-bullet-list--divided .tely-bullet-item:first-child,
.tely-bullet-list--divided.tely-bullet-list--divided .tely-bullet-item:first-child {
  border-top: 1px solid var(--border2);
}
.article-body .tely-bullet-list--divided .tely-bullet-item::before,
.tely-bullet-list--divided.tely-bullet-list--divided .tely-bullet-item::before { top: 24px; }

/* ========== Case-study hero: painterly texture background ==========
   Dark overlay turns the painterly photo into a saturated hero plate so
   white nav / breadcrumb / H1 / glass metric cards read cleanly. The
   article body below uses negative margin-top to overlap the bottom edge
   of the photo (Figma 208:755). */
.case-hero {
  position: relative;
  /* Tighter top, generous bottom so the article panel can slide up over
     the lower edge of the photo (per Figma 208:755). Side padding +
     content max-width are inherited from .article-hero — keeps the
     edge-to-content offset identical to /blog/, /<article>/, etc. */
  padding-top: 140px;
  padding-bottom: 220px;
  /* Overlay kept light so the painterly colors stay vibrant. Just enough
     darkening at the top and bottom for white-text legibility. */
  /* Image uses `100% 100%` so the FULL painterly composition is visible —
     `cover` was cropping into a single region. The tiny vertical stretch
     (~5–15%) is imperceptible on a blurred painterly surface. */
  background-image:
    linear-gradient(180deg,
      rgba(28, 22, 36, 0.22) 0%,
      rgba(28, 22, 36, 0.10) 40%,
      rgba(28, 22, 36, 0.28) 100%),
    url('../assets/painterly-bg.jpg');
  background-size: cover, 100% 100%;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
}

/* ----- Case hero foreground: white text + glass cards ----- */
.case-hero .article-breadcrumb {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.case-hero .article-breadcrumb,
.case-hero .article-breadcrumb a,
.case-hero .article-breadcrumb-current { color: rgba(255, 255, 255, 0.88); }
.case-hero .article-breadcrumb a:hover { color: #fff; }
.case-hero .article-breadcrumb-sep { color: rgba(255, 255, 255, 0.55); margin: 0 4px; }

.case-hero .article-h1,
.case-hero .case-h1 { color: #fff; }

/* Meta strip — thin top divider per column, all-white text */
.case-hero .case-meta-label {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding: 16px 10px 6px 8px;
}
.case-hero .case-meta-value { color: #fff; }

/* Metric cards — glass: semi-transparent white + backdrop blur */
.case-hero .case-metric {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.case-hero .case-metric-label {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}
.case-hero .case-metric-value { color: #fff; }

/* Article body slides up over the bottom of the painterly photo —
   the bigger the negative margin, the deeper the overlap. Combined with
   the hero's `padding-bottom: 220px`, this gives ~180px of visible
   panel edge sitting on top of the photo. */
.case-page .article-panel {
  position: relative;
  z-index: 2;
  margin-top: -180px;
  background: transparent;
}
.case-page .article-shell {
  background: var(--art-surface-50, #faf7f0);
  padding-top: 64px;
}

@media (max-width: 1024px) {
  .case-hero { padding-top: 120px; padding-bottom: 160px; }
  .case-page .article-panel { margin-top: -120px; }
}
@media (max-width: 768px) {
  .case-hero { padding-top: 96px; padding-bottom: 120px; }
  .case-page .article-panel { margin-top: -80px; }
  .case-hero .article-hero-inner { gap: 28px; }
}

/* ========== Bullet list divided — symmetric breathing room ==========
   Same selector as earlier in file; appended last so it wins the cascade
   against any auto-rewriter that wants to revert padding back to 14px. */
.tely-bullet-list--divided { gap: 0 !important; }
.tely-bullet-list--divided .tely-bullet-item {
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.tely-bullet-list--divided .tely-bullet-item::before { top: 30px; }

/* ========== Article body H2 eyebrow — total padding-top 100px ==========
   Eyebrow strip (label + cyan diamond + divider) is absolute-positioned
   at top:0 of the H2; padding-top: 100px sets the total height between
   the H2 top edge and the H2 text. Appended last so it wins the cascade. */
.article-body h2[data-eyebrow] { padding-top: 100px; }

/* ========== Chart container — Figma spec ==========
   Outline-only card, rounded corners, transparent bg. Caption is plain
   uppercase serif (no cyan diamond). Tight gap between caption and SVG. */
.case-body .case-chart.tely-chart-card,
.tely-chart-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tely-chart-caption {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  /* No bullet/diamond marker — distinct from .case-chart-eyebrow */
}
.tely-chart-svg { width: 100%; height: auto; display: block; }

/* ========== Bullet list — serif body + cyan highlight for <strong> ==========
   All bullet-point text uses Newsreader Light. Bold spans inside an item
   (e.g. "15,000 visits — …" leading metrics in Key Results) drop the bold
   weight and pick up the brand cyan, matching the diamond marker. */
.tely-bullet-item {
  font-family: var(--serif);
  font-weight: 300;
}
.tely-bullet-item strong,
.tely-bullet-item b {
  font-weight: 300;
  color: var(--cyan);
}

/* ========== Main numbered list — survive .article-body cascade ==========
   When used inside the article body of a case study, `.article-body ol > li`
   (specificity 0,1,2) hijacks the styling and renders the compact "01." form.
   Scope under `.case-body` (also on the same <article>) so the combined
   selector (0,2,0) outranks it. Resets explicitly null out padding-left,
   counter, font, and ::before positioning inherited from the article rules. */
.case-body .tely-main-num-list {
  list-style: none; padding: 0;
  margin: 32px 0;
  counter-reset: tmnl;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border2);
}
.case-body .tely-main-num-item {
  counter-increment: tmnl;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border2);
  /* reset .article-body ol > li inherits */
  position: static; padding-left: 0;
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
.case-body .tely-main-num-item::before {
  content: '№' counter(tmnl);
  flex-shrink: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 28px; line-height: 1.28;
  color: #059BB4;
  white-space: nowrap;
  /* reset .article-body ol > li::before inherits */
  position: static; left: auto; top: auto; min-width: 0;
}
.case-body .tely-main-num-item-title {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.28;
  color: var(--ink);
  margin: 0;
}

/* ========== Per-case hero background ==========
   When `--case-hero-bg` is set on the .case-hero element (via post meta
   in single-case_study.php), it overrides the default painterly fallback
   without touching the dark overlay layer above it. */
.case-hero {
  background-image:
    linear-gradient(180deg,
      rgba(28, 22, 36, 0.50) 0%,
      rgba(28, 22, 36, 0.38) 35%,
      rgba(28, 22, 36, 0.50) 100%),
    var(--case-hero-bg, url('../assets/painterly-bg.jpg'));
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
}

/* ========== Case-study hero: wave-drift animation ==========
   The painterly bg moves on a slow wave trajectory so the hero feels alive,
   not static. Split into pseudo-elements:
     ::before — bg image (animated, scaled ~5% so edges never show)
     ::after  — dark gradient overlay
     content  — sits above both, never moves
   Uses transform (GPU-accelerated) on a 22-second ease-in-out loop. */
.case-hero {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  background-color: #1c1624; /* fallback under the bg before paint */
}
.case-hero::before {
  content: '';
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-image: var(--case-hero-bg, url('../assets/painterly-bg.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  animation: case-hero-drift 22s ease-in-out infinite alternate;
}
.case-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(28, 22, 36, 0.50) 0%,
    rgba(28, 22, 36, 0.38) 35%,
    rgba(28, 22, 36, 0.50) 100%);
}
.case-hero > * { position: relative; z-index: 2; }

@keyframes case-hero-drift {
  0%   { transform: translate(-0.6%, -0.4%) scale(1.06); }
  20%  { transform: translate( 0.7%,  0.5%) scale(1.07); }
  40%  { transform: translate( 0.4%, -0.5%) scale(1.05); }
  60%  { transform: translate(-0.5%,  0.4%) scale(1.07); }
  80%  { transform: translate( 0.6%, -0.2%) scale(1.06); }
  100% { transform: translate(-0.3%,  0.6%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero::before { animation: none; transform: scale(1.04); }
}

/* ========== Wind-distortion on hero bg ==========
   Layered on top of the drift animation: SVG filter warps the painterly
   image along an animated noise field, so the picture visibly "sways" as
   if flowers were moving in a breeze. */
.case-hero::before {
  filter: url('#telyWindFilter');
  inset: -8%; /* extra buffer — displacement (~22px) can push pixels out */
}
@media (prefers-reduced-motion: reduce) {
  .case-hero::before { filter: none; }
}
@media (max-width: 768px) {
  /* SVG filter is GPU-expensive on phones; rely on drift only there */
  .case-hero::before { filter: none; }
}

/* ============================================================
 * CONVERSION ADDITIONS — hero trust, case-study teaser grid,
 * mid-page CTA, demo-button microcopy.
 * ============================================================ */

/* ---- Hero: risk-reducer microcopy + trust/EHR badges (over dark bg) ---- */
.hero-btn-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.hero-badges {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-badge svg { color: var(--cyan); flex-shrink: 0; }

/* ---- Customer-stories snapshots (featured + supporting result snapshots) ----
 * Foregrounds each case's real "Key results" metrics (mirrors the single-case
 * page styling) instead of generic equal-column cards. */
.story-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0c7a8c;
}

/* Result cards: a full-width featured case + two compact snapshots below.
   Desktop = grid (the feature spans both columns); mobile = swipe slider. */
.stories-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.story-feature {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--warm);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 38px 40px 34px;
  transition: border-color 0.25s ease;
}
.story-feature:hover { border-color: var(--border); }
.story-feature-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.14; letter-spacing: -0.4px;
  color: var(--ink); max-width: 22ch;
}
.story-feature-title a { color: inherit; }
.story-feature-title a:hover { color: #0c7a8c; }
.story-feature-desc {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5;
  color: var(--muted); max-width: 62ch; margin-top: -2px;
}

/* Cases → horizontal swipe slider of equal cards on mobile. Placed after the
   base .stories-cards grid so it wins on source order at <=768px. */
@media (max-width: 768px) {
  .stories-cards {
    display: flex; grid-template-columns: none;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0; padding: 2px 0 12px; scrollbar-width: none;
  }
  .stories-cards::-webkit-scrollbar { display: none; }
  .stories-cards > .story-feature,
  .stories-cards > .story-snap {
    grid-column: auto; flex: 0 0 86%; box-sizing: border-box; scroll-snap-align: start;
  }
  /* Equal cards: drop the feature's description and match the snap scale. */
  .story-feature-desc { display: none; }
  .story-feature { padding: 22px; gap: 14px; }
  .story-feature-title { font-size: 22px; max-width: none; }
  .story-feature .snap-metric-label { font-size: 10.5px; padding-bottom: 7px; }
  .story-feature .snap-metric-value { font-size: 26px; letter-spacing: -0.5px; }
}

/* Metric snapshot row — mirrors the single-case "Key results" cards.
 * Subgrid keeps the label divider + value baseline aligned across columns
 * no matter how many lines each label wraps to. */
.snap-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 14px;
}
.snap-metric {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
}
.snap-metric-label {
  align-self: stretch;
  font-family: var(--sans); font-weight: 300;
  font-size: 12.5px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #9e9e9e;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 10px;
}
.snap-metric-value {
  align-self: end;
  font-family: var(--serif); font-weight: 300;
  font-size: 40px; line-height: 1; letter-spacing: -1px;
  color: var(--ink);
}

/* Supporting snapshots — compact, metric-led. */
.story-support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.story-snap {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--warm);
  border: 1px solid var(--border2);
  border-radius: 0;
  padding: 30px 30px 28px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.story-snap:hover { transform: translateY(-3px); border-color: var(--border); }
.story-snap-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.2px;
  color: var(--ink);
}
.story-snap-title a { color: inherit; }
.story-snap-title a:hover { color: #0c7a8c; }
.snap-metrics--mini { column-gap: 16px; row-gap: 10px; }
.snap-metrics--mini .snap-metric-label { font-size: 10.5px; padding-bottom: 7px; }
.snap-metrics--mini .snap-metric-value { font-size: 26px; letter-spacing: -0.5px; }

.story-card-link {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.story-card-link svg { transition: transform 0.2s ease; }
.story-feature:hover .story-card-link svg,
.story-snap:hover .story-card-link svg,
.story-card-link:hover svg { transform: translateX(4px); }

.stories-viewall { margin-top: 28px; display: flex; justify-content: flex-end; }
.stories-viewall-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  transition: color 0.2s ease;
}
.stories-viewall-link:hover { color: #0c7a8c; }
.stories-viewall-link svg { transition: transform 0.2s ease; }
.stories-viewall-link:hover svg { transform: translateX(4px); }

/* ---- Mid-page CTA (after the proof, before expertise) ---- */
.midcta { padding: 40px 164px; }
.midcta-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 44px 58px 64px;
  background: var(--ink);
  border-radius: 0;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(6, 182, 212, 0.22), transparent 55%);
}
/* Eyebrow with a full-width rule (section-kicker style, on dark). */
.midcta-kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
/* Booklet on the left, heading + form stacked on the right. The booklet
   stretches to the full height of the text column (see .tely-lead__booklet
   override below); the ≤768px block re-pins a fixed height once it stacks. */
.midcta-row { display: flex; align-items: stretch; gap: 56px; }
.midcta-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.midcta-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  color: #fff;
  margin: 0;
}
/* Heading + subheading sit tight together, with the body's larger gap before the form. */
.midcta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.midcta-sub {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
}
.midcta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; width: 100%; max-width: 540px; }
/* Email + button live inside one outlined pill (the form is the border). */
.midcta-form {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 7px 7px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease;
}
.midcta-form:focus-within { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.10); }
.midcta-form:has(.midcta-input.is-invalid) { border-color: #ff8b8b; }
.midcta-input {
  flex: 1; min-width: 0;
  padding: 13px 10px; border: 0; border-radius: 999px;
  background: transparent;
  color: #fff; font-family: var(--sans); font-weight: 400; font-size: 16px;
}
.midcta-input::placeholder { color: rgba(255,255,255,0.55); }
.midcta-input:focus { outline: none; }
.midcta-form .midcta-btn { flex-shrink: 0; cursor: pointer; border: 0; }
.midcta-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.midcta-btn:hover { transform: translateY(-2px); }
.midcta-btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 10px;
  background: var(--ink); color: #fff; border-radius: 50%;
  font-size: 13px; line-height: 1; flex-shrink: 0;
}
/* ---- Footer CTA microcopy ---- */
.cta-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px) {
  .story-feature { flex-direction: column; }
  .story-feature-media { flex-basis: auto; min-height: 240px; aspect-ratio: 16 / 9; }
  .story-feature-body { padding: 30px 28px 30px; gap: 18px; }
  .midcta { padding: 40px 58px; }
  /* match the warm bands' 24px outer gutter at this breakpoint */
  .practice-proof { padding: 72px 24px; }
  .practice-roi { padding: 40px 24px 80px; }
}
@media (max-width: 768px) {
  .story-support { grid-template-columns: 1fr; gap: 18px; }
  .story-feature-body { padding: 26px 22px 28px; gap: 18px; }
  /* Tighter metric columns read cramped on phones — loosen the gap and
     drop the value size so 3 metrics sit comfortably across 390px. */
  .snap-metrics { column-gap: 18px; }
  .snap-metric-label { font-size: 11px; }
  .snap-metric-value { font-size: 26px; }
  .snap-metrics--mini .snap-metric-value { font-size: 23px; }
  .midcta { padding: 24px 20px; }
  .midcta-inner { padding: 32px 26px; flex-direction: column; align-items: flex-start; gap: 24px; }
  .midcta-action { align-items: stretch; width: 100%; max-width: none; }
  .midcta-copy { align-items: center; text-align: center; }
  /* Keep the desktop combined pill on phones too: a full-width input with a
     circular arrow button tucked inside on the right (label hidden). */
  .midcta-form {
    flex-direction: row; gap: 8px;
    width: 100%;
    padding: 6px 6px 6px 18px;
  }
  .midcta-input { padding: 14px 6px; }
  /* Collapse the labelled white pill down to just the round arrow button. */
  .midcta-btn {
    padding: 0; background: transparent; box-shadow: none;
    font-size: 0; /* hides the "Get your strategy" text node */
  }
  .midcta-btn:hover { transform: none; }
  .midcta-btn-arrow {
    margin-left: 0;
    width: 42px; height: 42px;
    background: #fff; color: var(--ink);
    font-size: 18px;
  }
}

/* ============================================================
 * MOBILE READABILITY v2 — bigger copy, clean (un-staggered)
 * headings, and a scrim on the scrolled nav so it stops
 * overlapping section text. (Reported from on-device review.)
 * ============================================================ */
@media (max-width: 768px) {
  /* The scrolled/fixed nav floated transparently over content — add a scrim. */
  body.is-scrolled .nav {
    background: rgba(255, 254, 251, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(10, 17, 26, 0.07);
    padding-bottom: 10px;
  }

  /* Kill the staggered right-aligned heading tail — headings read as one
     clean left-aligned block that wraps naturally instead of a staircase. */
  .stories-heading h2 br,
  .integrations-heading h2 br,
  .expertise-header h2 br { display: none; }
  .heading-right,
  .expertise-indent { display: inline; width: auto; text-align: left; }

  /* Bump the most-read copy so it's legible at arm's length. */
  .hero-sub { font-size: 18px; line-height: 1.45; }
  .hero-btn-note { font-size: 15px; }
  .expertise-sub,
  .integrations-card-text p,
  .hipaa-sub,
  .hipaa-pillar-text,
  .midcta-sub,
  .story-card-excerpt { font-size: 16.5px; line-height: 1.5; }
  .integrations-card h4,
  .hipaa-pillar-title { font-size: 22px; }
}

/* ============================================================
 * PRACTICE / SPECIALTY LANDING PAGES — /practice/<slug>/
 * Big, punchy, intent-led. Reuses .story-feature + .snap-metrics.
 * ============================================================ */
.practice { background: var(--bg); }
.practice-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 20px;
}
.practice-kicker--light { color: rgba(255,255,255,0.85); }

/* Hero — see the dedicated practice-hero override block further down; it now
   reuses the homepage `.hero` markup/CSS with two parallel headline rotators. */
.practice-badges { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.practice-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  font-family: var(--sans); font-weight: 500; font-size: 13px; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.practice-badge svg { color: var(--cyan); flex-shrink: 0; }

/* Intent / problem */
/* The personalised manifesto on a practice page reuses the homepage `.why`
   section (sticky scroll-scrub word reveal) verbatim — see the WHY block in
   css + js. Only the copy is personalised per specialty in single-practice.php. */

/* (The old compact 3-step `.practice-steps` block was replaced by the full
   homepage HOW IT WORKS section, which the practice page now renders.) */

/* Proof (reuses .story-feature) — same 164px outer gutter as the warm bands
   (.hiw / .stories) so the practice content column lines up everywhere. */
.practice-proof { padding: 72px 164px; background: var(--bg); }
.practice-proof-inner { margin: 0 auto; }

/* ROI band — fills the same 164px-gutter column as the warm bands above. */
.practice-roi { padding: 40px 164px 80px; background: var(--bg); }
.practice-roi-inner {
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px;
  padding: 56px 56px; border-radius: 0; background:
    radial-gradient(120% 140% at 100% 0%, rgba(6,182,212,0.22), transparent 55%), var(--ink);
}
/* Top row: ROI headline (left) + big price (right) */
.practice-roi-top {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
/* Bottom row: the know-how — playbook line (left) + request-strategy form (right),
   separated from the ROI proof by a hairline rule. */
.practice-roi-lead {
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
  padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.12);
}
.practice-roi-lead-copy { max-width: 480px; }
.practice-roi-lead-kicker {
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 8px;
}
.practice-roi-lead-text {
  font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.5;
  color: rgba(255,255,255,0.78); margin: 0;
}
.practice-roi-lead .midcta-form { width: auto; flex: 0 1 440px; min-width: 360px; }
.practice-roi-h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1; color: #fff; margin: 0;
}
.practice-roi-sub {
  font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.5;
  color: rgba(255,255,255,0.72); max-width: 520px; margin: 16px 0 0;
}
.practice-roi-stat { flex-shrink: 0; text-align: right; }
.practice-roi-value {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 7vw, 88px); line-height: 1; color: #fff; letter-spacing: -2px;
}
.practice-roi-label {
  display: block; font-family: var(--sans); font-weight: 300; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-top: 10px;
}

@media (max-width: 768px) {
  .practice-proof { padding: 56px 12px; }
  .practice-roi { padding: 24px 12px 60px; }
  .practice-roi-inner { padding: 36px 26px; gap: 28px; }
  .practice-roi-top { flex-direction: column; align-items: flex-start; text-align: left; gap: 22px; }
  .practice-roi-stat { text-align: left; }
  .practice-roi-lead { flex-direction: column; align-items: stretch; gap: 22px; padding-top: 28px; }
  .practice-roi-lead-copy { max-width: none; }
  .practice-roi-lead .midcta-form { width: 100%; min-width: 0; flex: 1 1 auto; }
}

/* ============================================================
 * PRACTICE HERO v2 — homepage-identical hero with TWO parallel
 * headline rotators (procedure + channel). The section carries both
 * `.hero` (so all homepage hero CSS applies) and `.practice-hero`
 * (for the few practice-only deltas below). Per-specialty photo +
 * the homepage's dark gradient treatment are inherited as-is.
 * ============================================================ */
/* Headline matches the homepage hero exactly — it inherits the homepage
   `.hero-h1` font scale + leading (the two-line layout no longer needs the old
   smaller "four-line" scale). */
.practice-hero .hero-left { max-width: 900px; gap: 22px; }
/* Center the headline + subtitle vertically — the two-line practice headline
   looks bottom-heavy under the homepage's flex-end (bottom) alignment. */
.practice-hero .hero-content { align-items: center; }

/* Badges sit just under the subtitle inside .hero-left */
.practice-hero .hero-left .practice-badges { margin-top: 6px; }
.practice-hero .practice-badge svg { color: var(--cyan); }

/* Headline is always two lines: "Get {procedure}" / "patients in {channel}".
   Each line is a baseline-aligned flex row so the rotating word sits on the
   same baseline as the static text — an inline rotator reports its (overflow:
   hidden) box-bottom as the baseline and otherwise floats up. */
.practice-hero-h1 > .hero-h1-line {
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.25em;
}
.hero-rotate-wrap--proc { vertical-align: baseline; }
/* No line-height override here: it must match the channel rotator's (inherited
   1.19) so the overflow:hidden wrap reports the same baseline and the procedure
   word sits level with "Get" instead of floating up. */
.hero-rotate-item--proc { display: inline-flex; align-items: baseline; height: 1.25em; white-space: nowrap; }
.hero-rotate-item--proc::after { content: ''; }   /* no trailing comma on a procedure */
/* The shared rotator nudges its box down 0.08em — tuned for the logo rotators.
   The text-only procedure word needs no nudge, or it lands ~0.08em BELOW "Get".
   Cancel it so the procedure sits on the same baseline as "Get". */
.practice-hero-h1 .hero-rotate-wrap--proc { transform: none; }
/* Channel rotator reads "… in ChatGPT" — no trailing comma either. */
.hero-rotate-wrap--chan .hero-rotate-item::after { content: ''; }

/* Practice hero photos place the subject on the RIGHT; the homepage's 72%/66%
   mobile crop cut their face off. Shift the crop right so the person stays in
   frame on tablet + phone (desktop is wide enough to show them already). */
@media (max-width: 1024px) { .practice-hero .hero-bg img { object-position: 82% center; } }
@media (max-width: 480px)  { .practice-hero .hero-bg img { object-position: 88% center; } }

/* Practice hero now mirrors the homepage hero exactly — same "Book a Demo"
   button and the same responsive behaviour: on mobile/tablet the hero-right is
   hidden (homepage rule) and the global sticky "Book a Demo" takes over. No
   per-specialty CTA overrides needed. */

/* --- HIW site / Instagram cards: text wordmark + avatar fallback ---
 * The homepage cards use the UCSF logo/avatar PNGs. Practice pages have no
 * per-specialty logo, so we render the clinic name as a clean wordmark and a
 * monogram avatar instead (keeps the cards on-brand without inventing assets). */
.hiw-site-wordmark,
.hiw3-site-wordmark {
  font-family: var(--serif); font-weight: 300; font-size: 17px; color: #fff;
  letter-spacing: -0.2px; line-height: 1.1; max-width: 70%;
}
.hiw3-insta-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--cyan); color: #06222a;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
}

/* ============================================================
 * ENGINE-LOGO ROTATORS — unified, deterministic, adaptive.
 * Item height is a fixed em line; the icon is sized in em and
 * vertically CENTERED (no transform), so the layout step the JS
 * measures (offsetTop/offsetHeight) matches exactly and the next
 * logo never peeks through the clip. Scales with the heading on
 * every breakpoint — no per-size pixel overrides needed.
 * ============================================================ */
.hero-rotate-wrap, .stories-rotate-wrap, .blog-h1-rotate-wrap {
  display: inline-flex;
  overflow: hidden;
  /* An overflow:hidden inline box reports its baseline as its BOTTOM edge, which
     lifts the rotating word ~1 descender above the surrounding text. Drop it back
     down by a font-relative amount so it sits on the line at EVERY size. */
  vertical-align: baseline;
  transform: translateY(0.08em); /* raise the rotating word a touch onto the line */
}
.hero-rotate-slide, .stories-rotate-slide, .blog-h1-rotate-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* items size to their own width so the wrap can hug the current word */
}
.hero-rotate-item, .stories-rotate-item, .blog-h1-rotate-item {
  display: inline-flex;
  align-items: baseline;          /* word on its baseline, like the "from" beside it */
  gap: 0.26em;
  height: 1.25em;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-rotate-icon, .stories-rotate-icon, .blog-h1-rotate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;             /* centre the icon on the line, not the baseline */
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  transform: translateY(-0.13em); /* optically centre on cap height — transform is
                                     measurement-safe (JS reads offsetTop/Height) */
}
.hero-rotate-icon img, .stories-rotate-icon img, .blog-h1-rotate-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
 * NETWORK STATS BAND (hero → how-it-works) + HIW eyebrows.
 * Surfaces the product's real network proof and aligns the
 * "how it works" steps to the product's capability language.
 * ============================================================ */
.statbar { padding: 0 164px; background: var(--bg); }
.statbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border2);
  border-radius: 16px;
  background: var(--warm);
  overflow: hidden;
}
.statbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 24px;
  text-align: center;
}
.statbar-item + .statbar-item { border-left: 1px solid var(--border2); }
.statbar-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.statbar-label {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* HIW step eyebrow — product capability label above each heading. */
.hiw-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c7a8c;
  margin: 0 0 12px;
}

@media (max-width: 1024px) { .statbar { padding: 0 48px; } }
@media (max-width: 768px) {
  .statbar { padding: 0 20px; margin-top: 8px; }
  .statbar-inner { grid-template-columns: 1fr; }
  .statbar-item { padding: 22px 20px; }
  .statbar-item + .statbar-item { border-left: none; border-top: 1px solid var(--border2); }
  .statbar-num { font-size: 40px; }
  .hiw-eyebrow { font-size: 12px; }
}

/* ============================================================
 * CAPABILITIES GRID (voice · insurance · follow-up · retargeting)
 * + LOCAL DOMINANCE MAP. CSS-only looping animations (no JS),
 * so they're always live and never clip.
 * ============================================================ */
.caps { padding: 80px 164px; background: var(--bg); }
.caps-inner { max-width: var(--max); margin: 0 auto; }
.caps-head { max-width: 780px; margin: 0 0 44px; }
.caps-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px;
}
.caps-h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.5px;
  color: var(--ink); margin: 0;
}
.caps-sub {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--muted);
  max-width: 620px; margin: 18px 0 0;
}
.caps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cap-card {
  background: var(--warm); border: 1px solid var(--border2);
  border-radius: 18px; padding-bottom: 28px; overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.cap-card:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: 0 22px 44px -30px rgba(10,17,26,.4); }
.cap-visual {
  position: relative; height: 184px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; background: var(--warm);
  border-bottom: 1px solid var(--border2); overflow: hidden;
}
.cap-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #0c7a8c; margin: 22px 28px 0; }
.cap-title { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.18; color: var(--ink); margin: 10px 28px 0; }
.cap-text { font-family: var(--sans); font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--muted); margin: 10px 28px 0; }

/* Voice — looping waveform + pulsing call dot */
.cap-call { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: var(--muted); }
.cap-call-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: capPulseDot 1.6s ease-in-out infinite; }
.cap-wave { display: inline-flex; align-items: center; gap: 4px; height: 42px; }
.cap-wave i { width: 4px; height: 22%; background: var(--cyan); border-radius: 2px; animation: capWave 0.9s ease-in-out infinite; }
.cap-wave i:nth-child(2n) { animation-duration: 0.7s; }
.cap-wave i:nth-child(3n) { animation-delay: 0.18s; }
.cap-wave i:nth-child(4n) { animation-delay: 0.34s; }
.cap-wave i:nth-child(5n) { animation-delay: 0.1s; }
.cap-line { font-family: var(--sans); font-weight: 300; font-style: italic; font-size: 13.5px; line-height: 1.35; color: var(--ink); text-align: center; max-width: 290px; }
@keyframes capWave { 0%,100% { height: 18%; } 50% { height: 100%; } }
@keyframes capPulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(118,205,77,.5); } 70% { box-shadow: 0 0 0 7px rgba(118,205,77,0); } }

/* Insurance — chips + pulsing eligible badge */
.cap-visual--ins { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 8px; }
.cap-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
}
.cap-chip--ok { color: #1a7f37; border-color: rgba(26,127,55,.35); background: rgba(118,205,77,.12); animation: capGlow 2.4s ease-in-out infinite; }
.cap-chip--accent { color: #0c7a8c; border-color: rgba(6,182,212,.35); background: rgba(6,182,212,.1); }
@keyframes capGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(118,205,77,0); } 50% { box-shadow: 0 0 0 5px rgba(118,205,77,.18); } }

/* Follow-up — SMS thread + looping typing dots */
.cap-visual--sms { align-items: stretch; justify-content: center; gap: 8px; padding: 20px 24px; }
.cap-bubble { max-width: 82%; padding: 9px 13px; font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.35; border-radius: 14px; }
.cap-bubble--out { align-self: flex-start; background: var(--white); border: 1px solid var(--border2); color: var(--ink); border-bottom-left-radius: 4px; }
.cap-bubble--in { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.cap-bubble--typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border2); border-radius: 14px; border-bottom-left-radius: 4px; }
.cap-bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: capType 1.2s infinite; }
.cap-bubble--typing i:nth-child(2) { animation-delay: .2s; }
.cap-bubble--typing i:nth-child(3) { animation-delay: .4s; }
@keyframes capType { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Retargeting — mock ad with slow ken-burns */
.cap-visual--ad { padding: 18px; }
.cap-ad { position: relative; width: 210px; height: 150px; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 26px -14px rgba(0,0,0,.55); background: var(--ink); }
.cap-ad-img { position: absolute; inset: 0; background-size: cover; background-position: center; animation: capZoom 9s ease-in-out infinite alternate; }
.cap-ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,17,26,.8), rgba(10,17,26,0) 58%); }
.cap-ad-headline { position: absolute; left: 12px; right: 12px; bottom: 38px; z-index: 1; font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.1; color: #fff; }
.cap-ad-cta { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-family: var(--sans); font-weight: 600; font-size: 10.5px; color: var(--ink); background: #fff; padding: 5px 10px; border-radius: 999px; }
.cap-ad-badge { position: absolute; top: 10px; right: 10px; z-index: 1; font-family: var(--sans); font-weight: 600; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 999px; }
@keyframes capZoom { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Local dominance map */
.localmap { padding: 40px 164px 80px; background: var(--bg); }
.localmap-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 48px 56px; background: var(--warm); border: 1px solid var(--border2); border-radius: 20px;
}
.localmap-copy .caps-h2 { font-size: clamp(28px, 3.2vw, 42px); }
.localmap-rank { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.localmap-rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border2); border-radius: 10px; font-family: var(--sans); font-weight: 300; font-size: 15px; color: var(--muted); }
.localmap-rank-row--you { color: var(--ink); font-weight: 600; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(6,182,212,.16); }
.localmap-rank-n { width: 20px; font-weight: 600; color: var(--muted); }
.localmap-rank-row--you .localmap-rank-n { color: #0c7a8c; }
.localmap-rank-name { flex: 1; }
.localmap-rank-tag { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #0c7a8c; background: rgba(6,182,212,.12); padding: 3px 9px; border-radius: 999px; }
.localmap-vis { position: relative; height: 300px; border-radius: 14px; overflow: hidden; background: #eef1f4; border: 1px solid var(--border2); }
.localmap-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(10,17,26,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,17,26,.05) 1px, transparent 1px); background-size: 30px 30px; }
.localmap-pin { position: absolute; border-radius: 50%; }
.localmap-pin--c1, .localmap-pin--c2, .localmap-pin--c3 { width: 13px; height: 13px; background: #b3bac1; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.localmap-pin--c1 { top: 28%; left: 24%; }
.localmap-pin--c2 { top: 64%; left: 42%; }
.localmap-pin--c3 { top: 46%; left: 76%; }
.localmap-pin--you { width: 20px; height: 20px; top: 44%; left: 52%; background: var(--cyan); box-shadow: 0 6px 16px rgba(6,182,212,.5); animation: capPinPulse 2.2s ease-out infinite; }
.localmap-pin-label { position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .02em; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; }
.localmap-pin-label::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ink); }
@keyframes capPinPulse { 0% { box-shadow: 0 0 0 0 rgba(6,182,212,.5); } 100% { box-shadow: 0 0 0 20px rgba(6,182,212,0); } }
@keyframes capPinPulseWhite { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 20px rgba(255,255,255,0); } }

@media (max-width: 1024px) {
  .caps { padding: 60px 48px; }
  .localmap { padding: 40px 48px 60px; }
}
@media (max-width: 768px) {
  .caps { padding: 48px 20px; }
  .caps-grid { grid-template-columns: 1fr; gap: 18px; }
  .localmap { padding: 20px 20px 48px; }
  .localmap-inner { grid-template-columns: 1fr; gap: 28px; padding: 30px 22px; }
  .localmap-vis { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-wave i, .cap-call-dot, .cap-chip--ok, .cap-bubble--typing i, .cap-ad-img, .localmap-pin--you { animation: none; }
}

/* ============================================================
 * HIW funnel — new in-funnel visuals (same .hiw-img-wrap square):
 * local-market MAP (neighborhood/city/state scope) + follow-up SMS.
 * Reuses capPinPulse / capType keyframes.
 * ============================================================ */
.hiw-img-wrap.hiw-map { display: flex; flex-direction: column; gap: 16px; }
.hiw-map-tabs { display: inline-flex; gap: 4px; align-self: flex-start; background: var(--white); border: 1px solid var(--border2); border-radius: 999px; padding: 4px; }
.hiw-map-tab { padding: 8px 16px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.hiw-map-tab.is-active { background: var(--ink); color: #fff; }
.hiw-map-field { position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; background: #eef1f4; border: 1px solid var(--border2); }
.hiw-map-grid { position: absolute; inset: -20%; background-image: linear-gradient(rgba(10,17,26,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,17,26,.06) 1px, transparent 1px); background-size: 34px 34px; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.hiw-map-pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #b3bac1; box-shadow: 0 2px 6px rgba(0,0,0,.18); opacity: 0; transition: opacity .45s ease; }
.hiw-map-pin--c1 { top: 30%; left: 26%; }
.hiw-map-pin--c2 { top: 64%; left: 42%; }
.hiw-map-pin--c3 { top: 40%; left: 74%; }
.hiw-map-pin--c4 { top: 72%; left: 78%; }
.hiw-map-pin--you { width: 22px; height: 22px; top: 48%; left: 50%; background: #fff; opacity: 1; box-shadow: 0 6px 16px rgba(0,0,0,.28); animation: capPinPulseWhite 2.2s ease-out infinite; }
.hiw-map-you { position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-weight: 700; font-size: 11px; color: #fff; background: var(--ink); padding: 4px 9px; border-radius: 6px; }
.hiw-map-you::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ink); }
/* widen scope → reveal more competitors + zoom the grid out */
.hiw-map-field[data-scope="neighborhood"] .hiw-map-pin--c1 { opacity: 1; }
.hiw-map-field[data-scope="city"] .hiw-map-pin--c1,
.hiw-map-field[data-scope="city"] .hiw-map-pin--c2,
.hiw-map-field[data-scope="city"] .hiw-map-pin--c3 { opacity: 1; }
.hiw-map-field[data-scope="state"] .hiw-map-pin--c1,
.hiw-map-field[data-scope="state"] .hiw-map-pin--c2,
.hiw-map-field[data-scope="state"] .hiw-map-pin--c3,
.hiw-map-field[data-scope="state"] .hiw-map-pin--c4 { opacity: 1; }
.hiw-map-field[data-scope="city"] .hiw-map-grid { transform: scale(.82); }
.hiw-map-field[data-scope="state"] .hiw-map-grid { transform: scale(.64); }
.hiw-map-caption { font-family: var(--sans); font-weight: 300; font-size: 14.5px; line-height: 1.4; color: var(--muted); margin: 0; }
.hiw-map-caption strong { color: var(--ink); font-weight: 600; }

.hiw-img-wrap.hiw-sms { display: flex; align-items: center; justify-content: center; }
.hiw-sms-thread { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 380px; }
.hiw-sms-bubble { max-width: 86%; padding: 13px 17px; font-family: var(--sans); font-weight: 300; font-size: 15.5px; line-height: 1.4; border-radius: 18px; }
.hiw-sms-bubble--out { align-self: flex-start; background: var(--white); border: 1px solid var(--border2); color: var(--ink); border-bottom-left-radius: 5px; }
.hiw-sms-bubble--in { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.hiw-sms-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 15px 17px; background: var(--white); border: 1px solid var(--border2); border-radius: 18px; border-bottom-left-radius: 5px; }
.hiw-sms-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: capType 1.2s infinite; }
.hiw-sms-typing i:nth-child(2) { animation-delay: .2s; }
.hiw-sms-typing i:nth-child(3) { animation-delay: .4s; }

@media (max-width: 1024px) {
  .hiw-img-wrap.hiw-map, .hiw-img-wrap.hiw-sms { aspect-ratio: auto; min-height: 400px; }
}

/* ============================================================
 * HOW IT WORKS → pinned scroll presentation (onboarding feel)
 * Tall centered steps, BIG headings that scroll-fill word-by-word,
 * sticky 01→06 progress rail. Existing step animations untouched.
 * ============================================================ */
#how-it-works { background: var(--bg); } /* match the WHY section (#fffefb), no seam */
#how-it-works .hiw-step { min-height: 88vh; align-items: center; }
#how-it-works .hiw-text { gap: 28px; }
#how-it-works .hiw-text h2 {
  font-size: clamp(36px, 5.2vw, 70px);
  line-height: 1.05;
  letter-spacing: -1.2px;
}
#how-it-works .hiw-text p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; }
/* scroll-fill: words start faint, ink in as the step enters */
.hiw-word { color: #dad7ce; transition: color .25s ease; }
.hiw-word.is-on { color: var(--ink); }

.hiw-rail {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.hiw-rail.is-visible { opacity: 1; pointer-events: auto; }
.hiw-rail-dot {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,254,251,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--muted);
  cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.hiw-rail-dot.is-active { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.1); }

@media (max-width: 1024px) {
  .hiw-rail { display: none; }
  #how-it-works .hiw-step { min-height: auto; }
  #how-it-works .hiw-text h2 { font-size: clamp(30px, 8vw, 44px); }
}
@media (prefers-reduced-motion: reduce) { .hiw-word { transition: none; } }

/* ============================================================
 * HIW story steps — generated photo frames (cross-fade) with a
 * floating UI card, mirroring the layered storytelling of the
 * other steps (Follow-up: SMS card; Local market: scope map).
 * ============================================================ */
/* Story wraps use the same square cream frame as the UCSF card (base
   .hiw-img-wrap: padding 32, 1px border, no radius); the photo sits inside. */
.hiw-img-wrap.hiw-story { padding: 32px; border-radius: 0; overflow: visible; }
.hiw-story-frames { position: absolute; inset: 32px; overflow: hidden; }
.hiw-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.hiw-story-img.is-on { opacity: 1; }
.hiw-story-card {
  position: absolute; z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 18px 40px -20px rgba(10, 17, 26, 0.45);
}
/* Follow-up — SMS card, bottom-left over the negative space */
.hiw-story--followup .hiw-story-card { left: 56px; right: 56px; bottom: 56px; width: auto; max-width: none; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.hiw-story--followup .hiw-story-img { object-position: 90% center; } /* keep the woman in frame */
.hiw-story--followup .hiw-sms-bubble { max-width: 92%; font-size: 13.5px; padding: 9px 13px; }
.hiw-story--followup .hiw-sms-typing { padding: 11px 13px; }
/* Local market — compact scope map card, bottom-left */
/* Map card spans the full photo width like the UCSF doctor card (left/right/bottom). */
.hiw-story--map .hiw-story-card { left: 56px; right: 56px; bottom: 56px; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.hiw-story--map .hiw-story-img { object-position: 92% center; } /* keep the doctor in frame */
.hiw-story--map .hiw-map-tabs { align-self: stretch; justify-content: space-between; background: var(--warm); border-color: var(--border2); padding: 3px; }
.hiw-story--map .hiw-map-tab { padding: 6px 8px; font-size: 11px; flex: 1; text-align: center; }
.hiw-story--map .hiw-map-field { height: 132px; flex: none; }
.hiw-story--map .hiw-map-pin { width: 10px; height: 10px; }
.hiw-story--map .hiw-map-pin--you { width: 16px; height: 16px; }
.hiw-story--map .hiw-map-you { font-size: 9.5px; padding: 2px 6px; }
.hiw-story--map .hiw-map-caption { font-size: 12px; line-height: 1.35; margin: 0; }

@media (max-width: 768px) {
  .hiw-story-frames { inset: 12px; }
  .hiw-story--followup .hiw-story-card { left: 24px; right: 24px; bottom: 24px; max-width: none; }
  .hiw-story--map .hiw-story-card { left: 24px; right: 24px; bottom: 24px; padding: 14px 16px 16px; }
}

/* ============================================================
 * HIW v2 — unified narrative reveal + glass cards (match site).
 * One flowing statement per step fills in on scroll; the floating
 * UI cards now use the site's translucent glass (not white boxes).
 * ============================================================ */
#how-it-works .hiw-text { gap: 24px; }
.hiw-step-tag {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #0c7a8c; margin: 0;
}
.hiw-narrative {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(27px, 3.4vw, 46px); line-height: 1.24; letter-spacing: -0.5px;
  color: var(--ink); margin: 0;
}
.hiw-word { color: #d8d4ca; transition: color .25s ease; }
.hiw-word.is-on { color: var(--ink); }

/* Floating UI cards → translucent glass, white text (matches .hiw-glass) */
.hiw-story-card {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(27px); backdrop-filter: blur(27px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow: none;
  color: #fff;
}
/* Follow-up SMS bubbles on glass */
.hiw-story--followup .hiw-sms-bubble--out { background: rgba(255, 255, 255, 0.16); border: none; color: #fff; }
.hiw-story--followup .hiw-sms-bubble--in { background: #fff; border: none; color: var(--ink); }
.hiw-story--followup .hiw-sms-typing { background: rgba(255, 255, 255, 0.16); border: none; }
.hiw-story--followup .hiw-sms-typing i { background: rgba(255, 255, 255, 0.75); }
/* Local-market scope map on glass */
.hiw-story--map .hiw-map-tabs { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.hiw-story--map .hiw-map-tab { color: rgba(255, 255, 255, 0.72); }
.hiw-story--map .hiw-map-tab.is-active { background: rgba(255, 255, 255, 0.24); color: #fff; }
.hiw-story--map .hiw-map-field { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.hiw-story--map .hiw-map-grid { background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); }
.hiw-story--map .hiw-map-pin--c1, .hiw-story--map .hiw-map-pin--c2, .hiw-story--map .hiw-map-pin--c3, .hiw-story--map .hiw-map-pin--c4 { background: rgba(255, 255, 255, 0.5); }
.hiw-story--map .hiw-map-caption { color: rgba(255, 255, 255, 0.82); }
.hiw-story--map .hiw-map-caption strong { color: #fff; }
.hiw-story--map .hiw-map-you { background: rgba(255, 255, 255, 0.24); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hiw-story--map .hiw-map-you::after { border-top-color: rgba(255, 255, 255, 0.24); }

/* ============================================================
 * HIW v3 — pin + scrub (thinkwithmark feel). Each step is a tall
 * track; its content pins to the viewport centre and the narrative
 * illuminates word-by-word as you scroll through. Desktop only;
 * mobile keeps the lighter on-enter reveal.
 * ============================================================ */
.hiw-narrative { font-size: clamp(30px, 3.9vw, 54px); line-height: 1.2; letter-spacing: -0.6px; }
.hiw-word { color: #d6d3c9; }
.hiw-word.is-on { color: var(--ink); }

@media (min-width: 1025px) {
  #how-it-works.hiw-pinned .hiw-step { min-height: 152vh; display: block; }
  #how-it-works.hiw-pinned .hiw-stage {
    position: sticky; top: 0;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
  }
  #how-it-works.hiw-pinned .hiw-step-reverse .hiw-stage { flex-direction: row-reverse; }
}

/* ============================================================
 * HIW v4 — text-forward, centered (closer to reference, not the
 * rigid left/right split). Big centered narrative is the hero and
 * illuminates first; the visual rises in beneath it as you scroll.
 * ============================================================ */
@media (min-width: 1025px) {
  #how-it-works.hiw-pinned .hiw-stage {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5vh;
  }
  #how-it-works.hiw-pinned .hiw-step-reverse .hiw-stage { flex-direction: column; } /* no more mirroring */
  #how-it-works.hiw-pinned .hiw-text {
    flex: none; max-width: 980px; width: 100%;
    align-items: center; justify-content: center; text-align: center;
    gap: 20px; padding: 0;
  }
  #how-it-works.hiw-pinned .hiw-narrative {
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.18; letter-spacing: -0.8px;
    max-width: 24ch; margin: 0 auto;
  }
  #how-it-works.hiw-pinned .hiw-step-tag { text-align: center; }
  /* visual: centered, rises in after the sentence lights up */
  #how-it-works.hiw-pinned .hiw-img-wrap {
    flex: none; width: min(430px, 44vw); max-width: none; margin: 0 auto;
    opacity: 0; transform: translateY(46px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  }
  #how-it-works.hiw-pinned .hiw-img-wrap.is-shown { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #how-it-works.hiw-pinned .hiw-img-wrap { transition: none; }
}

/* ===== Lenis smooth scroll (vendored) — required helper classes ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
 * HIW v5 — match reference (thinkwithmark): bigger serif narrative
 * at regular weight, italic emphasis on key phrases, lighter faint
 * grey for upcoming words, larger visual. Text-first reveal.
 * ============================================================ */
.hiw-word.hiw-em, .hiw-narrative em { font-style: italic; }
.hiw-word { color: #cdc9bf; }            /* upcoming words — light warm grey */
.hiw-word.is-on { color: var(--ink); }
@media (min-width: 1025px) {
  #how-it-works.hiw-pinned .hiw-narrative {
    font-size: clamp(36px, 4.7vw, 60px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -1px;
    max-width: 22ch;
  }
  #how-it-works.hiw-pinned .hiw-img-wrap { width: min(520px, 50vw); }
}

/* ============================================================
 * HERO v2 — dark + minimal (reference top): big serif headline
 * bottom-left, one-line sub, CTA bottom-right, heavy dark scrim.
 * (Badges + scrolling trust strip removed; stat bar carries proof.)
 * ============================================================ */
.hero-gradient {
  background:
    linear-gradient(0deg, rgba(8,11,16,0.92) 0%, rgba(8,11,16,0.32) 40%, rgba(8,11,16,0.16) 66%, rgba(8,11,16,0.48) 100%),
    linear-gradient(95deg, rgba(8,11,16,0.68) 0%, rgba(8,11,16,0.12) 56%, rgba(8,11,16,0) 100%);
}
.hero-content { justify-content: space-between; align-items: flex-end; gap: 48px; }
.hero-left { max-width: 820px; gap: 24px; }
.hero-h1 { font-size: clamp(42px, 5vw, 76px); line-height: 1.06; }
.hero-sub { max-width: 560px; }
/* The in-hero "Book a Demo" (bottom-right) is removed on every hero — the nav
   keeps the CTA. */
.hero-right { display: none !important; }
.hero-right .hero-btn-note { margin: 0; }
.hero-btn-arrow { display: inline-block; margin-left: 4px; }

@media (max-width: 900px) {
  .hero-content { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero-right { align-self: stretch; align-items: flex-start; }
}
@media (max-width: 768px) {
  .hero-h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero-right { align-items: stretch; }
  .hero-right .hero-btn { justify-content: center; }
}

/* ============================================================
 * HIW v9 — clean, readable cream sections (reference: thinkwithmark
 * feature cards). No pin, no word-scrub, no full-bleed. A dark serif
 * heading + short description sit beside the readable product-UI card,
 * alternating left/right; each section rises in as it enters view.
 * ============================================================ */
/* neutralise the full-bleed wrapper: the glass UI positions relative to
   .hiw-anim again, exactly as originally designed (readable) */
.hiw-anim-stage { display: contents; }

/* section reveal on enter */
.hiw-step {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.hiw-step.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hiw-step { opacity: 1; transform: none; transition: none; }
}

/* text column: eyebrow + serif heading + short description */
.hiw-text { justify-content: center; gap: 16px; padding: 0; }
.hiw-step-tag {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.hiw-h {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.6px;
  color: var(--ink); margin: 0;
}
.hiw-narrative {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; letter-spacing: 0;
  color: rgba(10,17,26,0.64); margin: 0; max-width: 48ch;
}
.hiw-narrative em { font-style: italic; color: rgba(10,17,26,0.82); }

/* mobile: stack cleanly, comfortable spacing */
@media (max-width: 1024px) {
  .hiw-step, .hiw-step-reverse { flex-direction: column; gap: 28px; }
  .hiw-text { gap: 12px; }
  .hiw-h { font-size: clamp(26px, 6.4vw, 36px); }
}

/* ============================================================
 * WHY — manifesto reveal (reference: thinkwithmark "Introducing Mark").
 * A tall section with a sticky centred stage; the line illuminates
 * word-by-word as you scroll, ending on the one-line Tely pitch.
 * ============================================================ */
.why { position: relative; background: var(--bg); min-height: 300vh; }
.why-stage {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 28px; padding: 0 max(6vw, 24px); max-width: 1200px; margin: 0 auto;
}
.why-eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.why-line {
  font-family: var(--serif); color: var(--ink);
  margin: 0; max-width: none;
}
/* Each manifesto sentence is its own block line — stacked, with breathing room. */
.why-s {
  display: block; font-weight: 300; letter-spacing: -0.5px; line-height: 1.18;
  font-size: clamp(26px, 3vw, 42px);
}
.why-s + .why-s { margin-top: 0.5em; }
.why-word { color: #d3cfc4; transition: color 0.18s ease; }   /* upcoming — faint warm grey */
.why-word.is-on { color: var(--ink); }
.why-word.why-em { font-style: italic; }
.why-pitch { display: block; margin-top: 0.7em; }
.why-pitch .why-word.is-on { color: var(--ink); }
.why-pitch .why-word { color: #ddd9cf; }

@media (max-width: 1024px) {
  .why { min-height: 270vh; }
  .why-stage { padding: 0 22px; gap: 20px; }
  .why-s { font-size: clamp(27px, 7vw, 38px); }
  .why-s + .why-s { margin-top: 0.5em; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the scroll-linked reveal (it's a colour change, not motion) —
     just drop the eased fade so nothing animates on its own. */
  .why-word { transition: none; }
}

/* Ambient case video fills the featured media exactly like the cover image */
.story-feature-media .story-feature-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}

/* Case hero ambient video / slider: replaces the drifting cover image
   (::before). The dark scrim (::after, z1) and content (z2) stay above. */
.case-hero--video::before { display: none; }
.case-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.case-hero-media .case-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s ease;
}
.case-hero-media .case-hero-video.is-active { opacity: 1; }
.case-hero--video:not(.case-hero--slider) .case-hero-video { opacity: 1; }  /* single clip */

/* Slider nav: arrows + dots, above the scrim/content, bottom-right */
.case-hero-nav {
  position: absolute; z-index: 4; right: max(6vw, 22px); bottom: 26px;
  display: flex; align-items: center; gap: 14px;
}
.case-hero-arrow {
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32);
  color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.case-hero-arrow:hover { background: rgba(255,255,255,0.3); }
.case-hero-dots { display: flex; gap: 7px; }
.case-hero-dot {
  width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.42); transition: background 0.2s ease, transform 0.2s ease;
}
.case-hero-dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 768px) {
  .case-hero-nav { right: 50%; transform: translateX(50%); bottom: 18px; }
}

/* ============================================================
 * CASE METRICS v2 — borderless, bigger numbers (no "cards").
 * ============================================================ */
.case-metric { border: none; background: transparent; padding: 0; }
.case-metric-label { border-bottom: none; padding-bottom: 4px; }
.case-metric-value { font-size: clamp(46px, 5vw, 66px); }
.case-hero .case-metric {
  background: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.case-hero .case-metric-label { border-bottom: none; }
.case-meta-label { border-bottom: none; padding: 0 0 4px 0; }
.case-meta-value { padding: 0; }

/* ============================================================
 * MOBILE chrome (reference: thinkwithmark) — floating cream pill
 * nav (logo + burger, NO demo) + a persistent bottom "Book a Demo".
 * Plus tighter, more compact case pages.
 * ============================================================ */
.tely-sticky-demo { display: none; }     /* desktop: hidden (nav has the CTA) */

@media (max-width: 1024px) {
  /* --- floating cream pill nav --- */
  .nav { position: fixed; top: 0; left: 0; right: 0; padding: 12px 12px 0; background: transparent; }
  /* Scrolled / light-page look = frosted-glass oval pill + ink logo + glass
     menu circle. (Also the safe default for light-top pages.) */
  .nav-inner {
    background: rgba(250, 247, 240, 0.62);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border-radius: 999px; padding: 6px 6px 6px 16px;
    box-shadow: 0 8px 26px rgba(10,17,26,0.12);
  }
  .nav-logo-img { height: 32px; }
  .nav-logo-img--default { opacity: 0 !important; }
  .nav-logo-img--ink { opacity: 1 !important; }
  /* The cream pill nav engages here and hides the links + demo button, so the
     burger (and its drawer) must appear from 1024px too — not only at 900px,
     which otherwise left a 901–1024px dead zone with no menu control. */
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-drawer { display: block; }
  .nav-burger {
    display: flex;
    background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .nav-burger-line { background: var(--ink); }

  /* At the TOP over a dark hero (not scrolled, not a light-nav page): NO pill —
     transparent, white logo + a solid white menu circle so both read on the
     photo. The pill + ink logo fade in once .is-scrolled is set. */
  body:not(.is-scrolled):not(.has-light-nav) .nav-inner {
    background: transparent; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 10px 6px;
  }
  body:not(.is-scrolled):not(.has-light-nav) .nav-logo-img--default { opacity: 1 !important; }
  body:not(.is-scrolled):not(.has-light-nav) .nav-logo-img--ink { opacity: 0 !important; }
  body:not(.is-scrolled):not(.has-light-nav) .nav-burger {
    background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-demo, .nav-login { display: none !important; }   /* removed from header */

  /* hero CTA is replaced by the persistent bottom button */
  .hero-right { display: none; }

  /* --- persistent bottom "Book a Demo" pill --- */
  .tely-sticky-demo {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 150; background: var(--ink); color: #fff;
    font-family: var(--sans); font-weight: 500; font-size: 16px;
    padding: 15px 30px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    box-shadow: 0 14px 36px rgba(10,17,26,0.36);
  }
  .tely-sticky-demo-arrow { font-size: 17px; }
  body.nav-open .tely-sticky-demo { display: none; }   /* don't clash with the open menu */
}

/* compact case pages on mobile */
@media (max-width: 768px) {
  .case-hero { padding-top: 84px; padding-bottom: 88px; }
  .case-page .article-panel { margin-top: -64px; }
  .case-hero .article-hero-inner { gap: 18px; }
  .case-metrics { row-gap: 14px; margin: 12px 0 16px; }
  .case-metric { padding: 0; }
  .case-metric-value { font-size: 50px; }
  .case-metric-label { font-size: 13px; line-height: 18px; }
  .case-meta-grid { gap: 12px; padding: 8px 0; }
  .case-meta-value { font-size: 22px; line-height: 28px; }
  .case-page .article-shell { padding-top: 40px; }
}

/* Homepage hero: text anchored to the BOTTOM on mobile (reference layout),
   with room above the persistent bottom CTA. */
@media (max-width: 1024px) {
  .hero-content { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 100px 22px 124px; }
  .hero-left { align-items: flex-start; }
}

/* Full-bleed hero on mobile — no inset frame around the hero media (reference). */
@media (max-width: 1024px) {
  .hero { margin: 0; border-radius: 0; }
}

/* Mobile: nav scrolls away with the page (no persistent backdrop band on scroll) */
@media (max-width: 1024px) {
  body.is-scrolled .nav,
  body.is-scrolled.has-light-nav .nav {
    position: fixed; background: transparent !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ============================================================
 * MOBILE menu — morphs out of the nav pill into a floating card
 * with the SAME 12px margins + rounding on all four sides as the
 * top pill. Opens via a clip reveal (the cream "fills" downward).
 * ============================================================ */
@media (max-width: 1024px) {
  /* keep the pill (logo + X) pinned at the top while the menu is open */
  body.nav-open .nav { position: fixed; }

  .nav-drawer {
    position: fixed; inset: 12px;                 /* same float as the top pill */
    width: auto; height: auto; max-width: none;
    background: var(--warm);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(10,17,26,0.20);
    z-index: 99;                                  /* under the pill so logo + X stay on top */
    display: block; overflow: hidden;
    transform: none;
    clip-path: inset(0 0 100% 0 round 22px);      /* collapsed to the top edge (the pill) */
    transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  body.nav-open .nav-drawer {
    clip-path: inset(0 0 0 0 round 22px);         /* fills the card downward */
    pointer-events: auto;
  }
  .nav-drawer-inner {
    height: 100%; justify-content: center; gap: 0;
    padding: 96px 30px 36px;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.34s ease 0.18s, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  }
  body.nav-open .nav-drawer-inner { opacity: 1; transform: none; }
  .nav-drawer-link { font-size: 27px; padding: 20px 0; }
  .nav-drawer-demo { margin-top: 36px; font-size: 19px; padding: 16px 26px; }
}

/* Open menu: lift the pill (logo + X) above the morph card so both show
   directly on the cream surface (no nested pill chrome). */
@media (max-width: 1024px) {
  body.nav-open .nav-inner { position: relative; z-index: 101; background: transparent; box-shadow: none; }
}

/* Persistent bottom CTA hides while the footer CTA section is on screen
   (the footer already has its own "Book a 15 min Demo"). */
body.cta-in-view .tely-sticky-demo {
  opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tely-sticky-demo { transition: opacity 0.3s ease, transform 0.3s ease; }

/* CTA background video: centered & full-size. Full-bleed cover crop is set by
   the .cta-bg rules above. */
.cta-bg-video { object-position: center; width: 100%; height: 100%; }

/* Animated hero: the motion clip overlays the still image (its poster),
   covering the hero exactly like the <img>. */
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; z-index: 0;
}
@media (max-width: 1024px) { .hero-bg-video { object-position: 70% top; } }

/* Hidden per design feedback: CTA subtitle + trust line (keep heading + button + footer) */
.cta-sub, .cta-note { display: none; }

/* CTA = full viewport height. Video FILLS the height (cover, no black
   bands); positioned toward the right so both the patient and the doctor
   stay in the viewport. */
@media (max-width: 1024px) {
  .cta { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; }
  /* Back into normal flow so it sits under the content (no overlap). */
  .cta > .site-footer { position: relative; }
  /* text at the BOTTOM, big & left-aligned — same placement as the hero */
  .cta-content {
    flex: 1 1 auto; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; text-align: left;
    padding: 60px 22px; max-width: 100%;
  }
  .cta .site-footer { margin-top: 0; }
}

/* Case page mobile: fix bullet over-indent + compact metric cards */
@media (max-width: 1024px) {
  /* bullets were indented 64px from the left — align them to the body edge */
  .article-body .tely-bullet-list,
  .tely-bullet-list.tely-bullet-list { padding-left: 0; }
}
@media (max-width: 768px) {
  /* compact metrics so the hero doesn't need so much scrolling */
  .case-metrics { row-gap: 6px; margin: 10px 0 14px; }
  .case-metric { padding: 2px 0; }
  .case-metric-value { font-size: 30px; line-height: 1.06; letter-spacing: -0.5px; }
  .case-metric-label { font-size: 11px; line-height: 15px; letter-spacing: 0.03em; }
}

/* HIW anim cards on mobile: taller so the glass UI fits (no crop/overlap) */
@media (max-width: 768px) {
  #how-it-works .hiw-img-wrap { aspect-ratio: auto; min-height: 460px; }
}

/* Report booklet on the dark mid-CTA card. On desktop it stretches to match
   the height of the text column on the right (align-items: stretch on the row
   + height:100% here); a min-height keeps it sane if the copy is ever short. */
.midcta-visual { flex: 0 0 auto; display: flex; align-items: stretch; justify-content: center; }
.midcta-visual .tely-lead__booklet { width: 208px; height: 100%; min-height: 210px; margin: 0; }
@media (max-width: 768px) {
  .midcta-row { flex-direction: column; align-items: center; gap: 22px; }
  .midcta-body { align-items: center; text-align: center; }
  .midcta-visual { align-self: center; }
  /* Stacked layout: the column gives the visual no height to fill, so re-pin a
     fixed booklet size — roomy enough that the full cover title ("Get patients
     from AI search") sits inside the cover instead of spilling past the edge. */
  .midcta-visual .tely-lead__booklet { width: 200px; height: 250px; min-height: 0; }
  .midcta-visual .tely-lead__cover { padding: 20px 18px 22px 22px; gap: 8px; }
  .midcta-visual .tely-lead__cover-title { font-size: 23px; line-height: 1.18; }
  .midcta-sub { display: none; }   /* subheading hidden on mobile */
  .midcta-action { align-items: stretch; }
}

/* Glass-style report book on the dark mid-CTA (matches the site's glass cards) */
.midcta-visual .tely-lead__cover {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 28px 54px -22px rgba(0, 0, 0, 0.65);
  color: #fff;
  /* Taller cover: roomier padding + gap so the kicker/title fill the height
     proportionally instead of clustering at the top. */
  padding: 24px 20px 26px 26px;
  gap: 10px;
}
.midcta-visual .tely-lead__cover-title { font-size: clamp(22px, 1.7vw, 27px); }
/* A bright line that continuously traces the cover's border — a masked conic
   gradient whose angle animates, so a cyan→white highlight walks around the
   rounded edge. */
@property --tely-cover-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.midcta-visual .tely-lead__cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--tely-cover-a),
    transparent 0deg, transparent 248deg,
    rgba(95, 214, 232, 0.85) 298deg, #ffffff 320deg, rgba(95, 214, 232, 0.85) 342deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: telyCoverTrace 4.5s linear infinite;
}
@keyframes telyCoverTrace { to { --tely-cover-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .midcta-visual .tely-lead__cover::after { animation: none; }
}
.midcta-visual .tely-lead__cover-brand,
.midcta-visual .tely-lead__cover-title { color: #fff; }
.midcta-visual .tely-lead__cover-meta { color: rgba(255, 255, 255, 0.7); }
/* "Personalized playbook" sits over a hairline rule, like the reference cover. */
.midcta-visual .tely-lead__cover-kicker {
  color: rgba(255, 255, 255, 0.78);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
/* "from" reads muted between the two white lines of the title. */
.midcta-visual .tely-lead__cover-from { color: rgba(255, 255, 255, 0.5); }
.midcta-visual .tely-lead__stack--1 { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.14); }
.midcta-visual .tely-lead__stack--2 { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); }

/* HIW desktop: no eyebrow, heading pinned to top + description to bottom,
   bigger & thinner serif heading (matches the hero's light Newsreader 300).
   Mobile keeps the eyebrow + current stacked layout. */
@media (min-width: 1025px) {
  /* Text column matches the card's vertical bounds: drop the 88vh floor so the
     row collapses to the card height, stretch both columns to it, then
     space-between pins the heading to the card top and the description to the
     card bottom (no more overhang above/below the card). */
  #how-it-works .hiw-step { min-height: auto; align-items: stretch; }
  #how-it-works .hiw-text { justify-content: space-between; }
  #how-it-works .hiw-h {
    font-weight: 300;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1.1; letter-spacing: -1px;
  }
}

/* WHY manifesto on desktop: compact + thin (Newsreader 300), wider column —
   like the reference / a landscape iPad, not the huge screen-filling text. */
@media (min-width: 1025px) {
  .why-s { font-size: clamp(30px, 2.7vw, 38px); }
}