/* ═══════════════════════════════════════════════════════════════════════════
   v5 — unified editorial product direction
   One rhythm for every homepage section: confident type, fewer floating
   islands, stronger contrast changes and product-first composition.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --page: #f5f7fb;
  --ink: #101828;
  --blue: #146ebe;
  --blue-dark: #0b4d88;
  --blue-pale: #eaf3fc;
  --green: #168a5b;
  --line: #dce4ee;
  --section-radius: 32px;
}

body { background: var(--page); color: #475467; }
.container { max-width: 1240px; padding-inline: 32px; }
.section { padding: 116px 0; }
.section--tight { padding: 96px 0; }
.h-section { font-size: clamp(2.15rem, 4vw, 3.45rem); line-height: .98; letter-spacing: -.052em; }
.lead { line-height: 1.62; }
.eyebrow, .badge-soft, .eco2__eyebrow {
  font-size: .72rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase;
}
.section-head { margin-bottom: 54px !important; }
.section-head .lead { max-width: 650px; margin-inline: auto; }

/* Navigation */
.nav { background: rgba(245,247,251,.88); }
.nav.is-scrolled { background: rgba(255,255,255,.88); }
.nav__inner { max-width: 1280px; }
.nav__login { color: #344054; }

/* Hero */
.hero--v2 {
  min-height: auto; padding: 104px 0 92px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(20,110,190,.15), transparent 29%),
    radial-gradient(circle at 88% 35%, rgba(22,138,91,.1), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #f5f7fb 100%);
}
.hero--v2::after { opacity: .72; }
.hero__head { max-width: 900px; }
.hero__title { color: var(--ink); font-size: clamp(3.25rem, 6.6vw, 5.85rem); line-height: .91; letter-spacing: -.068em; }
.hero__sub { max-width: 720px; color: #475467; font-size: clamp(1.08rem, 1.65vw, 1.28rem); }
.pill-badge { border: 1px solid rgba(20,110,190,.14); box-shadow: 0 10px 30px -24px rgba(20,110,190,.8); }
.hero__stage { margin-top: 72px; }
.hero--v2 .app { border-radius: 22px; }
.collage::before {
  content: ""; position: absolute; inset: 12% 4% -5%; z-index: -1; border-radius: 50%;
  background: rgba(20,110,190,.12); filter: blur(80px);
}

/* Proof bar */
.trust { position: relative; z-index: 4; padding: 0; border: 0; background: transparent; margin-top: -34px; }
.trust__row {
  display: grid; grid-template-columns: 280px 1fr; align-items: stretch; gap: 0;
  min-height: 118px; padding: 0; border: 1px solid rgba(20,110,190,.14); border-radius: 22px;
  background: rgba(255,255,255,.96); box-shadow: 0 28px 70px -44px rgba(16,24,40,.42); overflow: hidden;
}
.trust__intro { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; background: var(--blue-pale); }
.trust__intro span { color: var(--blue); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.trust__intro strong { margin-top: 7px; color: var(--ink); font-size: .94rem; line-height: 1.35; letter-spacing: -.02em; }
.trust__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: center; gap: 16px 20px; padding: 22px 26px; }
.trust__item { font-size: .81rem; color: #344054; }
.trust__item svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; color: #fff; background: var(--green); }

/* Ecosystem */
#ecosystem { background: #fff; }
.eco2__head { display: grid; grid-template-columns: 140px 1.2fr .8fr; gap: 38px; align-items: start; margin-bottom: 62px; }
.eco2__eyebrow { padding-top: 8px; color: var(--blue); }
.eco2__title { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .94; letter-spacing: -.06em; }
.eco2__title em { color: var(--blue); font-style: normal; }
.eco2__sub { padding-top: 7px; color: #667085; }
.eco2__grid { gap: 14px; border: 0; }
.eco2__item, .eco2__item + .eco2__item {
  position: relative; min-height: 310px; padding: 28px; border: 1px solid var(--line); border-radius: 22px;
  background: #f8fafc; overflow: hidden;
}
.eco2__item::after {
  content: ""; position: absolute; right: -35px; bottom: -55px; width: 150px; height: 150px;
  border: 24px solid rgba(20,110,190,.055); border-radius: 50%;
}
.eco2__num { font-size: 1rem; font-weight: 700; color: #98a2b3; }
.eco2__tag { margin-top: 72px; }
.eco2__item h3 { font-size: 1.35rem; }
.eco2__foot { margin-top: 30px; padding: 22px 26px; text-align: left; border: 1px solid #cae0f4; border-radius: 16px; background: var(--blue-pale); }

/* Clinic types */
.logos { padding: 34px 0; border-block: 1px solid #d9e7f4; background: #f0f6fc; }
.logos__title { color: #667085; margin-bottom: 18px; }
.client-chip { color: #344054; border-color: #d4e2f0; background: rgba(255,255,255,.82); }
.client-chip .dot { background: var(--green); }

/* Product showcase */
#modules { background: #edf4fb; }
#modules .section-head { text-align: left; max-width: 860px !important; margin-left: 0 !important; }
#modules .section-head .lead { margin-left: 0; }
.showcase { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 18px; margin-top: 52px; }
.tabs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tab {
  width: 100%; min-height: 64px; justify-content: flex-start; padding: 0 18px; border-radius: 14px;
  background: rgba(255,255,255,.62); border-color: rgba(16,24,40,.08);
}
.tab.is-active { box-shadow: 0 16px 28px -22px rgba(20,110,190,.8); }
.tab__bar { left: auto; right: 0; top: 0; bottom: 0; width: 3px; height: 100%; transform-origin: top; }
.tab.is-active.is-auto .tab__bar { animation-name: tabbar-v5; }
@keyframes tabbar-v5 { to { transform: scaleY(1); } }
.showcase__stage { margin: 0; padding: 42px; border-radius: 24px; border: 1px solid rgba(16,24,40,.08); background: #fff; box-shadow: 0 28px 60px -46px rgba(16,24,40,.55); }
.pane { gap: 56px; }
.pane h3 { font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.045em; }
.pane__media { padding: 12px; border-radius: 18px; background: #f4f7fb; }

/* Capability bento */
#capabilities { background: #fff; }
#capabilities .section-head { text-align: left; max-width: 760px !important; margin-left: 0 !important; }
#capabilities .section-head .lead { max-width: 650px; margin-left: 0; }
.bento2 { grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: auto auto; gap: 18px; }
.bento2 > * { border-radius: 22px; padding: 28px; }
.bento2__hero { grid-column: span 1; grid-row: span 2; min-height: 530px; }
.bento2__cell { min-height: 255px; }
.bento2__cell:last-child { grid-column: span 2; }
.bento2-ico { border-radius: 50%; }
.bento2__visual { padding: 22px; background: #fff; }

/* Integrations */
#integrations { background: #f5f7fb; }
.int-hero { padding: 76px 34px 66px; border-radius: var(--section-radius); box-shadow: 0 34px 90px -56px rgba(20,110,190,.85); }
.int-hero__title { font-size: clamp(2.55rem, 5vw, 4.45rem); letter-spacing: -.06em; }
.int-hero__sub { max-width: 650px; }

/* Security */
#security { background: #fff; }
.sec2 { position: relative; padding: 64px; border-radius: var(--section-radius); background: #eef8f3; overflow: hidden; }
.sec2::before {
  content: ""; position: absolute; width: 340px; height: 340px; left: -180px; bottom: -220px;
  border: 55px solid rgba(22,138,91,.07); border-radius: 50%;
}
.sec2__text, .sec2__list { position: relative; }
.sec2__list { border-color: rgba(22,138,91,.13); box-shadow: none; }
.sec2__row { min-height: 74px; }
.sec2__ico { border-radius: 50%; }

/* AI */
#ai { padding-top: 0; background: #fff; }
.ai {
  position: relative; min-height: 490px; overflow: hidden; padding: 76px;
  grid-template-columns: .8fr 1.2fr; border-radius: var(--section-radius);
  background:
    radial-gradient(circle at 12% 0%, rgba(20,110,190,.18), transparent 36%),
    radial-gradient(circle at 90% 100%, rgba(109,79,209,.12), transparent 34%),
    #eef4fb;
  border: 1px solid #d5e3f1;
}
.ai::after {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: linear-gradient(rgba(20,110,190,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(20,110,190,.07) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent, #000);
}
.ai__text, .ai__panel { position: relative; z-index: 1; }
.ai__badge { color: var(--blue-dark); background: rgba(255,255,255,.72); border-color: #bfd5ea; }
.ai__text h2 { color: var(--ink); font-size: clamp(2.35rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.055em; }
.ai__text > p { color: #667085; }
.ai__panel { padding: 12px 26px; background: rgba(255,255,255,.82); border-color: #d3e0ed; box-shadow: 0 22px 48px -38px rgba(16,24,40,.45); backdrop-filter: blur(10px); }
.ai-row { padding: 22px 0; }
.ai-row + .ai-row { border-top-color: #e1e8f0; }
.ai-row__t { color: var(--ink); }
.ai-row__d { color: #667085; }

/* Roles */
#roles { background: #f5f7fb; }
#roles .section-head { text-align: left; max-width: 800px !important; margin-left: 0 !important; }
#roles .section-head .lead { margin-left: 0; }
.roles2 { grid-template-columns: 1fr 1fr; gap: 18px; }
.role2 { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 230px; border-radius: 22px; }
.role2__head { padding: 28px; }
.role2__body { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.role2__ico { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 36px; }
.role2__name { font-size: 1.3rem; }

/* Patient app */
#portal { padding-top: 40px; background: #f5f7fb; }
.patients__bridge { margin-bottom: 42px; }
.papp2 { padding: 72px; border-radius: var(--section-radius); background: #fff; box-shadow: 0 30px 70px -54px rgba(16,24,40,.5); }
.papp2__text .h-section { font-size: clamp(2.55rem, 4.5vw, 4rem); }
.papp2__scene::before {
  content: ""; position: absolute; inset: 15% -15%; border-radius: 50%; background: rgba(20,110,190,.13); filter: blur(55px);
}

/* Stories */
#stories { overflow: hidden; background: #eef4fb; color: var(--ink); }
#stories > .container:first-child { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
#stories .h-section { max-width: 700px; margin: 0 !important; color: var(--ink); }
.story-badge { order: 2; flex-shrink: 0; }
.stories { padding-top: 50px; }
.story { color: #344054; border: 1px solid rgba(16,24,40,.08); box-shadow: 0 24px 50px -42px rgba(16,24,40,.5); }
.dots { margin-top: 18px; }
.dot { background: #b8c6d6; }

/* Proof in numbers */
#stats { padding: 0; background: #eef4fb; }
.stats-band { padding: 0 0 100px; border-radius: 0; background: transparent; color: var(--ink); }
.stats-band__grid { gap: 0; border: 1px solid #d4e2f0; border-radius: 22px; background: rgba(255,255,255,.78); overflow: hidden; }
.big-stat { padding: 46px 28px; }
.big-stat + .big-stat { border-left: 1px solid #d4e2f0; }
.big-stat__v { color: var(--blue); font-size: clamp(2.7rem, 5vw, 4.6rem); }
.big-stat__l { color: #667085; }

/* Pricing */
#pricing { background: #fff; }
#pricing .section-head { text-align: left; max-width: 830px !important; margin-left: 0 !important; }
#pricing .section-head .lead { margin-left: 0; }
.pricing-grid { gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 28px; background: #f5f7fb; }
.plan { padding: 28px 22px; border-color: transparent; border-radius: 20px; box-shadow: none; }
.plan:hover { transform: none; border-color: #c7d7e8; }
.plan--featured { transform: translateY(-12px); border-color: var(--blue); box-shadow: 0 24px 44px -32px rgba(20,110,190,.75); }
.plan--featured:hover { transform: translateY(-12px); }
.plan__price { font-size: 1.8rem; }
.pricing-note { border-radius: 18px; }

/* Onboarding */
#onboarding { background: #edf4fb; }
#onboarding .section-head { text-align: left; max-width: 760px !important; margin-left: 0 !important; }
#onboarding .section-head .lead { margin-left: 0; }
.steps { gap: 10px; }
.step { min-height: 210px; padding: 24px; border: 1px solid rgba(20,110,190,.13); border-radius: 18px; background: rgba(255,255,255,.76); }
.step__n { width: 38px; height: 38px; margin-bottom: 42px; border: 0; color: #fff; background: var(--blue); }
.step__line { display: none; }
.step h5 { font-size: 1rem; }

/* FAQ */
#faq { background: #fff; }
#faq .container { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: start; }
#faq .section-head { position: sticky; top: 110px; text-align: left; margin: 0 !important; }
.faq { width: 100%; max-width: none; }
.faq details { margin-bottom: 10px; padding: 0 22px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; }
.faq summary { min-height: 74px; padding: 0; }
.faq__a { padding: 0 42px 22px 0; }

/* CTA and footer */
#cta { padding: 100px 0; background: #fff; }
.cta-band {
  padding: 84px 50px; border-radius: var(--section-radius);
  background: linear-gradient(125deg, #0b4d88 0%, #146ebe 56%, #2587d6 100%);
}
.cta-band::after {
  content: ""; position: absolute; width: 300px; height: 300px; right: -100px; top: -160px;
  border: 46px solid rgba(255,255,255,.08); border-radius: 50%;
}
.cta-band h2 { max-width: 760px; margin-inline: auto; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.footer { padding-top: 78px; background: #0b1220; }

@media (max-width: 1024px) {
  .eco2__head { grid-template-columns: 1fr; gap: 18px; }
  .eco2__sub { max-width: 680px; }
  .showcase { grid-template-columns: 1fr; }
  .tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .tab { width: auto; min-width: max-content; }
  .tab__bar { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 3px; transform-origin: left; }
  .tab.is-active.is-auto .tab__bar { animation: tabbar 7s linear forwards; }
  .bento2 { grid-template-columns: 1fr 1fr; }
  .bento2__hero { grid-column: span 2; grid-row: auto; min-height: 430px; }
  .bento2__cell:last-child { grid-column: auto; }
  .sec2 { padding: 48px 34px; }
  .ai { grid-template-columns: 1fr; padding: 56px 38px; }
  .ai__panel { min-width: 0; }
  .papp2 { padding: 56px 38px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .plan--featured, .plan--featured:hover { transform: none; }
  .steps { grid-template-columns: repeat(3,1fr); }
  #faq .container { grid-template-columns: 1fr; gap: 42px; }
  #faq .section-head { position: static; }
}

@media (max-width: 720px) {
  .container { padding-inline: 20px; }
  .section { padding: 82px 0; }
  .section--tight { padding: 76px 0; }
  .hero--v2 { padding: 76px 0 64px; }
  .hero__title { font-size: clamp(2.75rem, 14vw, 4rem); }
  .hero__stage { margin-top: 52px; }
  .trust { margin-top: -22px; }
  .trust__row { grid-template-columns: 1fr; }
  .trust__intro { padding: 22px; }
  .trust__facts { grid-template-columns: 1fr 1fr; padding: 20px 22px; }
  .eco2__grid { grid-template-columns: 1fr; }
  .eco2__item, .eco2__item + .eco2__item { min-height: 255px; }
  .eco2__tag { margin-top: 38px; }
  .showcase__stage { padding: 26px 20px; }
  .pane { grid-template-columns: 1fr; gap: 32px; }
  .bento2 { grid-template-columns: 1fr; }
  .bento2__hero, .bento2__cell, .bento2__cell:last-child { grid-column: auto; min-height: auto; }
  .bento2__hero { min-height: 430px; }
  .int-hero__title { font-size: clamp(2rem, 10vw, 2.6rem); overflow-wrap: break-word; }
  .int-hero__sub { font-size: .95rem; }
  .sec2 { padding: 34px 20px; border-radius: 24px; }
  .ai { min-height: auto; padding: 42px 22px; border-radius: 24px; }
  .roles2 { grid-template-columns: 1fr; }
  .role2 { grid-template-columns: 1fr 1.15fr; }
  .role2__head, .role2__body { padding: 22px; }
  .role2__ico { margin-bottom: 24px; }
  .papp2 { padding: 38px 22px; border-radius: 24px; }
  #stories > .container:first-child { display: block; }
  .story-badge { margin-bottom: 18px; }
  .big-stat + .big-stat { border-left: 0; border-top: 1px solid #d4e2f0; }
  .pricing-grid { grid-template-columns: 1fr; padding: 8px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .step__n { margin-bottom: 28px; }
  .cta-band { padding: 58px 22px; border-radius: 24px; }
}

@media (max-width: 500px) {
  .trust__facts { grid-template-columns: 1fr; gap: 13px; }
  .role2 { grid-template-columns: 1fr; }
  .role2__ico { margin-bottom: 18px; }
  .stats-band__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tab.is-active.is-auto .tab__bar { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5.1 — Kibersoft signature system
   Orbit + cross are derived from the round clinic mark. The clipped lower
   corner differentiates product surfaces from generic SaaS cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Editorial chapter index */
.section-head { position: relative; }
.section-head[data-section]::before {
  content: attr(data-section); position: absolute; top: 4px; left: -52px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid #bcd4e9; border-radius: 50%; background: rgba(255,255,255,.7);
  color: var(--blue); font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  box-shadow: inset 0 0 0 5px rgba(20,110,190,.045);
}
.section-head[data-section]::after {
  content: ""; position: absolute; top: 21px; left: -17px; width: 18px; height: 1px;
  background: linear-gradient(90deg,#bcd4e9,transparent);
}
.section-head[data-section] .eyebrow::before { display: none; }

/* Kiber orbit: one recognisable motif, reserved for major scenes */
.ks-orbit {
  --orbit-color: rgba(20,110,190,.16);
  --orbit-radius: 91px;
  position: absolute; z-index: 0; width: 184px; height: 184px;
  border: 1px solid var(--orbit-color); border-radius: 50%; pointer-events: none;
}
.ks-orbit::before {
  content: ""; position: absolute; inset: 27px; border: 1px solid var(--orbit-color); border-radius: 50%;
}
.ks-orbit::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  transform: translate(-50%,-50%); border-radius: 6px;
  background:
    linear-gradient(var(--orbit-color),var(--orbit-color)) center/2px 100% no-repeat,
    linear-gradient(90deg,var(--orbit-color),var(--orbit-color)) center/100% 2px no-repeat;
}
.ks-orbit i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px;
  border-radius: 50%; background: #2a82cf; box-shadow: 0 0 0 5px rgba(42,130,207,.1);
  transform: rotate(0deg) translateX(var(--orbit-radius)); transform-origin: 4px 4px;
  animation: ks-orbit-dot 18s linear infinite;
}
.ks-orbit--light { --orbit-color: rgba(255,255,255,.2); }
.ks-orbit--light i { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.ks-orbit--hero { --orbit-radius: 194px; width: 390px; height: 390px; right: -105px; top: 112px; opacity: .75; }
.ks-orbit--hero::before { inset: 62px; }
.int-hero > .ks-orbit { right: -54px; top: -76px; }
.ai > .ks-orbit { right: -42px; top: -72px; }
.cta-band > .ks-orbit { left: -54px; bottom: -76px; }
@keyframes ks-orbit-dot { to { transform: rotate(360deg) translateX(var(--orbit-radius)); } }

.hero--v2 > .container,
.int-hero > :not(.ks-orbit),
.ai > :not(.ks-orbit),
.cta-band > :not(.ks-orbit) { position: relative; z-index: 1; }

/* Signature geometry and quieter premium elevation */
.showcase__stage, .int-hero, .sec2, .ai, .papp2, .cta-band {
  border-radius: 32px 32px 12px 32px;
}
.eco2__item, .eco2__item + .eco2__item,
.bento2 > *, .role2, .plan, .step, .faq details, .story {
  border-radius: 22px 22px 8px 22px;
}
.showcase__stage, .papp2 {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 34px 70px -54px rgba(16,24,40,.48);
}
.bento2 > *, .role2, .plan, .step, .faq details {
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
}
.bento2 > *:hover, .role2:hover {
  transform: translateY(-4px); border-color: color-mix(in srgb,var(--acc,var(--blue)) 30%,#d8e1eb);
  box-shadow: 0 20px 42px -32px color-mix(in srgb,var(--acc,var(--blue)) 35%,transparent);
}

/* Buttons feel like controls, not flat pills */
.btn--primary {
  background: linear-gradient(180deg,#1b78ca 0%,#146ebe 100%);
  border-color: rgba(8,75,135,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -18px rgba(20,110,190,.9);
}
.btn--primary:hover { background: linear-gradient(180deg,#176fba 0%,#0e5fA8 100%); }
.btn--ghost { background: rgba(255,255,255,.56); }
.tab.is-active { background: linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 78%,#0b3d69)); }

/* Tiny clinical cross in key labels */
.eyebrow::before {
  width: 12px; height: 12px; border-radius: 4px; background:
    linear-gradient(#fff,#fff) center/2px 7px no-repeat,
    linear-gradient(90deg,#fff,#fff) center/7px 2px no-repeat,
    var(--blue);
}

@media (max-width: 1320px) {
  .section-head[data-section]::before { position: static; display: inline-grid; margin-bottom: 16px; }
  .section-head[data-section]::after { display: none; }
}

@media (max-width: 720px) {
  .ks-orbit { --orbit-radius: 67px; width: 136px; height: 136px; opacity: .72; }
  .ks-orbit::before { inset: 21px; }
  .ks-orbit--hero { --orbit-radius: 114px; width: 230px; height: 230px; right: -105px; top: 92px; }
  .ks-orbit--hero::before { inset: 38px; }
  .showcase__stage, .int-hero, .sec2, .ai, .papp2, .cta-band { border-radius: 24px 24px 9px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-orbit i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5.2 — proprietary icon family + ecosystem assembly scene
   ═══════════════════════════════════════════════════════════════════════════ */

.ks-glyph {
  display: grid; place-items: center; flex: 0 0 auto; color: var(--glyph-color,var(--blue));
  border: 1px solid color-mix(in srgb,currentColor 18%,transparent); background: color-mix(in srgb,currentColor 7%,#fff);
}
.ks-glyph svg { width: 68%; height: 68%; overflow: visible; }
.ks-glyph svg * { stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }

.eco-flow {
  position: relative; height: 360px; margin: 0 0 34px; overflow: hidden;
  border: 1px solid #d8e5f1; border-radius: 28px 28px 9px 28px;
  background:
    radial-gradient(circle at 50% 50%,rgba(20,110,190,.12),transparent 24%),
    linear-gradient(135deg,#f8fbfe,#f1f7fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.eco-flow::after {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: radial-gradient(rgba(20,110,190,.17) .8px,transparent .8px);
  background-size: 20px 20px; mask-image: radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.eco-flow__connections { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.eco-flow__connections path {
  fill: none; stroke: #8db9dd; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s var(--ease-out) .28s;
}
.eco-flow__core {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 154px; height: 154px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: translate(-50%,-50%) scale(.72); opacity: 0;
  border: 1px solid #c7dced; border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: 0 24px 50px -32px rgba(20,110,190,.6), inset 0 0 0 8px rgba(20,110,190,.035);
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-out);
}
.eco-flow__core img { width: 48px; height: 49px; margin-bottom: 8px; }
.eco-flow__core strong { color: var(--ink); font-size: .9rem; letter-spacing: -.02em; }
.eco-flow__core > span:last-child { margin-top: 2px; color: #7b8797; font-size: .65rem; }
.eco-flow__pulse { position: absolute; inset: -1px; border: 1px solid rgba(20,110,190,.2); border-radius: 50%; opacity: 0; }

.eco-flow__node {
  position: absolute; z-index: 3; width: 238px; min-height: 82px; display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; opacity: 0; border: 1px solid #d6e2ed; border-radius: 18px 18px 7px 18px;
  background: rgba(255,255,255,.92); box-shadow: 0 18px 38px -32px rgba(16,24,40,.55);
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-out);
}
.eco-flow__node .ks-glyph { width: 54px; height: 54px; border-radius: 17px 17px 6px 17px; }
.eco-flow__node b { display: block; color: var(--ink); font-size: .9rem; letter-spacing: .04em; }
.eco-flow__node small { display: block; margin-top: 3px; color: #667085; font-size: .7rem; line-height: 1.3; }
.eco-flow__node--mis { --glyph-color:#146ebe; left: 7%; top: 51px; transform: translate(80px,45px) scale(.86); }
.eco-flow__node--crm { --glyph-color:#168a5b; right: 7%; top: 51px; transform: translate(-80px,45px) scale(.86); }
.eco-flow__node--erp { --glyph-color:#c47718; right: 7%; bottom: 51px; transform: translate(-80px,-45px) scale(.86); }

.eco-flow.is-assembled .eco-flow__core { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.eco-flow.is-assembled .eco-flow__connections path { stroke-dashoffset: 0; }
.eco-flow.is-assembled .eco-flow__node { opacity: 1; transform: none; }
.eco-flow.is-assembled .eco-flow__node--mis { transition-delay: .45s; }
.eco-flow.is-assembled .eco-flow__node--crm { transition-delay: .62s; }
.eco-flow.is-assembled .eco-flow__node--erp { transition-delay: .79s; }
.eco-flow.is-assembled .eco-flow__pulse { animation: eco-core-pulse 2.4s var(--ease-out) 1s 2; }
@keyframes eco-core-pulse {
  0% { opacity: .65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.42); }
}

.eco2__item { position: relative; }
.eco2__mini-glyph {
  --glyph-color:var(--blue); position: absolute; right: 24px; top: 24px; width: 54px; height: 54px;
  border-radius: 17px 17px 6px 17px;
}
.eco2__item:nth-child(2) .eco2__mini-glyph { --glyph-color:#168a5b; }
.eco2__item:nth-child(3) .eco2__mini-glyph { --glyph-color:#c47718; }

/* Carry the same modular housing through the rest of the product icons */
.bento2-ico, .role2__ico, .sec2__ico { position: relative; overflow: visible; border-radius: 14px 14px 5px 14px; }
.bento2-ico::after, .role2__ico::after, .sec2__ico::after {
  content: "+"; position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px;
  display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%;
  background: var(--acc,var(--blue)); color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
}
.sec2__ico::after { background: var(--green); }

@media (max-width: 900px) {
  .eco-flow { height: 540px; }
  .eco-flow::before {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 148px; bottom: 44px;
    border-left: 1px dashed #8db9dd;
  }
  .eco-flow__connections { display: none; }
  .eco-flow__core { top: 94px; width: 132px; height: 132px; }
  .eco-flow__core img { width: 40px; height: 41px; }
  .eco-flow__node { left: 50%; right: auto; width: min(300px,calc(100% - 40px)); transform: translate(-50%,-18px) scale(.92); }
  .eco-flow__node--mis { top: 185px; }
  .eco-flow__node--crm { top: 294px; }
  .eco-flow__node--erp { top: 403px; bottom: auto; }
  .eco-flow.is-assembled .eco-flow__node { transform: translateX(-50%); }
}

@media (max-width: 500px) {
  .eco-flow { height: 520px; margin-inline: -2px; }
  .eco-flow__node { min-height: 74px; padding: 10px 13px; }
  .eco-flow__node .ks-glyph { width: 48px; height: 48px; }
  .eco-flow__node--mis { top: 177px; }
  .eco-flow__node--crm { top: 278px; }
  .eco-flow__node--erp { top: 379px; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-flow__connections path { stroke-dashoffset: 0; transition: none; }
  .eco-flow__core, .eco-flow__node { opacity: 1; transition: none; }
  .eco-flow__core { transform: translate(-50%,-50%) scale(1); }
  .eco-flow__node--mis, .eco-flow__node--crm, .eco-flow__node--erp { transform: none; }
  .eco-flow__pulse { display: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .eco-flow__node--mis, .eco-flow__node--crm, .eco-flow__node--erp { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5.3 — reading rhythm, clear ecosystem, light patient-app screens
   ═══════════════════════════════════════════════════════════════════════════ */

/* Comfortable typography for a long-form product page */
body { font-size: 16px; line-height: 1.62; letter-spacing: -.006em; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
.h-section {
  font-size: clamp(2rem,3.55vw,3.2rem); line-height: 1.04; letter-spacing: -.047em;
}
.lead { font-size: clamp(1.03rem,1.28vw,1.17rem); line-height: 1.65; letter-spacing: -.012em; }
.hero__title { line-height: .94; letter-spacing: -.061em; }
.hero__sub { line-height: 1.62; }
.section-head { max-width: 790px; }
.pane h3 { line-height: 1.08; }
.pane p, .bento2 p, .role2__li, .plan__li, .faq__a { line-height: 1.58; }
.bento2 p { font-size: .91rem; }
.story__quote { line-height: 1.62; }
.faq summary { line-height: 1.35; }

/* Ecosystem: direct message first, product structure second */
.eco2__head {
  display: grid; grid-template-columns: 1fr;
  gap: 24px; align-items: start; margin-bottom: 46px;
}
.eco2__heading { min-width: 0; }
.eco2__eyebrow { display: block; margin-bottom: 20px; padding: 0; }
.eco2__title { max-width: 940px; font-size: clamp(2.45rem,4.45vw,3.9rem); line-height: 1.01; letter-spacing: -.055em; }
.eco2__title em { display: inline; }
.eco2__intro { max-width: 830px; padding-bottom: 4px; }
.eco2__sub { max-width: 760px; padding: 0; font-size: 1.04rem; line-height: 1.65; }
.eco2__promise { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.eco2__promise span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 11px;
  border: 1px solid #d4e3f0; border-radius: 999px; background: #f8fbfe;
  color: #435268; font-size: .75rem; font-weight: 650;
}
.eco2__promise span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background:
    linear-gradient(135deg,transparent 42%,#fff 43% 52%,transparent 53%) 3px 1px/7px 8px no-repeat,
    var(--green);
}
.eco2__grid { margin-top: 0; }
.eco2__item, .eco2__item + .eco2__item { min-height: 292px; }
.eco2__tag { margin-top: 62px; }

/* Proper store badges */
.papp2__stores { gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px; width: 174px; height: 56px; padding: 7px 13px;
  border: 1px solid #080b10; border-radius: 10px; background: #080b10; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 12px 20px -18px rgba(15,23,42,.9);
  transition: transform .3s var(--ease),background-color .2s var(--ease);
}
.store-badge:hover { transform: translateY(-2px); background: #172033; }
.store-badge > svg { width: 28px; height: 32px; flex: 0 0 auto; }
.store-badge__play { width: 27px !important; }
.store-badge > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.store-badge small { margin-bottom: 4px; color: #fff; font-size: .59rem; font-weight: 500; letter-spacing: .01em; }
.store-badge strong { color: #fff; font-size: 1.06rem; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; }

/* Five supplied light screens, presented as one product family */
.papp2__visual { min-width: 0; }
.papp2__scene { max-width: 520px; aspect-ratio: 1/1.36; }
.app-fan { position: absolute; inset: 2% 0 0; z-index: 2; }
.app-shot {
  position: absolute; top: 0; width: 43%; aspect-ratio: 945/2048; overflow: hidden;
  border: 6px solid #fff; border-radius: 30px; background: #fff;
  box-shadow: 0 28px 56px -30px rgba(30,58,88,.45),0 0 0 1px rgba(41,72,105,.09);
  transform-origin: 50% 92%; transition: transform .6s var(--ease-out),filter .4s var(--ease);
}
.app-shot > span {
  position: absolute; z-index: 2; left: 50%; top: 7px; width: 42px; height: 5px;
  transform: translateX(-50%); border-radius: 99px; background: #d9e3ed;
}
.app-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.app-shot--1 { left: -4%; top: 13%; z-index: 1; transform: rotate(-9deg) scale(.86); filter: saturate(.88); }
.app-shot--2 { left: 10%; top: 6%; z-index: 2; transform: rotate(-5deg) scale(.93); }
.app-shot--3 { left: 28.5%; top: 0; z-index: 5; transform: scale(1); }
.app-shot--4 { right: 10%; top: 6%; z-index: 3; transform: rotate(5deg) scale(.93); }
.app-shot--5 { right: -4%; top: 13%; z-index: 1; transform: rotate(9deg) scale(.86); filter: saturate(.88); }
.app-fan:hover .app-shot--1 { transform: rotate(-11deg) translateX(-5px) scale(.86); }
.app-fan:hover .app-shot--2 { transform: rotate(-6deg) translateX(-3px) scale(.93); }
.app-fan:hover .app-shot--4 { transform: rotate(6deg) translateX(3px) scale(.93); }
.app-fan:hover .app-shot--5 { transform: rotate(11deg) translateX(5px) scale(.86); }
.pfc--results { display: none; }
.pfc--confirm { left: -5%; bottom: 14%; }
.pfc--bonus { right: -4%; bottom: 4%; }

@media (max-width: 900px) {
  .eco2__head { grid-template-columns: 1fr; gap: 24px; }
  .eco2__title { max-width: 660px; }
  .eco2__sub { max-width: 640px; }
  .papp2__scene { max-width: 430px; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .h-section { font-size: clamp(1.9rem,9.5vw,2.55rem); line-height: 1.05; }
  .hero__title { line-height: .96; }
  .eco2__title { font-size: clamp(2.25rem,11vw,3.15rem); }
  .eco2__promise { gap: 7px; }
  .eco2__promise span { font-size: .71rem; }
  .papp2__stores { justify-content: center; }
  .store-badge { width: 156px; height: 51px; padding-inline: 10px; }
  .store-badge strong { font-size: .94rem; }
  .store-badge > svg { width: 24px; height: 28px; }
  .papp2__scene { max-width: 350px; }
  .app-shot { border-width: 4px; border-radius: 22px; }
  .pfc--confirm { left: -2%; bottom: 11%; }
  .pfc--bonus { right: -2%; bottom: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shot { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5.4 — form feedback states + WCAG contrast pass on blue panels
   ═══════════════════════════════════════════════════════════════════════════ */

/* White-on-blue copy was ~4.2:1 at low alpha; lift to pass AA for body text */
.int-hero__sub { color: rgba(255,255,255,.93); }
.int-hero__more { color: rgba(255,255,255,.9); }
.cta-band p { color: rgba(255,255,255,.92); }
.cta-form__input::placeholder { color: rgba(255,255,255,.72); }

/* CTA form: inline error + success confirmation */
.cta-form__error {
  position: relative; margin: 12px auto 0; max-width: 520px;
  font-size: .86rem; font-weight: 600; color: #ffd9d9;
}
.cta-form.is-invalid .cta-form__input { border-color: #ffb4b4; background: rgba(255,180,180,.16); }
.cta-form__done {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  max-width: 520px; margin: 0 auto; padding: 18px 22px; text-align: left;
  border-radius: 18px 18px 7px 18px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  color: #fff; font-size: .95rem; line-height: 1.5;
}
.cta-form__done[hidden] { display: none; }
.cta-form__done svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; padding: 3px;
  border-radius: 50%; color: #0b4d88; background: #fff; box-sizing: border-box;
}
.cta-form__done b { font-weight: 700; }

/* Stories: honesty note under the carousel dots */
.stories__note {
  max-width: 640px; margin: 22px auto 0; text-align: center;
  font-size: .82rem; line-height: 1.55; color: #5d6b80;
}

/* Pricing: featured card stays inside the grid frame (no top offset) */
.plan--featured, .plan--featured:hover { transform: none; }
/* Price qualifier on its own line — no mid-phrase wrap */
.plan__price small { display: block; margin-top: 4px; }
/* CTA pinned to the card bottom so all four buttons sit on one line */
.plan .btn { margin-top: auto; }
.plan__li:last-of-type { margin-bottom: 18px; }

/* Hero: real product screenshot inside the browser frame */
.app__shot { display: block; width: 100%; height: auto; }
.fc--notify { top: 27%; }

/* Smooth hand-off: tinted hero + trust bar dissolve into the white ecosystem */
#ecosystem { background: linear-gradient(180deg, #f5f7fb 0%, #fff 260px); }
.hero__caption {
  margin: 52px auto 0; max-width: 640px; text-align: center;
  font-size: .8rem; line-height: 1.5; color: #5d6b80;
}