/* ============================================================
   Carehubs Landing 2026 — indigo/navy/teal redesign
   Loaded AFTER css/landing.css — scoped to #ch2-root so legacy
   landing.css rules (navbar, hero, spec-tabs colors, etc.) never
   leak in, while .ch-dental/.ch-physio/.ch-nutrition mockup CSS
   from landing.css is reused as-is inside the specialty panels.
   ============================================================ */

#ch2-root {
  --c-primary: #3F3CCD;
  --c-primary-hover: #2E2BA0;
  --c-navy: #12122E;
  --c-navy-2: #0B0B24;
  --c-teal: #35E0E0;
  --c-bg: #F7F7FD;
  --c-bg-alt: #F1F1FC;
  --c-border: #E4E3F5;
  --c-border-strong: #D9D8ED;
  --c-text: #12122E;
  --c-text-2: #3B3A56;
  --c-text-3: #5B5A78;
  --c-text-4: #8A88AC;
  --c-white: #FFFFFF;
  --ch2-font: 'Poppins', 'Segoe UI', sans-serif;
  --ch2-font-ar: 'Baloo Bhaijaan 2', 'Poppins', 'Segoe UI', sans-serif;

  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--ch2-font);
  overflow-x: hidden;
  position: relative;
}

#ch2-root[dir="rtl"] { font-family: var(--ch2-font-ar); }
#ch2-root * { box-sizing: border-box; }
#ch2-root a { text-decoration: none; color: inherit; }
#ch2-root button { font-family: inherit; cursor: pointer; }
#ch2-root img, #ch2-root svg { display: block; }
#ch2-root ::selection { background: var(--c-primary); color: #fff; }

@keyframes ch2-fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ch2-pulseRing { 0% { box-shadow: 0 0 0 0 rgba(63,60,205,.32); } 70% { box-shadow: 0 0 0 20px rgba(63,60,205,0); } 100% { box-shadow: 0 0 0 0 rgba(63,60,205,0); } }
@keyframes ch2-wordFade { 0% { opacity: 0; transform: translateY(14px); } 4% { opacity: 1; transform: translateY(0); } 20% { opacity: 1; transform: translateY(0); } 24% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 0; } }
@keyframes ch2-drawLine { to { stroke-dashoffset: 0; } }
@keyframes ch2-loaderFill { from { width: 0%; } to { width: 100%; } }
@keyframes ch2-softPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Narrow circular drift for the hero floating icons — small amplitude, slow,
   each icon on its own path/phase so they read as independently "alive"
   rather than moving in lockstep. */
@keyframes ch2-orbit-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(5px, -7px); }
  50%  { transform: translate(0, -11px); }
  75%  { transform: translate(-5px, -5px); }
  100% { transform: translate(0, 0); }
}
@keyframes ch2-orbit-b {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, -4px); }
  50%  { transform: translate(-2px, -10px); }
  75%  { transform: translate(4px, -6px); }
  100% { transform: translate(0, 0); }
}
@keyframes ch2-orbit-c {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(4px, -6px); }
  50%  { transform: translate(6px, -1px); }
  75%  { transform: translate(1px, -7px); }
  100% { transform: translate(0, 0); }
}

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

/* ── Load-time intro ──────────────────────────────────────────
   The real page (nav, headline, hero, phone, everything) is ALWAYS fully
   rendered and visible from first paint — nothing in the real layout is
   ever hidden, collapsed, or waiting on JS. An earlier version instead
   hid the nav/headline and held the hero at 100vh until a JS setTimeout
   removed a lock class; on a slow/contended real-world load that class
   never got removed in time and the page sat frozen — blank indigo,
   nothing rendered — for several seconds. That failure mode is no longer
   possible because the real layout doesn't depend on the intro at all.

   Two fixed layers sit on top of the already-rendered page, both driven
   ENTIRELY by CSS `animation` — no class toggle, no JS — so they always
   finish on their own fixed timer regardless of how long anything else on
   the page takes to load; that failure mode from the earlier JS-driven
   version is structurally impossible now.
     1. #ch2-intro-backdrop — solid WHITE, full-bleed, for the whole splash.
        This is what shows around the shrinking/sliding card instead of
        letting the real page peek through early, and it's what performs
        the actual "reveal" by fading out right at the end.
     2. #ch2-intro-card — the indigo "screen": starts full-bleed with the
        Carehubs wordmark + a tilted phone, shrinks into a centered rounded
        card (brand fades out here), then that card SLIDES from center
        screen to roughly where the real hero's phone sits while the phone
        turns upright, then both layers fade together to reveal the real
        (already fully settled) hero underneath.
   `prefers-reduced-motion` is handled by the existing blanket rule further
   up this file (collapses every animation here to effectively instant). */
#ch2-intro-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: #fff;
  pointer-events: none;
  animation: ch2-introBackdrop 4.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ch2-introBackdrop {
  0%   { opacity: 1; visibility: visible; }
  92%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
#ch2-intro-card {
  position: fixed; z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh; border-radius: 0;
  background: var(--c-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  overflow: hidden;
  pointer-events: none;
  animation: ch2-introCard 4.6s cubic-bezier(.16,1,.3,1) forwards;
}
.ch2-intro-card__brand {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .02em;
  animation: ch2-introBrand 4.6s ease forwards;
  /* .ch2-phone-tilt's 3D perspective/rotate creates its own stacking
     context, which was painting the phone over this sibling despite it
     coming first in the flex column — force the brand to the front. */
  position: relative; z-index: 2;
}
.ch2-intro-overlay__phone-wrap {
  flex: none;
  animation: ch2-introOverlayPhone 4.6s cubic-bezier(.16,1,.3,1) forwards;
  position: relative; z-index: 1;
}
/* Stages: 0–40% full-bleed hold · 40–62% shrink to a centered rounded card
   (brand fades out as this finishes) · 62–92% slide that card to the REAL
   hero phone's exact on-screen position while the phone turns upright ·
   92–100% fade, handing off to the real page. The 92%/100% target uses
   --intro-end-* custom properties, set by the inline script near the end
   of body from the real phone's measured getBoundingClientRect() — the
   hardcoded px/% fallbacks here only apply if that measurement never
   lands (JS disabled, throws, etc.), so the intro still completes
   correctly either way, just less precisely aimed in that fallback case. */
@keyframes ch2-introCard {
  0%   { top: 0;   left: 0;   width: 100vw; height: 100vh; border-radius: 0; visibility: visible; }
  40%  { top: 0;   left: 0;   width: 100vw; height: 100vh; border-radius: 0; }
  62%  { top: 20%; left: 34%; width: 340px; height: 420px; border-radius: 30px; opacity: 1; }
  70%  { top: 20%; left: 34%; width: 340px; height: 420px; border-radius: 30px; opacity: 1; }
  92%  {
    top: var(--intro-end-top, 18%); left: var(--intro-end-left, 62%);
    width: var(--intro-end-width, 270px); height: var(--intro-end-height, 400px);
    border-radius: 26px; opacity: 1;
  }
  100% {
    top: var(--intro-end-top, 18%); left: var(--intro-end-left, 62%);
    width: var(--intro-end-width, 270px); height: var(--intro-end-height, 400px);
    border-radius: 26px; opacity: 0; visibility: hidden;
  }
}
@keyframes ch2-introBrand {
  0%   { opacity: 0; transform: translateY(-8px); }
  10%  { opacity: 1; transform: translateY(0); }
  58%  { opacity: 1; transform: translateY(0); }
  66%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes ch2-introOverlayPhone {
  0%   { transform: perspective(1000px) rotateY(-20deg) rotateX(10deg) rotate(-6deg) scale(1.2); }
  40%  { transform: perspective(1000px) rotateY(-20deg) rotateX(10deg) rotate(-6deg) scale(1.2); }
  62%  { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotate(0deg) scale(1); }
  100% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotate(0deg) scale(1); }
}
@media (max-width: 700px) {
  @keyframes ch2-introCard {
    0%   { top: 0;   left: 0;   width: 100vw; height: 100vh; border-radius: 0; }
    40%  { top: 0;   left: 0;   width: 100vw; height: 100vh; border-radius: 0; }
    62%  { top: 20%; left: 12%; width: 76vw;  height: 58vh;  border-radius: 24px; opacity: 1; }
    92%  { top: 20%; left: 12%; width: 76vw;  height: 58vh;  border-radius: 24px; opacity: 1; }
    100% { top: 20%; left: 12%; width: 76vw;  height: 58vh;  border-radius: 24px; opacity: 0; }
  }
}
.ch2-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}
.ch2-nav__inner {
  max-width: 1180px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; gap: 16px;
}
.ch2-nav__logo { font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--c-text); flex: none; }
.ch2-nav__links { display: flex; gap: 18px; margin-inline-end: auto; flex-wrap: nowrap; white-space: nowrap; }
.ch2-nav__links a { font-size: 14.5px; font-weight: 600; color: var(--c-text-2); transition: color .15s; }
.ch2-nav__links a:hover { color: var(--c-primary); }
.ch2-nav__icons { display: flex; gap: 6px; flex: none; }
.ch2-nav__icon {
  width: 34px; height: 34px; border-radius: 50%; background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.ch2-nav__icon:hover { background: var(--c-border); }
.ch2-nav__icon svg { width: 15px; height: 15px; stroke: var(--c-primary); }
.ch2-nav__lang {
  flex: none; font-size: 13px; font-weight: 600; background: var(--c-bg-alt);
  border: 1px solid var(--c-border); color: var(--c-text-2); padding: 7px 14px;
  border-radius: 999px; white-space: nowrap; transition: background .15s;
}
.ch2-nav__lang:hover { background: var(--c-border); }
.ch2-nav__cta {
  flex: none; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap; transition: background .15s;
}
.ch2-nav__cta:hover { background: var(--c-primary-hover); color: #fff; }

@media (max-width: 900px) {
  .ch2-nav__links, .ch2-nav__icons { display: none !important; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.ch2-hero {
  background: var(--c-primary); position: relative; overflow: hidden;
  min-height: 620px;
}
.ch2-hero__inner {
  max-width: 1180px; margin: 0 auto; padding: 76px 28px;
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
  min-height: inherit;
}
.ch2-hero__text {
  flex: 1 1 460px; min-width: 300px;
}
.ch2-hero__visual {
  flex: 1 1 300px; min-width: 260px; display: flex; justify-content: center;
}
.ch2-hero__eyebrow {
  display: inline-block; background: rgba(255,255,255,.15); color: #fff; font-weight: 600;
  font-size: 12.5px; letter-spacing: .04em; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 22px; white-space: nowrap; animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) both;
}
.ch2-hero__line1 {
  font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.15;
  animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .08s both;
}
.ch2-hero__wordbox {
  display: inline-block; border: 2px dashed rgba(255,255,255,.45); border-radius: 16px;
  padding: 10px 28px; margin: 10px 0 26px; animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .16s both;
}
/* min-width sized in `ch` (scales with font-size, same clamp as the words below)
   to comfortably fit the longest word in each language without ever clipping:
   EN longest is "simplified." (11 chars) → 12.5ch gives a safe margin;
   AR longest hero words are all 7 chars → 8ch is plenty without looking oversized. */
.ch2-hero__word-stack {
  position: relative; display: inline-block; width: max-content;
  min-height: 1.3em; min-width: 12.5ch; font-size: clamp(28px, 4vw, 42px); font-weight: 700;
}
#ch2-root[dir="rtl"] .ch2-hero__word-stack { min-width: 8ch; }
.ch2-hero__word {
  position: absolute; inset-inline-start: 0; top: 0; white-space: nowrap;
  font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--c-teal);
  opacity: 0; animation: ch2-wordFade 8s ease-in-out infinite both;
}
.ch2-hero__word:nth-child(1) { animation-delay: 0s; }
.ch2-hero__word:nth-child(2) { animation-delay: 2s; }
.ch2-hero__word:nth-child(3) { animation-delay: 4s; }
.ch2-hero__word:nth-child(4) { animation-delay: 6s; }
.ch2-hero__sub {
  font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 460px; margin: 0 0 32px;
  animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .24s both;
}
.ch2-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .32s both; }
.ch2-hero__cta-primary {
  background: #fff; color: var(--c-primary); font-weight: 700; font-size: 15px; padding: 14px 26px;
  border-radius: 12px; transition: background .15s;
}
.ch2-hero__cta-primary:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.ch2-hero__cta-secondary {
  background: transparent; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 26px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.4); transition: background .15s;
}
.ch2-hero__cta-secondary:hover { background: rgba(255,255,255,.1); }

.ch2-hero__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  animation: ch2-introStage 1.8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ch2-introStage {
  from { transform: scale(1.7); }
  to   { transform: scale(1); }
}

/* Scattered irregularly around the phone's edges (left/bottom-right/top-right,
   each overlapping the device silhouette slightly) rather than lined up above
   it. The outer `.ch2-float-icon` only positions the cluster point + runs the
   load-in fadeUp (opacity/translateY, settles to a fixed offset). The visible
   card — background, shadow, AND the icon glyph together — lives on the inner
   `__orbit` element, so the whole icon (bg + icon) drifts as one unit instead
   of the glyph wobbling inside a background that stays put. */
.ch2-float-icon {
  position: absolute; z-index: 3;
  animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .55s both;
}
.ch2-float-icon--a { top: 20%; inset-inline-start: -15%; }
.ch2-float-icon--b { top: 76%; inset-inline-end: -12%; }
.ch2-float-icon--c { top: -9%; inset-inline-end: 8%; }

.ch2-float-icon__orbit {
  width: 52px; height: 52px; border-radius: 15px;
  background: #fff; box-shadow: 0 16px 32px rgba(11,11,36,.22);
  display: flex; align-items: center; justify-content: center;
  animation: ch2-orbit-a 6.5s ease-in-out infinite;
}
.ch2-float-icon--a .ch2-float-icon__orbit { animation-name: ch2-orbit-a; animation-duration: 6.5s; animation-delay: -1.1s; }
.ch2-float-icon--b .ch2-float-icon__orbit { animation-name: ch2-orbit-b; animation-duration: 7.2s; animation-delay: -3.4s; }
.ch2-float-icon--c .ch2-float-icon__orbit { animation-name: ch2-orbit-c; animation-duration: 5.8s; animation-delay: -2.2s; }

/* Intro-only 3D tilt: phone reads as angled/"alive" while the full-bleed
   purple splash is up, then settles flat as it lands in the hero card. Kept
   on a wrapper so it never competes with .ch2-phone's own load-in animation
   for the `transform` property. */
.ch2-phone-tilt {
  animation: ch2-introTilt 1.8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ch2-introTilt {
  from { transform: perspective(1000px) rotateY(-18deg) rotateX(9deg) rotate(-5deg); }
  to   { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotate(0deg); }
}

.ch2-phone {
  position: relative; z-index: 2;
  background: var(--c-navy-2); border-radius: 36px; padding: 14px; width: 240px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35); animation: ch2-fadeUp .7s cubic-bezier(.16,1,.3,1) .4s both;
}
.ch2-phone__screen { background: linear-gradient(160deg, #1A1A44, #0B0B24); border-radius: 24px; padding: 18px; min-height: 340px; }
.ch2-phone__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ch2-phone__brand { font-size: 11px; font-weight: 700; color: #fff; }
.ch2-phone__label { font-size: 10.5px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.ch2-phone__value { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.ch2-phone__value span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); }
.ch2-phone__rows { display: flex; flex-direction: column; gap: 8px; }
.ch2-phone__row {
  background: rgba(255,255,255,.07); border-radius: 10px; padding: 9px 12px;
  display: flex; justify-content: space-between; font-size: 11px;
}
.ch2-phone__row span:first-child { color: rgba(255,255,255,.7); }
.ch2-phone__row span:last-child { font-weight: 700; color: #fff; }

/* ── Shared section chrome ───────────────────────────────── */
.ch2-section { max-width: 1180px; margin: 0 auto; padding: 88px 28px; }
.ch2-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.ch2-eyebrow {
  display: inline-block; background: var(--c-bg-alt); color: var(--c-primary); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.ch2-eyebrow--onwhite { background: #fff; }
.ch2-eyebrow--ondark { background: rgba(255,255,255,.1); color: #fff; }
.ch2-h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
.ch2-section-desc { color: var(--c-text-3); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* ── Product tour ─────────────────────────────────────────── */
.ch2-tour-nav {
  position: sticky; top: 65px; z-index: 5; background: #fff; padding: 20px 0 8px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ch2-tour-pill {
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text-3);
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; transition: all .15s; white-space: nowrap;
}
.ch2-tour-pill.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ch2-tour-step { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; padding: 56px 0; scroll-margin-top: 130px; }
.ch2-tour-step--reverse { flex-direction: row-reverse; }
.ch2-tour-step__text { flex: 1; min-width: 280px; }
.ch2-tour-step__num { font-size: 13px; font-weight: 800; color: var(--c-primary); margin-bottom: 10px; }
.ch2-tour-step__title { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.ch2-tour-step__desc { font-size: 15px; color: var(--c-text-3); line-height: 1.65; margin: 0 0 18px; max-width: 420px; }
.ch2-check-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ch2-check-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--c-text-2); line-height: 1.5; }
.ch2-check-list svg { flex: none; margin-top: 3px; width: 16px; height: 16px; stroke: var(--c-primary); }
/* Slides in from whichever outer edge it sits on — steps in normal order
   have the visual on the right (slides in from the right), `--reverse`
   steps have it on the left (slides in from the left) — rather than every
   card rising from the same direction regardless of layout. */
.ch2-tour-step__visual {
  flex: 1; min-width: 300px; display: flex; justify-content: center;
  opacity: 0; transform: translateX(70px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.ch2-tour-step--reverse .ch2-tour-step__visual { transform: translateX(-70px); }
.ch2-tour-step__visual.ch2-inview { opacity: 1; transform: translateX(0); }

.ch2-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 20px; padding: 22px;
  box-shadow: 0 30px 60px rgba(18,18,46,.1); max-width: 360px; width: 100%;
}
/* "Desktop app" framing — wider aspect + always-present browser-chrome dots,
   used for the admin-panel-style tour steps (scheduling/billing/labs/inventory)
   so they read clearly as desktop UI next to the phone-framed steps below. */
.ch2-card--desktop { max-width: 440px; }
.ch2-card__dots { display: flex; gap: 6px; margin-bottom: 16px; }
.ch2-card__dot { width: 10px; height: 10px; border-radius: 50%; }
.ch2-card__label { font-size: 11.5px; font-weight: 700; color: var(--c-text-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.ch2-card__row { display: flex; align-items: center; gap: 10px; background: var(--c-bg); border-radius: 12px; padding: 10px 12px; }
.ch2-card__rows { display: flex; flex-direction: column; gap: 10px; }
.ch2-card__time { font-size: 12.5px; font-weight: 700; color: var(--c-primary); min-width: 48px; }
.ch2-card__name { font-size: 13.5px; font-weight: 600; flex: 1; }
.ch2-card__tag { font-size: 11px; font-weight: 700; background: var(--c-bg-alt); color: var(--c-primary); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ch2-card__tag--ok { background: #E9FBF0; color: #1C9A56; }
.ch2-card__tag--warn { background: #FFF1E0; color: #B8730F; }
.ch2-card__tag--danger { background: #FFE6E6; color: #D14343; }
.ch2-card__between { display: flex; justify-content: space-between; align-items: center; }
.ch2-card__total { display: flex; justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--c-text); margin-top: 8px; }

/* "Phone app" framing — mobile-native chrome (notch + rounded body) used for
   the WhatsApp-chat and AI-assistant tour steps, which read as mobile UI. */
.ch2-chat-card {
  position: relative; background: var(--c-navy); border-radius: 28px;
  padding: 22px 14px 14px; max-width: 280px; width: 100%;
}
.ch2-chat-card::before {
  content: ''; position: absolute; top: 8px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 64px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.28);
}
[dir="rtl"] .ch2-chat-card::before { transform: translateX(50%); }
.ch2-chat-card__body { background: #E9EDF1; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.ch2-chat-card--ai .ch2-ai-card__title { color: var(--c-text); }
.ch2-bubble { border-radius: 14px; padding: 10px 14px; font-size: 13px; max-width: 82%; }
.ch2-bubble--in { align-self: flex-start; background: #fff; color: var(--c-navy); }
.ch2-bubble--out { align-self: flex-end; background: #25D366; color: #fff; }
.ch2-bubble--ai-in { align-self: flex-end; background: var(--c-bg-alt); color: var(--c-text-2); font-size: 12.5px; padding: 9px 13px; border-radius: 12px; }
.ch2-bubble--ai-out { align-self: flex-start; background: var(--c-primary); color: #fff; font-size: 12.5px; padding: 9px 13px; border-radius: 12px; }
.ch2-ai-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ch2-ai-card__icon { width: 24px; height: 24px; border-radius: 7px; background: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.ch2-ai-card__icon svg { width: 14px; height: 14px; stroke: #fff; }
.ch2-ai-card__title { font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.ch2-ai-card__msgs { display: flex; flex-direction: column; gap: 8px; }

/* ── Video ────────────────────────────────────────────────── */
.ch2-video {
  max-width: 880px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: var(--c-navy);
  aspect-ratio: 16/9; position: relative; cursor: pointer; border: 0; padding: 0; width: 100%; display: block;
}
.ch2-video__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.ch2-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch2-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--c-navy); z-index: 2; }
.ch2-video--playing .ch2-video__center, .ch2-video--playing .ch2-video__poster, .ch2-video--playing .ch2-video__caption { display: none; }
.ch2-video__playbtn {
  width: 80px; height: 80px; border-radius: 50%; background: #fff; display: flex; align-items: center;
  justify-content: center; animation: ch2-pulseRing 2.4s infinite;
}
.ch2-video__playbtn::after {
  content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--c-primary); margin-inline-start: 4px;
}
[dir="rtl"] .ch2-video__playbtn::after { border-width: 15px 24px 15px 0; border-color: transparent var(--c-primary) transparent transparent; margin-inline-start: 0; margin-inline-end: 4px; }
.ch2-video__playing { color: #fff; font-weight: 600; font-size: 15px; text-align: center; padding: 0 28px; }
.ch2-video__caption {
  position: absolute; bottom: 0; inset-inline: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
  padding: 18px 22px; color: #fff; font-size: 13px; font-weight: 600; text-align: start;
}

/* ── Specialties ──────────────────────────────────────────── */
.ch2-specialties-band { background: var(--c-bg); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.ch2-spec-layout { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.ch2-spec-tabs { display: flex; flex-direction: column; gap: 8px; min-width: 220px; flex: 0 0 auto; }
.ch2-spec-tab {
  text-align: start; background: #fff; border: 1px solid var(--c-border); color: var(--c-text-2);
  font-weight: 600; font-size: 14.5px; padding: 14px 18px; border-radius: 14px; transition: all .15s;
}
.ch2-spec-tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ch2-spec-panel-wrap {
  flex: 1; background: #fff; border: 1px solid var(--c-border); border-radius: 20px; padding: 36px; min-width: 280px;
}
.ch2-spec-panel { display: none; gap: 32px; flex-wrap: wrap; align-items: center; }
.ch2-spec-panel.is-active { display: flex; }
.ch2-spec-panel__text { flex: 1; min-width: 240px; }
.ch2-spec-panel__icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ch2-spec-panel__icon svg { width: 24px; height: 24px; stroke: var(--c-primary); }
.ch2-spec-panel__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.ch2-spec-panel__desc { font-size: 14.5px; color: var(--c-text-3); line-height: 1.65; margin: 0 0 18px; max-width: 440px; }
.ch2-spec-panel__visual {
  flex: 1 1 260px; background: var(--c-bg); border-radius: 16px; padding: 20px; min-width: 260px; max-width: 380px;
}
.ch2-spec-panel__visual-label { font-size: 11px; font-weight: 700; color: var(--c-text-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }

/* General Medicine panel — static 2x2 vitals mock (no live embeddable widget
   exists for this specialty yet), matching the visual language of the other
   specialty panels. */
.ch2-general-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch2-general-vitals__cell { background: #fff; border-radius: 12px; padding: 12px; text-align: center; }
.ch2-general-vitals__value { font-size: 17px; font-weight: 700; color: var(--c-text); }
.ch2-general-vitals__label { font-size: 11px; color: var(--c-text-4); }

@media (max-width: 760px) {
  .ch2-spec-tabs { flex-direction: row; overflow-x: auto; width: 100%; }
  .ch2-spec-tab { flex: none; }
}

/* ── Features grid ────────────────────────────────────────── */
.ch2-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ch2-feature-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 18px; padding: 24px 22px; }
.ch2-feature-card__icon {
  width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
}
.ch2-feature-card__icon svg { width: 20px; height: 20px; stroke: var(--c-primary); }
.ch2-feature-card__title { font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
.ch2-feature-card__desc { font-size: 13.5px; color: var(--c-text-3); line-height: 1.6; margin: 0; }

/* ── Quote / dark CTA ─────────────────────────────────────── */
.ch2-quote-band { background: var(--c-navy); position: relative; overflow: hidden; }
.ch2-quote-band__deco { position: absolute; opacity: .5; pointer-events: none; }
.ch2-quote { text-align: center; position: relative; z-index: 1; }
.ch2-quote__title { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; letter-spacing: -.01em; margin: 0 auto 16px; color: #fff; max-width: 680px; line-height: 1.25; }
.ch2-quote__desc { color: rgba(255,255,255,.68); font-size: 15.5px; line-height: 1.65; margin: 0 auto 36px; max-width: 520px; }
.ch2-quote__cta { display: inline-block; background: #fff; color: var(--c-navy); font-weight: 700; font-size: 15.5px; padding: 15px 30px; border-radius: 12px; transition: background .15s; }
.ch2-quote__cta:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.ch2-quote__steps { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.ch2-quote__step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px 26px; min-width: 180px; text-align: start; }
.ch2-quote__step-num { font-size: 22px; font-weight: 800; color: var(--c-teal); margin-bottom: 4px; }
.ch2-quote__step-label { font-size: 13.5px; color: rgba(255,255,255,.75); }

/* ── Demo form ────────────────────────────────────────────── */
.ch2-form-section { max-width: 720px; margin: 0 auto; padding: 88px 28px; }
.ch2-form-section-head { text-align: center; margin-bottom: 36px; }
.ch2-form {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 20px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.ch2-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-text-2); margin-bottom: 6px; }
.ch2-field input, .ch2-field select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--c-border-strong); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-family: inherit; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ch2-field input:focus, .ch2-field select:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(63,60,205,.14); outline: none;
}
.ch2-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ch2-field-row > .ch2-field { flex: 1; min-width: 180px; }
.ch2-phone-field { display: flex; gap: 8px; }
.ch2-phone-field select { width: 92px; flex: none; padding: 11px 6px; font-size: 13px; }
.ch2-phone-field input { flex: 1; min-width: 0; }
.ch2-form__submit {
  background: var(--c-primary); color: #fff; border: 0; font-weight: 700; font-size: 15px;
  padding: 14px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; margin-top: 6px; transition: background .15s;
}
.ch2-form__submit:hover { background: var(--c-primary-hover); }
.ch2-form__submit:disabled { opacity: .65; cursor: default; }
.ch2-form-error { color: #D14343; font-size: 12.5px; margin-top: -6px; display: none; }
.ch2-field.has-error input, .ch2-field.has-error select { border-color: #D14343; }
.ch2-field.has-error .ch2-form-error { display: block; }

.ch2-form-success {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 20px; padding: 44px 32px; text-align: center;
}
.ch2-form-success__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--c-bg-alt); display: flex;
  align-items: center; justify-content: center; margin: 0 auto 18px;
}
.ch2-form-success__icon svg { width: 26px; height: 26px; stroke: var(--c-primary); }
.ch2-form-success__title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.ch2-form-success__body { font-size: 14.5px; color: var(--c-text-3); margin: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.ch2-footer { background: var(--c-navy); color: #B4B2D6; }
.ch2-footer__inner { max-width: 1180px; margin: 0 auto; padding: 56px 28px 32px; display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
.ch2-footer__brand { max-width: 280px; }
.ch2-footer__logo { font-weight: 700; font-size: 19px; color: #fff; margin-bottom: 10px; }
.ch2-footer__blurb { font-size: 13.5px; line-height: 1.6; color: #8482AC; margin: 0 0 16px; }
.ch2-footer__social { display: flex; gap: 10px; }
.ch2-footer__social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex;
  align-items: center; justify-content: center; transition: background .15s;
  /* icons use fill="currentColor" (LinkedIn/Facebook/TikTok) or
     stroke="currentColor" (Instagram) — set color here so both resolve to
     solid white instead of inheriting the dim footer text color. */
  color: #fff;
}
.ch2-footer__social a:hover { background: rgba(255,255,255,.16); }
.ch2-footer__social svg { width: 16px; height: 16px; }
.ch2-footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.ch2-footer__col-title { font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 12px; }
.ch2-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.ch2-footer__links a { color: #8482AC; transition: color .15s; }
.ch2-footer__links a:hover { color: #fff; }
.ch2-footer__bottom { max-width: 1180px; margin: 0 auto; padding: 20px 28px 28px; border-top: 1px solid #22224A; font-size: 12.5px; color: #6B699C; }

/* ── Utility: intrinsic reveal for cards not covered above ── */
.ch2-inview-fade { animation: ch2-fadeUp 1s ease both; }

@media (max-width: 700px) {
  .ch2-section, .ch2-form-section { padding: 56px 20px; }
  .ch2-hero__inner { padding: 48px 20px; gap: 32px; }
  .ch2-quote__step { text-align: center; }
  .ch2-float-icon__orbit { width: 40px; height: 40px; border-radius: 12px; }
  .ch2-float-icon--a { top: 18%; inset-inline-start: -8%; }
  .ch2-float-icon--b { top: 78%; inset-inline-end: -6%; }
  .ch2-float-icon--c { top: -6%; inset-inline-end: 12%; }
}

/* ── Pricing (dark band, matches quote CTA) ── */
#ch2-root .ch2-pricing { text-align: center; position: relative; z-index: 1; }
#ch2-root .ch2-pricing__title { color: #fff; }
#ch2-root .ch2-pricing__desc { color: rgba(255,255,255,.68); font-size: 15.5px; line-height: 1.65; margin: 0; }
#ch2-root .ch2-pricing-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; align-items: stretch; text-align: start;
}
#ch2-root .ch2-price-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 24px 20px; display: flex; flex-direction: column; gap: 13px;
}
#ch2-root .ch2-price-card--featured { background: rgba(255,255,255,.1); border-color: var(--c-teal); box-shadow: 0 0 0 1px var(--c-teal); }
#ch2-root .ch2-price-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ch2-root .ch2-price-card__name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
#ch2-root .ch2-price-card__tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-teal); color: var(--c-navy); padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
#ch2-root .ch2-price-card__price { display: flex; align-items: baseline; gap: 6px; }
#ch2-root .ch2-price-card__amount { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
#ch2-root .ch2-price-card__unit { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }
#ch2-root .ch2-price-card__from { font-size: 11px; color: var(--c-teal); text-transform: uppercase; letter-spacing: .06em; margin-top: -6px; }
#ch2-root .ch2-price-card__who { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
#ch2-root .ch2-price-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
#ch2-root .ch2-price-card__list li { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.5; padding-inline-start: 22px; position: relative; }
#ch2-root .ch2-price-card__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 14px; height: 14px; border-radius: 999px;
  background: rgba(53,224,224,.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335E0E0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat: no-repeat; background-position: center;
}
#ch2-root .ch2-price-card__list li.is-plus { color: #fff; font-weight: 500; }
#ch2-root .ch2-price-card__cta {
  margin-top: auto; text-align: center; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2); color: #fff; background: transparent; transition: background .15s, color .15s;
}
#ch2-root .ch2-price-card__cta:hover { background: rgba(255,255,255,.1); }
#ch2-root .ch2-price-card--featured .ch2-price-card__cta { background: #fff; border-color: #fff; color: var(--c-navy); }
#ch2-root .ch2-price-card--featured .ch2-price-card__cta:hover { background: var(--c-bg-alt); }
#ch2-root .ch2-pricing-foot { position: relative; z-index: 1; text-align: center; margin-top: 28px; font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.6; }
#ch2-root .ch2-pricing-foot a { color: var(--c-teal); font-weight: 600; }
#ch2-root .ch2-pricing-foot a:hover { text-decoration: underline; }

@media (max-width: 1000px) { #ch2-root .ch2-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #ch2-root .ch2-pricing-grid { grid-template-columns: 1fr; } }