/* ============================================================
   chart2chart — landing page
   Visual system derived from reference screenshots:
   white healthtech canvas · emerald-teal accent · rounded
   geometric type · soft mint glow · device mockups
   ============================================================ */

:root{
  /* tweakable */
  --accent:        #209F85;
  --accent-deep:   #17806B;
  --accent-tint:   #E6F4F0;
  --font-head:     'Lexend', system-ui, sans-serif;
  --radius-scale:  1;

  /* fixed palette */
  --ink:        #15211E;
  --ink-2:      #3B4844;
  --ink-soft:   #69756F;
  --line:       #E7ECEA;
  --line-soft:  #F0F4F2;
  --bg:         #FFFFFF;
  --bg-soft:    #F6FAF8;
  --warn:       #C9603A;

  --font-body:  'Figtree', system-ui, sans-serif;

  /* derived radii */
  --r-card: calc(22px * var(--radius-scale));
  --r-lg:   calc(30px * var(--radius-scale));
  --r-sm:   calc(13px * var(--radius-scale));
  --r-pill: 999px;

  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth;
  scrollbar-gutter:stable; /* keep the gutter reserved while a modal sets body overflow:hidden, so content doesn't shift */
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.08; letter-spacing:-0.02em; margin:0; color:var(--ink); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* accessibility: skip to content */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--accent); color:#fff; font-family:var(--font-head); font-weight:600;
  padding:10px 18px; border-radius:0 0 12px 12px; transition:top .2s ease;
}
.skip-link:focus{ top:0; outline:2px solid #fff; outline-offset:-4px; }
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:13px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-deep);
}
.lead{ color:var(--ink-2); font-size:clamp(17px,1.4vw,20px); text-wrap:pretty; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:16px;
  border-radius:var(--r-pill); padding:14px 26px; cursor:pointer;
  border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 12px 26px -12px var(--accent); }
.btn-primary:hover{ background:var(--accent-deep); box-shadow:0 16px 32px -12px var(--accent); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }

/* ============================================================ NAV */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.nav.scrolled{ border-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.logo{ font-family:var(--font-head); font-weight:700; font-size:25px; letter-spacing:-0.03em; color:var(--ink); }
.logo b{ color:var(--accent); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:16px; color:var(--ink-2); font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta{ display:flex; align-items:center; gap:14px;
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility .3s; }
.nav.show-cta .nav-cta{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
@media(prefers-reduced-motion:reduce){ .nav-cta{ transition:none; } }
.nav-burger{ display:none; width:42px; height:42px; border:0; background:transparent; color:var(--ink);
  cursor:pointer; border-radius:12px; align-items:center; justify-content:center; }
.nav-burger:hover{ background:var(--line-soft); }
.nav-burger .ic-close{ display:none; }
.nav.nav-open .nav-burger .ic-burger{ display:none; }
.nav.nav-open .nav-burger .ic-close{ display:block; }
@media(max-width:860px){
  .nav-burger{ display:inline-flex; }
  .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px var(--pad) 18px;
    box-shadow:0 24px 40px -28px rgba(17,40,34,.35);
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .28s;
  }
  .nav.nav-open .nav-links{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav-links a{
    padding:10px 0; font-size:17px; width:100%;
    opacity:0; transform:translateY(-6px);
    transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
  }
  .nav.nav-open .nav-links a{ opacity:1; transform:none; }
  .nav.nav-open .nav-links a:nth-child(1){ transition-delay:.05s; }
  .nav.nav-open .nav-links a:nth-child(2){ transition-delay:.09s; }
  .nav.nav-open .nav-links a:nth-child(3){ transition-delay:.13s; }
  .nav.nav-open .nav-links a:nth-child(4){ transition-delay:.17s; }
  .nav.nav-open .nav-links a:nth-child(5){ transition-delay:.21s; }
  @media(prefers-reduced-motion:reduce){
    .nav-links, .nav-links a{ transition:none; }
  }
}
@media(max-width:660px){
  .nav-cta .btn{ padding:9px 16px; font-size:14px; }
}
@media(max-width:560px){
  .nav-inner{ height:66px; }
  .nav-cta .btn{ padding:8px 14px; }
}
@media(max-width:380px){
  .logo{ font-size:21px; }
  .nav-right{ gap:6px; }
  .nav-cta .btn{ padding:8px 10px; font-size:13px; }
}

/* ============================================================ HERO */
.hero{ position:relative; padding-top:clamp(40px,6vw,84px); padding-bottom:clamp(64px,8vw,120px); overflow:hidden; }
.hero::after{ /* mint glow */
  content:""; position:absolute; left:50%; top:46%; transform:translateX(-50%);
  width:min(1100px,120vw); height:760px;
  background:radial-gradient(ellipse at center, var(--accent-tint) 0%, rgba(231,245,240,.4) 38%, transparent 70%);
  z-index:-1; pointer-events:none;
}
.hero-head{ text-align:center; max-width:1200px; margin:0 auto; }
.hero h1{ font-size:clamp(38px,5.4vw,66px); margin:18px 0 0; text-wrap:balance; }
.hero .lead{ max-width:620px; margin:22px auto 0; }
.trust{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:34px; }
.avatars{ display:flex; }
.avatars .av{ width:46px; height:46px; border-radius:50%; border:3px solid #fff; margin-left:-14px; object-fit:cover; background:var(--accent-tint); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.avatars .av:first-child{ margin-left:0; }
.trust b{ font-family:var(--font-head); font-weight:600; }
.trust span{ color:var(--ink-soft); }
@media(max-width:520px){
  .trust{ flex-direction:column; gap:12px; text-align:center; }
  body.hero-split .trust{ align-items:center; }
}

/* split layout variant */
body.hero-split .hero-head{ text-align:left; max-width:none; margin:0;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
body.hero-split .hero h1{ font-size:clamp(38px,4.8vw,62px); }
body.hero-split .hero .lead{ margin:22px 0 0; }
body.hero-split .trust{ justify-content:flex-start; }
body.hero-split .hero-actions{ justify-content:flex-start; display:flex; gap:14px; margin-top:30px; }
body:not(.hero-split) .hero-actions{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
@media(max-width:880px){ body.hero-split .hero-head{ grid-template-columns:1fr; } }
@media(max-width:520px){
  .hero-actions{ flex-direction:column; align-items:center; }
  .hero-actions .btn{ width:min(100%,340px); justify-content:center; }
}

/* device showcase row */
.showcase{ margin-top:clamp(40px,5vw,68px); display:flex; gap:22px; justify-content:center; align-items:flex-end; flex-wrap:nowrap; overflow:visible; }
body.hero-split .showcase{ margin-top:0; }
.showcase .phone:nth-child(odd){ transform:translateY(-14px); }
@media(max-width:980px){ .showcase{ flex-wrap:wrap; } .showcase .phone:nth-child(odd){ transform:none; } }

/* ============================================================ PHONE MOCKUP */
.phone{
  width:262px; flex:0 0 auto; background:#fff; border-radius:38px;
  border:9px solid #11201C; padding:0; overflow:hidden;
  box-shadow:0 40px 70px -36px rgba(17,40,34,.5), 0 8px 20px -10px rgba(17,40,34,.18);
}
.phone-screen{ background:#fff; height:520px; display:flex; flex-direction:column; position:relative; }
.phone-shot{ display:block; width:100%; height:auto; vertical-align:top; }
.phone-video{ display:block; width:100%; height:527px; border:0; background:#000; vertical-align:top; }
.phone-video-wrap{ position:relative; width:100%; height:527px; overflow:hidden; background:#000; cursor:pointer; }
.phone-video-wrap .phone-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phone-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:0; background:transparent; padding:0; cursor:pointer; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); transition:transform .18s ease; }
.yt-play .yt-bg{ transition:fill .18s ease; }
.phone-video-wrap:hover .yt-play{ transform:translate(-50%,-50%) scale(1.06); }
.phone-video-wrap:hover .yt-play .yt-bg{ fill:#f00; }
.statusbar{ display:flex; justify-content:space-between; align-items:center; padding:13px 20px 6px; font-size:12px; font-weight:700; font-family:var(--font-head); color:var(--ink); }
.statusbar .sb-icons{ display:flex; gap:5px; align-items:center; opacity:.85; }
.statusbar .sb-icons svg{ width:15px; height:15px; }
.scr-body{ flex:1; overflow:hidden; padding:4px 18px 16px; }
.scr-top{ display:flex; align-items:center; gap:12px; padding:6px 18px 10px; }
.scr-top .back{ width:26px; height:26px; display:grid; place-items:center; color:var(--ink-2); }
.scr-title{ font-family:var(--font-head); font-weight:600; font-size:16px; }

/* generic mockup bits */
.m-avatar{ width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#cfe9df,#a7d8c6); flex:0 0 auto; }
.m-circle{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
.m-row{ display:flex; align-items:center; gap:12px; }
.m-line{ height:9px; border-radius:6px; background:var(--line); }
.m-pillbtn{ background:var(--accent); color:#fff; font-family:var(--font-head); font-weight:600; font-size:11px; padding:7px 14px; border-radius:9px; display:inline-block; }
.m-name{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--ink); }
.m-sub{ font-size:11px; color:var(--ink-soft); }
.m-h{ font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--ink); margin:12px 0 5px; }
.m-txt{ font-size:11px; color:var(--ink-2); line-height:1.5; }
.m-check{ font-size:11px; color:var(--ink-2); display:flex; align-items:center; gap:7px; margin:4px 0; }
.m-check svg{ width:13px; height:13px; color:var(--accent); flex:0 0 auto; }
.m-toggle{ width:34px; height:20px; border-radius:999px; background:var(--accent); position:relative; flex:0 0 auto; }
.m-toggle.off{ background:var(--line); }
.m-toggle::after{ content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:3px; right:3px; }
.m-toggle.off::after{ right:auto; left:3px; }
.m-listrow{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:12px; color:var(--ink-2); }
.m-news{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:center; }
.m-thumb{ width:46px; height:46px; border-radius:11px; background:linear-gradient(135deg,#dfeee8,#c4e1d6); flex:0 0 auto; }
.m-fab{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; width:50px; height:50px; border-radius:50%; background:var(--accent); display:grid; place-items:center; box-shadow:0 10px 22px -8px var(--accent); color:#fff; }
.m-nav{ position:absolute; left:0; right:0; bottom:0; height:58px; background:#fff; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-around; color:var(--ink-soft); }
.m-nav svg{ width:20px; height:20px; }
/* scheduling */
.m-week{ display:flex; justify-content:space-between; margin:8px 0 10px; }
.m-day{ text-align:center; font-size:11px; color:var(--ink-soft); width:28px; }
.m-day b{ display:block; font-family:var(--font-head); font-size:13px; color:var(--ink-2); margin-top:3px; }
.m-day.on b{ background:var(--accent); color:#fff; border-radius:8px; padding:3px 0; }
.m-slot{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.m-slot .t{ font-family:var(--font-head); font-weight:600; font-size:12px; color:var(--ink); width:38px; flex:0 0 auto; }
.m-doc{ flex:1; }
.m-choose{ border:1.4px solid var(--accent); color:var(--accent-deep); font-family:var(--font-head); font-weight:600; font-size:10px; padding:5px 0; border-radius:8px; text-align:center; margin-top:5px; }

/* ============================================================ SECTION SHELL */
.section{ padding:clamp(70px,9vw,128px) 0; }
.section.soft{ background:var(--bg-soft); }
.divider{ border:0; height:1px; background:var(--line); margin:0; }
.section.accent-bg{
  position:relative; overflow:hidden; overflow:clip; isolation:isolate; /* clip (not hidden) keeps position:sticky working inside */
  background:
    radial-gradient(115% 85% at 50% 130%, color-mix(in oklab, var(--accent) 80%, white) 0%, transparent 55%),
    linear-gradient(180deg, var(--accent-deep) 0%, var(--accent) 100%);
}
.section.accent-bg > .wrap{ position:relative; z-index:2; }
.section.accent-bg::before,
.section.accent-bg::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none; z-index:1;
}
.section.accent-bg::before{
  width:560px; height:560px; bottom:-300px; left:50%; margin-left:-280px;
  background:radial-gradient(circle, color-mix(in oklab, var(--accent) 70%, white), transparent 70%);
  opacity:.55;
  animation:c2c-drift-a 18s ease-in-out infinite;
}
.section.accent-bg::after{
  width:480px; height:480px; bottom:-250px; left:50%; margin-left:-240px;
  background:radial-gradient(circle, color-mix(in oklab, var(--accent) 76%, white) 0%, transparent 68%);
  opacity:.3;
  animation:c2c-drift-b 24s ease-in-out infinite;
}
@keyframes c2c-drift-a{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(0,-40px) scale(1.08); } }
@keyframes c2c-drift-b{ 0%,100%{ transform:translate(-40px,0) scale(1); } 50%{ transform:translate(40px,-30px) scale(1.1); } }
@media(prefers-reduced-motion:reduce){
  .section.accent-bg::before,.section.accent-bg::after{ animation:none; }
}
.section.accent-bg .eyebrow{ color:rgba(255,255,255,.72); }
.section.accent-bg .sec-head h2{ color:#fff; }
.section.accent-bg .sec-head .lead{ color:rgba(255,255,255,.82); }
.section.accent-bg .finalcta .lead{ color:rgba(255,255,255,.82); }
.section.accent-bg .finalcta h2{ color:#fff; }
.section.accent-bg .btn-primary{ background:#fff; color:var(--ink); box-shadow:0 14px 30px -14px rgba(0,0,0,.45); }
.section.accent-bg .btn-primary:hover{ background:#eafaf4; }
.sec-head{ max-width:680px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-head h2{ font-size:clamp(30px,3.8vw,48px); margin-top:14px; }
.sec-head .lead{ margin-top:18px; }

/* ============================================================ JOURNEY */
.journey{ display:grid; gap:clamp(48px,7vw,104px); margin-top:clamp(54px,6vw,86px); }
.step{ display:grid; grid-template-columns:1fr 300px; gap:clamp(36px,5vw,72px); align-items:center; }
.step:nth-child(even){ grid-template-columns:300px 1fr; }
.step:nth-child(even) .step-media{ order:-1; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:var(--accent-tint); color:var(--accent-deep); font-family:var(--font-head); font-weight:700; font-size:19px; }
.step h3{ font-size:clamp(24px,2.6vw,32px); margin:20px 0 0; }
.step p{ color:var(--ink-2); margin:14px 0 0; max-width:46ch; }
.step ul{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.step li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-2); font-size:16px; }
.step li svg{ width:21px; height:21px; color:var(--accent); flex:0 0 auto; margin-top:2px; }
.step-media{ display:flex; justify-content:center; }
@media(max-width:820px){
  .step,.step:nth-child(even){ grid-template-columns:1fr; gap:28px; }
  .step:nth-child(even) .step-media{ order:0; }
  .step-media .phone{ width:236px; }
}

/* ============================================================ METRICS */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.metric{ text-align:center; padding:14px; min-width:0; }
.metric .big{ display:flex; justify-content:center; align-items:baseline; white-space:nowrap; font-family:var(--font-head); font-weight:700; font-size:clamp(38px,4.6vw,58px); color:var(--ink); letter-spacing:-0.03em; line-height:1; }
.metric .big .num{ font-variant-numeric:tabular-nums; }
.metric .lab{ color:var(--ink-soft); margin-top:12px; font-size:15px; }
@media(max-width:900px){ .metrics{ grid-template-columns:repeat(2,1fr); gap:36px 16px; } }

/* ============================================================ PILLARS */
.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:calc(20px * var(--radius-scale));
  padding:24px 22px 26px; display:flex; flex-direction:column; align-items:flex-start;
  box-shadow:0 1px 2px rgba(17,40,34,.04); transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1), border-color .6s cubic-bezier(.16,1,.3,1);
}
.pillar:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 22px 40px -24px rgba(17,40,34,.28); }
.pill-ic{
  width:48px; height:48px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
  background:var(--accent-tint); color:var(--accent-deep); margin-bottom:16px;
}
.pill-ic svg{ width:24px; height:24px; }
.pill-t{ font-family:var(--font-head); font-weight:600; font-size:19px; letter-spacing:-0.02em; color:var(--ink); margin:0; line-height:1.2; }
.pill-d{ color:var(--ink-2); margin:9px 0 0; font-size:14.5px; line-height:1.5; }
@media(max-width:1000px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .pillars{ grid-template-columns:1fr; } }

/* ============================================================ TESTIMONIALS */
.quotes{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; margin-top:clamp(40px,5vw,64px); }
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; }
.quote.feature{ background:var(--ink); color:#fff; border-color:var(--ink); }
.quote.feature .q-text{ color:#fff; }
.quote .q-text{ font-family:var(--font-head); font-weight:500; font-size:clamp(19px,1.9vw,26px); line-height:1.4; letter-spacing:-0.01em; color:var(--ink); }
.quote .q-foot{ margin-top:auto; padding-top:28px; display:flex; align-items:center; gap:14px; }
.quote .q-av{ width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#cfe9df,#a7d8c6); flex:0 0 auto; }
.quote.feature .q-av{ background:linear-gradient(135deg,#1f8e6e,#34b894); }
.quote .q-name{ font-family:var(--font-head); font-weight:600; font-size:16px; }
.quote .q-role{ font-size:14px; color:var(--ink-soft); }
.quote.feature .q-role{ color:rgba(255,255,255,.6); }
.q-stars{ display:flex; gap:3px; margin-bottom:18px; color:var(--accent); }
.q-stars svg{ width:18px; height:18px; }
@media(max-width:760px){ .quotes{ grid-template-columns:1fr; } }

/* ============================================================ TEAM */
.team{ display:grid; grid-template-columns:repeat(3,minmax(0,240px)); justify-content:center; gap:clamp(24px,4vw,48px); margin-top:clamp(40px,5vw,64px); }
.member{ text-align:center; margin:0; }
.member figcaption{ margin:0; }
@media(max-width:860px){ .team{ grid-template-columns:repeat(2,minmax(0,240px)); } }
@media(max-width:560px){ .team{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.member .m-photo{ aspect-ratio:4/5; border-radius:var(--r-card); background:linear-gradient(150deg,#e3f1eb,#c2ded2); overflow:hidden; }
.member .m-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.member .m-pname{ font-family:var(--font-head); font-weight:600; font-size:18px; margin-top:16px; }
.member .m-prole{ color:var(--ink-soft); font-size:14px; margin-top:3px; }
.member .m-desc{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin-top:10px; }
@media(max-width:520px){ .member .m-pname{ font-size:15px; margin-top:12px; } }
@media(max-width:360px){ .member .m-pname{ font-size:13.5px; } }

/* ============================================================ ROADMAP */
.roadmap{ position:relative; margin-top:clamp(44px,5vw,72px); display:grid; gap:0; }
.road-line{ position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:var(--line); }
.milestone{ position:relative; padding:0 0 40px 64px; }
.milestone:last-child{ padding-bottom:0; }
.milestone .dot{ position:absolute; left:14px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--accent); }
.milestone.done .dot{ background:var(--accent); }
.milestone .ms-when{ font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--accent-deep); letter-spacing:.04em; text-transform:uppercase; }
.milestone .ms-title{ font-family:var(--font-head); font-weight:600; font-size:20px; margin:6px 0 0; }
.milestone .ms-desc{ color:var(--ink-2); margin-top:8px; max-width:60ch; }

/* ============================================================ INVESTOR (quiet teal) */
.investor{ background:linear-gradient(180deg,#0E2C26 0%, #103a31 100%); color:#fff; border-radius:var(--r-lg); padding:clamp(40px,5vw,72px); }
.investor .eyebrow{ color:#8fe0c8; }
.investor h2{ color:#fff; font-size:clamp(28px,3.4vw,44px); margin-top:14px; max-width:18ch; }
.investor .lead{ color:rgba(255,255,255,.78); margin-top:18px; max-width:56ch; }
.inv-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; }
.inv-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inv-stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-card); padding:22px; }
.inv-stat .v{ font-family:var(--font-head); font-weight:700; font-size:clamp(26px,3vw,38px); }
.inv-stat .k{ color:rgba(255,255,255,.6); font-size:14px; margin-top:6px; }
.investor .btn-primary{ background:#fff; color:var(--ink); box-shadow:none; margin-top:30px; }
.investor .btn-primary:hover{ background:#eafaf4; }
@media(max-width:760px){ .inv-grid{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================ LEGAL / DOC PAGES */
.legal{ max-width:820px; margin:0 auto; padding:clamp(40px,6vw,84px) 0 clamp(56px,7vw,96px); }
.legal .eyebrow{ display:block; }
.legal h1{ font-size:clamp(32px,4.4vw,50px); margin-top:14px; }
.legal .updated{ color:var(--ink-soft); margin-top:14px; font-size:15px; }
.legal h2{ font-size:clamp(21px,2.4vw,28px); margin-top:clamp(36px,4vw,52px); }
.legal h3{ font-size:18px; margin-top:26px; }
.legal p, .legal li{ color:var(--ink-2); font-size:16.5px; line-height:1.7; }
.legal p{ margin:14px 0; }
.legal ul{ margin:14px 0; padding-left:22px; }
.legal li{ margin:7px 0; }
.legal a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--accent); }
.legal .note{ background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:16px 20px; font-size:15px; color:var(--ink-soft); }
.legal .note p{ margin:6px 0; color:var(--ink-soft); font-size:15px; }
.legal .toc{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 26px; margin:28px 0 8px; }
.legal .toc h2{ margin:0 0 10px; font-size:16px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.legal .toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; }
.legal .toc li{ margin:5px 0; font-size:15px; }
.legal address{ font-style:normal; }
@media(max-width:600px){ .legal .toc ol{ columns:1; } }

/* fullscreen bottom-sheet modal (Privacy Policy) */
.sheet{ position:fixed; inset:0; z-index:3000; visibility:hidden; }
.sheet.open{ visibility:visible; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(11,25,21,.55); opacity:0; transition:opacity .35s ease; }
.sheet.open .sheet-backdrop{ opacity:1; }
.sheet-panel{ position:absolute; inset:0;
  background:#fff; overflow:hidden;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); }
.sheet.open .sheet-panel{ transform:none; }
.sheet-handle{ display:none; }
.sheet-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(20px,5vw,48px); border-bottom:1px solid var(--line); }
.sheet-head-t{ font-family:var(--font-head); font-weight:600; font-size:clamp(17px,2.2vw,21px); color:var(--ink); letter-spacing:-0.01em; }
.sheet-close{ width:40px; height:40px; border:0; background:var(--bg-soft); color:var(--ink); border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease; flex:0 0 auto; }
.sheet-close:hover{ background:var(--line); }
.sheet-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-inline:clamp(20px,5vw,72px); overscroll-behavior:contain; }
.sheet-body .legal{ padding-top:clamp(20px,3vw,32px); }
.sheet-body .legal > .eyebrow, .sheet-body .legal > h1{ display:none; }
.sheet-loading{ padding:64px 0; text-align:center; color:var(--ink-soft); }
@media(prefers-reduced-motion:reduce){ .sheet-panel{ transition:none; } .sheet-backdrop{ transition:none; } }

/* cookie consent banner */
.cookie{ position:fixed; left:20px; bottom:20px; z-index:1500; width:min(400px, calc(100vw - 40px));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 24px 60px -24px rgba(17,40,34,.4); padding:22px 22px 20px;
  transform:translateY(24px); opacity:0; visibility:hidden;
  transition:opacity .35s ease, transform .35s ease, visibility .35s; }
.cookie.show{ opacity:1; transform:none; visibility:visible; }
.cookie-t{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cookie-t svg{ width:22px; height:22px; color:var(--accent); flex:0 0 auto; }
.cookie-t .cookie-h{ font-family:var(--font-head); font-weight:600; font-size:17px; color:var(--ink); margin:0; }
.cookie p{ margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--ink-2); }
.cookie p a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-actions .btn{ font-size:14px; padding:10px 18px; flex:1; justify-content:center; }
@media(max-width:520px){ .cookie{ left:12px; right:12px; bottom:12px; width:auto; } }
@media(prefers-reduced-motion:reduce){ .cookie{ transition:none; } }

/* ============================================================ FINAL CTA */
.finalcta{ text-align:center; }
.finalcta h2{ font-size:clamp(32px,4.4vw,56px); max-width:16ch; margin:14px auto 0; }
.finalcta .lead{ max-width:520px; margin:18px auto 0; }
.finalcta .row{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* ============================================================ FOOTER */
.footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:clamp(56px,6vw,84px) 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:40px; }
.footer .logo{ color:#fff; }
.footer .logo b{ color:var(--accent); }
.foot-about{ margin-top:18px; max-width:34ch; font-size:15px; color:rgba(255,255,255,.55); }
.foot-col h2{ color:#fff; font-size:15px; font-weight:600; font-family:var(--font-head); margin:0 0 16px; letter-spacing:-0.01em; }
.foot-col a{ display:block; padding:6px 0; font-size:15px; color:rgba(255,255,255,.62); }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.45); }
.foot-bottom a{ color:rgba(255,255,255,.6); }
.foot-bottom .hipaa{ display:inline-flex; align-items:center; gap:7px; }
@media(max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-grid > :first-child{ grid-column:1 / -1; }  /* logo + description full width */
}

/* ============================================================ PLACEHOLDER SYSTEM */
[data-ph]{ position:relative; }
.ph{
  display:inline-block; font-family:var(--font-body); font-weight:600;
  font-size:.82em; letter-spacing:.02em; color:var(--warn);
  background:rgba(201,96,58,.10); border:1px dashed rgba(201,96,58,.5);
  border-radius:7px; padding:1px 9px; vertical-align:baseline;
}
.ph-block{ display:block; }
body.hide-ph .ph{ color:var(--ink-soft); background:var(--line-soft); border-color:transparent; border-style:solid; }

/* ============================================================ HOME-SCREEN MOCKUP (hero) */
.hs{ background:var(--bg-soft); }
.hs-body{ flex:1; overflow:hidden; padding:2px 16px 0; }
.hs-header{ display:flex; align-items:center; gap:10px; padding:2px 2px 12px; }
.hs-av{ width:34px; height:34px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; }
.hs-hi{ font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--ink); flex:1; letter-spacing:-.02em; }
.hs-bell{ width:22px; height:22px; color:var(--ink); flex:0 0 auto; }
.hs-services{ display:flex; gap:9px; overflow:hidden; margin-bottom:12px; }
.hs-card{ position:relative; flex:0 0 auto; width:104px; height:116px; border-radius:16px; padding:2px; background:linear-gradient(160deg,#B5A0E8,#6FBFA0 55%,#2F9F76); box-shadow:0 6px 16px rgba(30,40,60,.1); }
.hs-card .in{ position:relative; width:100%; height:100%; border-radius:14px; overflow:hidden; background-size:cover; background-position:center 25%; }
.hs-card .in::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.52)); }
.hs-card .lbl{ position:absolute; left:10px; right:8px; bottom:9px; z-index:2; color:#fff; font-family:var(--font-head); font-weight:600; font-size:12px; line-height:1.15; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.hs-appt{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:9px 12px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:11px; }
.hs-appt .doc{ width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; }
.hs-appt .txt{ flex:1; min-width:0; }
.hs-appt .n{ font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--ink); }
.hs-appt .s{ font-size:11px; color:var(--accent); font-weight:600; margin-top:2px; }
.hs-appt .dots{ color:var(--ink-soft); font-weight:700; letter-spacing:1px; }
.hs-ai{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:9px; }
.hs-ai .tile{ position:absolute; right:14px; top:14px; width:46px; height:46px; border-radius:14px; background:var(--accent); display:grid; place-items:center; color:#fff; box-shadow:0 8px 16px -6px var(--accent); }
.hs-ai .tile svg{ width:22px; height:22px; }
.hs-ai h5{ font-family:var(--font-head); font-weight:600; font-size:15px; margin:0; color:var(--ink); }
.hs-ai p{ font-size:11px; color:var(--ink-soft); margin:5px 0 9px; max-width:66%; line-height:1.45; }
.hs-ai .cta{ background:var(--accent); color:#fff; text-align:center; font-family:var(--font-head); font-weight:600; font-size:12px; padding:9px; border-radius:12px; }
.hs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hs-mini{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.hs-mini .t{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; margin-bottom:15px; }
.hs-mini .t svg{ width:18px; height:18px; }
.hs-mini .t.green{ background:#17A085; }
.hs-mini .t.purple{ background:#7C4DF0; }
.hs-mini h6{ font-family:var(--font-head); font-weight:600; font-size:12.5px; margin:0; color:var(--ink); line-height:1.2; }
.hs-mini .s{ font-size:10.5px; color:var(--ink-soft); margin-top:3px; }
.hs-nav{ position:absolute; left:16px; right:16px; bottom:14px; height:52px; border-radius:26px; background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.75); box-shadow:0 12px 28px rgba(15,20,25,.16); display:flex; align-items:center; justify-content:space-around; color:var(--ink-soft); }
.hs-nav svg{ width:21px; height:21px; }
.hs-nav .on{ color:var(--accent); }
.hs-nav .fab{ width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -6px var(--accent); margin-top:-20px; }
.hs-nav .fab svg{ width:22px; height:22px; }

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

/* ============================================================ BOOK A DEMO DRAWER */
.demo-modal{ position:fixed; inset:0; z-index:2000; visibility:hidden; }
.demo-modal.open{ visibility:visible; }
.demo-backdrop{ position:absolute; inset:0; background:rgba(11,25,21,.55); opacity:0; transition:opacity .35s ease; }
.demo-modal.open .demo-backdrop{ opacity:1; }
.demo-panel{ position:absolute; top:0; right:0; height:100%; width:min(460px,96vw); background:#fff;
  box-shadow:-24px 0 70px -24px rgba(0,0,0,.45); transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.demo-modal.open .demo-panel{ transform:none; }
.demo-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.demo-head-t{ font-family:var(--font-head); font-weight:600; font-size:18px; color:var(--ink); }
.demo-close{ width:38px; height:38px; border:0; background:var(--bg-soft); color:var(--ink); border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease; }
.demo-close:hover{ background:var(--line); }
.demo-panel .calendly-inline-widget{ flex:1; height:auto !important; overflow:hidden; }
/* warm-up: while Calendly boots in the background the drawer must count as
   "visible in the viewport" (opacity:0, no offscreen transform) — otherwise
   Chrome throttles the hidden cross-origin iframe and the widget shows its
   spinner on first open */
.demo-modal.warm{ visibility:visible; opacity:0; pointer-events:none; }
.demo-modal.warm .demo-panel{ transform:none; transition:none; }
@media(prefers-reduced-motion:reduce){ .demo-panel{ transition:none; } .demo-backdrop{ transition:none; } }