/* CoCarely hero stage: the three apps in one picture (doctor panel, care team laptop, patient phone)
   plus the mini app UI every mockup uses. Shared by index.html and suite.html.
   Everything inside the stage is sized in em; the stage font-size follows its own width (container query). */
  .cd-hero{text-align:center}  /* vertical padding: assets/spacing.css (--sec-y) */
  .cd-hero h1{font-size:76px;line-height:1;letter-spacing:-2.6px;font-weight:800;margin:0 0 18px}
  .cd-hero .cd-sub{font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:560px;margin:0 auto}
  .cd-pill{height:52px;padding:0 30px;border-radius:999px;font-size:15.5px}

  /* device stage: everything inside is sized in em, the stage font-size follows its own width */
  .cd-stage{position:relative;max-width:1040px;margin:0 auto;container-type:inline-size}
  .cd-stage-in{position:relative;font-size:1.25cqw;padding:0 9em 4.5em 7em}
  .dv-laptop{position:relative}
  .dv-screen{background:#1d1814;border-radius:1.4em 1.4em .5em .5em;padding:1em;box-shadow:0 4em 8em -4em color-mix(in srgb,var(--app) 55%,transparent)}
  .dv-screen,.dv-phone{outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}
  .dv-base{height:1.5em;margin:0 -5em;background:linear-gradient(#d9d2c7,#b9b0a2);border-radius:0 0 1.6em 1.6em;position:relative}
  .dv-base::after{content:'';position:absolute;left:50%;top:0;width:9em;height:.6em;transform:translateX(-50%);background:rgba(0,0,0,.14);border-radius:0 0 .7em .7em}
  .dv-phone{position:absolute;right:0;bottom:0;width:21em;background:#1d1814;border-radius:3em;padding:.8em;box-shadow:0 3em 6em -2.5em rgba(0,0,0,.45)}
  .dv-panel{position:absolute;left:0;bottom:0;width:23em;text-align:left}

  .dv-side.side{border:1px solid var(--line);border-radius:1.2em;box-shadow:0 3em 6em -2.5em rgba(0,0,0,.4);font-size:1.15em}
  .cd-legend{display:flex;justify-content:space-between;gap:1em;max-width:1040px;margin:1.6em auto 0;padding:0 2%}
  @media (max-width:600px){.cd-legend{padding:0;gap:6px}.cd-legend span{font-size:11px!important;padding:4px 9px!important}}
  .cd-legend span{font-size:13px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 10%,transparent);padding:6px 12px;border-radius:99px;white-space:nowrap}

  /* mini app UI (shared by every mockup) */
  .ui{background:var(--surface);color:var(--ink);text-align:left;overflow:hidden;font-size:1em}
  .ui-win{display:grid;grid-template-columns:12em 1fr;border-radius:.6em;height:36em}
  .ui-side{border-right:1px solid var(--line);padding:1em .8em;display:flex;flex-direction:column;gap:.25em;background:var(--surface-2)}
  .ui-brand{display:flex;align-items:center;gap:.6em;font-weight:800;font-size:1.05em;padding:0 .4em .9em}
  .ui-mark{width:1.9em;height:1.9em;flex:none}
  .ui-mark .cs-ico{border-radius:38%}
  .ui-nav{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:.7em;font-size:.95em;font-weight:600;color:var(--ink-soft)}
  .ui-nav.on{background:var(--app);color:#fff}
  .ui-nav svg{width:1.15em;height:1.15em;flex:none}
  .ui-nav .n{margin-left:auto;font-size:.85em;opacity:.8}
  .ui-main{padding:1.2em 1.4em;display:flex;flex-direction:column;gap:.9em;min-width:0}
  .ui-h{display:flex;align-items:center;justify-content:space-between;gap:1em}
  .ui-h b{font-size:1.35em;letter-spacing:-.02em}
  .ui-chip{font-size:.8em;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);padding:.35em .8em;border-radius:99em;white-space:nowrap}
  .ui-chip.solid{background:var(--app);color:#fff}
  .ui-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
  .ui-stat{border:1px solid var(--line);border-radius:.8em;padding:.7em .9em;background:var(--surface-2)}
  .ui-stat b{display:block;font-size:1.4em;color:var(--app);letter-spacing:-.02em}
  .ui-stat span{font-size:.8em;color:var(--ink-faint)}
  .ui-list{border:1px solid var(--line);border-radius:.8em;overflow:hidden}
  .ui-row{display:flex;align-items:center;gap:.8em;padding:.75em .9em;border-bottom:1px solid var(--line);font-size:.92em}
  .ui-row:last-child{border-bottom:0}
  .ui-av{width:2.1em;height:2.1em;border-radius:50%;background:color-mix(in srgb,var(--app) 14%,var(--surface));color:var(--app);display:grid;place-items:center;font-size:.8em;font-weight:800;flex:none}
  .ui-row .who{min-width:0;flex:1}
  .ui-row .who b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-row .who span{display:block;font-size:.85em;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-ai{display:flex;gap:.7em;align-items:flex-start;border:1px solid color-mix(in srgb,var(--app) 30%,var(--line));background:color-mix(in srgb,var(--app) 7%,var(--surface));border-radius:.9em;padding:.8em .9em;font-size:.9em;line-height:1.45}
  .ui-ai svg,.spark svg{width:1.2em;height:1.2em;color:var(--app);flex:none;margin-top:.1em}
  .ui-ai b{display:block;font-size:.85em;letter-spacing:.04em;text-transform:uppercase;color:var(--app);margin-bottom:.15em}
  .ui-ai p{margin:0;color:var(--ink-soft)}
  .ui-src{display:inline-block;margin-top:.35em;font-size:.82em;font-weight:700;color:var(--app)}
  .ui-btn{display:inline-flex;align-items:center;gap:.4em;font-size:.82em;font-weight:700;padding:.45em .9em;border-radius:99em;background:var(--grad);color:#fff}
  .ui-btn.ghost{background:transparent;color:var(--app);border:1px solid color-mix(in srgb,var(--app) 45%,var(--line))}

  /* phone */
  .ui-phone{border-radius:2.3em;height:36em;display:flex;flex-direction:column;padding:1.1em 1em 1em;gap:.8em}
  .ui-notch{width:6em;height:1.4em;border-radius:99em;background:#1d1814;margin:-.3em auto .2em;flex:none}
  .ui-phone .hi{font-size:1.25em;font-weight:800;letter-spacing:-.02em}
  .ui-phone .hi span{display:block;font-size:.65em;font-weight:600;color:var(--ink-faint);letter-spacing:0}
  .ui-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
  .ui-tile{border:1px solid var(--line);border-radius:.9em;padding:.7em;background:var(--surface-2);font-size:.85em;font-weight:700;display:flex;flex-direction:column;gap:.45em}
  .ui-tile svg{width:1.4em;height:1.4em;color:var(--app)}
  .ui-bub{max-width:85%;padding:.65em .85em;border-radius:1em;font-size:.85em;line-height:1.4}
  .ui-bub.them{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:.3em}
  .ui-bub.me{background:var(--app);color:#fff;margin-left:auto;border-bottom-right-radius:.3em}
  .ui-talk{margin-top:auto;display:flex;align-items:center;gap:.6em;border:1px solid var(--line);border-radius:99em;padding:.45em .5em .45em 1em;font-size:.85em;color:var(--ink-faint)}
  .ui-talk i{margin-left:auto;width:2.2em;height:2.2em;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-style:normal}
  .ui-talk i svg{width:1.1em;height:1.1em}

  /* side panel (CoCarely for Doctors) */
  .side{border-left:1px solid var(--line);background:var(--surface-2);padding:1em;display:flex;flex-direction:column;gap:.7em;position:relative;box-shadow:-1.5em 0 3em -2.5em rgba(40,25,15,.4)}
  .side-h{display:flex;align-items:center;gap:.55em;font-weight:800;font-size:.95em}
  .side-x{margin-left:auto;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:1em;line-height:1}
  .side .ui-row{background:var(--surface);font-size:.85em}
  .timer{display:flex;align-items:center;justify-content:space-between;gap:.6em;border:1px solid var(--line);border-radius:.8em;padding:.6em .8em;background:var(--surface);font-size:.85em}
  .timer b{font-size:1.25em;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .rec{width:.6em;height:.6em;border-radius:50%;background:var(--app);display:inline-block;margin-right:.4em}

  /* floating card */
  .ui-card{border:1px solid var(--line);border-radius:1.1em;padding:1em;box-shadow:0 2.5em 5em -2.5em rgba(40,25,15,.45);display:flex;flex-direction:column;gap:.7em}
  .ui-card-h{display:flex;align-items:center;gap:.6em;font-weight:800;font-size:.95em}
  .spark{width:1.9em;height:1.9em;border-radius:.6em;background:color-mix(in srgb,var(--app) 13%,transparent);display:grid;place-items:center;flex:none}
  .spark svg{margin:0}


  @media (max-width:980px){
    .cd-hero h1{font-size:56px;letter-spacing:-2px}
  }
  @media (max-width:640px){
    .cd-hero h1{font-size:46px;letter-spacing:-1.6px}
    .cd-hero .cd-sub{font-size:16.5px;margin-bottom:30px}
    .cd-stage-in{font-size:1.45cqw;padding:0 6em 5em 3em}
  }

  /* hero CTA row: primary pill + secondary pill */
  .cd-ctas{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
  .cd-ctas .cd-pill{margin:0}

  /* ---------- "Works seamlessly with your EHR": text wordmark tiles, no vendor logos ---------- */
  .ehr-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
  .ehr-live{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card,16px);margin-bottom:var(--gap-block,28px)}
  .ehr-next{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:var(--gap-block,28px)}
  .ehr-tile{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:var(--pad-card,22px);min-width:0}
  .ehr-tile .et-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 12%,transparent);color:var(--app);flex:none}
  .ehr-tile .et-ic svg{width:20px;height:20px}
  .et-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ehr-tile b{font-size:19px;font-weight:800;letter-spacing:-.3px}
  .ehr-tile p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
  .ehr-tile p strong{color:var(--ink);font-weight:700}
  .et-tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
  .et-chip{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent)}
  .ehr-tile.soon{background:transparent;border-style:dashed;align-items:center;padding:16px 18px}
  .ehr-tile.soon .et-ic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--ink-faint)}
  .ehr-tile.soon .et-ic svg{width:17px;height:17px}
  .ehr-tile.soon b{font-size:16px;color:var(--ink-soft);flex:1;min-width:0}
  .et-chip.soon{color:var(--ink-faint);background:transparent;border:1px dashed color-mix(in srgb,var(--ink-faint) 60%,transparent)}
  .ehr-plus{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .ehr-plus span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);padding:9px 16px;border-radius:99px}
  .ehr-plus svg{width:16px;height:16px;color:var(--app);flex:none}
  @media (max-width:900px){.ehr-next{grid-template-columns:1fr}}
  @media (max-width:780px){.ehr-live{grid-template-columns:1fr}.ehr-plus span{border-radius:14px;width:100%}}