/* =========================================================================
   HiClinic — design system
   Palette extracted from Framer screenshot + logo. No invented hues.
   Type: Bricolage Grotesque (display) · Hanken Grotesk (body) · IBM Plex Mono (data)
   ========================================================================= */

/* ---- tokens ---- */
:root {
  --signal-blue: #0067FF;   /* brand blue — incoming signal / primary */
  --signal-deep: #0067FF;
  --signal-mid:  #0093C9;   /* gradient bridge (derived) */
  --captured:    #00B894;   /* brand green — answered / captured / booked */
  --captured-ink:#04795F;

  --ink:    #0A1330;        /* headlines, dark frame */
  --ink-2:  #111a3d;        /* raised dark surface */
  --ink-3:  #1b2550;        /* dark hairline */
  --slate:  #33406b;        /* strong body on light */
  --muted:  #5A6B8C;        /* secondary text */
  --line:   #E5EBF5;        /* hairlines on light */
  --mist:   #F4F8FF;        /* tinted section wash */
  --mist-2: #EAF1FF;
  --white:  #ffffff;
  --surface: #ffffff;       /* card/panel background (flips in dark mode) */
  --text-strong: #0A1330;   /* strong text: headings, labels (flips in dark mode) */

  --grad-signal: linear-gradient(100deg in oklab, #0067FF 0%, #00B894 100%);

  --radius:   18px;
  --radius-lg:26px;
  --radius-sm:11px;

  --shadow-sm: 0 1px 2px rgba(10,19,48,.06), 0 2px 8px rgba(10,19,48,.05);
  --shadow-md: 0 12px 30px -12px rgba(10,19,48,.20), 0 2px 8px rgba(10,19,48,.06);
  --shadow-lg: 0 40px 80px -32px rgba(10,19,48,.35), 0 8px 24px -12px rgba(10,19,48,.18);
  --shadow-blue: 0 18px 40px -16px rgba(0,96,254,.45);

  /* ---- framing system: one container shared by header + every section ---- */
  --maxw: 1200px;                       /* content column width */
  --gutter: clamp(18px, 3vw, 40px);     /* space from viewport edge */
  --header-pad: 20px;                   /* logo/nav inset inside the header bar */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; } /* guards against component classes like .btn setting their own display */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- typography ---- */
h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 2.2rem; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* headings on dark sections stay solid white */
.safety h2, .finalcta h2 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
h3 { font-size: 1.12rem; letter-spacing: -.01em; font-weight: 600; }
p { color: var(--slate); }
.lead { font-size: 1.25rem; color: var(--muted); } /* 20px */

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-blue);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--signal-blue); opacity: .6; }
.eyebrow--center { justify-content: center; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(52px, 5vw, 88px) 0; }
.section--mist { background: var(--mist); border-block: 1px solid var(--line); }
.section__head { max-width: 640px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: 16px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.25em; border-radius: 999px;
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  border: 2px solid transparent; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--signal-blue); outline-offset: 3px; }
.btn--primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(100deg in oklab, #0067FF 0%, #00B894 135%); color: #fff; border-color: rgba(255,255,255,.24); box-shadow: 0 12px 26px -12px rgba(0,103,255,.5); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(2,109,246,.58); }
/* modern-yet-simple: a light sheen sweeps across on hover */
.btn--primary::after { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none; z-index: -1; }
.btn--primary:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.99); }
.btn--ghost { background: var(--surface); color: var(--text-strong); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { transform: translateY(-2px); border-color: #c9d6ee; box-shadow: var(--shadow-md); }

/* ---- Book a Demo avatar pill ---- */
.btn--demo { background: linear-gradient(100deg in oklab, #eef4ff, #e7f7f1); color: var(--text-strong); border: 1.5px solid rgba(0,103,255,.16); box-shadow: 0 8px 22px -12px rgba(0,103,255,.45), inset 0 1px 0 rgba(255,255,255,.7); border-radius: 999px; padding: 6px 22px 6px 7px; gap: 12px; }
.btn--demo:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,103,255,.5), inset 0 1px 0 rgba(255,255,255,.8); border-color: rgba(0,180,148,.3); background: linear-gradient(100deg in oklab, #e6efff, #ddf4ec); }
.avstack { display: inline-flex; align-items: center; }
.avstack .av { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; object-position: center top; background: var(--mist-2); box-shadow: 0 2px 5px rgba(10,19,48,.16); position: relative; }
.avstack .av:first-child { z-index: 2; }
.avstack .av + .av { margin-left: -8px; z-index: 1; }
.av--ph { display: grid; place-items: center; background: var(--grad-signal); color: #fff; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.btn--demo__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn--demo__t { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.btn--demo__s { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--captured); box-shadow: 0 0 0 3px color-mix(in srgb, var(--captured) 24%, transparent); animation: pulse 1.6s infinite; }
.btn--onink { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--onink:hover { background: rgba(255,255,255,.16); }
.btn--lg { padding: .82em 1.5em; font-size: .98rem; }
.btn--block { width: 100%; }

/* ================= HEADER (dark frame) ================= */
.signalbar {
  background: var(--grad-signal); color: #fff;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em;
  text-align: center; padding: 8px 16px;
}
.signalbar strong { font-weight: 600; }
.signalbar a { text-decoration: underline; text-underline-offset: 3px; }

.brand { display: flex; align-items: center; }
.brand svg, .brand img { height: 26px; width: auto; }
.nav-toggle { display: none; margin-inline-start: auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 42px; height: 42px; border-radius: 11px; align-items: center; justify-content: center; }
.nav-toggle svg { height: 20px; }
.nav-toggle__bar { transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle__bar--top { transform-origin: 12px 6px; }
.nav-toggle__bar--bot { transform-origin: 12px 18px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bot { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
}
.mobile-nav { display: none; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 8px 24px 20px; }
.mobile-nav a:not(.btn) { display: block; color: var(--slate); padding: 12px 4px; border-bottom: 1px solid var(--line); font-weight: 500; }
.mobile-nav .btn { margin-top: 16px; }

/* ================= HERO ================= */
.hero { background:
    radial-gradient(120% 80% at 85% -10%, rgba(0,96,254,.06), transparent 60%),
    radial-gradient(90% 70% at -5% 10%, rgba(0,183,144,.07), transparent 55%),
    var(--white);
  padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(48px, 5vw, 84px);
  overflow: clip;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.05rem); }
.hero h1 .hl { color: var(--signal-blue); }
.hero__sub { margin-top: 22px; max-width: 30ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.check-dot { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--captured) 15%, #fff); color: var(--captured-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check-dot svg { width: 11px; }

/* ---------- SIGNATURE: switchboard ---------- */
.switchboard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 20px; align-items: stretch; }
.sw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* call card (left) */
.callcard { padding: 20px; display: flex; flex-direction: column; z-index: 2; position: relative; }
.callcard__top { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.callcard__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-signal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); flex: none; }
.callcard__who { font-weight: 700; color: var(--text-strong); font-size: .98rem; }
.callcard__meta { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.livepill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; color: var(--captured-ink); background: color-mix(in srgb, var(--captured) 12%, #fff); padding: 4px 9px; border-radius: 999px; }
.livepill i { width: 7px; height: 7px; border-radius: 50%; background: var(--captured); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.transcript { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 224px; }
.tline { display: flex; gap: 9px; max-width: 92%; opacity: 0; transform: translateY(6px); animation: tline-in .45s var(--ease) forwards; }
@keyframes tline-in { to { opacity: 1; transform: none; } }
.tline__tag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 6px; color: var(--muted); flex: none; width: 34px; }
.tline__bubble { padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; }
.tline--caller { align-self: flex-start; }
.tline--caller .tline__bubble { background: var(--mist-2); color: var(--slate); border-bottom-left-radius: 4px; }
.tline--ai { align-self: flex-end; flex-direction: row-reverse; margin-inline-start: auto; }
.tline--ai .tline__tag { color: var(--signal-blue); text-align: right; }
.tline--ai .tline__bubble { background: var(--signal-blue); color: #fff; border-bottom-right-radius: 4px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay: .2s; } .typing i:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,100%{ transform: translateY(0); opacity:.4;} 50%{ transform: translateY(-3px); opacity:1;} }
.callcard__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.callcard__timer { color: var(--text-strong); }

/* signal path (connective, meaningful gradient) */
.signalpath { position: absolute; left: calc(46% - 1px); top: 20%; bottom: 20%; width: 2px; z-index: 1; background: linear-gradient(180deg, var(--signal-blue), var(--captured)); opacity: .0; }
@media (min-width: 621px) {
  .switchboard::before {
    content: ""; position: absolute; z-index: 3;
    left: 50%; top: 50%; width: 30px; height: 2px; transform: translate(-50%,-50%);
    background: var(--grad-signal); border-radius: 2px;
  }
  .switchboard::after {
    content: ""; position: absolute; z-index: 4; top: 50%; left: calc(50% - 15px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--captured);
    transform: translateY(-50%); box-shadow: 0 0 0 5px rgba(0,183,144,.16);
    animation: travel 2.4s var(--ease) infinite;
  }
}
@keyframes travel { 0% { left: calc(50% - 15px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(50% + 7px); opacity: 0; } }

/* inbox card (right) */
.inbox { padding: 18px; z-index: 2; position: relative; }
.inbox__top { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.inbox__dot { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.inbox__dot svg { width: 15px; }
.inbox__title { font-weight: 700; color: var(--text-strong); font-size: .95rem; }
.inbox__count { margin-inline-start: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--captured-ink); background: color-mix(in srgb, var(--captured) 12%, #fff); padding: 3px 9px; border-radius: 999px; }

.record { margin-top: 14px; }
.record__name { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.record__ava { width: 34px; height: 34px; border-radius: 50%; background: var(--mist-2); color: var(--signal-blue); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex: none; }
.field { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.field:last-child { border-bottom: 0; }
.field__label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field__val { font-weight: 600; color: var(--text-strong); font-size: .95rem; min-height: 1.4em; display: flex; align-items: center; gap: 8px; }
.field__val .placeholder { color: #b9c4dc; font-weight: 500; font-family: var(--font-mono); font-size: .8rem; }
.field.captured .field__val { animation: capture 1s var(--ease); }
.field.captured .field__label { color: var(--captured-ink); }
@keyframes capture { 0% { background: color-mix(in srgb, var(--captured) 22%, #fff); } 100% { background: transparent; } }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.status-chip--booked { background: color-mix(in srgb, var(--captured) 14%, #fff); color: var(--captured-ink); }
.status-chip svg { width: 12px; }

.inbox__stream { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.streamrow { display: flex; align-items: center; gap: 9px; font-size: .82rem; opacity: .62; }
.streamrow .chan { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; font-size: .62rem; font-family: var(--font-mono); font-weight: 600; }
.chan--sms { background: #e7f0ff; color: var(--signal-blue); }
.chan--chat { background: #e3f7f1; color: var(--captured-ink); }
.chan--call { background: #eee9ff; color: #6a4bd1; }
.streamrow b { color: var(--text-strong); font-weight: 600; }
.streamrow .t { margin-inline-start: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__sub { max-width: 46ch; }
}
@media (max-width: 620px) {
  .switchboard { grid-template-columns: 1fr; gap: 16px; }
  .switchboard::before, .switchboard::after { display: none; }
  .transcript { min-height: 180px; }
}

/* ================= MISSED-CALL MATH ================= */
/* calculator sits in one gradient box */
:root { --alert: #E5484D; --alert-tint: #FDECEC; }

/* ============ True Cost of Phone Coverage calculator ============ */
#cost .section__head { max-width: 900px; }
#cost h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); line-height: 1.1; text-wrap: balance; }

.calc2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 22px); align-items: stretch; max-width: 1060px; margin-inline: auto; }
.calc2__inputs, .calc2__results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(24px, 2.6vw, 32px); }
.calc2__inputs { display: flex; flex-direction: column; }
.calc2__inputs-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 3vw, 34px); margin-top: 20px; }
.calc2__results { display: flex; flex-direction: column; gap: 16px; }
.calc2__rlabel { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.calc2__fine { margin-inline: auto; text-align: center; }

/* ===== Cost calculator — new "12-month divergence" design ===== */
.calcx { max-width: 1120px; margin-inline: auto; }
.calcx__panel { display: grid; grid-template-columns: 330px 1fr; gap: clamp(16px, 2vw, 28px); align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(20px, 2.4vw, 30px); }
.calcx__controls { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2vw, 24px); }
.calcx__ctitle { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.calcx__plan { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(120deg, #eef4ff, #e7f7f1); border: 1px solid #dbe7f7; border-radius: 14px; padding: 13px 16px; }
.calcx__plan-k { display: block; font-weight: 700; color: var(--text-strong); font-size: .92rem; }
.calcx__plan-s { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.calcx__plan-p { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--signal-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calcx__plan-p i { font-style: normal; font-size: .55em; color: var(--muted); font-weight: 600; }

/* unified footer bar: plan + savings + CTA in one strip */
.calcx__footer { grid-column: 1 / -1; margin-top: clamp(14px, 1.8vw, 20px); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; background: var(--grad-signal); border-radius: 16px; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px); color: #fff; box-shadow: 0 16px 38px -20px rgba(0,103,255,.55); }
.calcx__foot-k { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 5px; }
.calcx__foot-plan { padding-right: clamp(16px, 2.4vw, 32px); border-right: 1px solid rgba(255,255,255,.28); }
.calcx__foot-price { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calcx__foot-price i { font-style: normal; font-size: .5em; font-weight: 600; color: rgba(255,255,255,.8); }
.calcx__foot-save { flex: 1; min-width: 160px; }
.calcx__foot-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calcx__foot-cta { background: #fff; color: var(--signal-blue); font-weight: 700; border: 0; flex-shrink: 0; }
.calcx__foot-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (max-width: 560px) {
  .calcx__foot-plan { border-right: 0; padding-right: 0; }
  .calcx__foot-cta { width: 100%; justify-content: center; }
}

.calcx__viz { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.calcx__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xstat { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); }
.xstat__k { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.xstat__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, .95rem + 1.5vw, 1.95rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xstat--desk { background: var(--alert-tint); border-color: #f6d4d4; }
.xstat--desk .xstat__k { color: #b5484d; }
.xstat--desk .xstat__v { color: var(--alert); }
.xstat--hc { background: #eef4ff; border-color: #d7e6ff; }
.xstat--hc .xstat__k { color: #5a6b8c; }
.xstat--hc .xstat__v { color: var(--signal-blue); -webkit-text-fill-color: var(--signal-blue); background: none; }
.xstat--save { background: linear-gradient(120deg, #eef4ff, #e7f7f1); border-color: #dbe7f7; }
.xstat--save .xstat__k { color: #0a6; }
.xstat--save .xstat__v { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.calcx__chart { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px 11px; }
.calcx__chart-h { font-weight: 600; color: var(--text-strong); font-size: .95rem; margin-bottom: 6px; }
.calcx__chart svg { width: 100%; height: auto; display: block; }
.calcx__chart .legend { margin-top: 10px; }
.legend .k-save { background: var(--grad-signal); }
#costChart text { font-family: var(--font-mono); }
.ch-grid line { stroke: var(--line); stroke-width: 1; }
.ch-glabel { fill: var(--muted); font-size: 11px; }
.ch-xlabel { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.ch-tag-desk { fill: var(--alert); font-size: 12.5px; font-weight: 600; }
.ch-tag-hc { fill: #0d9b7f; font-size: 12.5px; font-weight: 600; }
.ch-annot-k { fill: #5a6b8c; font-size: 8px; letter-spacing: .12em; font-family: var(--font-mono); }
.ch-annot-v { fill: var(--signal-blue); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 880px) { .calcx__panel { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .calcx__stats { grid-template-columns: 1fr; } }

/* editable value fields (type a number, synced to the slider) */
.ctrl__value { display: inline-flex; align-items: baseline; gap: 1px; }
.ctrl__value .cur { font-family: var(--font-mono); font-weight: 600; color: var(--signal-blue); font-size: 1.15rem; }
.ctrl__num { border: 0; background: transparent; font-family: var(--font-mono); font-weight: 600; color: var(--signal-blue); font-size: 1.15rem; text-align: right; padding: 0 1px; border-bottom: 1px dashed #b9c6da; border-radius: 0; -moz-appearance: textfield; }
.ctrl__num::-webkit-outer-spin-button, .ctrl__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctrl__num:hover { border-bottom-color: var(--signal-blue); }
.ctrl__num:focus { outline: none; border-bottom-color: var(--signal-blue); border-bottom-style: solid; }

/* chart hover tooltip */
.calcx__plot { position: relative; }
.chart-tip { position: absolute; transform: translate(-50%, -118%); background: var(--surface); color: var(--text-strong); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: .74rem; line-height: 1.5; box-shadow: var(--shadow-lg); pointer-events: none; white-space: nowrap; z-index: 4; min-width: 156px; }
.chart-tip[hidden] { display: none; }
.chart-tip b { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.chart-tip .tip-r { display: flex; align-items: center; gap: 7px; }
.chart-tip .tip-r i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.chart-tip .tip-r em { margin-left: auto; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 14px; }
.chart-tip .tip-keep { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--captured-ink); }

/* ===== Founders — poster stage ===== */
.fs2 { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 54px) 0; text-align: center; color: #fff; background: radial-gradient(120% 92% at 50% 122%, rgba(255,255,255,.22), transparent 56%), linear-gradient(120deg in oklab, #0067FF 0%, #00B894 100%); box-shadow: 0 34px 74px -34px rgba(0,103,255,.6); }
.fs2__logo { position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.6vw, 34px); height: 30px; width: auto; opacity: .96; }
.fs2__title { color: #fff !important; -webkit-text-fill-color: #fff; background: none; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.9rem); line-height: 1.1; margin: 16px auto 0; max-width: none; text-wrap: balance; }
.fs2__title em { font-style: italic; color: #eafff7; }
.fs2__scene { position: relative; margin-top: clamp(22px, 3vw, 36px); }
.fs2__people { position: relative; z-index: 1; display: block; width: min(560px, 80%); margin: 0 auto; filter: drop-shadow(0 22px 26px rgba(6,26,54,.3)); }
.fs2__name { position: absolute; bottom: clamp(20px, 9%, 66px); z-index: 3; max-width: 220px; }
.fs2__name--l { left: clamp(4px, 1.5%, 24px); text-align: left; }
.fs2__name--r { right: clamp(4px, 1.5%, 24px); text-align: right; }
.fs2__nm { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); line-height: 1.1; }
.fs2__role { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .01em; color: #eafff7; margin-top: 4px; }
.fs2__blurb { font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.92); margin-top: 9px; }
.fs2__arrow { position: absolute; z-index: 3; width: clamp(52px, 6vw, 82px); bottom: clamp(96px, 24%, 156px); pointer-events: none; opacity: .92; }
.fs2__arrow--l { left: clamp(150px, 22%, 270px); }
.fs2__arrow--r { right: clamp(150px, 22%, 270px); bottom: calc(clamp(96px, 24%, 156px) + 24px); transform: scaleX(-1); }

/* ===== Integrations — full-width card (inside the band) ===== */
.integ { padding: clamp(30px, 3vw, 52px) 0 clamp(36px, 5vw, 66px); }
.integ-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); padding: clamp(30px, 4vw, 48px) clamp(22px, 3vw, 40px); text-align: center; overflow: hidden; }
.integ-card__intro { max-width: 620px; margin: 0 auto; }
.integ-card__intro h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); line-height: 1.2; margin: 14px 0 8px; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.integ-card__intro p { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.integ-card .marquee { margin-top: clamp(24px, 3.4vw, 40px); }
.integ-card__cta { display: inline-flex; margin-top: clamp(20px, 3vw, 30px); margin-bottom: 0; }
.marquee { position: relative; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee__row { display: flex; width: max-content; animation: igmarquee 32s linear infinite; }
.marquee:hover .marquee__row, .marquee:focus-within .marquee__row { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: calc(clamp(28px, 3.5vw, 52px) + 30px); padding-right: calc(clamp(28px, 3.5vw, 52px) + 30px); }
.ig-logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); letter-spacing: -.01em; color: var(--muted); white-space: nowrap; opacity: .7; transition: color .2s var(--ease), opacity .2s var(--ease); }
.ig-logo:hover { color: var(--text-strong); opacity: 1; }
.ig-logo--img { height: 34px; width: auto; object-fit: contain; }
.ig-logo--img[alt="Juvonno"] { height: 54px; }
@keyframes igmarquee { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee__row { animation: none; width: auto; }
  .marquee__set:not(:first-child) { display: none; }
  .marquee__set { flex-wrap: wrap; gap: 14px 28px; padding-right: 0; }
}
@media (max-width: 720px) {
  .integ-card { grid-template-columns: 1fr; gap: 16px; }
  .integ-card__cta { margin-top: 12px; }
}
@media (max-width: 860px) {
  .fs2 { padding-bottom: 0; }               /* let the image sit flush to the bottom edge */
  .fs2__arrow { display: none; }
  .fs2__scene { display: flex; flex-direction: column; align-items: center; }
  .fs2__name { position: static; max-width: 440px; text-align: center; margin-top: 14px; }
  .fs2__name--l { order: 1; }
  .fs2__name--r { order: 2; }
  .fs2__people { order: 3; width: min(480px, 96%); margin: 12px auto 0; }  /* image last → flush at bottom, never cut */
}
.ctrl__hint { margin-top: 9px; font-size: .82rem; line-height: 1.4; color: var(--muted); }

/* ===== FAQ — two-column, sticky intro ===== */
.faq2 { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq2__intro { position: sticky; top: 100px; }
.faq2__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.5rem); line-height: 1.2; margin-top: 16px; text-wrap: balance; }
.faq2__title em { font-style: italic; color: var(--signal-blue); }
.faq2__sub { color: var(--muted); font-size: 1rem; line-height: 1.6; margin-top: 14px; max-width: 38ch; }
.faq2__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; font-size: .92rem; color: var(--signal-blue); }
.faq2__more svg { width: 16px; transition: transform .2s var(--ease); }
.faq2__more span { transition: color .2s var(--ease); }
.faq2__more:hover span { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.faq2__more:hover svg { stroke: url(#brandGrad); transform: translateX(3px); }
.faq2__list .qa { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 0 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; }
.faq2__list .qa:last-child { margin-bottom: 0; }
.faq2__list .qa[data-open="true"] { box-shadow: var(--shadow-md); background: linear-gradient(90deg, #e9f1ff, #e4f6ef) padding-box, var(--grad-signal) border-box; border-color: transparent; }
@media (max-width: 860px) {
  .faq2 { grid-template-columns: 1fr; }
  .faq2__intro { position: static; }
  .faq2__sub { max-width: none; }
}

/* two cost boxes */
.calc2__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.costbox { border-radius: 16px; padding: 18px 18px 20px; }
.costbox .cap { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.costbox__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.35rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.costbox__sub { margin-top: 8px; font-size: .77rem; line-height: 1.35; }
.costbox--desk { background: var(--alert-tint); border: 1px solid #f6d4d4; }
.costbox--desk .cap { color: #b5484d; }
.costbox--desk .costbox__num { color: var(--alert); }
.costbox--desk .costbox__sub { color: #a15c5f; }
.costbox--hc { background: var(--ink); position: relative; overflow: hidden; }
.costbox--hc::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-signal); }
.costbox--hc .cap { color: #8ea0cc; }
.costbox--hc .costbox__num { background: linear-gradient(90deg, #4da3ff, #00d4b4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.costbox--hc .costbox__sub { color: #b9c4e6; }
.costbox__badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: #6ad3bb; background: rgba(0,184,148,.14); border: 1px solid rgba(0,184,148,.32); padding: 4px 9px; border-radius: 999px; }

/* line-item breakdown */
.calc2__table { padding: 2px 0; }
.li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; }
.li__label { color: var(--text-strong); font-weight: 500; font-size: .92rem; }
.li__label > span { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; margin-top: 3px; line-height: 1.35; }
.li__label > span span { display: inline; font-size: inherit; }
.li__val { font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.li--total .li__label { font-weight: 700; }
.li--total .li__val { color: var(--alert); font-size: 1.05rem; }

/* signature stacked-bar chart */
.calc2__chart { padding: 6px 0 2px; }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 44px; }
.bar-col { display: flex; flex-direction: column; align-items: center; width: 88px; }
.bar-track { height: 220px; width: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; border-radius: 8px 8px 0 0; display: flex; flex-direction: column; overflow: hidden; transition: height .5s var(--ease); min-height: 5px; }
.bar .seg-missed, .bar .seg-wages { width: 100%; transition: height .5s var(--ease); }
.bar--desk .seg-missed { background: var(--alert); }
.bar--desk .seg-wages { background: #f4a9ab; }
.bar--hc { background: var(--grad-signal); }
.bar-col__cap { margin-top: 12px; font-size: .82rem; font-weight: 600; color: var(--text-strong); }
.bar-col__amt { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 16px; font-size: .72rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; }
.legend .k-wages { background: #f4a9ab; }
.legend .k-missed { background: var(--alert); }
.legend .k-hc { background: var(--grad-signal); }

/* savings banner + fine print (span full grid width) */
.calc2__banner { grid-column: 1 / -1; margin-top: clamp(16px, 2.2vw, 26px); background: var(--grad-signal); border-radius: 18px; padding: clamp(20px, 2.6vw, 30px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; box-shadow: 0 18px 40px -20px rgba(0,103,255,.55); }
.calc2__banner .cap { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.calc2__banner-num { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(2.3rem, 1.4rem + 4vw, 3.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.calc2__banner .btn { background: #fff; color: var(--signal-blue); font-weight: 700; border: 0; }
.calc2__banner .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.calc2__fine { grid-column: 1 / -1; margin-top: 14px; font-size: .74rem; line-height: 1.55; color: var(--muted); max-width: 78ch; }

/* sliders — gradient track fill driven by --p (set in JS) */
.ctrl__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 10px; }
.ctrl__label { font-weight: 600; color: var(--text-strong); }
.ctrl__value { font-family: var(--font-mono); font-weight: 600; color: var(--signal-blue); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ctrl__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); margin-top: 8px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--signal-blue), var(--captured)) 0 / var(--p, 50%) 100% no-repeat, var(--line); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--signal-blue); box-shadow: var(--shadow-blue); cursor: grab; transition: transform .12s; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.08); cursor: grabbing; }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--signal-blue); box-shadow: var(--shadow-blue); cursor: grab; }
input[type="range"]:focus-visible { outline: 3px solid var(--signal-blue); outline-offset: 6px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { .bar, .bar .seg-missed, .bar .seg-wages { transition: none; } }
@media (max-width: 880px) { .calc2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .calc2__boxes { grid-template-columns: 1fr; } .bars { gap: 30px; } .calc2__banner { flex-direction: column; align-items: flex-start; } }

/* ================= HOW IT WORKS (a real sequence) ================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; position: relative; box-shadow: var(--shadow-sm); }
.step__n { counter-increment: step; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--signal-blue); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.step__n::before { content: "0" counter(step); font-family: var(--font-display); font-size: 1.15rem; }
.step__n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.step__ico { width: 46px; height: 46px; border-radius: 13px; background: var(--mist); color: var(--signal-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step__ico svg { width: 24px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .96rem; color: var(--muted); }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

/* ================= UNIFIED INBOX (product mockup) ================= */
.product { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.product__copy .feat { display: flex; gap: 13px; margin-top: 22px; }
.product__copy .feat svg { width: 22px; color: var(--captured); flex: none; margin-top: 3px; }
.product__copy .feat b { color: var(--text-strong); display: block; font-family: var(--font-display); font-weight: 600; }
.product__copy .feat p { font-size: .95rem; color: var(--muted); margin-top: 2px; }

.mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--mist), #fff); }
.mock__bar .inbox__dot { }
.mock__bar h3 { font-size: 1rem; }
.mock__bar .filter { margin-inline-start: auto; display: flex; gap: 6px; }
.mock__bar .filter span { font-family: var(--font-mono); font-size: .66rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.mock__bar .filter span.on { background: var(--ink); color: #fff; border-color: var(--text-strong); }
.mocklist { }
.mockitem { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); align-items: start; transition: background .15s; }
.mockitem:last-child { border-bottom: 0; }
.mockitem:hover { background: var(--mist); }
.mockitem__ava { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex: none; }
.mockitem__main .nm { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.mockitem__main .nm .chan { width: 20px; height: 20px; border-radius: 6px; font-size: .58rem; }
.mockitem__main .intent { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.mockitem__main .fields { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 9px; }
.tag { font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 7px; background: var(--mist-2); color: var(--slate); border: 1px solid var(--line); }
.tag b { color: var(--text-strong); }
.mockitem__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mockitem__side .time { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .mockitem { grid-template-columns: auto 1fr; }
  .mockitem__side { grid-column: 2; flex-direction: row; align-items: center; }
}

/* ================= FOUNDER ================= */
.founder { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.founder__photo { position: relative; }
.founder__photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); filter: grayscale(1); }
.founder__badge { position: absolute; bottom: -14px; left: -14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.founder__badge svg { width: 26px; color: var(--signal-blue); }
.founder__badge b { display: block; color: var(--text-strong); font-family: var(--font-display); }
.founder__badge span { color: var(--muted); font-size: .74rem; }
.founder__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.7vw, 2.05rem); line-height: 1.28; color: var(--text-strong); letter-spacing: -.02em; }
.founder__quote .q { color: var(--signal-blue); }
.founder__who { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.founder__who .nm { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.founder__who .role { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 720px) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 260px; } }

/* ================= USE CASES ================= */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case__type { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-blue); }
.case h3 { margin: 10px 0 12px; font-size: 1.15rem; }
.case__call { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--mist); border-radius: 12px; font-size: .9rem; color: var(--slate); }
.case__call svg { width: 17px; color: var(--captured); flex: none; margin-top: 3px; }
.case__call em { font-style: normal; color: var(--text-strong); font-weight: 600; }
@media (max-width: 860px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }

/* ================= SAFETY RAIL ================= */
.safety { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 56px); position: relative; overflow: hidden; }
.safety::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad-signal); }
.safety__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.safety h2 { color: #fff; }
.safety p { color: #b9c4e6; margin-top: 16px; }
.safety__list { display: flex; flex-direction: column; gap: 14px; }
.safety__item { display: flex; gap: 13px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid var(--ink-3); border-radius: 13px; padding: 16px 18px; }
.safety__item svg { width: 22px; color: #6ad3bb; flex: none; margin-top: 2px; }
.safety__item b { color: #fff; font-family: var(--font-display); font-weight: 600; display: block; }
.safety__item span { color: #a9b5d8; font-size: .92rem; }
@media (max-width: 780px) { .safety__grid { grid-template-columns: 1fr; } }

/* ================= PRICING ================= */
.pricing { display: flex; justify-content: center; }
.plan { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.plan__head { padding: 30px 32px 26px; border-bottom: 1px solid var(--line); position: relative; }
.plan__head::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-signal); }
.plan__flag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--captured-ink); background: color-mix(in srgb, var(--captured) 12%, #fff); padding: 4px 10px; border-radius: 999px; display: inline-block; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.plan__price .amt { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--text-strong); letter-spacing: -.03em; }
.plan__price .cur { font-family: var(--font-mono); color: var(--muted); font-size: 1rem; }
.plan__price .per { color: var(--muted); }
.plan__note { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.plan__body { padding: 26px 32px 32px; }
.plan__list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
.plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; }
.plan__list svg { width: 19px; color: var(--captured); flex: none; margin-top: 3px; }
.plan__foot { text-align: center; font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* ================= FAQ ================= */
.faq { max-width: 760px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: 0; padding: 22px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-strong); }
.qa__q:focus-visible { outline: 3px solid var(--signal-blue); outline-offset: 2px; border-radius: 8px; }
.qa__ico { margin-inline-start: auto; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--signal-blue); transition: transform .25s var(--ease), background .2s; }
.qa__ico svg { width: 13px; }
.qa[data-open="true"] .qa__ico { transform: rotate(45deg); background: var(--grad-signal); color: #fff; border-color: transparent; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa[data-open="true"] .qa__a { grid-template-rows: 1fr; }
.qa__a p { padding: 0 4px 22px; color: var(--muted); font-size: .98rem; max-width: 66ch; }

/* ================= FINAL CTA ================= */
.finalcta { background:
    radial-gradient(90% 120% at 100% 0%, rgba(0,183,144,.18), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(0,96,254,.22), transparent 55%),
    var(--ink);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 5vw, 72px); text-align: center; }
.finalcta h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.finalcta p { color: #c6d0ec; max-width: 46ch; margin: 18px auto 0; }
.finalcta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.finalcta__webinar { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .8rem; color: #9fb0d8; background: rgba(255,255,255,.05); border: 1px solid var(--ink-3); padding: 8px 16px; border-radius: 999px; }
.finalcta__webinar i { width: 8px; height: 8px; border-radius: 50%; background: var(--captured); animation: pulse 1.4s infinite; }

/* ================= FOOTER — newsletter module (shared by .gfooter) ================= */
.footer-cta--plain { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.footer-cta--plain h3 { font-size: 1.05rem; line-height: 1.25; white-space: nowrap; background: linear-gradient(90deg, #ffffff, #eafff7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.footer-news__row { display: flex; max-width: 380px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 4px 4px 4px 1.1em; }
.footer-news__row input { flex: 1; min-width: 0; background: none; border: none; padding: .6em 0; color: #fff; font: inherit; font-size: .92rem; }
.footer-news__row input::placeholder { color: rgba(255,255,255,.65); }
.footer-news__row input:focus-visible { outline: none; }
.footer-news__row:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.footer-news__row .btn { flex: none; border-radius: 999px; }
@media (max-width: 620px) {
  .footer-news__row { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 520px) {
  .footer-news__row { flex-direction: column; }
}

/* ================= FORMS (book-demo / contact) ================= */
.page-hero { background: var(--ink); color: #fff; padding: clamp(48px, 6vw, 84px) 0 clamp(80px, 8vw, 120px); position: relative; overflow: clip; }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--grad-signal); }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); max-width: 16ch; }
.page-hero .lead { color: #c6d0ec; margin-top: 18px; max-width: 52ch; }
.page-hero .eyebrow { color: #7fd8c5; }
.page-hero .eyebrow::before { background: #7fd8c5; }

.form-wrap { margin-top: -64px; position: relative; z-index: 5; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; }
.card-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(26px, 3vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-group.full { grid-column: 1 / -1; }
.field-group label { font-weight: 600; color: var(--text-strong); font-size: .9rem; }
.field-group label .req { color: var(--signal-blue); }
.field-group input, .field-group select, .field-group textarea {
  font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--mist); color: var(--text-strong); transition: border .15s, box-shadow .15s, background .15s;
}
.field-group input::placeholder, .field-group textarea::placeholder { color: #9aa7c4; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline: none; border-color: var(--signal-blue); background: var(--surface); box-shadow: 0 0 0 4px rgba(0,96,254,.12); }
.field-group textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: flex-start; }
.form-note svg { width: 15px; color: var(--captured); flex: none; margin-top: 2px; }
.aside-panel { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); }
.aside-panel h3 { margin-bottom: 18px; }
.aside-list { display: flex; flex-direction: column; gap: 16px; }
.aside-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.aside-list svg { width: 20px; color: var(--signal-blue); flex: none; margin-top: 2px; }
.aside-list b { color: var(--text-strong); display: block; }
.webinar-box { margin-top: 24px; padding: 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.webinar-box .cap { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #7fd8c5; }
.webinar-box b { display: block; font-family: var(--font-display); font-size: 1.05rem; margin: 6px 0; }
.webinar-box span { color: #b9c4e6; font-size: .88rem; }
.form-success { display: none; text-align: center; padding: 20px 10px; }
.form-success.on { display: block; }
.form-success .tick { width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--captured) 14%, #fff); color: var(--captured-ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.form-success .tick svg { width: 30px; }
@media (max-width: 820px) { .form-wrap { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   BRAND-GUIDE HERO  (gradient framed header + centered hero + animation stage)
   Matches the HiClinic brand guide: blue→green gradient header, white logo,
   "Your Clinic Never Sleeps", green-check features, hero animation stage.
   ========================================================================= */
.topaccent { display: none; } /* removed: the floating bar carries the brand gradient */
.pageframe { max-width: var(--maxw); margin-inline: auto; padding: 8px var(--gutter) 0; position: sticky; top: 0; z-index: 60; }
.gradhead { background: var(--grad-signal); border-radius: 13px; box-shadow: 0 6px 16px -8px rgba(10,19,48,.16); }
.gradhead__inner { display: flex; align-items: center; gap: 20px; padding: 12px 10px 12px 18px; }
.gradhead .brand img { height: 30px; width: auto; }
/* compact CTA buttons with breathing room inside a taller bar */
.gradhead__inner .btn:not(.btn--demo) { padding: .46em 1.05em; font-size: .85rem; }
/* compact avatar demo pill in the header */
.gradhead__cta .btn--demo { padding: 3px 15px 3px 4px; gap: 9px; box-shadow: var(--shadow-sm); }
.gradhead__cta .btn--demo .av { width: 29px; height: 29px; border-width: 2px; }
.gradhead__cta .btn--demo .avstack .av + .av { margin-left: -6px; }
.gradhead__cta .btn--demo .btn--demo__t { font-size: .82rem; }
.gradhead__cta .btn--demo .btn--demo__s { font-size: .66rem; gap: 5px; }
.gradhead__cta .btn--demo .live-dot { width: 7px; height: 7px; }
.gradnav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin-inline-start: auto; }
/* direct-child only, so these do NOT bleed into the dropdown panels */
.gradnav > a { color: rgba(255,255,255,.94); font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.gradnav > a:hover { color: #fff; }
.gradnav > a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 5px; }
.gradhead__cta { display: flex; align-items: center; gap: 12px; }
.btn--glass { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--glass:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
/* matches the demo pill's tint so header buttons stay consistent */
.btn--white { background: linear-gradient(90deg, #eef4ff, #e9f7f1); color: var(--text-strong); border-color: #d7e6ff; box-shadow: var(--shadow-sm); }
.btn--white:hover { background: linear-gradient(90deg, #e7f0ff, #e0f5ee); border-color: #c3d8ff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gradhead .nav-toggle { margin-inline-start: auto; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }

@media (max-width: 900px) {
  .gradnav, .gradhead__cta { display: none; }
  .gradhead .nav-toggle { display: inline-flex; }
}
.mobile-nav.open { display: block; max-height: calc(100vh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- nav dropdown (SaaS mega-menu) ---- */
.navitem { position: relative; display: inline-flex; }
.navlink--btn { background: none; border: 0; cursor: pointer; font: inherit; color: rgba(255,255,255,.94); font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; }
.navlink--btn:hover { color: #fff; }
.navlink--btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 5px; }
.caret { width: 13px; opacity: .85; transition: transform .22s var(--ease); }
.navitem:hover .caret, .navitem:focus-within .caret, .navlink--btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.megamenu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: max-content; max-width: min(560px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 90; text-align: left;
}
.megamenu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* hover bridge */
.navitem:hover > .megamenu, .navitem:focus-within > .megamenu, .megamenu.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.megamenu--wide { width: 560px; }
.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-card { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 13px; transition: background .14s; }
.mega-card .mega-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--mist); color: var(--signal-blue); display: grid; place-items: center; }
.mega-card .mega-ico svg { width: 21px; }
.mega-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-card .mega-tt { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); font-size: .96rem; line-height: 1.2; }
.mega-card .mega-sub { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.mega-card:hover { background: var(--mist); }
.mega-card:hover .mega-ico { background: var(--surface); box-shadow: var(--shadow-sm); }
.mega-card:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.mega-card--all .mega-ico { background: var(--grad-signal); color: #fff; }

.megamenu__foot { margin-top: 8px; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 13px; background: linear-gradient(90deg, #e9f1ff, #e4f6ef); border: 1px solid var(--line); }
.megamenu__foot b { font-family: var(--font-display); display: block; font-size: .92rem; color: var(--text-strong); }
.megamenu__foot span { color: var(--muted); font-size: .8rem; }
.megamenu__foot .btn { margin-inline-start: auto; white-space: nowrap; }
.megamenu__foot .btn:not(.btn--demo) { padding: .6em 1.05em; }
.megamenu__foot .btn--demo { padding: 3px 15px 3px 4px; gap: 9px; box-shadow: var(--shadow-sm); }
.megamenu__foot .btn--demo .av { width: 29px; height: 29px; border-width: 2px; }
.megamenu__foot .btn--demo .avstack .av + .av { margin-left: -6px; }
.megamenu__foot .btn--demo .btn--demo__t { font-size: .82rem; }
.megamenu__foot .btn--demo .btn--demo__s { font-size: .66rem; gap: 5px; }
.megamenu__foot .btn--demo .live-dot { width: 7px; height: 7px; }

.megamenu--sm { width: 264px; }
.mega-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; color: var(--text-strong); font-weight: 500; font-size: .93rem; transition: background .14s, color .14s; }
.mega-row svg { width: 18px; color: var(--muted); flex: none; transition: color .14s; }
.mega-row:hover { background: var(--mist); color: var(--signal-blue); }
.mega-row:hover svg { color: var(--signal-blue); }
.mega-row:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.mega-tag { margin-inline-start: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--captured-ink); background: color-mix(in srgb, var(--captured) 12%, #fff); padding: 3px 8px; border-radius: 999px; }

/* mobile nav groups */
.m-group { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.m-label { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 4px; }
.mobile-nav .m-group a { display: flex; align-items: center; gap: 10px; border-bottom: 0; padding: 9px 14px; color: var(--slate); }
.mobile-nav .m-group a:hover { color: var(--signal-blue); }
.mobile-nav .m-group a .mm-ico { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex: none; color: var(--muted); }
.mobile-nav .m-group a .mm-ico svg { width: 17px; height: 17px; }
.mobile-nav .m-group a:hover .mm-ico { color: #00A57E; }
.m-more { display: none; }
.m-more.is-open { display: block; }

/* ================= "Start free trial" popup form ================= */
body.trial-modal-lock { overflow: hidden; }
.trial-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.trial-modal.is-open { display: flex; }
.trial-modal__backdrop { position: absolute; inset: 0; background: rgba(10,19,48,.55); backdrop-filter: blur(3px); animation: trialFade .2s var(--ease); }
.trial-modal__panel { position: relative; width: min(520px, 100%); max-height: min(700px, 90vh); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: trialPop .25s var(--ease); }
.trial-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--slate); cursor: pointer; box-shadow: var(--shadow-sm); transition: color .15s, transform .15s; }
.trial-modal__close:hover { color: var(--signal-blue); transform: scale(1.06); }
.trial-modal__close svg { width: 16px; height: 16px; }
/* iframe gets auto-resized to its real content height by GHL's own form_embed.js script,
   so THIS wrapper (not the frame) is what scrolls — keeps the close button pinned in place
   above it, since the button lives in .trial-modal__panel, outside this scroll context. */
.trial-modal__scroll { max-height: min(700px, 90vh); overflow-y: auto; }
.trial-modal__frame { display: block; width: 100%; min-height: min(700px, 90vh); border: none; }
@keyframes trialFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trialPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 560px) {
  .trial-modal { padding: 0; }
  .trial-modal__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .trial-modal__scroll { max-height: 100%; height: 100%; }
}
.m-more-btn { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 9px 14px; background: none; border: none; font: inherit; font-size: 1rem; color: var(--slate); opacity: .85; cursor: pointer; }
.m-more-btn:hover { opacity: 1; color: var(--signal-blue); }
.m-more-btn svg { width: 14px; height: 14px; flex: none; transition: transform .2s var(--ease); }
.m-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- centered hero ---- */
.hero-b {
  text-align: center;
  padding: clamp(28px, 4vw, 56px) 0 0;
  /* flat white so the white-background video blends with no visible seam */
  background:
    radial-gradient(70% 42% at 50% 0%, rgba(0,96,254,.05), transparent 72%),
    var(--white);
  overflow: clip;
}
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #e9f1ff, #e4f6ef);
  border: 1px solid #d5e6ff; box-shadow: 0 1px 2px rgba(10,19,48,.05);
  border-radius: 999px; padding: 7px 16px 7px 13px;
  font-weight: 600; font-size: .82rem; color: #0b2f6b; letter-spacing: .01em;
}
.pill-eyebrow svg { width: 19px; height: 19px; stroke-width: 2; color: #00A57E; flex: none; }
/* spacing when a pill eyebrow sits above a heading in a section */
.pill-eyebrow + h2, .pill-eyebrow + blockquote { margin-top: 16px; }
.pill-eyebrow--white { background: #fff; border-color: rgba(255,255,255,.5); color: var(--text-strong); }
.pill-eyebrow--white svg { color: #3d5fe0; }

/* ================= integrations.html — stacked EMR cards ================= */
/* A tall wrapper (.emr-stack) supplies scroll runway; inside it, one sticky
   "stage" pins in the viewport and holds all 3 cards absolutely positioned
   on top of each other. JS (app.js, "EMR card stack" block) computes scroll
   progress through the wrapper and translates each card up into its
   resting, progressively-lower stacked position — Jane stays put, Juvonno
   slides up and settles a peek below it, OSCAR Pro slides up and settles a
   peek below that. Plain CSS position:sticky can't produce this: with
   independent per-card "slots" (the first attempt here), the math for when
   a card releases vs. when the next one reaches its own stick point always
   cancels out to a clean handoff, never a sustained overlap. Once scrolled
   past the wrapper, the whole stage releases and all 3 cards scroll away
   together, same as any other section. */
.emr-stack { position: relative; height: 260vh; }
.emr-stack__stage {
  /* Height is set by app.js to the tallest card's own natural height plus
     the last card's settled peek offset — this fallback only shows if JS is
     disabled. border-radius must match the cards' so the overflow:hidden
     clip mask doesn't flatten their corners. Keep top comfortably under
     .pageframe's z-index:60 so cards never render over nav. */
  position: sticky; top: 100px; height: 480px; overflow: hidden; border-radius: 20px;
}
.emr-stack__card {
  /* top/left/right only (no bottom/inset) — height comes from the card's
     own content via min-height below, NOT stretched to fill the stage.
     A stretched card whose box is forced to the stage's height would have
     its real bottom (and rounded corner) pushed past the stage's clip
     boundary the moment it's translated down to peek below another card. */
  position: absolute; top: 0; left: 0; right: 0; min-height: 420px;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 32px;
  padding: clamp(40px, 5vw, 64px);
  background: var(--card-bg, var(--grad-signal));
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  will-change: transform;
}
.emr-stack__card:nth-of-type(1) { z-index: 1; }
.emr-stack__card:nth-of-type(2) { z-index: 2; }
.emr-stack__card:nth-of-type(3) { z-index: 3; }
@media (max-width: 760px) {
  .emr-stack__card { grid-template-columns: 1fr; }
}
.emr-stack__text h3 { color: #fff; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.1rem); }
.emr-stack__text > p { margin-top: 18px; color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.65; max-width: 46ch; }
.emr-stack__text .emr-stack__cta { margin-top: 24px; }
.emr-stack__logo { display: flex; justify-content: center; }
.emr-stack__logo img { width: min(100%, 320px); border-radius: 14px; }
/* wordmark-style logos (Juvonno, OSCAR Pro) sit directly on the card, flattened
   to solid white, instead of the boxed/shadowed treatment Jane's squarish mark
   gets — matches the reference design, and avoids a drop-shadow hugging thin
   transparent letterforms. */
.emr-stack__logo img.emr-stack__logo--mark {
  width: min(100%, 380px); border-radius: 0; box-shadow: none;
  filter: brightness(0) invert(1); opacity: .96;
}
/* OSCAR Pro ships an already-white logo file — skip the flatten filter so its
   internal shield/circuit detail isn't lost to anti-aliasing at small sizes. */
.emr-stack__logo img.emr-stack__logo--pretinted { filter: none; opacity: 1; }

/* clinics mega-menu: compact multi-column list for a long set of clinic types */
.megamenu--clinics { width: 660px; max-width: min(660px, calc(100vw - 32px)); padding: 16px; }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; }
.mm-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--slate); font-weight: 500; font-size: .93rem; transition: background .14s, color .14s; }
.mm-link .mm-ico { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex: none; color: var(--muted); transition: color .14s, transform .14s; }
.mm-link .mm-ico svg { width: 17px; height: 17px; }
.mm-link:hover { background: var(--mist); color: var(--text-strong); }
.mm-link:hover .mm-ico { color: #00A57E; transform: scale(1.08); }
.mm-link:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
@media (max-width: 620px) { .mm-cols { grid-template-columns: 1fr 1fr; } }
.hero-b h1 {
  font-size: 4.5rem; /* 72px — fixed on desktop, scaled under 1024px (see media query) */
  line-height: 1.04; margin: 22px auto 0; max-width: min(1000px, 100%);
  /* whole heading rendered in the brand gradient (single source token) */
  background: var(--grad-signal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-b h1 .hl { background: none; -webkit-text-fill-color: transparent; color: transparent; } /* blends into the continuous heading gradient */
.hero-b h1 .italic-tail { font-style: italic; }
.hero-b__sub { max-width: 56ch; margin: 16px auto 0; font-size: 1.125rem; line-height: 1.5; color: var(--muted); } /* 18px */
/* Clinic-page hero subtext gets its own (narrower) width instead of the homepage's
   fixed 56ch, and is clamped to 2 lines — desktop only. On phones 75% of the viewport
   is too narrow for even short copy without cutting words off, so this is scoped to
   screens wider than the existing 600px phone breakpoint below. */
@media (min-width: 601px) {
  .hero-b--clinic .hero-b__sub {
    max-width: 75%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.hero-b__feats { display: flex; gap: 12px clamp(20px, 2.5vw, 34px); justify-content: center; flex-wrap: wrap; margin: 24px auto 0; }
.hero-b__feats li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text-strong); font-size: .92rem; }
.hero-b__feats .check-dot { width: 20px; height: 20px; }
.hero-b__feats .check-dot svg { width: 12px; }
.hero-b__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Headings stay a FIXED size across all desktop widths (identical in every browser);
   they only scale down on tablet/phone so nothing overflows. */
@media (max-width: 1024px) {
  .hero-b h1 { font-size: clamp(2.3rem, 6.1vw, 4.2rem); }
  h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
}
@media (max-width: 600px) {
  .hero-b h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-b__sub { font-size: 1.05rem; }
  .lead { font-size: 1.1rem; }
  /* let the hero video use the full screen width on phones so it isn't tiny
     (negative-gutter technique — no 100vw, so it never triggers horizontal scroll) */
  .anim-stage { margin-inline: calc(-1 * var(--gutter)); width: auto; border-radius: 0; }
}

/* ---- animation stage (hero video: channels → AI Inbox, white bg, blends seamlessly) ---- */
.anim-stage {
  position: relative; margin: clamp(28px, 3vw, 48px) auto 0;
  max-width: 1200px; width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
  display: grid; place-items: center; overflow: hidden;
}
.anim-stage > .anim-media, .anim-stage > video, .anim-stage > img, .anim-stage > canvas, .anim-stage > dotlottie-wc, .anim-stage > lottie-player {
  width: 100%; height: 100%; object-fit: contain; display: block; background: transparent;
}
.hero-b--clinic .anim-stage { margin-top: calc(clamp(28px, 3vw, 48px) - 30px); }

/* ---- dentistry hero: chat + call-demo CTAs ---- */
.hero-chat-cta { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; background: var(--grad-signal); color: #fff; border-radius: 999px; padding: 9px 26px 9px 9px; font-weight: 600; font-size: 1.05rem; box-shadow: 0 12px 26px -12px rgba(0,103,255,.5); transition: transform .18s var(--ease), box-shadow .2s var(--ease); }
.hero-chat-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(2,109,246,.58); }
/* modern-yet-simple: a light sheen sweeps across on hover, same technique as .btn--primary */
.hero-chat-cta::after { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none; z-index: -1; }
.hero-chat-cta:hover::after { left: 130%; }
.hero-chat-cta__icons { display: inline-flex; align-items: center; }
.hero-chat-cta__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; flex: none; color: #fff; }
.hero-chat-cta__ico + .hero-chat-cta__ico { margin-left: -14px; }
.hero-chat-cta__ico svg { width: 20px; height: 20px; }
.hero-chat-cta__ico--wa { background: #25D366; }
.hero-chat-cta__ico--fb { background: linear-gradient(135deg, #00c6ff, #7b2ff7); }
.hero-chat-cta__ico--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 40%, #8134af 70%, #515bd4); }

.hero-call-cta { display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1.5px solid #cdeee0; border-radius: 999px; padding: 7px 22px 7px 9px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.hero-call-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #a9e6d6; }
.hero-call-cta__icons { display: inline-flex; align-items: center; gap: 4px; }
.hero-call-cta__ico { width: 38px; height: 38px; border-radius: 50%; background: var(--captured); display: grid; place-items: center; flex: none; }
.hero-call-cta__ico svg { width: 17px; height: 17px; }
.hero-call-cta__txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.hero-call-cta__num { font-weight: 700; font-size: 1.02rem; color: var(--text-strong); }
.hero-call-cta__label { font-size: .82rem; font-weight: 600; color: var(--captured-ink); }

/* ---- dentistry: "never miss a new patient call" (section 2) ---- */
.dproof { position: relative; padding: clamp(56px, 6vw, 92px) 0; background: linear-gradient(165deg, #e9fbf3 0%, #eef8fb 55%, #f8fbff 100%); }
.dproof__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .dproof__grid { grid-template-columns: 1fr; } }
.dproof__img-ph { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; }
.dproof__img-ph img, .dproof__img-ph lottie-player { width: 92%; height: 92%; object-fit: contain; }
/* placeholder look, only shown pre-image (no img/lottie-player child) */
.dproof__img-ph:not(:has(img)):not(:has(lottie-player)) { background: var(--surface); border: 1.5px dashed #b9d9cf; border-radius: 20px; flex-direction: column; gap: 10px; color: var(--muted); box-shadow: var(--shadow-sm); }
.dproof__img-ph svg { width: 40px; opacity: .6; }
.dproof__img-ph span { font-size: .85rem; font-weight: 500; }
.dproof__content h2 { margin-top: 18px; font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 1.1; }
.dproof__content p { margin-top: 18px; color: var(--slate); font-size: 1.05rem; line-height: 1.65; max-width: 56ch; }
.dproof-feats { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.dproof-feat { display: flex; gap: 14px; align-items: flex-start; }
.dproof-feat__ck { width: 28px; height: 28px; border-radius: 50%; background: var(--captured); color: #fff; display: grid; place-items: center; flex: none; margin-top: 2px; }
.dproof-feat__ck svg { width: 14px; }
.dproof-feat b { display: block; font-size: 1.05rem; color: var(--text-strong); font-family: var(--font-body); font-weight: 600; }
.dproof-feat p { margin-top: 2px; color: var(--muted); font-size: .95rem; max-width: 52ch; }
.dproof-call { display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1.5px solid #a9e6d6; border-radius: 999px; padding: 8px 22px 8px 8px; box-shadow: var(--shadow-sm); margin-top: 32px; transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.dproof-call:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--captured); }
.dproof-call__avs { display: inline-flex; align-items: center; }
.dproof-call__av { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--captured); object-fit: cover; background: var(--mist-2); }
.dproof-call__av + .dproof-call__av { margin-left: -14px; }

/* ---- dentistry: practice growth automation (section 3) ---- */
.dgrowth { padding: clamp(56px, 6vw, 92px) 0; }
.dgrowth__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .dgrowth__grid { grid-template-columns: 1fr; } }
.dgrowth__content h2 { margin-top: 18px; font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); line-height: 1.15; }
.dgrowth__content p { margin-top: 20px; color: var(--slate); font-size: 1.05rem; line-height: 1.65; max-width: 50ch; }
.dgrowth-cta { margin-top: 32px; }

.dgrowth__visual { margin: 0 clamp(0px, 2vw, 20px); }
.dgrowth__photo { display: block; width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); }
/* orthodontics.html's photo has a solid white background baked in (unlike
   the shared section.avif) — the shadow made it read as a floating white
   card instead of blending into the page. Scoped to this page only. */
.dgrowth__photo--flush { box-shadow: none; }

/* ================= integrations.html — rebuilt hero ================= */
.hero-integ { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.hero-integ__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-integ__grid { grid-template-columns: 1fr; } }
.hero-integ__content h1 { margin-top: 18px; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); line-height: 1.1; }
.hero-integ__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* .hero-b has padding-bottom:0 and overflow:clip (fine for the flush hero
   video it normally holds) — this image's own box-shadow needs bottom
   room or it gets clipped flush with no gap before the next section. */
.hero-integ__visual { margin: clamp(28px, 3vw, 48px) auto 0; max-width: 1200px; padding-bottom: clamp(28px, 4vw, 56px); }
/* image has a white background baked in — a card shadow/radius on top of
   that reads as a mismatched floating box with white showing at the
   rounded corners, so it sits flush instead, like the clinic-page photos. */
.hero-integ__visual img { display: block; width: 100%; }


/* ---- watch explainer button + video lightbox ---- */
.hero-b__watch { margin: clamp(8px, 1.4vw, 16px) 0 clamp(28px, 4vw, 44px); display: flex; justify-content: center; }
@property --btn-trail-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --btn-trail-head { syntax: "<angle>"; inherits: false; initial-value: 70deg; }
.btn-watch { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; padding: 7px 22px 7px 7px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--text-strong); cursor: pointer; box-shadow: var(--shadow-sm); --btn-trail-head: 70deg; transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s, --btn-trail-head .45s var(--ease); }
/* orbiting brand-gradient border trail (blue → green comet). The trail always starts
   fading in from the exact same fixed point (6deg past the rotation reference, in both
   active and hover states) — only --btn-trail-head (how far it reaches before cutting
   back to transparent) grows on hover, so the start position never shifts, only the
   length does. The 1.2x hover speed-up is applied in app.js via Animation.playbackRate,
   not animation-duration — changing animation-duration on a running animation causes a
   real jump in its current value (the browser recalculates progress against the new
   duration), which is what made the hover-in/out feel jittery before. */
.btn-watch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--btn-trail-angle),
    transparent 0deg,
    transparent 6deg,
    #0067FF calc(var(--btn-trail-head) * .55),
    #00B894 var(--btn-trail-head),
    transparent calc(var(--btn-trail-head) + 6deg),
    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: btnTrail 5s linear infinite;
  pointer-events: none;
}
.btn-watch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #dbe7f7; --btn-trail-head: 250deg; }
@keyframes btnTrail { to { --btn-trail-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-watch::before { animation: none; background: none; } }
.btn-watch:focus-visible { outline: 3px solid var(--signal-blue); outline-offset: 3px; }
.btn-watch__play { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-signal); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 8px 18px -8px rgba(0,103,255,.6); transition: transform .25s var(--ease); }
.btn-watch:hover .btn-watch__play { transform: rotate(-25deg); }
.btn-watch__play svg { width: 15px; margin-left: 2px; }
.btn-watch__meta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); font-weight: 500; padding-left: 12px; border-left: 1px solid var(--line); }

.vmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px); }
.vmodal[hidden] { display: none; }
.vmodal__backdrop { position: absolute; inset: 0; background: rgba(10,19,48,.74); backdrop-filter: blur(5px); animation: vfade .2s var(--ease); }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
.vmodal__panel { position: relative; z-index: 1; width: min(980px, 100%); aspect-ratio: 16 / 9; background: #05070f; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); animation: vpop .24s var(--ease); }
@keyframes vpop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.vmodal__video { width: 100%; height: 100%; }
.vmodal__video video, .vmodal__video iframe { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.vmodal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,19,48,.55); border: 1px solid rgba(255,255,255,.28); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.vmodal__close:hover { background: rgba(10,19,48,.85); }
.vmodal__close svg { width: 18px; }

/* ---- key tools (scroll-synced tabs) ---- */
/* tabs + feature cards share ONE continuous gradient (see .band) */
.band { background: linear-gradient(165deg, #ffffff 0%, #edf4ff 22%, #e9f7f0 100%); }
#keytools { background: transparent; }
.kt { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.kt__left { position: sticky; top: 92px; align-self: start; }
.kt__left h2 { margin-top: 14px; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.14; }
.kt__lede { color: var(--muted); font-size: 1.02rem; margin-top: 14px; max-width: 34ch; }
.kt__tabs { position: relative; margin-top: 30px; display: flex; flex-direction: column; gap: 2px; padding-left: 18px; }
.kt__tabs::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.kt__indicator { position: absolute; left: -1px; width: 4px; height: 42px; border-radius: 4px; background: var(--grad-signal); transition: transform .32s var(--ease), height .32s var(--ease); }
.kt__tab { display: flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; color: var(--muted); padding: 11px 4px; text-align: left; transition: color .2s; }
.kt__tab svg { width: 21px; color: currentColor; opacity: .7; flex: none; }
.kt__tab:hover { color: var(--slate); }
.kt__tab.is-active { color: var(--text-strong); }
.kt__tab.is-active svg { stroke: url(#brandGrad); opacity: 1; }
.kt__tab:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 3px; border-radius: 6px; }

.kt__right { display: flex; flex-direction: column; gap: clamp(46px, 8vh, 88px); }
.kt__panel { scroll-margin-top: 110px; }
.kt__panel h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 1.95rem); background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kt__panel .pill-eyebrow + h3 { margin-top: 13px; }
.kt__panel > p { color: var(--muted); font-size: 1.05rem; margin-top: 12px; max-width: 52ch; }
.kt__feats { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
.kt__feats li { display: flex; gap: 13px; align-items: flex-start; }
.kt__ck { width: 24px; height: 24px; border-radius: 7px; flex: none; background: color-mix(in srgb, var(--captured) 15%, #fff); color: var(--captured-ink); display: grid; place-items: center; margin-top: 2px; }
.kt__ck svg { width: 13px; }
.kt__feats b { font-family: var(--font-body); color: var(--text-strong); font-weight: 600; display: block; }
.kt__feats span { color: var(--muted); font-size: .95rem; }
.kt__anim { position: relative; margin-top: 26px; border-radius: 20px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.kt__anim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kt__anim-tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px dashed #c3d0ea; border-radius: 999px; padding: 8px 16px; background: var(--surface); }

@media (max-width: 860px) {
  .kt { grid-template-columns: 1fr; gap: 6px; }
  .kt__left { position: static; }
  .kt__tabs { display: none; } /* panels stack with their own headings on mobile */
  .kt__right { gap: 44px; margin-top: 22px; }
}

/* ================= MAJOR FEATURES (3 cards) ================= */
.feat3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feat3 { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 0; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .25s var(--ease); overflow: hidden; }
.feat3:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feat3__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #e9f1ff, #e4f6ef); border: 1px solid #d5e6ff; box-shadow: 0 1px 2px rgba(10,19,48,.05); color: #0b2f6b; font-weight: 600; font-size: .82rem; letter-spacing: .01em; padding: 7px 16px 7px 13px; border-radius: 999px; }
.feat3__pill svg { width: 19px; height: 19px; stroke-width: 2; color: #00A57E; }
.feat3 h3 { font-size: 1.3rem; line-height: 1.22; margin: 18px 0 10px; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.feat3 > p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; }
.feat3__more { display: inline-flex; align-items: center; gap: 8px; color: var(--signal-blue); font-weight: 600; font-size: .92rem; margin-bottom: 24px; }
.feat3__more svg { width: 18px; transition: transform .2s var(--ease); }
/* on hover, the link turns brand-gradient (text + arrow) to signal it's clickable */
.feat3__more span { transition: color .2s var(--ease); }
.feat3__more:hover span, .feat3:hover .feat3__more span { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.feat3__more:hover svg, .feat3:hover .feat3__more svg { stroke: url(#brandGrad); transform: translateX(5px); }
.feat3__mock { margin: auto -26px 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fbfdff, var(--mist)); padding: 16px; min-height: 176px; position: relative; overflow: hidden; }
/* image placeholder inside each feature card (drop a screenshot here) */
.feat3__img { position: relative; margin: auto -26px 0; border-top: 1px solid var(--line); aspect-ratio: 16 / 10; background: linear-gradient(180deg, #fbfdff, var(--mist)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.feat3__img svg { width: 32px; color: #a9b6d4; }
.feat3__img span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ================= integrations.html — per-EMR cards ================= */
.emr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 900px) { .emr-grid { grid-template-columns: 1fr; } }
.emr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.emr-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.emr-card__logo { height: 34px; width: auto; max-width: 120px; object-fit: contain; object-position: left; margin-bottom: 16px; }
.emr-card__top h3 { font-size: 1.4rem; margin: 0; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.emr-card__cat { display: block; margin-top: 4px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.emr-card > p { color: var(--muted); font-size: .93rem; line-height: 1.55; margin: 16px 0 0; flex: 1; }
.emr-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.emr-card__tags span { font-size: .74rem; font-weight: 600; color: #0b2f6b; background: linear-gradient(90deg, #e9f1ff, #e4f6ef); border: 1px solid #d5e6ff; border-radius: 999px; padding: 5px 12px; }
.emr-card__cta { margin-top: 20px; align-self: flex-start; }

/* ================= integrations.html — "everything else" icon grid ================= */
.io-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 860px) { .io-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .io-grid { grid-template-columns: 1fr; } }
.io-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.io-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.io-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #e9f1ff, #e4f6ef); color: var(--signal-blue); }
.io-card__ico svg { width: 22px; height: 22px; }
.io-card h3 { font-size: 1.08rem; margin: 16px 0 6px; color: var(--text-strong); }
.io-card p { color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* ================= integrations.html — trust strip ================= */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { display: flex; gap: 14px; align-items: flex-start; }

.integrations-cta__actions { display: flex; justify-content: center; margin-top: 32px; }
.feat3__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* merge visually with the tabs section above — same tint, continuous (no white gap) */
#keytools { padding-bottom: clamp(30px, 3vw, 52px); }
.features3 { background: transparent; padding-top: clamp(30px, 3vw, 52px); padding-bottom: clamp(30px, 3vw, 52px); }

/* --- mini mockups --- */
.mk-ihead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mk-ihead b { font-family: var(--font-display); font-size: 13px; color: var(--text-strong); font-weight: 700; }
.mk-ihead i { width: 62px; height: 14px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); display: block; }
/* inbox */
.mk-inbox { display: flex; flex-direction: column; gap: 8px; }
.mk-conv { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.mk-conv.on { border-color: #bcd3ff; box-shadow: 0 6px 14px -8px rgba(0,103,255,.35); }
.mk-ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 9.5px; flex: none; }
.mk-conv .mk-t { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mk-conv .b1 { height: 6px; width: 58%; border-radius: 4px; background: #c4d0ea; }
.mk-conv .b2 { height: 5px; width: 82%; border-radius: 4px; background: #e2e8f5; }
.mk-chan { width: 18px; height: 18px; border-radius: 6px; flex: none; display: grid; place-items: center; color: #fff; }
.mk-chan svg { width: 11px; }
.mk-wa { background: #25d366; }
.mk-ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.mk-ph { background: #e7f0ff; color: #0067ff; }
/* calendar */
.mk-caldays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.mk-caldays span { text-align: center; font-family: var(--font-mono); font-size: 8px; color: var(--muted); }
.mk-calgrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 22px; gap: 6px; }
.mk-calgrid span { border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.mk-calgrid .d { display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--text-strong); }
.mk-calgrid .ev { border: 0; }
.ev-b { background: #0067ff; opacity: .9; } .ev-b2 { background: #4d8bff; }
.ev-g { background: #00b894; opacity: .9; } .ev-g2 { background: #2fceb0; }
.ev-a { background: #f5a623; opacity: .9; }
/* pipeline */
.mk-pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-col { display: flex; flex-direction: column; gap: 7px; }
.mk-coltop { display: flex; align-items: center; justify-content: space-between; }
.mk-coltop em { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mk-coltop b { font-size: 10px; color: var(--text-strong); }
.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.mk-card i { height: 6px; width: 70%; border-radius: 4px; background: #c4d0ea; display: block; }
.mk-card u { height: 5px; width: 90%; border-radius: 4px; background: #e2e8f5; display: block; }
.mk-card--b { border-color: #bcd3ff; } .mk-card--g { border-color: #a9e6d6; }
@media (max-width: 900px) { .feat3-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---- pricing page: hero + plan card (section 1) ---- */
.pricing-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(60px, 6vw, 88px); text-align: center; }
.pricing-hero .pill-eyebrow { margin-inline: auto; }
.pricing-hero h1 { max-width: min(1000px, 100%); margin: 22px auto 0; font-size: 4.5rem; line-height: 1.04; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pricing-hero h1 em { font-style: italic; }
@media (max-width: 1024px) { .pricing-hero h1 { font-size: clamp(2.3rem, 6.1vw, 4.2rem); } }
@media (max-width: 600px) { .pricing-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); } }

/* ===== shared toggle (billing period + currency) — two separate glass boxes ===== */
.pricing-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 clamp(24px, 3vw, 32px); align-self: flex-start; }
.price-toggle { display: inline-flex; gap: 2px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px; }
.price-toggle button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: rgba(255,255,255,.78); font: inherit; font-weight: 600; font-size: .82rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.price-toggle button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.price-toggle button.is-active { background: rgba(255,255,255,.22); color: #fff; }
.price-toggle--currency .flag { display: inline-block; width: 16px; height: 12px; border-radius: 2px; overflow: hidden; flex: none; }
.price-toggle--currency .flag svg { width: 100%; height: 100%; display: block; }
.price-toggle__save { font-size: .62rem; font-weight: 700; letter-spacing: .01em; padding: 3px 8px; border-radius: 999px; background: var(--captured); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }

/* ===== pricing: subscription + onboarding, two columns ===== */
.price-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 4vw, 40px); align-items: stretch; }
@media (max-width: 900px) { .price-cols { grid-template-columns: 1fr; } }

.price-sub { display: flex; flex-direction: column; background: var(--grad-signal); border-radius: 10px; padding: clamp(28px, 3.5vw, 40px); color: #fff; box-shadow: var(--shadow-lg); text-align: left; }
.price-sub__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.price-sub__head { flex: 1 1 200px; min-width: 0; }
.price-sub__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; max-width: 20ch; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.price-sub__sub { font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.8); margin-top: 8px; max-width: 32ch; }
.price-sub__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.price-sub__amt { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2.3rem + 3vw, 4.4rem); line-height: 1; }
.price-sub__amt [data-price-amt] { display: inline-block; }
.price-sub__amt [data-price-amt]::first-letter { font-size: .4em; font-weight: 600; vertical-align: .55em; }
.price-sub__unit { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.78); margin-top: 4px; }
.price-sub__cta { display: block; width: 100%; text-align: center; margin-top: clamp(24px, 3.2vw, 32px); }

.price-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: clamp(26px, 3.4vw, 34px); }
@media (max-width: 560px) { .price-feats { grid-template-columns: 1fr; } }
.price-feat { display: flex; gap: 12px; align-items: flex-start; }
.price-feat__ico { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; margin-top: 2px; }
.price-feat__ico svg { width: 12px; color: #fff; }
.price-feat b { display: block; font-size: .95rem; }
.price-feat p { color: rgba(255,255,255,.78); font-size: .84rem; margin-top: 2px; }

.price-onboard-card { display: flex; flex-direction: column; background: linear-gradient(135deg, #e9f1ff, #e4f6ef); border-radius: 10px; padding: clamp(24px, 3vw, 34px); text-align: left; }
.price-onboard-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.price-onboard-card__desc { font-size: .92rem; color: var(--slate); line-height: 1.5; margin-top: 8px; max-width: 32ch; }
.price-onboard-card__price { display: flex; flex-direction: column; margin-top: clamp(20px, 2.6vw, 28px); }
.price-onboard-card__amt { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2.3rem + 3vw, 4.4rem); line-height: 1; }
.price-onboard-card__amt [data-price-amt] { display: inline-block; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.price-onboard-card__amt [data-price-amt]::first-letter { font-size: .4em; font-weight: 600; vertical-align: .55em; }
.price-onboard-card__unit { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); margin-top: 4px; }

.price-onboard__list { display: grid; gap: 18px; margin-top: clamp(26px, 3.4vw, 34px); list-style: none; }
.price-onboard__list li { display: flex; gap: 12px; align-items: flex-start; }
.price-onboard__list .price-feat__ico { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 3px rgba(10,19,48,.08); }
.price-onboard__list .price-feat__ico svg { color: var(--signal-blue); }
.price-onboard__list b { display: block; font-size: .95rem; color: var(--text-strong); }
.price-onboard-card__cta { display: block; width: 100%; text-align: center; margin-top: clamp(24px, 3.2vw, 32px); }
.price-onboard__list p { color: var(--slate); font-size: .84rem; margin-top: 2px; }

/* ---- pricing page: clinic stories (section 2) ---- */
.stories-panel { position: relative; overflow: hidden; border-radius: 10px; padding: clamp(36px, 4.6vw, 64px) clamp(20px, 3vw, 54px); background: linear-gradient(100deg in oklab, rgba(0,103,255,.1) 0%, rgba(0,184,148,.1) 100%), var(--white); box-shadow: var(--shadow-md); }
/* pricing.html-only: full-bleed version of the homepage's .band wash behind the Clinic
   Stories section, edge to edge like on the homepage, instead of contained in the
   rounded/padded card the other 15 clinic pages still use above. */
#stories.stories-band { background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%); }
#stories.stories-band .stories-panel { background: none; box-shadow: none; border-radius: 0; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 24px); margin-top: 48px; }
.story-card--lg { grid-column: span 2; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } .story-card--lg, .stat-card { grid-column: span 1; } }

.story-card { background: var(--surface); border-radius: 10px; padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.story-card__quote { font-family: var(--font-display); font-size: 2.6rem; color: #d7deff; line-height: .6; display: block; margin-bottom: 10px; }
.story-card blockquote { margin: 0; color: var(--slate); font-size: 1rem; line-height: 1.6; }
.story-card--lg blockquote { font-size: 1.15rem; }
.story-card figcaption { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.story-card--lg figcaption { padding-top: 32px; }

.tmn-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: .82rem; flex: none; }
.tmn-who { display: flex; flex-direction: column; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.tmn-who b { color: var(--text-strong); font-size: .95rem; font-weight: 600; font-family: var(--font-body); }
.tmn-rating { margin-left: auto; text-align: right; font-size: .8rem; color: var(--muted); }
.tmn-stars { display: block; color: #f5b400; font-size: 1.05rem; letter-spacing: 2px; }

.stat-card { background: var(--captured); color: #fff; border-radius: 10px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; }
.stat-card__ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; margin-bottom: 22px; }
.stat-card__ico svg { width: 22px; }
.stat-card__num { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 700; }
.stat-card p { margin-top: 10px; color: rgba(255,255,255,.85); font-size: .92rem; }

/* ---- pricing page: footer ---- */
.gfooter { max-width: 1120px; margin: clamp(48px, 6vw, 80px) auto 0; background: var(--grad-signal); color: #fff; border-radius: 10px; padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.gfooter__divider { height: 1px; background: rgba(255,255,255,.25); margin: clamp(28px, 3.5vw, 40px) 0; }
.gfooter__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(48px, 7vw, 96px); margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 800px) { .gfooter__grid { grid-template-columns: 1fr; } }
.gfooter__logo { height: 26px; filter: brightness(0) invert(1); }
.gfooter__col p { margin-top: 16px; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.6; }
.gfooter__col h4 { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.gfooter__col a { display: block; color: #fff; font-size: .95rem; margin-top: 10px; opacity: .92; transition: opacity .2s var(--ease); }
.gfooter__col a:hover { opacity: 1; text-decoration: underline; }
.gfooter__linklist { margin-top: 4px; }
.gfooter__more { display: none; }
.gfooter__more.is-open { display: block; }
.gfooter__more-btn { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; background: none; border: none; font: inherit; font-size: .95rem; color: #fff; opacity: .92; cursor: pointer; transition: opacity .2s var(--ease); }
.gfooter__more-btn:hover { opacity: 1; text-decoration: underline; }
.gfooter__more-btn svg { width: 14px; height: 14px; flex: none; transition: transform .2s var(--ease); }
.gfooter__more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gfooter__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 3.5vw, 40px); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 18px clamp(20px, 3vw, 32px); font-size: .88rem; color: rgba(255,255,255,.85); }
.gfooter__social { display: inline-flex; align-items: center; gap: 14px; }
.gfooter__social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; color: #fff; }
.gfooter__social a svg { width: 15px; }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---- misc ---- */
.section[id], #switchboard, #hear { scroll-margin-top: 96px; }
.center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text-strong); padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- blog post detail ---- */
.post-hero { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 40px); }
.post-hero h1 { max-width: 80%; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.2; background: none; -webkit-text-fill-color: var(--text-strong); color: var(--text-strong); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.post-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--mist-2); border-radius: 999px; padding: 7px 16px; font-size: .86rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.post-pill--author { padding: 5px 16px 5px 5px; }
.post-pill__av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; background: var(--mist); }
.post-pill svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.post-feature { padding: 0 0 clamp(24px, 3vw, 40px); }
.post-feature__img { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, #fbfdff, var(--mist)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #a9b6d4; }
.post-feature__img svg { width: 44px; }
.post-feature__img span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post-feature__img img { width: 100%; height: 100%; object-fit: cover; }
/* Reusable long-form body template: boxed question/heading (light tint) + plain-text
   answer below it, repeated as many times as a post needs. One <section> holds the
   whole article body — never split into a section per heading. */
.post-body { padding-bottom: clamp(40px, 5vw, 64px); }
.post-content { max-width: 720px; margin-inline: auto; color: var(--slate); line-height: 1.7; }
.post-content p, .post-content ul { margin-top: 20px; }
.post-content > p:first-child, .post-content > ul:first-child { margin-top: 0; }
.post-content ul { list-style: disc; padding-left: 1.3em; }
.post-content ol { padding-left: 1.3em; }
.post-content li::marker { color: var(--signal-blue); font-weight: 600; }
.post-content li + li { margin-top: 8px; }
.post-content li b, .post-content li strong { color: var(--text-strong); }
.post-content a { color: var(--signal-blue); font-weight: 600; text-decoration: none; }
.post-content a:hover { text-decoration: underline; }
.post-content__kw { font-style: italic; font-weight: 700; color: var(--signal-blue); }
.post-content__note { font-style: italic; color: var(--muted); font-size: .92rem; }
.post-content__h2 { background: var(--mist-2); -webkit-text-fill-color: var(--text-strong); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); margin-top: 40px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.28; color: var(--text-strong); }
.post-content__figure { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; margin-top: 40px; background: linear-gradient(180deg, #fbfdff, var(--mist)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #a9b6d4; }
.post-content__figure svg { width: 40px; }
.post-content__figure span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post-content__figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---- blog listing ---- */
.blog-hero { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); text-align: center; }
.blog-hero .pill-eyebrow { margin-inline: auto; }
.blog-hero h1 { margin: 20px auto 0; max-width: 20ch; font-size: clamp(2.3rem, 1.6rem + 2.5vw, 3.4rem); line-height: 1.22; padding-bottom: .1em; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.blog-hero .lead { margin: 16px auto 0; max-width: 56ch; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 28px); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,103,255,.35); }
.blog-card__img { aspect-ratio: 16 / 10; background: linear-gradient(180deg, #fbfdff, var(--mist)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #a9b6d4; overflow: hidden; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__img svg { width: 32px; }
.blog-card__img span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.blog-card__body { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.blog-card__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--text-strong); }
.blog-card__tag-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--captured); transition: background-color .2s var(--ease); }
.blog-card:hover .blog-card__tag-dot { background: var(--signal-blue); }
.blog-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.32; color: var(--text-strong); margin-top: 14px; }
.blog-card__meta { margin-top: auto; padding-top: 16px; font-size: .8rem; color: var(--muted); display: flex; gap: 10px; }
.blog-loadmore { margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.blog-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---- book-a-demo.html: demo-call/calendar grid, founders-grid, Power Pack fit images ---- */
.demo-cal__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .demo-cal__grid { grid-template-columns: 1fr; } }
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 28px); max-width: 900px; margin-inline: auto; }
@media (max-width: 700px) { .founders-grid { grid-template-columns: 1fr; max-width: 460px; } }
/* the Power Pack screenshots are closer to square than the feat3 card's default 16:10 crop box, so object-fit:cover was clipping them — show them at their own aspect ratio instead */
.feat3__img--fit { aspect-ratio: auto; }
.feat3__img--fit img { position: static; width: 100%; height: auto; object-fit: contain; }
/* Power Pack (9 cards) gets its own 3/2/1 responsive steps instead of the 3-card sections' direct 3-to-1 collapse */
@media (max-width: 980px) { .pp-grid { grid-template-columns: 1fr 1fr; max-width: none; margin-inline: 0; } }
@media (max-width: 620px) { .pp-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }