/* =========================================================================
   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: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", 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;
  overflow-x: clip; /* lets full-bleed elements (e.g. .integ-card .marquee) use 100vw without causing horizontal scroll */
}
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.3rem; 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); }
/* solid-gradient variant: for the one "book a demo" CTA per page that
   actually navigates somewhere (vs. the lighter default, used for CTAs
   that just scroll to a section), so it visually reads as the real action. */
.btn--demo--claim { background: var(--grad-signal); border-color: rgba(255,255,255,.3); box-shadow: 0 14px 30px -14px rgba(0,103,255,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--demo--claim:hover { background: var(--grad-signal); border-color: rgba(255,255,255,.4); box-shadow: 0 18px 36px -14px rgba(0,103,255,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--demo--claim .btn--demo__t { color: #fff; }
.btn--demo--claim .btn--demo__s { color: rgba(255,255,255,.85); }
.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%); height: auto; 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); }

/* ===== fs2 light variant — same founders layout, no gradient background ===== */
.founders--light { padding-top: 60px; padding-bottom: 0; background: linear-gradient(to bottom, #fff 0%, var(--mist) 100%); }
.fs2--light { color: var(--text-strong); background: none; box-shadow: none; border: none; border-radius: 0; overflow: visible; }
.fs2--light .fs2__title { color: var(--text-strong) !important; -webkit-text-fill-color: var(--text-strong); }
.fs2--light .fs2__title em { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.fs2--light .fs2__role { color: var(--muted); }
.fs2--light .fs2__blurb { color: var(--slate); }
.fs2--light .fs2__arrow path { stroke: var(--muted); }
.fs2--light .fs2__people { width: min(480px, 62%); }

/* ===== Founder story — narrative letter card ===== */
.founder-story__card { background: linear-gradient(135deg, #eaf3ff 0%, #e9fbf3 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 64px); text-align: center; }
.founder-story__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem); line-height: 1.22; background: none; -webkit-text-fill-color: var(--text-strong); color: var(--text-strong); margin: 0; }
.founder-story__title em { display: block; margin-top: 8px; font-style: italic; background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.founder-story__body { max-width: 660px; margin: 28px auto 0; color: var(--text-strong); opacity: .82; font-size: 1.02rem; line-height: 1.75; }
.founder-story__body p { margin: 0 0 20px; }
.founder-story__body p:last-child { margin-bottom: 0; }
.founder-story__hl { font-weight: 700; opacity: 1; }
.founder-story__hl--blue { color: var(--signal-blue); }
.founder-story__hl--green { color: var(--captured); }
.founder-story__pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.2rem); line-height: 1.3; color: var(--text-strong); max-width: 800px; margin: 44px auto; }

/* ===== Integrations — text sits on the band's gradient; only the logo
   marquee keeps a white background, full-bleed edge-to-edge of the
   viewport (not just the card) ===== */
.integ { padding: clamp(30px, 3vw, 52px) 0 clamp(36px, 5vw, 66px); }
.integ-card { text-align: center; }
.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; }
/* full-bleed breakout: 100vw centered on the viewport regardless of where
   .integ-card sits inside .wrap's max-width. body has overflow-x:clip
   (see reset) so this never introduces horizontal scroll. */
.integ-card .marquee { margin-top: clamp(24px, 3.4vw, 40px); background: var(--surface); width: 100vw; position: relative; left: 50%; transform: translateX(-50%); padding: clamp(20px, 3vw, 32px) 0; }
.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; 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; align-items: stretch; border-radius: var(--radius-lg); padding: 6px; gap: 6px; }
  .footer-news__row input { padding: .7em .9em; }
  .footer-news__row .btn { border-radius: calc(var(--radius-lg) - 6px); padding-block: .8em; }
}
.footer-news__embed { max-width: 380px; width: 100%; border-radius: 0; overflow: hidden; background: none; border: none; }
.footer-news__embed iframe { display: block; width: 100%; }
@media (max-width: 620px) {
  .footer-news__embed { max-width: none; }
}

/* ================= 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: 15px; 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); }

/* ---- distraction-free landing-page header/footer (webinar, demo) ----
   Logo + single CTA only, no site nav — every internal link that reaches
   these pages opens in a new tab, so this is deliberately a dead end other
   than the one action the page exists for. Same rounded gradient-strip
   framing as the real sitewide header (.pageframe/.gradhead), just with
   simplified contents. */
.lp-header { max-width: var(--maxw); margin-inline: auto; padding: 8px var(--gutter) 0; position: sticky; top: 0; z-index: 60; }
.lp-header__bar {
  background: var(--grad-signal); border-radius: 13px;
  box-shadow: 0 6px 16px -8px rgba(10,19,48,.16);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 12px 12px 18px;
}
.lp-header__logo { display: inline-flex; }
.lp-header__logo img { height: 30px; width: auto; display: block; }
/* reuses the site's existing .btn--demo avatar pill as-is, just compacted
   to fit a slim header bar — same compact treatment as .gradhead__cta */
.lp-header__bar .btn--demo { padding: 3px 15px 3px 4px; gap: 9px; box-shadow: var(--shadow-sm); }
.lp-header__bar .btn--demo .av { width: 29px; height: 29px; border-width: 2px; }
.lp-header__bar .btn--demo .avstack .av + .av { margin-left: -6px; }
.lp-header__bar .btn--demo .btn--demo__t { font-size: .82rem; }
.lp-header__bar .btn--demo .btn--demo__s { font-size: .66rem; gap: 5px; }
.lp-header__bar .btn--demo .live-dot { width: 7px; height: 7px; }

.lp-footer { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) 28px; }
.lp-footer__bar {
  background: var(--grad-signal); border-radius: 13px;
  box-shadow: 0 6px 16px -8px rgba(10,19,48,.16); margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px;
  padding: 18px 20px; text-align: center; font-size: .8rem; color: rgba(255,255,255,.85);
}
.lp-footer__bar a { color: #fff; text-decoration: none; }
.lp-footer__bar a:hover { text-decoration: underline; }

@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-body); font-weight: 600; font-size: .58rem; letter-spacing: .04em; color: #0b2f6b; background: linear-gradient(90deg, #e9f1ff, #e4f6ef); padding: 2px 7px; 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%);
  /* Fraunces italic has deeper descenders than the line-height leaves room
     for -- against .hero-b's overflow:clip, a "p"/"y"/"g" in the italic tail
     would get clipped without this. */
  padding-bottom: 0.15em;
  /* 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; }
.hero-b__guarantee {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px auto 0;
  font-size: .82rem; font-weight: 500; color: var(--muted);
  white-space: nowrap; /* one line on desktop; released back to wrap under 600px below */
}
.hero-b__guarantee svg { width: 15px; height: 15px; flex: none; color: #00A57E; }
/* on-light: for use on a dark/gradient card (e.g. the pricing page's CTA
   card) instead of the plain white section background above — falls back
   to wrapping since those cards run narrower than the homepage hero. */
.hero-b__guarantee--onlight { color: rgba(255,255,255,.85); white-space: normal; }
.hero-b__guarantee--onlight svg { color: #fff; }

/* 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; }
  .hero-b__guarantee { white-space: normal; text-align: center; }
  /* 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;
}
/* was "calc(clamp(28px, 3vw, 48px) - 30px)" -- that negative offset pulled
   the video up far enough to overlap the CTA row above it by a couple px,
   clipping the chat button's hover shadow against .hero-b's overflow:clip.
   Dropping the -30px gives the CTA's shadow real clearance. */
.hero-b--clinic .anim-stage { margin-top: clamp(28px, 3vw, 48px); }

/* ---- 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; }
.dproof__img-ph--photo { aspect-ratio: 1200 / 1169; }
.dproof__img-ph--photo img { width: 100%; height: 100%; 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); }
.price-onboard-card__unit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.price-onboard-card__optional {
  font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(10,19,48,.08); color: var(--slate);
}

.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; }

/* ---- startfreetrial: struck-through prices — both plan and onboarding cost are waived for the 7-day trial ---- */
.price-sub__free-badge { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
/* text-decoration:line-through bleeds onto the shrunk/raised ::first-letter ($) as a
   stray disconnected segment in some browsers even with text-decoration:none set
   directly on ::first-letter, since the line is painted by the ancestor's decorating
   box rather than per-fragment — so the strike is drawn as a plain positioned bar
   instead, which only crosses the digits' box and ignores the $ glyph entirely. */
.price-sub__amt--strike { position: relative; display: inline-block; opacity: .65; }
.price-sub__amt--strike::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 3px; background: rgba(255,255,255,.8); }
.price-onboard-card__free-badge { display: inline-block; align-self: flex-start; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--captured-ink); background: color-mix(in srgb, var(--captured) 15%, #fff); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
.price-onboard-card__amt--strike { position: relative; display: inline-block; align-self: flex-start; opacity: .55; }
.price-onboard-card__amt--strike::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 3px; background: var(--captured-ink); }
.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 ---- */
/* width matches .pageframe's own math (100% minus the sitewide gutter,
   capped at 1120px) so the footer card's outer edges line up with the
   header bar's at every viewport width, not just desktop. */
.gfooter { width: min(1120px, calc(100% - 2 * var(--gutter))); 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: 1.8fr 1fr 1fr; gap: clamp(56px, 8vw, 96px); margin-top: clamp(32px, 4vw, 48px); }
.gfooter__col.gfooter__col--brand { min-width: 280px; }
@media (max-width: 800px) { .gfooter__grid { grid-template-columns: 1fr; } }
.gfooter__logo { height: 26px; width: auto; 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: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.gfooter__col a { display: block; color: #fff; font-size: .9rem; margin-top: 10px; opacity: .92; transition: opacity .2s var(--ease); }
.gfooter__col a:hover { opacity: 1; text-decoration: underline; }
/* "Book a Call" reads as a CTA button, not another link in the list --
   undo the plain-link block/opacity/underline treatment above so .btn's
   own pill styling shows through untouched. */
.gfooter__col a.gfooter__cta { display: inline-flex; margin-top: 18px; opacity: 1; color: var(--text-strong); }
.gfooter__col a.gfooter__cta:hover { text-decoration: none; }
.gfooter__cta .avstack { flex-shrink: 0; }
/* Exact copy of the header's compact .gradhead__cta .btn--demo treatment
   (see above) -- same button, same size, everywhere it appears. */
.gfooter__cta { padding: 3px 15px 3px 4px; gap: 9px; box-shadow: var(--shadow-sm); }
.gfooter__cta .av { width: 29px; height: 29px; border-width: 2px; }
.gfooter__cta .avstack .av + .av { margin-left: -6px; }
.gfooter__cta .btn--demo__t { font-size: .82rem; }
.gfooter__cta .btn--demo__s { font-size: .66rem; gap: 5px; }
.gfooter__cta .live-dot { width: 7px; height: 7px; }
.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__legal { display: inline-flex; align-items: center; gap: 18px; }
.gfooter__legal a { color: rgba(255,255,255,.85); }
.gfooter__legal a:hover { color: #fff; text-decoration: underline; }
.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-hero--center { text-align: center; }
.post-hero--center h1 { max-width: 100%; margin-inline: auto; }
.post-hero--center .post-meta { justify-content: center; }
.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; }

/* ---- demo/index.html: full-width demo video + calendar section ---- */
.vsl { position: relative; border-radius: 16px; overflow: hidden; background: #0A1330; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 10; }
.vsl--full { aspect-ratio: 16 / 9; max-width: 760px; margin-inline: auto; }
.vsl__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsl__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.94); border: 0; display: grid; place-items: center; color: var(--signal-blue); cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.vsl__play svg { width: 26px; margin-left: 2px; }
.vsl__play:hover { transform: scale(1.06); background: #fff; }
.vsl.is-playing .vsl__play { display: none; }

.calendar-box { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(30px, 4vw, 56px); 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); }
.calendar-box .pill-eyebrow { margin-inline: auto; }
.calendar-box__title { margin-top: 16px; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.calendar-box__title em { font-style: italic; color: #d6ffe9; }
.calendar-box .lead { color: #c6d0ec; } /* same light lead color as .page-hero .lead: var(--muted) is unreadable on this gradient panel */
.calendar-box #calendar { margin-top: clamp(28px, 3.4vw, 40px); text-align: left; box-shadow: var(--shadow-lg); }

.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; } }

/* ---- webinarlp: small bottom padding so the CTA's shadow (bled below the
   button's border box) isn't cut off by the hero's overflow:clip ---- */
.hero-b--webinarlp { padding-bottom: 20px; }
.hero-b--webinarlp h1 { max-width: min(1200px, 100%); }

/* founders section sits directly under the compact webinar hero now (not the
   full video hero it was designed for elsewhere) — cut its own top padding
   plus the .fs2 card's inner top padding, scoped to this adjacency only so
   .founders--light / .fs2 stay unchanged on about.html and other pages. */
.hero-b--webinarlp + #founders { padding-top: 20px; }
.hero-b--webinarlp + #founders .fs2 { padding-top: 20px; }
.hero-b--webinarlp + #founders .fs2__scene { margin-top: 0; }

/* CTA dropped into the gap between the two founders in the photo, centered.
   .fs2__photo-wrap (wraps the img + this button) is position:static by
   default, so on desktop the absolute box below still resolves against
   .fs2__scene as intended. */
.fs2__cta { position: absolute; bottom: clamp(20px, 9%, 66px); left: 50%; transform: translateX(-50%); z-index: 4; }

/* /demo only: several other pages share id="founder" but don't use the
   photo-wrap + overlay-CTA layout, so :has() scopes this to the one that
   does rather than affecting every #founder .fs2 panel on the site. */
@media (min-width: 861px) {
  /* Desktop: button sits below the photo in normal flow, not overlaid
     on top of it (that read as the men's legs "coming out of" the
     button, since the photo isn't tall enough to fully disappear
     behind it). Sized a touch wider than the image, small gap above
     and a small gap to the panel's bottom edge below. */
  #founder .fs2__photo-wrap .fs2__cta { position: static; transform: none; display: flex; justify-content: center; width: min(620px, 92%); margin: 0 auto; }
  #founder .fs2__photo-wrap .btn--demo { width: 100%; justify-content: center; }
  #founder .fs2:has(.fs2__photo-wrap) { padding-bottom: clamp(20px, 3vw, 32px); }
}
@media (max-width: 860px) {
  /* Mobile: the generic .fs2__people mobile rule below (order: 3, flush
     at the bottom) only reaches the <img> now that it's nested inside
     .fs2__photo-wrap, a flex order only works on the direct flex item,
     so the wrapper needs its own copy of that same order/width/margin,
     and the CTA drops out of its absolute overlay to sit in normal flow
     right under the photo instead of overlapping the stacked bios below it. */
  #founder .fs2__photo-wrap { order: 3; width: min(480px, 96%); margin: 12px auto 0; }
  #founder .fs2__photo-wrap .fs2__people { width: 100%; margin: 0; }
  #founder .fs2__photo-wrap .fs2__cta { position: static; transform: none; display: flex; justify-content: center; width: 100%; margin: 14px auto 0; }
}

@media (max-width: 860px) {
  /* mobile + tablet (webinar page only): photo comes first (enlarged to
     close up the side whitespace), the CTA sits right below it (not
     overlapping), then the two name/bio blocks follow. .fs2--light
     .fs2__people (62%) otherwise beats the general mobile rule on
     specificity — the #founders id here bumps it back up. */
  .hero-b--webinarlp + #founders .fs2__photo-wrap { position: static; order: 1; width: min(680px, 99%); margin: 0 auto; }
  .hero-b--webinarlp + #founders .fs2__people { width: 100%; margin: 0; display: block; }
  .hero-b--webinarlp + #founders .fs2__cta { position: static; transform: none; display: flex; justify-content: center; margin: 0 auto; }
  .hero-b--webinarlp + #founders .fs2__name--l { order: 2; margin-top: 36px; }
  .hero-b--webinarlp + #founders .fs2__name--r { order: 3; }
  .hero-b--webinarlp + #founders .fs2 { padding-bottom: 36px; }
}

/* ---- webinarlp: this section is tall (long-form registration card), so the
   shared sitewide .band's diagonal wash barely clears white/blue before the
   card panel takes over — a steeper vertical white→blue→green ramp keeps all
   three tones visible within the section's own (unscrolled) viewport ---- */
.wlp-band { background: linear-gradient(180deg, #ffffff 0%, #eaf2ff 35%, #e6f7ee 100%); }

/* ---- webinarlp: unified info card (date/time + countdown/bonus text footer, one box) ---- */
.wlp-info-card {
  width: fit-content; max-width: 100%; margin: 20px auto 0;
  background: linear-gradient(135deg, #e9f1ff, #e4f6ef); border: 1px solid #d5e6ff;
  box-shadow: 0 1px 2px rgba(10,19,48,.05); border-radius: 20px; padding: 14px clamp(16px, 3vw, 26px);
}

.wlp-info-card__divider { height: 1px; background: #d5e6ff; margin: 12px 0; }
.wlp-info-card__divider--dashed { background: none; border-top: 1px dashed #c7d9f5; }

.wlp-info-card__row { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.wlp-info-card__item { display: flex; align-items: center; gap: 10px; padding-inline: clamp(10px, 2vw, 20px); }
.wlp-info-card__item .kt__ck svg { width: 19px; height: 19px; stroke: url(#brandGrad); stroke-width: 2; }
.wlp-info-card__vdivider { width: 1px; align-self: stretch; background: #d5e6ff; }
.wlp-info-card__text { text-align: left; }
.wlp-info-card__text b { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wlp-info-card__text span {
  display: block; font-size: 1.05rem; font-weight: 700; margin-top: 1px;
  background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.wlp-info-card__footer { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; font-weight: 600; color: var(--text-strong); }
.wlp-info-card__footer-item { display: inline-flex; align-items: center; gap: 6px; }
.wlp-info-card__footer-item svg { width: 15px; height: 15px; flex: none; color: #00A57E; }
.wlp-info-card__footer strong {
  background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.wlp-info-card__cd-inline { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wlp-info-card__footer-dot { color: var(--muted); }

@media (max-width: 480px) {
  .wlp-info-card__footer { flex-direction: column; gap: 4px; }
  .wlp-info-card__footer-dot { display: none; }
}

@media (max-width: 560px) {
  .wlp-info-card__row { flex-direction: column; gap: 12px; }
  .wlp-info-card__vdivider { width: 100%; height: 1px; }
}

/* ---- webinarlp: framed CTA ---- */
.wlp-cta-frame { display: inline-block; }
.wlp-cta-frame .btn--demo { border: 2px solid var(--signal-blue); }

/* ---- webinarlp: bonus stack — 6 uniform cards (2x3 desktop, 1-col mobile,
   DOM order 1-6 so the highlight card naturally lands last), a total-value
   strip, then the CTA. Card 6 reuses the dark brand gradient already used
   for the agenda card, so it reads as the same tier of "big reveal". ---- */
.wlp-stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 40px auto 0; }
.wlp-bonus-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(135deg, #e9f1ff, #e4f6ef); border: 1px solid #d5e6ff;
  border-radius: 20px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wlp-bonus-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wlp-bonus-card__badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 14px;
  background: linear-gradient(90deg, #e9f1ff, #e4f6ef); border: 1px solid #d5e6ff; box-shadow: 0 1px 2px rgba(10,19,48,.05);
  color: #0b2f6b; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 12px 5px 9px; border-radius: 999px;
}
.wlp-bonus-card__badge svg { width: 12px; height: 12px; flex: none; color: #00A57E; }
.wlp-bonus-card h3 {
  margin: 0 0 8px;
  background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.wlp-bonus-card p { flex: 1; margin: 0; color: var(--slate); font-size: .92rem; line-height: 1.6; }
.wlp-bonus-card__subline { flex: none !important; margin-top: 6px !important; font-size: .78rem !important; font-style: italic; color: var(--muted); }
.wlp-bonus-card__chip {
  display: flex; align-items: baseline; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--line); font-size: .9rem;
}
.wlp-bonus-card__chip s { color: var(--muted); }
.wlp-bonus-card__chip strong, .wlp-bonus-card__chip > span:first-child { color: var(--captured-ink); font-weight: 700; }
.wlp-bonus-card__chip--claim { font-weight: 700; color: var(--signal-blue); }

.wlp-bonus-card--highlight { background: var(--grad-signal); border: none; }
.wlp-bonus-card--highlight:hover { box-shadow: 0 18px 36px -16px rgba(0,103,255,.5); }
.wlp-bonus-card--highlight h3 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.wlp-bonus-card--highlight p { color: rgba(255,255,255,.9); }
.wlp-bonus-card--highlight .wlp-bonus-card__badge { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); color: #fff; }
.wlp-bonus-card--highlight .wlp-bonus-card__badge svg { color: #fff; }
.wlp-bonus-card--highlight .wlp-bonus-card__chip { border-top-color: rgba(255,255,255,.3); }
.wlp-bonus-card--highlight .wlp-bonus-card__chip--claim { color: #fff; }

.wlp-stack-summary { max-width: 60ch; margin: 40px auto 0; text-align: center; white-space: nowrap; }
.wlp-stack-summary__value { color: var(--captured-ink); }
.wlp-stack-summary__cost { color: var(--signal-blue); }
@media (max-width: 560px) { .wlp-stack-summary { white-space: normal; } }
@media (max-width: 720px) {
  .wlp-stack-grid { grid-template-columns: 1fr; }
}

/* ---- webinarlp: founder card social icons + signature ---- */
.wlp-social { display: flex; gap: 8px; margin-top: 12px; }
.wlp-social a { width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--signal-blue); display: grid; place-items: center; transition: background-color .2s var(--ease), color .2s var(--ease); }
.wlp-social a svg { width: 17px; height: 17px; }
.wlp-social a:hover { background: var(--signal-blue); color: #fff; }

/* ---- webinarlp: agenda card — same dark gradient card used for the
   founders/calendar boxes elsewhere, so the whole agenda reads as one
   dark "reveal" moment against the lighter page ---- */
.wlp-agenda-card {
  position: relative; overflow: hidden; border-radius: 30px; padding: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 54px);
  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);
}
.wlp-agenda-card .section__head { margin-inline: auto; }
.wlp-agenda-card__title { margin-top: 16px; color: #fff; -webkit-text-fill-color: #fff; background: none; }
.wlp-agenda-card__title em { font-style: italic; color: #d6ffe9; }
.wlp-agenda-card__lead { color: rgba(255,255,255,.85); }
.wlp-agenda-card__lead em { font-style: italic; color: #d6ffe9; }

/* ---- webinarlp: agenda reveal timeline — one continuous line down the
   left (a per-gap segment can't work: item height varies a lot with body
   text wrapping, especially on mobile, so a fixed-height segment falls
   short or overshoots). The line stays connected by running the full
   height of the list; nodes are OPAQUE discs so it disappears behind each
   one instead of showing through, rather than fighting it with z-index. ---- */
.wlp-agenda { position: relative; max-width: 720px; margin: 56px auto 0; }
.wlp-agenda::before { content: ""; position: absolute; left: 27px; top: 8px; height: var(--agenda-line-h, calc(100% - 16px)); width: 2px; background: rgba(255,255,255,.35); }
.wlp-agenda__item { position: relative; display: flex; gap: 20px; align-items: flex-start; }
.wlp-agenda__item + .wlp-agenda__item { margin-top: 34px; }
.wlp-agenda__node-col { position: relative; z-index: 1; flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wlp-agenda__heading-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wlp-agenda__heading-row h3 { margin: 0; }
.wlp-agenda__node {
  flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: #fff; box-shadow: 0 6px 16px -6px rgba(0,20,60,.35);
}
.wlp-agenda__node svg { width: 24px; height: 24px; stroke: url(#brandGrad); stroke-width: 2.4; }
.wlp-agenda__time {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 2px 9px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #eafff7; white-space: nowrap;
}
.wlp-agenda__body { flex: 1; padding-top: 6px; }
.wlp-agenda__body h3 { margin: 0; color: #fff; }
.wlp-agenda__body p { margin-top: 6px; color: rgba(255,255,255,.85); line-height: 1.6; }
.wlp-agenda__body p em { font-style: italic; color: #d6ffe9; }
@media (max-width: 560px) {
  .wlp-agenda__node-col { width: 46px; }
  .wlp-agenda__node { width: 46px; height: 46px; border-radius: 13px; }
  .wlp-agenda__node svg { width: 20px; height: 20px; stroke-width: 2.2; }
  .wlp-agenda__time { font-size: .56rem; }
  .wlp-agenda::before { left: 22px; }
  .wlp-agenda__item { gap: 14px; }
}

/* ---- webinarlp: "Real Problems" cards — tinted background, gradient icon badge, prominent green sub-heading ---- */
.wlp-problem-card { background: var(--mist); border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px; box-shadow: var(--shadow-sm); }
.wlp-problem-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-signal); display: grid; place-items: center; }
.wlp-problem-icon svg { width: 26px; height: 26px; color: #fff; }
.wlp-problem-doing { color: var(--captured); font-weight: 700; font-size: 1.05rem; }

.wlp-signature { font-family: 'Caveat', cursive; font-size: 1.9rem; color: var(--text-strong); margin-top: 18px; }