/* ===================================================================
   EMR Solutions — design tokens
   Palette: clinical navy + paper + WhatsApp green (used sparingly,
   only where the product actually touches WhatsApp) + amber alert.
   Type: Fraunces (display, restrained) / IBM Plex Sans (body) /
         IBM Plex Mono (data — invoices, UHIDs, stock figures).
=================================================================== */
:root{
  --navy-deep:  #0B2036;
  --navy:       #123252;
  --navy-soft:  #2E4E6E;
  --paper:      #F3F6F4;
  --paper-raised:#FFFFFF;
  --ink:        #16211D;
  --ink-soft:   #4B5A55;
  --line:       #D8E0DB;
  --whatsapp:   #22A35D;
  --whatsapp-deep:#188047;
  --amber:      #C9822E;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 1px 2px rgba(11,32,54,.06), 0 10px 30px -12px rgba(11,32,54,.18);
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:650;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--navy-deep);
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size:1.05rem; font-weight:650; }
em{ font-style:italic; color:var(--whatsapp-deep); }

p{ margin:0 0 1em; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy-soft);
  margin:0 0 .9em;
  font-weight:600;
}
.eyebrow.center{ text-align:center; }
h2.center{ text-align:center; max-width:32ch; margin-left:auto; margin-right:auto; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy-deep); color:#fff;
  padding:.6em 1em; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--whatsapp-deep); outline-offset:3px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.5em;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--navy-deep); color:#fff; box-shadow:0 6px 20px -8px rgba(11,32,54,.55); }
.btn-primary:hover{ background:var(--navy); }
.btn-ghost{ background:transparent; color:var(--navy-deep); border-color:var(--line); }
.btn-ghost:hover{ background:var(--paper-raised); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; box-shadow:0 6px 20px -8px rgba(34,163,93,.55); }
.btn-whatsapp:hover{ background:var(--whatsapp-deep); }
.btn-lg{ padding:1em 1.9em; font-size:1rem; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(243,246,244,.85);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:.85em 1.5em;
  display:flex; align-items:center; gap:2em;
}
.brand{ display:flex; align-items:center; gap:.5em; text-decoration:none; margin-right:auto; }
.brand-mark{ color:var(--navy-deep); display:flex; }
.brand-word{ font-family:var(--font-display); font-weight:650; font-size:1.15rem; color:var(--navy-deep); }
.brand-word em{ font-style:normal; color:var(--whatsapp-deep); }
.nav-links{ display:flex; gap:1.6em; font-size:.92rem; font-weight:500; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--navy-deep); }
.nav-cta{ font-family:var(--font-mono); font-size:.85rem; padding:.6em 1.1em; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding:3.2em 1.5em 3.5em; }
.hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3em; align-items:center;
}
@media (max-width:920px){ .hero-inner{ grid-template-columns:1fr; } }

h1 em{ color:var(--whatsapp-deep); font-style:normal; }
.hero-lede{ font-size:1.08rem; max-width:46ch; }
.hero-checklist{ list-style:none; padding:0; margin:1.2em 0 1.6em; display:grid; grid-template-columns:1fr 1fr; gap:.6em 1.2em; }
.hero-checklist li{ font-size:.92rem; font-weight:500; color:var(--ink); padding-left:1.5em; position:relative; }
.hero-checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:#fff; background:var(--whatsapp); width:1.05em; height:1.05em; border-radius:50%; font-size:.7rem; display:flex; align-items:center; justify-content:center; line-height:1; }
@media (max-width:480px){ .hero-checklist{ grid-template-columns:1fr; } }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1em; }

/* --- photo hero visual --- */
.hero-visual{ display:flex; flex-direction:column; gap:1.1em; }
.hero-photo-card{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-card); background:var(--navy-deep); }
.hero-photo-card img{ width:100%; aspect-ratio:350/363; object-fit:cover; object-position:center top; display:block; }
.hero-photo-badge{
  position:absolute; left:1em; bottom:1em;
  display:inline-flex; align-items:center; gap:.4em;
  background:rgba(255,255,255,.95); color:var(--whatsapp-deep);
  font-size:.72rem; font-weight:600; padding:.5em .8em; border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
}
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.hero-stats div{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:.9em 1em; }
.hero-stats strong{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--navy-deep); }
.hero-stats span{ font-size:.78rem; color:var(--ink-soft); }
.hero-contact-card{
  background:var(--navy-deep); border-radius:var(--radius-m); padding:1.1em 1.3em;
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap;
}
.hero-contact-info{ display:flex; flex-direction:column; }
.hero-contact-info strong{ color:#fff; font-family:var(--font-display); font-size:1.05rem; }
.hero-contact-info a{ color:#fff; text-decoration:none; font-family:var(--font-mono); font-size:.95rem; }
.hero-contact-info span{ color:#8FA5B8; font-size:.75rem; }

/* ---------- posters (real product marketing artwork) ---------- */
.poster-wrap{ max-width:1180px; margin:3.5em auto 0; text-align:center; }
.poster-caption{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--navy-soft); margin-bottom:1em; }
.poster-img{ width:100%; border-radius:var(--radius-m); box-shadow:var(--shadow-card); border:1px solid var(--line); }

/* ---------- whatsapp strip ---------- */
.wa-strip{ background:var(--navy-deep); color:#fff; padding:1.4em 1.5em; }
.wa-strip-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:1em; flex-wrap:wrap; }
.wa-strip-icon{ background:var(--whatsapp); border-radius:50%; padding:.5em; display:flex; flex:0 0 auto; }
.wa-strip p{ color:#DCE6E0; margin:0; flex:1 1 320px; }
.wa-strip strong{ color:#fff; }
.wa-tag{ font-family:var(--font-mono); font-size:.72rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); padding:.5em .9em; border-radius:999px; white-space:nowrap; }

/* ---------- qualities ---------- */
.qualities{ padding:2.4em 1.5em; border-bottom:1px solid var(--line); }
.qualities-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.4em; }
.quality{ display:flex; align-items:center; gap:.55em; color:var(--navy); font-weight:600; font-size:.9rem; }
.quality svg{ color:var(--whatsapp-deep); }

/* ---------- module sections ---------- */
.module{ padding:5.5em 1.5em; }
.module.alt{ background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.module-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:4em; align-items:center;
}
.module-inner.reverse .module-copy{ order:1; }
.module-inner.reverse .module-visual{ order:2; }
@media (max-width:920px){
  .module-inner{ grid-template-columns:1fr; }
  .module-inner.reverse .module-copy,
  .module-inner.reverse .module-visual{ order:initial; }
}
.module-lede{ max-width:46ch; }
.feature-list{ list-style:none; padding:0; margin:1.4em 0 0; display:flex; flex-direction:column; gap:.9em; }
.feature-list li{ padding-left:1.4em; position:relative; color:var(--ink-soft); font-size:.96rem; }
.feature-list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--whatsapp); }
.feature-list b{ color:var(--ink); }

/* --- bill card mock --- */
.bill-card{ background:var(--paper-raised); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:1.4em; max-width:440px; margin:0 auto; }
.bill-card-head{ display:flex; justify-content:space-between; font-weight:600; color:var(--navy-deep); margin-bottom:.9em; font-size:.9rem; }
.bill-date{ font-family:var(--font-mono); font-weight:400; color:var(--ink-soft); font-size:.78rem; }
.bill-table{ width:100%; border-collapse:collapse; font-size:.8rem; font-family:var(--font-mono); }
.bill-table th{ text-align:left; color:var(--navy-soft); font-weight:600; border-bottom:1px solid var(--line); padding:.4em .3em; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.bill-table td{ padding:.45em .3em; border-bottom:1px solid #EEF1EF; color:var(--ink); }
.bill-totals{ margin-top:.9em; display:flex; flex-direction:column; gap:.3em; font-family:var(--font-mono); font-size:.8rem; }
.bill-totals div{ display:flex; justify-content:space-between; color:var(--ink-soft); }
.bill-totals .net{ color:var(--navy-deep); font-weight:700; font-size:.95rem; border-top:1px dashed var(--line); padding-top:.5em; margin-top:.2em; }
.bill-send{ width:100%; margin-top:1.1em; background:var(--whatsapp); color:#fff; border:none; border-radius:999px; padding:.75em; font-weight:600; font-size:.85rem; display:flex; align-items:center; justify-content:center; gap:.5em; cursor:default; }

/* --- OPD steps --- */
.steps-track{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.6em; position:relative; }
.steps-track::before{ content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2px; background:var(--line); }
.step-node{ display:flex; gap:1.1em; align-items:flex-start; position:relative; }
.step-no{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--navy-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:.9rem; position:relative; z-index:1;
}
.step-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:1em 1.2em; flex:1; }
.step-card strong{ color:var(--navy-deep); display:block; margin-bottom:.2em; }
.step-card p{ margin:0; font-size:.9rem; }

/* --- Rx photo (real prescription sample) --- */
.rx-photo{ width:100%; max-width:420px; margin:0 auto; display:block; border-radius:var(--radius-m); box-shadow:var(--shadow-card); border:1px solid var(--line); }

/* ---------- features grid ---------- */
.features{ padding:5.5em 1.5em; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.features-inner{ max-width:1180px; margin:0 auto; }
.features-inner h2.center{ max-width:26ch; }
.features-grid{ margin-top:2.8em; display:grid; grid-template-columns:repeat(4,1fr); gap:1.3em; }
@media (max-width:920px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features-grid{ grid-template-columns:1fr; } }
.feature-tile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:1.5em; transition:border-color .2s ease, transform .2s ease; }
.feature-tile:hover{ border-color:var(--navy-soft); transform:translateY(-3px); }
.feature-tile-accent{ background:linear-gradient(180deg,#EAF7EF,var(--paper)); border-color:#BFE4CC; }
.feature-icon{ display:inline-flex; padding:.55em; border-radius:10px; background:var(--paper-raised); color:var(--navy-deep); margin-bottom:.9em; border:1px solid var(--line); }
.feature-tile-accent .feature-icon{ color:var(--whatsapp-deep); }
.feature-tile h3{ margin-bottom:.35em; }
.feature-tile p{ font-size:.88rem; margin:0; }

/* ---------- workflow ---------- */
.workflow{ padding:5.5em 1.5em; }
.workflow-inner{ max-width:1180px; margin:0 auto; }
.workflow-inner h2.center{ max-width:30ch; }
.workflow-track{ list-style:none; margin:2.8em 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6em; counter-reset:wf; }
@media (max-width:820px){ .workflow-track{ grid-template-columns:repeat(2,1fr); } }
.workflow-track li{ position:relative; padding-top:1.6em; border-top:2px solid var(--line); }
.wf-no{ font-family:var(--font-mono); font-size:.85rem; color:var(--whatsapp-deep); font-weight:600; display:block; margin-bottom:.6em; }
.workflow-track h3{ margin-bottom:.3em; }
.workflow-track p{ font-size:.88rem; margin:0; }

/* ---------- videos ---------- */
.videos{ padding:5.5em 1.5em; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.videos-inner{ max-width:900px; margin:0 auto; }
.videos-inner h2.center{ max-width:28ch; }
.videos-grid{ margin-top:2.6em; display:grid; grid-template-columns:1fr 1fr; gap:1.8em; }
@media (max-width:640px){ .videos-grid{ grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto; } }
.video-card{ margin:0; background:var(--navy-deep); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-card); }
.video-frame{ position:relative; background:#000; }
.video-frame video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.video-play-btn{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,32,54,.28);
  border:none; cursor:pointer; padding:0;
  transition:background .2s ease;
}
.video-play-btn::before{
  content:""; position:absolute; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.55);
}
.video-play-btn svg{ position:relative; margin-left:4px; }
.video-play-btn:hover{ background:rgba(11,32,54,.15); }
.video-frame.is-playing .video-play-btn{ display:none; }
.video-card figcaption{ padding:1.1em 1.3em 1.4em; }
.video-card strong{ color:#fff; display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:.3em; }
.video-card p{ color:#B9C7C0; font-size:.85rem; margin:0; }

/* ---------- reports ---------- */
.reports{ padding:5.5em 1.5em; background:var(--navy-deep); color:#fff; }
.reports .eyebrow{ color:#9DB6C9; }
.reports h2{ color:#fff; }
.reports-inner{ max-width:1180px; margin:0 auto; }
.reports-grid{ margin-top:2.6em; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; }
@media (max-width:820px){ .reports-grid{ grid-template-columns:repeat(2,1fr); } }
.report-tile{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-m); padding:1.5em; }
.report-tile svg{ color:var(--whatsapp); margin-bottom:.8em; }
.report-tile h3{ color:#fff; margin-bottom:.3em; }
.report-tile p{ color:#B9C7C0; font-size:.88rem; margin:0; }

/* ---------- CTA ---------- */
.cta{ padding:6em 1.5em; }
.cta-inner{ max-width:640px; margin:0 auto; text-align:center; }
.cta-lede{ max-width:46ch; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:1em; margin:1.8em 0; }
.cta-badges{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:1.6em; padding:0; margin:1.6em 0 0; font-family:var(--font-mono); font-size:.75rem; color:var(--navy-soft); }
.cta-badges li::before{ content:"✓ "; color:var(--whatsapp-deep); }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:#B9C7C0; padding:2.6em 1.5em; text-align:center; }
.footer-brand{ display:flex; align-items:center; justify-content:center; gap:.5em; color:#fff; font-family:var(--font-display); font-weight:650; margin-bottom:.6em; }
.footer-inner p{ color:#8FA5B8; margin:0 0 .3em; font-size:.88rem; }
.footer-contact a{ color:#fff; text-decoration:none; font-family:var(--font-mono); }