/* ════════════════════════════════════════════════════════════════════════════
   HERO REEL — styles for the looping homepage hero (index.html #top).
   Everything that moves is moved by assets/hero-reel.js through the Web
   Animations API, on transform / opacity / filter only. This file sets the
   resting layout: every scene is stacked absolutely inside a fixed-height
   stage, so nothing the reel does can shift the page.
   Brand: indigo #6366f1 / #4f46e5, violet #8b5cf6, ink #0b1020,
   display font Plus Jakarta Sans.
   ════════════════════════════════════════════════════════════════════════════ */

.hr { position: relative; background:
  radial-gradient(900px 420px at 50% 0%, rgba(129,140,248,.14), transparent 65%),
  radial-gradient(700px 380px at 92% 30%, rgba(139,92,246,.07), transparent 60%),
  linear-gradient(#fbfbfe, #f6f6fc); overflow: hidden; }
.hr-wrap { max-width: 1200px; margin: 0 auto; padding: 18px 16px 8px; }
/* The hero fills the first screen exactly: the viewport (small-viewport units,
   so mobile browser chrome never pushes the CTAs off) minus the offer bar,
   which pads the body when present. The nav overlays the section's own top
   padding. The stage takes whatever is left after the CTAs and the assurance
   line, within sane bounds; on very tall screens the content centres. */
html { --hr-ob: 0px; }
html.av-has-offer-bar { --hr-ob: 40px; }
#top.hr { box-sizing: border-box; display: flex; flex-direction: column;
  height: calc(100vh - var(--hr-ob)); height: calc(100svh - var(--hr-ob)); min-height: 600px; max-height: 1020px; }
#top .hr-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px 22px; }
#top .hr-box { flex: 1 1 auto; min-height: 0; max-height: 640px; display: flex; flex-direction: column; }
#top .hr-stage { flex: 1 1 auto; height: auto; min-height: 400px; width: 100%; }

/* ── stage ── */
.hr-box { position: relative; }
.hr-stage { position: relative; height: clamp(440px, 56vh, 520px); margin: 0 auto;
  border-radius: 28px; overflow: hidden; isolation: isolate; contain: layout paint; }
.hr-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hr-bg path { fill: none; stroke: rgba(99,102,241,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }

.hr-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; visibility: hidden; }
.hr-scene.is-on { opacity: 1; visibility: visible; }
.hr-scene * { will-change: auto; }

.hr-big, .hr-h, .hr-for { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800;
  color: #0b1020; letter-spacing: -0.035em; margin: 0; }
.hr i { font-style: normal; color: #6366f1; margin-left: -.05em; }
.hr-big { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.04; text-align: center; }
.hr-mid { font-size: clamp(30px, 4.4vw, 54px); }
.hr-sub { margin: 10px 0 0; font: 500 clamp(16px, 1.6vw, 20px)/1.4 Inter, system-ui, sans-serif; color: #64748b; text-align: center; }
.hr-eye { margin: 0 0 14px; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4f46e5; }

/* ── 1 · word wheel ── */
.hr-for { display: flex; align-items: center; font-size: clamp(27px, 5.4vw, 66px); line-height: 1; }
.hr-for-lead { margin-right: .26em; }
.hr-wheel { --row: 1.22em; position: relative; display: block; height: calc(var(--row) * 5); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, rgba(0,0,0,.45) 22%, #000 40%, #000 60%, rgba(0,0,0,.45) 78%, transparent 100%);
          mask-image: linear-gradient(transparent 0, rgba(0,0,0,.45) 22%, #000 40%, #000 60%, rgba(0,0,0,.45) 78%, transparent 100%); }
.hr-col { display: flex; flex-direction: column; transform: translateY(0); }
.hr-w { display: block; height: var(--row); line-height: var(--row); white-space: nowrap; color: #c9cede;
  transition: color .28s ease; }
.hr-w.is-cur { color: #0b1020; }
.hr-w i { color: inherit; }
.hr-w.is-cur i { color: #6366f1; }

/* ── arch outline (statement scenes) ── */
.hr-arch { position: absolute; left: 50%; bottom: 0; width: min(780px, 92%); height: 92%; transform: translateX(-50%);
  opacity: 0; pointer-events: none; overflow: visible; }
.hr-arch path { fill: none; stroke: url(#hrArchG); stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.hr-say { flex-direction: column; padding-top: 70px; }
.hr-lock { display: inline-flex; align-items: center; gap: 7px; }

/* ── 3 · team in arches ── */
.hr-s3 { flex-direction: column; gap: 0; }
.hr-team { display: flex; gap: 16px; margin-top: 26px; }
.hr-team figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.hr-archimg { display: block; width: 168px; height: 200px; border-radius: 999px 999px 18px 18px; overflow: hidden;
  padding-top: 30px; background: linear-gradient(#eef0fb, #f6f7fc 40%); box-shadow: 0 1px 0 rgba(15,16,32,.04), 0 18px 40px -22px rgba(49,46,129,.35);
  border: 1px solid rgba(99,102,241,.14); }
.hr-archimg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* the Nova family: 3D teammate clips in the arches (assets/video/team/*).
   Each clip has the arch's own tint gradient baked into its background, so it
   fills the arch edge to edge with no seam; the gradient below shows only
   until the poster arrives. hero-reel.js plays them while scene 3 is on. */
.hr-archimg.is-char { padding-top: 0; background: linear-gradient(var(--bg), #fff 92%); }
.hr-team-vid { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: transparent; pointer-events: none; }
/* real portraits (team-*.webp): fill the arch edge to edge */
.hr-archimg.is-photo { padding-top: 0; background: #e8eaf4; }
.hr-archimg.is-photo img { object-position: center 20%; }
.hr-team figcaption { margin-top: 10px; font: 600 13px/1.2 Inter, system-ui, sans-serif; color: #334155; white-space: nowrap; }
.hr-team figcaption b { margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 700; }

/* ── 5 · caption + visual (AI scribe) ── */
.hr-split { justify-content: space-between; gap: 48px; padding: 24px 56px; }
.hr-cap { flex: 0 0 38%; max-width: 450px; }
.hr-h { font-size: clamp(26px, 3vw, 40px); line-height: 1.08; }
.hr-vis { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: 100%; }

/* ── 4 · "Everything comes together in Aminova" ──────────────────────────────
   The markup is the FINISHED composition (the app window with each feature in
   its section); hero-reel.js animates every piece from its earlier place. All
   sizes below are in the stage's own design pixels (680 × 380 on desktop,
   340 × 300 on phones); hero-reel.js scales the whole stage to fit (--cvs). */
.hr-jx { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 30px 0 0; }
.hr-jx-head { position: relative; flex: none; padding: 0 24px; text-align: center; z-index: 2; }
.hr-jx-head .hr-h { max-width: 860px; margin: 0 auto; }
.hr-1l { white-space: nowrap; }
.cv { position: relative; flex: 1 1 auto; min-height: 0; }
.cv-stage { position: absolute; left: 50%; top: 50%; width: 680px; height: 380px; margin: -190px 0 0 -340px;
  transform: scale(var(--cvs, 1)); transform-origin: 50% 50%; }
.cv-stage > * { position: absolute; }
/* the window (its white body is clipped to the app tile until it opens) */
.cv-win { left: 40px; top: 28px; width: 600px; height: 304px;
  filter: drop-shadow(0 0 .6px rgba(30,27,75,.32)) drop-shadow(0 22px 40px rgba(49,46,129,.16)) drop-shadow(0 3px 8px rgba(30,27,75,.06)); }
.cv-bg { position: absolute; inset: 0; background: #fff; border-radius: 16px; overflow: hidden; clip-path: inset(0 round 16px); }
.cv-bg > * { position: absolute; }
.cv-bar { left: 0; right: 0; top: 0; height: 26px; border-bottom: 1px solid #eef0f6; background: #fbfbfe; }
.cv-bar i { position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #e2e5ef; }
.cv-bar i:nth-child(1) { left: 12px; } .cv-bar i:nth-child(2) { left: 25px; } .cv-bar i:nth-child(3) { left: 38px; }
.cv-url { position: absolute; left: 50%; top: 5px; height: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; border-radius: 99px; background: #f1f2f9; font: 600 10px/16px Inter, system-ui, sans-serif; color: #64748b; white-space: nowrap; }
.cv-side { left: 0; top: 26px; bottom: 0; width: 54px; background: #11142a; }
.cv-nav { position: absolute; left: 0; right: 0; top: 54px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cv-nav svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cv-nav svg:first-child { background: rgba(129,140,248,.28); stroke: #fff; }
.cv-me { position: absolute; left: 16px; bottom: 14px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.cv-card { width: 253px; height: 119px; border-radius: 12px; background: #fff; border: 1px solid #e8eaf4; box-shadow: 0 1px 2px rgba(15,16,32,.04); }
.cv-card > * { position: absolute; }
.cv-c-cht { left: 68px; top: 40px; } .cv-c-erx { left: 333px; top: 40px; } .cv-c-lab { left: 68px; top: 171px; } .cv-c-pay { left: 333px; top: 171px; }
.cv-pill { right: 12px; top: 16px; padding: 0 8px 0 7px; height: 20px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  background: #ecfdf5; color: #047857; font: 700 10.5px/20px Inter, system-ui, sans-serif; font-style: normal; }
.cv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.cv-l1 { left: 14px; top: 56px; font: 600 12.5px/1.2 Inter, system-ui, sans-serif; color: #0b1020; white-space: nowrap; }
.cv-sk { left: 14px; right: 14px; top: 80px; }
.cv-sk i { display: block; height: 7px; border-radius: 4px; background: #eef0f6; width: 72%; }
.cv-sk i + i { margin-top: 7px; width: 46%; }
.cv-amt { left: 14px; top: 52px; font: 800 22px/1 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #0b1020; }
.cv-c-pay .cv-sk { top: 86px; }
.cv-graph { left: 14px; top: 52px; width: 225px; height: 52px; overflow: visible; }
.cv-gl { fill: none; stroke: #10b981; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* shared elements: the logo (tile → sidebar), the four features (around the
   tile → their section headers) and their titles */
.cv-logo { left: 35px; top: 44px; width: 64px; height: 64px; transform: scale(.4375); }
.cv-name { left: 0; width: 680px; top: 222px; text-align: center; font: 700 22px/1 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: .06em; color: #0b1020; opacity: 0; }
.cv-f { width: 104px; height: 104px; transform: scale(.2885); }
.cv-f-cht { left: 83px; top: 43px; } .cv-f-erx { left: 348px; top: 43px; } .cv-f-lab { left: 83px; top: 174px; } .cv-f-pay { left: 348px; top: 174px; }
.cv-f .hr-ax-obj { position: absolute; inset: 0; }
.cv-glow { position: absolute; left: -26px; top: -26px; width: 156px; height: 156px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--a), rgba(255,255,255,0)); }
.cv-t { top: 86px; height: 18px; font: 700 13.5px/18px 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #0b1020; white-space: nowrap; }
.cv-t-cht { left: 158px; } .cv-t-erx { left: 423px; } .cv-t-lab { left: 158px; top: 217px; } .cv-t-pay { left: 423px; top: 217px; }
/* the feature objects (SVG) and their small actions; resting state = done */
.hr-ax-obj { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 7px 9px rgba(30,27,75,.16)); }
.hr-ax-obj * { transform-box: fill-box; transform-origin: center; }
.hr-ax-obj .sh { fill: rgba(30,27,75,.12); }
.hr-ax-obj .okp, .hr-ax-obj .grl { stroke-dasharray: 1; stroke-dashoffset: 0; }
.o-cht .ln { fill: none; stroke: #818cf8; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.o-erx .sht { transform-origin: 0 0; }
.o-erx .pl, .o-erx .td { opacity: 0; }
.o-erx .td { fill: #fda4af; }
.o-lab .ob { transform-origin: 50% 100%; }
.o-lab .bb { fill: #f0fdf4; opacity: .85; }
.o-lab .fz { fill: #22c55e; stroke: #fff; stroke-width: 1.2; opacity: 0; }
.o-lab .fz:nth-child(even) { fill: #bbf7d0; }
.o-pay .cd { transform-origin: 50% 100%; }
.o-pay .cn { opacity: 0; transform: translateY(40px) scale(.3); }
.o-pay .dg { transform: scale(0); }

/* ── 5 · AI scribe card ── */
.hr-sc-card { position: relative; width: min(500px, 100%); padding: 18px 20px 20px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(248,250,255,.88)); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 0 #fff inset, 0 12px 30px -16px rgba(30,27,75,.18), 0 40px 90px -40px rgba(99,102,241,.75),
    -40px 30px 80px -44px rgba(34,211,238,.6), 40px 40px 90px -44px rgba(236,72,153,.55); }
.hr-sc-top { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; }
.hr-sc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; font: 700 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hr-sc-live { color: #be123c; background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.2); }
.hr-sc-live b { width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; }
.hr-sc-ready { position: absolute; left: 0; top: 1px; color: #047857; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.28); opacity: 0; }
.hr-sc-tag { margin-left: auto; font: 600 11.5px/1 Inter, system-ui, sans-serif; color: #64748b; background: #f1f5f9; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.hr-sc-wave { display: flex; align-items: center; gap: 3px; height: 52px; margin: 12px 0 12px; }
.hr-sc-wave i { flex: 1; height: 100%; border-radius: 99px; transform: scaleY(.1); }
.hr-sc-note { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.hr-sc-row { display: flex; gap: 11px; margin: 0; font: 500 14.5px/1.45 Inter, system-ui, sans-serif; color: #1e293b; }
.hr-sc-row b { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; opacity: 0;
  font: 800 11.5px/1 'Plus Jakarta Sans', Inter, sans-serif; color: #fff; background: var(--c); box-shadow: 0 4px 10px -4px var(--c); }
.hr-sc-row .w { display: inline-block; opacity: 0; }

/* ── text motion (hero-reel.js): words, light sweep, kinetic bars ── */
.hr-big, .hr-h { position: relative; }
.hr-wd { display: inline-block; }
.hr-sw { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.hr-sw-in { position: absolute; left: 0; top: 0; color: transparent;
  background: linear-gradient(90deg, #22d3ee, #6366f1 35%, #a855f7 65%, #ec4899); -webkit-background-clip: text; background-clip: text; }
.hr-sw-in i, .hr-sw-in span { color: transparent !important; }
.hr-acc { position: relative; display: inline-block; }
.hr-ul, .hr-strike { position: absolute; left: -2%; width: 104%; border-radius: 99px; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.hr-ul { bottom: -.04em; height: .12em; background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7, #ec4899); }
.hr-strike { top: 52%; height: .085em; background: linear-gradient(90deg, #f43f5e, #fb7185); }
.hr-wglow { position: absolute; left: 0; display: block; pointer-events: none; }
.hr-wglow-b { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; display: block; }
.hr-wglow-in { position: absolute; left: 0; top: 0; height: 100%; white-space: nowrap; color: transparent;
  background: linear-gradient(90deg, #06b6d4, #6366f1 35%, #a855f7 65%, #ec4899); -webkit-background-clip: text; background-clip: text; }
.hr-wglow-in i { color: transparent !important; }
.hr-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hr-team figcaption b { display: inline-block; }

/* ── Nova + sparkles (hero-reel.js) ── */
.hr-nova-sh { position: absolute; left: 0; top: 0; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(49,46,129,.38), rgba(49,46,129,0)); }
.hr-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.hr-nova { position: absolute; left: 0; top: 0; opacity: 0; }
.hr-sp { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; opacity: 0; background: var(--c);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ── pause control (WCAG 2.2.2: anything moving for > 5 s can be paused) ── */
.hr-pause { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
  color: #64748b; background: rgba(255,255,255,.7); border: 1px solid rgba(15,16,32,.08); cursor: pointer; z-index: 5; opacity: .55; transition: opacity .2s; }
.hr-pause:hover, .hr-pause:focus-visible { opacity: 1; }
.hr-pause .hr-pl { display: none; }
.hr-paused .hr-pause .hr-pz { display: none; }
.hr-paused .hr-pause .hr-pl { display: block; }

/* ── CTAs + badge slot ── */
.hr-ctas { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.hr-ghost { background: #fff; border: 1px solid rgba(15,16,32,.12); transition: border-color .2s, color .2s, transform .25s; }
.hr-ghost:hover { border-color: #a5b4fc; color: #4338ca; }
.hr-go { position: relative; overflow: hidden; padding: 15px 26px; font-size: 16px; letter-spacing: -.005em; box-shadow: 0 10px 28px -10px rgba(79,70,229,.65), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.hr-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: hrGoShine 5.5s ease-in-out 2s infinite; pointer-events: none; }
.hr-go:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(79,70,229,.75), inset 0 1px 0 rgba(255,255,255,.25); }
.hr-go-arr { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.hr-go:hover .hr-go-arr { transform: translateX(4px); }
.hr-go:focus-visible, .hr-ghost:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
@keyframes hrGoShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.hr-ghost { color: #334155; }
.hr-assure { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 0; font: 500 13px/1.3 Inter, system-ui, sans-serif; color: #64748b; }
.hr-assure i { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }
/* The demo offer under the CTA pair (assets/offer-bar.js fills data-offer-line). */
.hr-offer-line { margin: 14px 0 0; text-align: center; font: 500 13.5px/1.3 Inter, system-ui, sans-serif; color: #475569; font-variant-numeric: tabular-nums; }
.hr-offer-line + .hr-assure { margin-top: 8px; }
.hr-assure .hr-demo-link { font-size: inherit; padding: 0; color: #4338ca; font-weight: 600; opacity: 1; }
/* One continuous tint from the hero, through the logos, into the testimonials band —
   no white stripe between two lavender sections. */
.hr-clinics { padding: 34px 0 10px; background: linear-gradient(#f6f6fc, #f5f3ff); }
.hr-logos { margin: 0; }
@media (prefers-reduced-motion: reduce) { .hr-go::after { animation: none; display: none; } }

/* ── testimonials (hidden until AMINOVA_TESTIMONIALS has entries) ── */
.hr-tm { position: relative; overflow: hidden; border-bottom: 1px solid #eef0fb; background: radial-gradient(55% 45% at 15% 60%, rgba(167,139,250,.16), transparent 70%), radial-gradient(50% 60% at 90% 100%, rgba(99,102,241,.12), transparent 70%), linear-gradient(180deg, #f5f3ff 0%, #f7f6ff 45%, #ffffff 95%); }
.hr-tm-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 24px 72px; text-align: center; }
.hr-tm-title { margin: 0; font: 800 clamp(26px, 3vw, 36px)/1.15 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -0.02em; color: #0b1020; }
.hr-tm-sub { margin: 10px 0 34px; font: 600 14px/1.4 Inter, sans-serif; color: #64748b; display: inline-flex; align-items: center; gap: 8px; }
.hr-tm-stars { color: #f5b301; letter-spacing: 2px; font-size: 15px; line-height: 1; }
.hr-tm-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); text-align: left; }
.hr-tm-card { margin: 0; display: grid; grid-template-columns: minmax(150px, 40%) 1fr; border-radius: 24px; background: rgba(255,255,255,.92); border: 1px solid rgba(129,140,248,.22); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(49,46,129,.55), 0 1px 0 rgba(255,255,255,.8) inset; position: relative; }
.hr-tm-body::after { content: '\201C'; position: absolute; right: 18px; top: -8px; font: 800 120px/1 'Plus Jakarta Sans', serif; background: linear-gradient(135deg,#a78bfa,#6366f1 60%,#ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .16; pointer-events: none; }
.hr-tm-head { margin: 0; font: 800 20px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -0.015em; color: #0b1020; }
.hr-tm-card mark { color: #1e1b4b; font-weight: 600; padding: .04em .28em; border-radius: 6px; background: linear-gradient(120deg, rgba(199,210,254,.75), rgba(233,213,255,.75) 55%, rgba(251,207,232,.7)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Option B: the money line in the lava colours, moving like the Book your demo button */
.hr-tm[data-hl="lava"] .hr-tm-card mark { padding: 0; border-radius: 0; font-weight: 700; color: #6d28d9; background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 20%, #ec4899 42%, #f472b6 50%, #7c3aed 72%, #4f46e5 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lavaText 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hr-tm[data-hl="lava"] .hr-tm-card mark { animation: none; background-position: 30% 50%; } }
.hr-tm-chip { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 20px -10px rgba(15,23,42,.35); }
.hr-tm-chip img { height: auto; flex: none; }
.hr-tm-chip span { font: 700 12.5px/1.25 Inter, sans-serif; color: #0b1020; }
.hr-tm-chip i { display: block; font: 500 11.5px/1.3 Inter, sans-serif; font-style: normal; color: #64748b; }
.hr-tm-media { position: relative; min-height: 100%; background: #e9e7f7; }
.hr-tm-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hr-tm-brand { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }
.hr-tm-brand img { width: 78%; max-width: 200px; height: auto; }
.hr-tm-body { position: relative; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.hr-tm-card blockquote { margin: 0; flex: 1; font: 500 16.5px/1.6 Inter, system-ui, sans-serif; color: #334155; }
.hr-tm-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid #e8eaf5; }
.hr-tm-who b { display: block; white-space: nowrap; font: 700 14.5px/1.3 Inter, sans-serif; color: #0b1020; }
.hr-tm-who span { display: block; margin-top: 2px; font: 500 13px/1.4 Inter, sans-serif; color: #64748b; }
.hr-tm-mark { height: auto; flex: none; opacity: .9; }
/* Three+ reviews: the wide side-by-side cards on one horizontal rail, the last one cut by a soft right
   fade (like the Partners rail) so it reads as "more to scroll"; arrows step through; the fade lifts at the end. */
.hr-tm-grid[data-rail] { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 18px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 120px), rgba(0,0,0,.35) calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 120px), rgba(0,0,0,.35) calc(100% - 36px), transparent); }
.hr-tm-grid[data-rail]::-webkit-scrollbar { display: none; }
.hr-tm-grid[data-rail].scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 36px, #000 120px, #000 calc(100% - 120px), rgba(0,0,0,.35) calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 36px, #000 120px, #000 calc(100% - 120px), rgba(0,0,0,.35) calc(100% - 36px), transparent); }
.hr-tm-grid[data-rail].scrolled.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 36px, #000 120px);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.35) 36px, #000 120px); }
.hr-tm-grid[data-rail].at-end:not(.scrolled) { -webkit-mask-image: none; mask-image: none; }
.hr-tm-grid[data-rail] > .hr-tm-card { flex: 0 0 calc((100% - 44px) / 2.28); scroll-snap-align: start; }
@media (max-width: 1023px) { .hr-tm-grid[data-rail] > .hr-tm-card { flex-basis: min(560px, 86%); } }
.hr-tm-railwrap { position: relative; }

/* ── The rail uses the width that is actually on the screen (16 Oct 2026) ──
   .hr-tm-wrap caps at 1200px, which is right for the heading and wrong for the
   rail: at 1920 it left 384px of empty tint down each side while clipping the
   third card to 143px — and the edge mask faded 120px of THAT, so about 23px
   of a 482px card read as solid. It looked off-centre. It was not; it was
   dead centre inside a box too small for its contents.

   Two moves fix it at every width, with no magic breakpoint:
   · the rail breaks out of the 1200 wrap to whatever the viewport allows, up
     to 1560px. The margin is computed from the wrap's own content box, so it
     goes NEGATIVE only when there is room to expand into and POSITIVE when
     there is not — it can never push the rail off a narrow screen.
   · the card takes a FIXED 482px once the container is wide enough to give it
     that, so extra width becomes more VISIBLE CARD instead of bigger cards.
     Below that it falls back to the old 2.28-cards-in-view fraction.

   `safe center` centres the row when everything fits and silently reverts to
   flex-start when it overflows — without `safe`, centring a scrolling flex row
   makes the first card unreachable off the left edge. */
@media (min-width: 1024px) {
  .hr-tm-railwrap { --rail: min(100vw - 96px, 1560px); width: var(--rail); margin-inline: calc((100% - var(--rail)) / 2); }
  .hr-tm-grid[data-rail] { justify-content: safe center; }
  .hr-tm-grid[data-rail] > .hr-tm-card { flex-basis: min(482px, calc((100% - 44px) / 2.28)); }
}
/* Arrows sit ON the faded edges, centred on the cards; one fades out at its end of the rail. */
.hr-tm-nav { position: absolute; inset: 0; pointer-events: none; }
.hr-tm-nav[hidden] { display: none; }
.hr-tm-nav button { pointer-events: auto; position: absolute; top: calc(50% - 6px); transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(129,140,248,.35); background: rgba(255,255,255,.96); display: grid; place-items: center; cursor: pointer; color: #4338ca; box-shadow: 0 14px 30px -12px rgba(49,46,129,.5); transition: opacity .25s, transform .2s, background .2s; }
.hr-tm-nav .hr-tm-prev { left: -8px; }
.hr-tm-nav .hr-tm-next { right: -8px; }
.hr-tm-nav button:hover:not(:disabled) { background: #eef2ff; transform: translateY(-50%) scale(1.06); }
.hr-tm-nav button:disabled { opacity: 0; pointer-events: none; }
.hr-tm-nav button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
@media (max-width: 767px) { .hr-tm-nav { display: none; } }
.hr-tm-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .hr-tm-grid[data-rail] { scroll-behavior: auto; } }
.hr-tm-src { margin: 0; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .04em; color: #94a3b8; text-transform: uppercase; }

/* ── tablet ── */
@media (max-width: 1023px) {
  .hr-archimg { width: 132px; height: 160px; }
}

/* ── phones: stack caption over visual, smaller type, three team arches ── */
@media (max-width: 767px) {
  .hr-wrap { padding: 10px 16px 4px; }
  .hr-stage { height: 470px; border-radius: 22px; }
  #top.hr { min-height: 640px; }
  #top .hr-wrap { padding: 8px 16px 82px; }   /* clears the floating chat button */
  #top .hr-stage { height: auto; min-height: 380px; }
  .hr-scene { padding: 18px 14px; }
  .hr-for { flex-direction: column; align-items: flex-start; }
  .hr-for-lead { margin: 0; }
  /* phones: "For" sits directly above the live word; only a sliver of the
     previous word shows above it, the next two fade out below */
  .hr-wheel { height: calc(var(--row) * 3.3);
    -webkit-mask-image: linear-gradient(transparent 0, rgba(0,0,0,.5) 9%, #000 13%, #000 40%, rgba(0,0,0,.4) 70%, transparent 100%);
            mask-image: linear-gradient(transparent 0, rgba(0,0,0,.5) 9%, #000 13%, #000 40%, rgba(0,0,0,.4) 70%, transparent 100%); }
  .hr-col { margin-top: calc(var(--row) * -1.7); }
  .hr-say { padding-top: 60px; }
  .hr-arch { width: 94%; height: 82%; }
  .hr-big { font-size: 28px; }
  .hr-mid { font-size: 29px; }
  .hr-for { font-size: 31px; }
  .hr-team { gap: 10px; margin-top: 20px; }
  .hr-team figure:nth-child(4) { display: none; }
  .hr-archimg { width: 104px; height: 138px; padding-top: 18px; border-radius: 999px 999px 14px 14px; }
  .hr-archimg.is-photo { padding-top: 0; }
  .hr-team figcaption { font-size: 11.5px; white-space: normal; text-align: center; max-width: 100px; }
  .hr-team figcaption b { display: inline-block; margin: 5px 0 0; }
  .hr-eye { margin-bottom: 10px; font-size: 11px; }
  .hr-split { flex-direction: column; justify-content: flex-start; gap: 30px; padding: 26px 16px 16px; text-align: center; }
  .hr-cap { flex: none; max-width: 340px; }
  .hr-h { font-size: 24px; }
  .hr-vis { width: 100%; height: auto; flex: 1 1 auto; align-items: flex-start; }
  /* scene 4 on phones: a 340 × 300 stage, a simpler window (pills only) */
  .hr-jx { padding: 24px 0 0; }
  .hr-jx-head { padding: 0 18px; }
  .cv-stage { width: 340px; height: 300px; margin: -150px 0 0 -170px; }
  .cv-win { left: 9px; top: 40px; width: 322px; height: 200px; }
  .cv-bg { border-radius: 12px; clip-path: inset(0 round 12px); }
  .cv-bar { height: 20px; } .cv-bar i { top: 7px; width: 6px; height: 6px; }
  .cv-bar i:nth-child(1) { left: 9px; } .cv-bar i:nth-child(2) { left: 19px; } .cv-bar i:nth-child(3) { left: 29px; }
  .cv-url { top: 3px; height: 14px; font-size: 8.5px; line-height: 14px; padding: 0 8px; }
  .cv-side { top: 20px; width: 34px; }
  .cv-nav { top: 38px; gap: 5px; } .cv-nav svg { width: 22px; height: 22px; padding: 5px; border-radius: 7px; }
  .cv-me { left: 9px; bottom: 9px; width: 16px; height: 16px; }
  .cv-card { width: 132px; height: 78px; border-radius: 10px; }
  .cv-c-cht { left: 42px; top: 28px; } .cv-c-erx { left: 182px; top: 28px; } .cv-c-lab { left: 42px; top: 114px; } .cv-c-pay { left: 182px; top: 114px; }
  .cv-pill { left: 8px; right: auto; top: auto; bottom: 9px; height: 18px; font-size: 9.5px; line-height: 18px; }
  .cv-l1, .cv-sk, .cv-amt, .cv-graph { display: none; }
  .cv-logo { left: 2px; top: 50px; width: 48px; height: 48px; transform: scale(.4167); }
  .cv-name { width: 340px; top: 172px; font-size: 15px; }
  .cv-f { width: 66px; height: 66px; transform: scale(.3333); }
  .cv-f-cht { left: 37px; top: 54px; } .cv-f-erx { left: 177px; top: 54px; } .cv-f-lab { left: 37px; top: 140px; } .cv-f-pay { left: 177px; top: 140px; }
  .cv-glow { left: -17px; top: -17px; width: 100px; height: 100px; }
  .cv-t { top: 79px; height: 16px; font-size: 11.5px; line-height: 16px; }
  .cv-t-cht { left: 85px; } .cv-t-erx { left: 225px; } .cv-t-lab { left: 85px; top: 165px; } .cv-t-pay { left: 225px; top: 165px; }
  .hr-sc-card { padding: 14px 14px 16px; border-radius: 18px; }
  .hr-sc-tag { font-size: 10.5px; padding: 5px 8px; }
  .hr-sc-pill { font-size: 11.5px; padding: 6px 10px; }
  .hr-sc-wave { height: 36px; margin: 10px 0; gap: 3px; }
  .hr-sc-note { gap: 7px; }
  .hr-sc-row { font-size: 13px; line-height: 1.4; gap: 9px; }
  .hr-sc-row b { width: 20px; height: 20px; font-size: 10.5px; border-radius: 6px; }
  .hr-ctas { margin-top: 14px; }
  .hr-ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .hr-ctas a { justify-content: center; }
  .hr-assure { font-size: 12.5px; gap: 4px 10px; }
  .hr-clinics { padding: 26px 0 6px; }
  .hr-tm-wrap { padding: 48px 16px; }
  .hr-tm-card { grid-template-columns: 1fr; }
  .hr-tm-media { aspect-ratio: 4/3.4; }
  .hr-tm-media > img { object-position: 50% 12%; }
  .hr-tm-body { padding: 20px 18px 18px; }
  .hr-tm-card blockquote { font-size: 15.5px; }
  .hr-tm-head { font-size: 18px; }
}

/* ── reduced motion: no reel; the hero shows scene 4's finished composition
   (the app window with Charting, e-Prescribing, Labs and Payments in it) ── */
@media (prefers-reduced-motion: reduce) {
  .hr-scene:not(.hr-jx), .hr-fx { display: none; }
  .hr-scene.hr-jx { opacity: 1; visibility: visible; }
  .hr-jx .hr-ul { transform: none; }
  .hr-pause { display: none; }
}

/* ── THE FILM (14 Oct 2026): the hero is now one 16:9 video. The frame takes the
   biggest 16:9 that fits the space the hero leaves under the nav and above the
   CTAs — container units, so it never letterboxes or crops. ── */
#top .hr-film-box { max-height: none; }
.hr-film { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
.hr-film-frame { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
  background: #05060d; box-shadow: 0 40px 90px -40px rgba(49,46,129,.55), 0 18px 40px -24px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06); isolation: isolate; }
.hr-film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-film-frame .hr-pause { color: #e2e8f0; background: rgba(15,16,32,.45); border-color: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
@media (max-width: 767px) {
  #top .hr-film-box { flex: 0 0 auto; }
  .hr-film { container-type: inline-size; }
  .hr-film-frame { width: 100%; border-radius: 16px; }
}
/* bigger film (Elad, 14 Oct: "a tad bigger, too much space"): on tablet and up the hero is no longer
   capped at 1200px (that cap, not the height, was holding the frame back on wide screens), and the
   padding around it is tighter, so the frame gets every pixel between the nav and the CTAs. */
@media (min-width: 768px) {
  #top.hr .hr-wrap { max-width: 1480px; padding-top: 10px; padding-bottom: 16px; }
  #top .hr-film-box + .hr-ctas { margin-top: 16px; }
  .hr-film-frame { border-radius: 26px; }
}
/* phones: the film sits right under the nav and the hero hugs its content (a full-screen-tall
   hero left a band of empty space above the 16:9 frame) */
@media (max-width: 767px) {
  #top.hr { height: auto; min-height: 0; }
  #top .hr-wrap { justify-content: flex-start; padding-top: 22px; padding-bottom: 40px; }
}
/* "Capterra" links to our listing (header line and each card's source line) */
.hr-tm-cap { color: inherit; text-decoration: underline; text-decoration-color: rgba(99,102,241,.45); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .2s, text-decoration-color .2s; }
.hr-tm-cap:hover, .hr-tm-cap:focus-visible { color: #4f46e5; text-decoration-color: #4f46e5; }

/* ── the headline over the film (14 Oct): "The all-in-one EMR for [typed, lava]", the CTA group,
   then the film, which takes what is left of the first screen ── */
.hr-head { text-align: center; padding: 6px 0 18px; }
.hr-h1 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; letter-spacing: -.035em; color: #0b1020;
  font-size: clamp(30px, 3.1vw, 50px); line-height: 1.12; margin: 0; }
.hr-h1 .hr-br { display: none; }
.hr-type { display: inline-block; min-width: .2em; padding-bottom: .08em; }
.hr-caret { display: inline-block; width: 3px; height: .9em; margin-left: 3px; vertical-align: -.08em; border-radius: 2px;
  background: linear-gradient(#7c3aed, #db2777); animation: hrCaret 1s steps(1) infinite; }
@keyframes hrCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hr-caret { display: none; } }
.hr-head .hr-ctas { margin-top: 18px; }
.hr-head .hr-assure { margin-top: 12px; }
@media (min-width: 768px) {
  #top .hr-film-box { flex: 1 1 auto; min-height: 340px; }
  #top .hr-film-box + .hr-ctas { margin-top: 0; }
}
@media (max-width: 767px) {
  .hr-h1 { font-size: 30px; } .hr-h1 .hr-br { display: inline; }
  .hr-head { padding: 0 0 18px; }
  #top .hr-wrap { padding-top: 18px; }
}
/* desktop: the film keeps its big size and may run past the fold — the headline and the CTA group
   are the first screen; the film's lower edge is the invitation to scroll */
@media (min-width: 768px) {
  #top.hr { height: auto; max-height: none; min-height: 0; }
  #top .hr-wrap { justify-content: flex-start; }
  #top .hr-film-box { flex: none; height: clamp(420px, calc(100svh - var(--hr-ob) - 190px), 760px); }
}

/* ── Karumi-style spacing (Elad, 14 Oct): air above, a big two-line headline (the clinic kind typed on
   line two), ONE button, the rating, a generous gap, then the film at full size; Get started and the
   honest line under the film. These rules supersede the headline block above. ── */
#top.hr { height: auto; max-height: none; min-height: 0; }
#top .hr-wrap { justify-content: flex-start; max-width: 1480px; padding: 0 16px 64px; }
#top .hr-head { padding: 76px 0 0; }
#top .hr-h1 { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.04; letter-spacing: -.045em; }
#top .hr-h1 .hr-br { display: inline; }
#top .hr-h1 .hr-type { padding-bottom: .1em; }
.hr-solo { margin-top: 34px; display: flex; justify-content: center; }
.hr-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 14px/1.3 Inter, system-ui, sans-serif; color: #64748b; text-decoration: none; }
.hr-rating .hr-tm-stars { letter-spacing: 1px; }
.hr-rating:hover { color: #4f46e5; }
#top .hr-film-box { flex: none; height: auto; max-height: none; min-height: 0; margin-top: 64px; }
#top .hr-film { container-type: normal; display: block; }
#top .hr-film-frame { width: min(100%, 1280px); margin: 0 auto; aspect-ratio: 16 / 9; }
#top .hr-film-box + .hr-ctas.hr-under, #top .hr-under { margin-top: 30px; }
#top .hr-under + .hr-assure { margin-top: 14px; }
@media (max-width: 767px) {
  #top .hr-wrap { padding: 0 16px 48px; }
  #top .hr-head { padding-top: 40px; }
  #top .hr-h1 { font-size: 34px; }
  .hr-solo { margin-top: 24px; } .hr-solo .ld-btn { width: 100%; max-width: 320px; justify-content: center; }
  #top .hr-film-box { margin-top: 36px; }
  #top .hr-film-frame { width: 100%; border-radius: 16px; }
  #top .hr-film-box + .hr-ctas.hr-under, #top .hr-under { margin-top: 22px; }
}
/* the typed word's line keeps one height whether the word is full or empty — it used to shrink 7px each time
   a word deleted, which nudged the whole page below it (the "bounce" Elad saw on every switch) */
#top .hr-h1 .hr-type { display: inline-block; height: 1.12em; vertical-align: bottom; }