/* ============================================================
   Ai Appointment — clinic operating system
   Tokens · layout · motion
   ============================================================ */

:root{
  /* ------------------------------------------------------------
     Palette lifted from theclinicmanager.com so the two sites read
     as one product: navy #141b34, brand cyan #02c8e7, heading blue
     #4a9bf1, #f3f3f3 bands, #212529 footer, Nunito throughout.
     ------------------------------------------------------------ */

  /* ---- light (default) ---- */
  --paper:      #FFFFFF;
  --ground:     #F3F3F3;
  --ground-2:   #E9ECEE;
  --line:       #DEE2E6;
  --line-soft:  #EDF0F2;

  --ink:        #212529;
  --ink-2:      #414950;
  --ink-3:      #6C757D;

  --brand:      #141B34;   /* the navy the main site's banner uses */
  --brand-2:    #19579A;
  --accent:     #02C8E7;   /* the brand cyan, exactly as on the main site */
  --accent-2:   #0F7C8E;   /* a darker cyan, for text that must stay legible */
  --accent-soft:#E6F8FC;
  --accent-line:#B5E9F4;

  --cyan:       #02C8E7;   /* buttons, to match .stnavbtn */
  --cyan-deep:  #17A2B8;   /* the main site's second button colour */
  --head:       #4A9BF1;   /* the blue its section headings use */
  --hero-bg:    #141B34;
  --hero-ink:   #FFFFFF;
  --hero-ink-2: #C3CCE0;
  --foot-bg:    #212529;
  --foot-ink:   #DAE0E5;
  --foot-head:  #07D8FA;

  --ochre:      #19579A;
  --ochre-soft: #E8F0F9;
  --ochre-line: #C4D8EE;

  --wa-bubble:  #DCF8C6;
  --wa-screen:  #E7E0D8;

  --scrim:      rgba(20,27,52,.50);

  /* the main site's own shadow values */
  --shadow-sm: 0 1px 3px rgba(129,130,130,.45);
  --shadow-md: 0 2px 6px rgba(160,160,160,.55);
  --shadow-lg: 0 4px 10px rgba(140,140,140,.55);
  --shadow-xl: 0 10px 15px rgba(160,160,160,.70);

  --radius:   3px;
  --radius-s: 2px;
  --radius-l: 4px;

  --maxw: 1180px;
  --gutter: 24px;
  --navh: 62px;

  --ff-display: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-body:    'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-mono:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* motion */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* the theme swap itself gets a gentle cross-fade */
:root.theme-anim,
:root.theme-anim *{
  transition: background-color .32s var(--ease-soft),
              border-color .32s var(--ease-soft),
              color .32s var(--ease-soft) !important;
}

/* ============================================================ base */

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; }}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(15px, .55vw + 13.4px, 16.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:700; letter-spacing:-.022em; line-height:1.14;
  margin:0; text-wrap:balance;
}
h1{ font-size:clamp(2.05rem, 5.1vw, 3.55rem); letter-spacing:-.035em; line-height:1.04; }
h2{ font-size:clamp(1.5rem, 3.3vw, 2.3rem);   letter-spacing:-.03em; }
h3{ font-size:clamp(1.05rem, 1.2vw, 1.16rem); }
h4{ font-size:clamp(.96rem, 1vw, 1rem); letter-spacing:-.012em; }
p{ margin:0; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:var(--accent-2); margin:0 0 12px;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:currentColor; transform-origin:left;
}
.eyebrow.warm{ color:var(--ochre); }

.lede{
  font-size:clamp(1rem, 1.8vw, 1.2rem);
  color:var(--ink-2); max-width:62ch; line-height:1.6;
}

.section{ padding-block:clamp(52px, 7.6vw, 104px); }
.section--paper{ background:var(--paper); }
.section--ground{ background:var(--ground); }
.section--warm{ background:var(--ochre-soft); }

.sec-head{ margin-bottom:clamp(28px, 4.4vw, 52px); max-width:74ch; }
.sec-head h2{ margin-bottom:14px; }

/* ============================================================ nav */

.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.7) blur(14px);
  -webkit-backdrop-filter:saturate(1.7) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft),
             background-color .3s var(--ease-soft);
}
.nav.is-stuck{
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 20px rgba(16,36,44,.06);
}

.scroll-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  pointer-events:none; overflow:hidden;
}
.scroll-progress i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--accent), var(--brand-2), var(--accent));
  will-change:transform;
}

.nav-in{ display:flex; align-items:center; gap:18px; height:var(--navh); }

.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto; }
.logo-mark{
  width:30px; height:30px; border-radius:9px;
  background:var(--brand); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
  transition:transform .4s var(--ease-back);
}
.logo:hover .logo-mark{ transform:rotate(-8deg) scale(1.07); }
.logo-word{
  font-family:var(--ff-display); font-weight:800;
  font-size:1.22rem; letter-spacing:-.045em; color:var(--ink);
}
.logo-word em{ font-style:normal; color:var(--accent-2); }

.nav-links{
  display:flex; gap:2px; margin-left:auto;
  list-style:none; padding:0; margin-block:0;
}
.nav-links a{
  position:relative; display:block; padding:7px 11px; border-radius:8px;
  font-size:.86rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  transition:color .18s var(--ease-soft);
}
.nav-links a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(.5); }
.nav-links a.is-active{ color:var(--accent-2); }
.nav-links a.is-active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.nav-links + .nav-actions{ margin-left:12px; }

/* burger */
.burger{
  display:none; width:38px; height:38px; border-radius:9px;
  background:var(--paper); border:1px solid var(--line);
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:10px; width:18px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .32s var(--ease-out), opacity .2s;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:18px; }
.burger span:nth-child(3){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.3); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================ drawer */

.drawer{ position:fixed; inset:0; z-index:80; }
.drawer-scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; transition:opacity .34s var(--ease-soft);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(330px, 86vw);
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:var(--shadow-xl);
  padding:18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(102%);
  transition:transform .4s var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open .drawer-scrim{ opacity:1; }
.drawer.is-open .drawer-panel{ transform:translateX(0); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.drawer-links{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:2px; }
.drawer-links a{
  display:block; padding:13px 14px; border-radius:10px;
  font-size:1.02rem; font-weight:600; color:var(--ink); text-decoration:none;
  transition:background .18s, transform .18s var(--ease-out);
}
.drawer-links a:hover, .drawer-links a:focus-visible{ background:var(--ground); }
.drawer-links a:active{ transform:scale(.98); }

/* staggered entry of drawer contents */
.drawer-links li, .drawer-panel > .btn{
  opacity:0; transform:translateX(18px);
}
.drawer.is-open .drawer-links li,
.drawer.is-open .drawer-panel > .btn{
  animation:drawerItem .42s var(--ease-out) forwards;
  animation-delay:calc(90ms + var(--i, 0) * 34ms);
}
@keyframes drawerItem{ to{ opacity:1; transform:translateX(0); } }

/* ============================================================ buttons */

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:10px;
  font-family:var(--ff-body); font-size:.9rem; font-weight:650;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  line-height:1.2; white-space:nowrap;
  transition:transform .18s var(--ease-back), box-shadow .22s var(--ease-soft),
             background-color .2s, border-color .2s, color .2s;
}
.btn svg{ transition:transform .3s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--primary{ background:var(--accent-2); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent); box-shadow:var(--shadow-md); }
/* shine sweep */
.btn--primary::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn--primary:hover::before{ animation:sweep .78s var(--ease-soft); }
@keyframes sweep{ to{ left:150%; } }

.btn--ghost{ background:var(--paper); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
a[download]:hover svg{ transform:translateY(2px); }

.btn--sm{ padding:8px 13px; font-size:.83rem; }
.btn--wide{ padding:14px 24px; font-size:.97rem; }

/* click ripple (added by JS) */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:currentColor; opacity:.26; transform:scale(0);
  animation:ripple .62s var(--ease-out) forwards;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

.icon-btn{
  width:36px; height:36px; border-radius:9px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
  transition:border-color .2s, color .2s, transform .3s var(--ease-back);
}
.icon-btn:hover{ color:var(--accent-2); border-color:var(--accent-line); transform:rotate(18deg); }
.icon-btn:active{ transform:rotate(18deg) scale(.92); }

/* ============================================================ hero */

.hero{
  background:var(--paper);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 88% -8%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(520px 320px at 2% 108%, var(--ground) 0%, transparent 60%);
}

/* drifting ambient orbs */
.hero-orbs{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-orbs i{
  position:absolute; border-radius:50%; display:block;
  filter:blur(46px); opacity:.5;
  will-change:transform;
}
.hero-orbs i:nth-child(1){
  width:360px; height:360px; top:-90px; right:-40px;
  background:var(--accent-soft); animation:drift1 22s var(--ease-soft) infinite alternate;
}
.hero-orbs i:nth-child(2){
  width:280px; height:280px; bottom:-70px; left:-60px;
  background:var(--ground-2); animation:drift2 27s var(--ease-soft) infinite alternate;
}
.hero-orbs i:nth-child(3){
  width:210px; height:210px; top:44%; right:34%;
  background:var(--accent-soft); opacity:.32;
  animation:drift3 19s var(--ease-soft) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(-54px, 46px, 0) scale(1.14); } }
@keyframes drift2{ to{ transform:translate3d(48px, -36px, 0) scale(1.1); } }
@keyframes drift3{ to{ transform:translate3d(30px, 52px, 0) scale(.86); } }

.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(26px, 5vw, 64px); align-items:center;
  padding-block:clamp(40px, 6vw, 84px) clamp(56px, 7vw, 96px);
}
.hero-copy h1{ margin-bottom:20px; color:var(--ink); }
.hero-copy h1 .hl{
  color:var(--accent-2); position:relative;
  padding-inline:2px; white-space:nowrap;
}
.hero-copy h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.34em;
  background:var(--accent-soft); z-index:-1; border-radius:3px;
  transform:scaleX(0); transform-origin:left;
  animation:underline .8s .85s var(--ease-out) forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }

.hero-sub{ font-size:clamp(1rem,1.7vw,1.16rem); color:var(--ink-2); max-width:52ch; }
.hero-cta{ display:flex; gap:11px; flex-wrap:wrap; margin-top:28px; }
.hero-note{
  margin-top:16px; font-size:.83rem; color:var(--ink-3);
  display:flex; align-items:flex-start; gap:7px;
}
.hero-note svg{ flex:0 0 auto; margin-top:4px; color:var(--accent); }

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); margin-top:36px; padding-top:22px;
}
.hstat{ padding-right:16px; }
.hstat + .hstat{ border-left:1px solid var(--line); padding-left:20px; }
.hstat .n{
  font-family:var(--ff-display); font-size:clamp(1.3rem,2.4vw,1.55rem);
  font-weight:700; letter-spacing:-.03em; color:var(--brand); line-height:1;
  font-variant-numeric:tabular-nums;
}
.hstat .l{ font-size:.78rem; color:var(--ink-2); margin-top:7px; line-height:1.42; }

/* load sequence */
.seq{ opacity:1; }
.js .seq{
  opacity:0; transform:translateY(20px);
  animation:seqIn .78s var(--ease-out) forwards;
  animation-delay:calc(var(--d, 0) * 95ms + 60ms);
}
@keyframes seqIn{ to{ opacity:1; transform:none; } }

/* scroll cue */
.scroll-cue{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding-bottom:clamp(22px, 3vw, 34px);
  text-decoration:none; color:var(--ink-3);
  font-family:var(--ff-mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase;
  transition:color .2s;
}
.scroll-cue:hover{ color:var(--accent-2); }
.scroll-cue-track{
  width:20px; height:32px; border-radius:11px;
  border:1.6px solid currentColor; position:relative; display:block;
}
.scroll-cue-track i{
  position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:3px;
  background:currentColor; transform:translateX(-50%);
  animation:wheel 1.9s var(--ease-soft) infinite;
}
@keyframes wheel{
  0%{ opacity:0; transform:translate(-50%, -3px); }
  30%{ opacity:1; }
  70%{ opacity:1; transform:translate(-50%, 11px); }
  100%{ opacity:0; transform:translate(-50%, 14px); }
}

/* ---------- phone / whatsapp demo ---------- */

.phone-col{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.phone{
  width:100%; max-width:322px;
  border-radius:30px; padding:9px;
  background:linear-gradient(160deg, #2A3C44, #16242A);
  box-shadow:var(--shadow-xl);
  flex:0 0 auto; position:relative;
  animation:float 7s var(--ease-soft) infinite alternate;
  will-change:transform;
}
@keyframes float{ to{ transform:translateY(-12px); } }
.phone::after{
  content:""; position:absolute; inset:-14px; border-radius:42px; z-index:-1;
  background:radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity:.9;
}
.phone-screen{
  border-radius:23px; overflow:hidden; background:var(--wa-screen);
  display:flex; flex-direction:column; height:540px;
}
.wa-top{
  background:var(--brand); color:#fff;
  padding:11px 13px; display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.wa-avatar{
  width:33px; height:33px; border-radius:50%;
  background:rgba(255,255,255,.18); display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:.82rem; color:#fff;
}
.wa-who{ font-size:.86rem; font-weight:650; line-height:1.2; }
.wa-status{ font-size:.66rem; opacity:.78; margin-top:1px; min-height:1em; }

.wa-body{
  flex:1 1 auto; overflow-y:auto; padding:13px 11px 16px;
  display:flex; flex-direction:column; gap:8px;
  scroll-behavior:smooth;
  /* the conversation still scrolls itself — the bar is just never drawn */
  scrollbar-width:none; -ms-overflow-style:none;
}
.wa-body::-webkit-scrollbar{ width:0; height:0; display:none; }
.wa-day{
  align-self:center; background:rgba(0,0,0,.07); color:var(--ink-2);
  font-size:.64rem; padding:3px 10px; border-radius:20px; margin-bottom:2px;
  font-family:var(--ff-mono); letter-spacing:.04em;
}

.msg{
  max-width:81%; padding:7px 10px 6px; border-radius:11px;
  font-size:.8rem; line-height:1.45; position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.08); color:var(--ink);
  transform-origin:bottom;
  animation:pop .34s var(--ease-back) backwards;
}
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.94); } }
.msg.in{ align-self:flex-start; background:var(--paper); border-top-left-radius:3px; transform-origin:bottom left; }
.msg.out{ align-self:flex-end; background:var(--wa-bubble); border-top-right-radius:3px; transform-origin:bottom right; }
.msg .t{
  font-family:var(--ff-mono); font-size:.58rem; color:var(--ink-3);
  display:block; text-align:right; margin-top:3px; letter-spacing:.02em;
}
.msg b{ font-weight:700; }
.msg .opt{
  display:block; margin-top:5px; padding:5px 8px;
  background:var(--ground); border-radius:7px; font-size:.76rem;
  border-left:2px solid var(--accent);
}
.msg--typing{ display:flex; gap:4px; padding:11px 12px; align-items:center; }
.msg--typing i{
  width:6px; height:6px; border-radius:50%; background:var(--ink-3);
  animation:blip 1.15s infinite var(--ease-soft);
}
.msg--typing i:nth-child(2){ animation-delay:.18s; }
.msg--typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blip{
  0%,60%,100%{ opacity:.28; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}
.msg.is-hidden{ display:none; }

.phone-caption{ font-size:.79rem; color:var(--ink-3); text-align:center; max-width:300px; }

/* ============================================================ layout blocks */

.grid{ display:grid; gap:clamp(14px, 1.5vw, 18px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(18px, 2vw, 24px);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-soft),
             border-color .3s;
}
.card h3{ margin-bottom:9px; color:var(--brand); }
.card p{ color:var(--ink-2); font-size:.945rem; }
.card--flat{ background:var(--ground); border-color:transparent; }
.card--warm{ background:var(--paper); border-color:var(--ochre-line); }
.card--warm h3{ color:var(--ochre); }

.section--paper .card--flat:hover,
.card:not(.card--flat):hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-line);
}

.ico{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; margin-bottom:15px;
  background:var(--accent-soft); color:var(--accent-2);
  transition:transform .4s var(--ease-back), background-color .3s;
}
.card:hover .ico{ transform:translateY(-2px) rotate(-7deg) scale(1.06); }

/* problem rows */
.prob{
  display:grid; grid-template-columns:auto 1fr; gap:16px 18px;
  align-items:start; padding:20px 0; border-top:1px solid var(--ochre-line);
  transition:padding-left .3s var(--ease-out);
}
.prob:last-child{ border-bottom:1px solid var(--ochre-line); }
.prob:hover{ padding-left:8px; }
.prob-fig{
  font-family:var(--ff-display); font-size:clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight:700; color:var(--ochre); letter-spacing:-.03em; line-height:1;
  min-width:96px; padding-top:2px;
}
.prob h4{ margin-bottom:5px; color:var(--ink); }
.prob p{ color:var(--ink-2); font-size:.945rem; }

/* channels */
.chan{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:12px;
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.chan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-line); }
.chan-tag{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.chan h3{ color:var(--brand); margin:0; }
.chan p{ color:var(--ink-2); font-size:.93rem; }
.chan--lead{ border-color:var(--accent-line); background:var(--accent-soft); }
.chan--lead h3{ color:var(--accent-2); }

/* ============================================================ timeline */

.tl{ position:relative; margin-top:12px; --p:0; }
.tl::before{
  content:""; position:absolute; left:21px; top:10px; bottom:10px; width:3px;
  background:var(--line); border-radius:3px;
}
.tl-fill{
  position:absolute; left:21px; top:10px; width:3px; border-radius:3px;
  height:calc(var(--p) * 100%);
  max-height:calc(100% - 20px);
  background:linear-gradient(var(--accent-line), var(--accent));
  transition:height .18s linear;
}
.tl-step{
  display:grid; grid-template-columns:44px 1fr; gap:clamp(14px,1.6vw,20px);
  align-items:start; padding-bottom:22px; position:relative;
}
.tl-step:last-child{ padding-bottom:0; }
.tl-dot{
  width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:3px solid var(--line);
  display:grid; place-items:center; position:relative; z-index:2;
  font-family:var(--ff-display); font-weight:700; font-size:1.02rem; color:var(--ink-3);
  transition:border-color .4s var(--ease-out), color .4s, background-color .4s,
             transform .45s var(--ease-back);
}
.tl-step.lit .tl-dot{ border-color:var(--accent); color:var(--brand); transform:scale(1.06); }
.tl-step[data-auto="1"].lit .tl-dot{ background:var(--accent); color:#fff; }
/* pulse ring on the automatic steps once lit */
.tl-step[data-auto="1"].lit .tl-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--accent); animation:ring 2.4s var(--ease-soft) infinite;
}
@keyframes ring{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.55); opacity:0; }
}

.tl-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(15px,1.7vw,20px);
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.tl-card:hover{ transform:translateX(5px); box-shadow:var(--shadow-sm); border-color:var(--accent-line); }
.tl-step[data-auto="1"] .tl-card{ background:var(--accent-soft); border-color:var(--accent-line); }
.tl-card h4{ margin-bottom:5px; color:var(--brand); }
.tl-card p{ color:var(--ink-2); font-size:.93rem; }
.tl-badge{
  display:inline-block; margin-top:9px;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600;
  color:var(--accent-2); background:var(--paper);
  border:1px solid var(--accent-line); border-radius:6px; padding:3px 8px;
}

/* ============================================================ tabs */

.tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:22px; }
.tab{
  position:relative; overflow:hidden;
  padding:10px 17px; border-radius:10px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line);
  font-family:var(--ff-body); font-size:.9rem; font-weight:600; color:var(--ink-2);
  transition:color .22s, border-color .22s, transform .2s var(--ease-back);
}
.tab::before{
  content:""; position:absolute; inset:0; background:var(--brand);
  transform:scaleX(0); transform-origin:left; z-index:0;
  transition:transform .34s var(--ease-out);
}
.tab > *{ position:relative; z-index:1; }
.tab:hover{ border-color:var(--accent-line); color:var(--ink); }
.tab:active{ transform:scale(.97); }
.tab[aria-selected="true"]{ border-color:var(--brand); color:#fff; }
.tab[aria-selected="true"]::before{ transform:scaleX(1); }

.panel{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:clamp(20px, 3.2vw, 34px);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px,3.2vw,40px);
  animation:panelIn .44s var(--ease-out);
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px); } }
.panel-intro h3{ color:var(--brand); font-size:clamp(1.2rem,1.8vw,1.42rem); margin-bottom:10px; }
.panel-intro .role-tag{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-2); font-weight:600;
  margin-bottom:10px; display:block;
}
.panel-intro p{ color:var(--ink-2); font-size:.96rem; }
.panel-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; align-content:start; }
.panel-list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.945rem; color:var(--ink-2); line-height:1.5;
  opacity:0; transform:translateX(-10px);
  animation:listIn .5s var(--ease-out) forwards;
  animation-delay:calc(120ms + var(--i, 0) * 60ms);
}
@keyframes listIn{ to{ opacity:1; transform:none; } }
.panel-list b{ color:var(--ink); font-weight:650; }
.tick{
  width:20px; height:20px; border-radius:50%; margin-top:2px;
  background:var(--accent-soft); color:var(--accent-2);
  display:grid; place-items:center; flex:0 0 auto;
}

/* ============================================================ feature grid */

.feat{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(18px,2vw,22px);
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .3s;
  transform-style:preserve-3d;
}
.feat::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             var(--accent-soft), transparent 68%);
  transition:opacity .35s;
}
.feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--accent-line); }
.feat:hover::before{ opacity:.85; }
.feat-n{
  position:absolute; top:-6px; right:8px;
  font-family:var(--ff-display); font-size:clamp(2.6rem,4vw,3.4rem); font-weight:700;
  color:var(--ground-2); letter-spacing:-.05em; line-height:1; z-index:0;
  user-select:none; transition:transform .5s var(--ease-out), color .4s;
}
.feat:hover .feat-n{ transform:translateY(4px) scale(1.1); color:var(--accent-line); }
.feat > *:not(.feat-n){ position:relative; z-index:1; }
.feat h4{ color:var(--brand); margin-bottom:8px; padding-right:38px; }
.feat p{ color:var(--ink-2); font-size:.915rem; line-height:1.52; }
.feat .why{
  display:block; margin-top:11px; font-size:.83rem; font-weight:600; color:var(--accent-2);
}

/* ============================================================ calculator */

.calc{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(20px,3.2vw,44px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:clamp(20px,3.2vw,36px);
}
.field{ margin-bottom:22px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:9px;
}
.field .val{
  font-family:var(--ff-mono); font-size:.95rem; color:var(--accent-2);
  font-weight:600; font-variant-numeric:tabular-nums;
  transition:transform .2s var(--ease-back);
}
.field .val.bump{ transform:scale(1.14); }
.field .hint{ font-size:.79rem; color:var(--ink-3); margin-top:7px; }

input[type=range]{
  width:100%; height:6px; border-radius:6px; appearance:none; -webkit-appearance:none;
  outline-offset:6px; cursor:pointer;
  background:linear-gradient(var(--accent), var(--accent)) 0/var(--fill,0%) 100% no-repeat,
             var(--ground-2);
  transition:background-size .1s linear;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-2); border:3px solid var(--paper);
  box-shadow:var(--shadow-sm); cursor:grab;
  transition:transform .2s var(--ease-back), box-shadow .2s;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.16); box-shadow:var(--shadow-md); }
input[type=range]:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.05); }
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent-2); border:3px solid var(--paper);
  box-shadow:var(--shadow-sm); cursor:grab;
  transition:transform .2s var(--ease-back);
}
input[type=range]:hover::-moz-range-thumb{ transform:scale(1.16); }

.results{
  display:grid; gap:14px; align-content:start;
  /* both result blocks measure their figures against the same column,
     so every number shares a right edge and every label a left one */
  --numcol:9rem;
  --numgap:14px;
}
.res{
  background:var(--ground); border-radius:var(--radius);
  padding:clamp(14px,1.7vw,18px) clamp(16px,1.9vw,20px);
  border:1px solid transparent;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
  transition:transform .3s var(--ease-out), border-color .3s;
}
.res:hover{ transform:translateX(4px); border-color:var(--accent-line); }
.res--hero{ background:var(--accent-soft); border-color:var(--accent-line); }
.res .rl{ font-size:.89rem; color:var(--ink-2); line-height:1.4; }
.res .rl small{ font-size:.79rem; color:var(--ink-3); display:block; }
.res .rv{
  font-family:var(--ff-display); font-size:clamp(1.45rem,2.6vw,1.75rem); font-weight:700;
  color:var(--brand); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.res--hero .rv{ color:var(--accent-2); }
.res .ru{ font-size:.8rem; font-weight:600; color:var(--ink-3); margin-left:4px; }
.tick-num{ display:inline-block; }
.calc-note{
  margin-top:16px; font-size:.79rem; color:var(--ink-3); line-height:1.5;
  border-top:1px solid var(--line); padding-top:14px;
}

/* ============================================================ checklist */

.setup{ display:grid; gap:10px; }
.chk{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; cursor:pointer;
  position:relative; overflow:hidden;
  transition:border-color .25s, transform .28s var(--ease-out), box-shadow .28s;
}
.chk:hover{ border-color:var(--accent-line); transform:translateX(4px); box-shadow:var(--shadow-sm); }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk-box{
  width:24px; height:24px; border-radius:7px; margin-top:1px;
  border:2px solid var(--line); background:var(--paper);
  display:grid; place-items:center; flex:0 0 auto;
  transition:background-color .26s var(--ease-out), border-color .26s,
             transform .32s var(--ease-back);
}
.chk-box svg path{
  stroke-dasharray:26; stroke-dashoffset:26;
  transition:stroke-dashoffset .32s .06s var(--ease-out);
}
.chk input:checked ~ .chk-box{
  background:var(--accent-2); border-color:var(--accent-2); transform:scale(1.08);
}
.chk input:checked ~ .chk-box svg path{ stroke-dashoffset:0; }
.chk input:focus-visible ~ .chk-box{ outline:2.5px solid var(--accent); outline-offset:3px; }
.chk-txt h4{ margin-bottom:3px; color:var(--brand); transition:color .26s; }
.chk-txt p{ color:var(--ink-2); font-size:.91rem; }
.chk input:checked ~ .chk-txt h4{ color:var(--ink-3); }
.chk input:checked ~ .chk-txt h4::after{
  content:""; display:block; height:1px; background:currentColor;
  margin-top:-9px; animation:strike .32s var(--ease-out) forwards;
  transform:scaleX(0); transform-origin:left;
}
@keyframes strike{ to{ transform:scaleX(1); } }
.chk-where{
  font-family:var(--ff-mono); font-size:.68rem; color:var(--ink-3);
  white-space:nowrap; padding-top:4px; letter-spacing:.02em;
}

.progress-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.bar{
  flex:1 1 220px; height:9px; border-radius:9px;
  background:var(--ground-2); overflow:hidden; min-width:150px; position:relative;
}
.bar i{
  display:block; height:100%; width:0%; border-radius:9px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .55s var(--ease-out); position:relative;
}
.bar i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation:shimmer 2.2s var(--ease-soft) infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(220%); } }
.progress-txt{
  font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* ============================================================ day columns */

.day{ border-left:3px solid var(--accent); padding-left:18px; transition:padding-left .3s var(--ease-out); }
.day:hover{ padding-left:24px; }
.day h4{ color:var(--brand); margin-bottom:8px; }
.day p{ color:var(--ink-2); font-size:.93rem; }
.day p b{ color:var(--ink); font-weight:650; }

/* ============================================================ faq */

.faq{ display:grid; gap:10px; max-width:860px; }
.qa{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .26s, box-shadow .26s;
}
.qa:hover{ border-color:var(--accent-line); }
.qa[open]{ box-shadow:var(--shadow-sm); border-color:var(--accent-line); }
.qa summary{
  padding:17px 20px; cursor:pointer; list-style:none;
  font-weight:650; font-size:clamp(.94rem,1.1vw,1rem); color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  transition:color .2s;
}
.qa summary:hover{ color:var(--accent-2); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .plus{
  position:relative; width:16px; height:16px; flex:0 0 auto; color:var(--accent-2);
}
.qa summary .plus::before,
.qa summary .plus::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  border-radius:2px; transition:transform .34s var(--ease-out);
}
.qa summary .plus::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.qa summary .plus::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.qa[open] summary .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.qa .a{
  padding:0 20px 18px; color:var(--ink-2);
  font-size:.945rem; max-width:70ch;
}

/* ============================================================ cta + footer */

.cta{
  background:var(--brand); border-radius:var(--radius-l);
  padding:clamp(26px,4.2vw,50px); color:#fff;
  display:grid; grid-template-columns:1.25fr auto; gap:26px; align-items:center;
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  right:-120px; top:-160px; background:rgba(255,255,255,.07);
  animation:drift1 24s var(--ease-soft) infinite alternate;
}
.cta > *{ position:relative; z-index:1; }
.cta h2{ color:inherit; margin-bottom:10px; }
.cta p{ opacity:.84; font-size:clamp(.95rem,1.2vw,1.01rem); max-width:56ch; }
.cta .btn--primary{ background:#fff; color:var(--brand); }
.cta .btn--primary:hover{ background:#EAF6F8; }

.foot{ background:var(--paper); border-top:1px solid var(--line); padding-block:32px; }
.foot-in{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-3);
}

/* ============================================================ floating bits */

.to-top{
  position:fixed; right:20px; z-index:70;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); color:var(--accent-2);
  display:grid; place-items:center; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(16px) scale(.85); pointer-events:none;
  transition:opacity .3s var(--ease-soft), transform .36s var(--ease-back),
             border-color .2s, background-color .2s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent); background:var(--accent-soft); }
.to-top:active{ transform:scale(.92); }

.toast{
  position:fixed; left:50%; z-index:90;
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(22px) scale(.96);
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:11px; font-size:.88rem; font-weight:550;
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none;
  transition:opacity .24s var(--ease-soft), transform .32s var(--ease-back);
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ============================================================ reveal */

.rv{ opacity:1; transform:none; }
.js .rv{
  opacity:0; transform:translateY(22px);
  transition:opacity .66s var(--ease-soft), transform .66s var(--ease-out);
}
.js .rv.in{ opacity:1; transform:none; }

/* children stagger inside a revealed block */
.js [data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js [data-stagger].in > *,
.js .in [data-stagger] > *{ opacity:1; transform:none; }
.js [data-stagger] > .tl-fill{ opacity:1; transform:none; transition:height .18s linear; }

/* ============================================================ responsive */

@media (max-width: 1180px){
  .nav-links a{ padding:7px 9px; font-size:.82rem; }}

@media (max-width: 1060px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .hero-in{ grid-template-columns:1fr; gap:36px; }
  .hero-sub, .hero-copy h1{ max-width:none; }
  .panel{ grid-template-columns:1fr; }
  .calc{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .cta{ grid-template-columns:1fr; }
  .cta .btn{ justify-self:start; }}

@media (max-width: 860px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--3 > *:last-child:nth-child(odd){ grid-column:1 / -1; }
  .hero-copy h1 .hl{ white-space:normal; }}

@media (max-width: 720px){
  :root{ --gutter:18px; --navh:56px; }
  .nav-dl span, .nav-dl{ }
  .grid--2{ grid-template-columns:1fr; }
  .grid--3{ grid-template-columns:1fr; }
  .grid--3 > *:last-child:nth-child(odd){ grid-column:auto; }
  .hero-stats{ grid-template-columns:1fr; gap:14px; }
  .hstat{ padding-right:0; }
  .hstat + .hstat{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
  .prob{ grid-template-columns:1fr; gap:6px; }
  .prob-fig{ min-width:0; }
  .chk{ grid-template-columns:auto 1fr; }
  .chk-where{ display:none; }
  .res{ grid-template-columns:1fr; gap:6px; }
  .tl-step{ grid-template-columns:36px 1fr; gap:13px; padding-bottom:18px; }
  .tl-dot{ width:36px; height:36px; font-size:.9rem; border-width:2.5px; }
  .tl::before, .tl-fill{ left:17px; width:2.5px; }
  .tabs{ gap:6px; }
  .tab{ padding:9px 13px; font-size:.84rem; flex:1 1 auto; }
  .to-top{ right:14px; width:42px; height:42px; }
  .foot-in{ flex-direction:column; align-items:flex-start; gap:8px; }}

@media (max-width: 560px){
  .grid--4{ grid-template-columns:1fr; }
  .nav-dl{ display:none; }
  .hero-cta .btn{ width:100%; }
  .phone-screen{ height:min(480px, 62vh); }
  .qa summary{ padding:15px 16px; }
  .qa .a{ padding:0 16px 16px; }
  .scroll-cue{ display:none; }}

@media (max-width: 400px){
  :root{ --gutter:16px; }
  .logo-word{ font-size:1.08rem; }
  .prob-fig{ font-size:1.35rem; }}

/* short landscape phones: don't let the phone mock eat the screen */
@media (max-height: 620px) and (orientation: landscape){
  .phone-screen{ height:min(420px, 72vh); }
  .phone{ animation:none; }}

/* pointer-coarse: no hover translations that feel sticky on touch */
@media (hover: none){
  .card:hover, .chan:hover, .feat:hover, .chk:hover, .res:hover, .tl-card:hover{
    transform:none; box-shadow:none;
  }
  .prob:hover, .day:hover{ padding-left:inherit; }
  .btn:hover{ transform:none; }}

/* ============================================================ reduced motion */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .rv, .js [data-stagger] > *, .js .seq{ opacity:1 !important; transform:none !important; }
  .hero-orbs, .scroll-cue-track i, .bar i::after{ display:none; }
  .phone{ animation:none; }
  .hero-copy h1 .hl::after{ transform:scaleX(1); }}

/* ============================================================ print */

@media print{
  .nav, .drawer, .hero-cta, .replay, .toast, .cta, .icon-btn,
  .to-top, .scroll-cue, .hero-orbs, .burger{ display:none !important; }
  body{ background:#fff; }
  .section{ padding-block:24px; break-inside:avoid; }
  .js .rv, .js [data-stagger] > *, .js .seq{ opacity:1 !important; transform:none !important; }
  .panel[hidden]{ display:grid !important; }}

/* ============================================================
   ============================================================
   MEDICAL LAYER
   Clinical status semantics, ECG motif, clinic-screen mock-ups.
   Appended so it wins the cascade over the base above.
   ============================================================
   ============================================================ */

:root{
  /* triage / stage colours — reserved, never reused as an accent.
     Every use ships with a text label, never colour alone. */
  --st-wait:      #C9821F;
  --st-wait-bg:   #FBF1E0;
  --st-active:    #1E6FB8;
  --st-active-bg: #E4EFFA;
  --st-done:      #12876C;
  --st-done-bg:   #E0F3EE;
  --st-miss:      #B4453C;
  --st-miss-bg:   #FAE8E6;

  /* the pulse hue exists only for the ECG trace and the live dot */
  --pulse:        #E05A4E;

  --chart-1:      #0E7A86;
  --grid-rx:      rgba(11,78,90,.055);
}

/* ------------------------------------------------------------
   A faint medical-cross field. Two crossed gradients tile a plus
   sign — the clinic's own mark, used at the edge of visibility.
   ------------------------------------------------------------ */
.grid-rx{ position:relative; }
.grid-rx::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-rx) 1.6px, transparent 1.6px),
    linear-gradient(90deg, var(--grid-rx) 1.6px, transparent 1.6px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}
.grid-rx > *{ position:relative; z-index:1; }

/* ------------------------------------------------------------
   ECG trace — the page's signature. A flat baseline with two QRS
   complexes; a bright segment travels along it on a loop.
   ------------------------------------------------------------ */
.ecg-rule{
  background:var(--paper);
  border-block:1px solid var(--line-soft);
  overflow:hidden; line-height:0;
}
.ecg-rule svg{ display:block; width:100%; height:54px; }
.ecg-rule path{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.ecg-base{ stroke:var(--line); stroke-width:2; }
.ecg-live{
  stroke:var(--pulse); stroke-width:2.4;
  stroke-dasharray:180 1400; stroke-dashoffset:180;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--pulse) 45%, transparent));
  animation:ecgRun 4.6s linear infinite;
}
@keyframes ecgRun{ to{ stroke-dashoffset:-1400; } }

/* the hero closes on its own trace, tighter and without the rules */
.hero .ecg-rule{ border:0; background:transparent; margin-top:-10px; }
.hero .ecg-rule svg{ height:44px; }

/* a steady blinking dot for anything reporting live state */
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--pulse);
  display:inline-block; flex:0 0 auto; position:relative;
}
.live-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--pulse); animation:beat 1.9s var(--ease-soft) infinite;
}
@keyframes beat{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(3); opacity:0; }
}

/* ------------------------------------------------------------
   Hero vitals strip — a monitor readout rather than three stats
   ------------------------------------------------------------ */
.vitals{
  margin-top:34px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); padding:14px 16px 16px;
  box-shadow:var(--shadow-sm);
}
.vitals-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
  padding-bottom:11px; margin-bottom:12px;
  border-bottom:1px dashed var(--line); width:100%;
}
.vitals-row{ display:grid; grid-template-columns:repeat(3,1fr); }
.vitals .hstat{ padding-right:14px; }
.vitals .hstat + .hstat{ border-left:1px solid var(--line); padding-left:16px; }
.vitals .hstat .n{
  font-family:var(--ff-mono); font-weight:600;
  font-size:clamp(1.4rem, 2.6vw, 1.75rem); letter-spacing:-.03em;
  color:var(--brand); line-height:1; font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:4px;
}
.vitals .hstat .n .u{
  font-size:.62em; font-weight:500; color:var(--ink-3); letter-spacing:.02em;
}
.vitals .hstat .l{ font-size:.76rem; color:var(--ink-2); margin-top:8px; line-height:1.38; }

/* ------------------------------------------------------------
   App window chrome
   ------------------------------------------------------------ */
.app{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-l); overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:panelIn .44s var(--ease-out);
}
.app-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; background:var(--ground);
  border-bottom:1px solid var(--line);
}
.app-dots{ display:flex; gap:6px; flex:0 0 auto; }
.app-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); display:block; }
.app-dots i:first-child{ background:#E0A8A2; }
.app-dots i:nth-child(2){ background:#E6CB98; }
.app-dots i:last-child{ background:#A5CFB8; }
.app-title{
  font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-2);
  letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; flex:0 0 auto;
}

/* ------------------------------------------------------------
   Live queue board
   ------------------------------------------------------------ */
.queue{ padding:clamp(14px, 2vw, 20px); }

.now{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:var(--brand); border-radius:var(--radius); padding:16px 20px;
  color:#fff; margin-bottom:14px; position:relative; overflow:hidden;
}
.now-l{ display:flex; flex-direction:column; gap:3px; }
.now-cap{
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; opacity:.7;
}
.now-token{
  font-family:var(--ff-mono); font-weight:600; line-height:1;
  font-size:clamp(2rem, 4.4vw, 2.7rem); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.now-name{ display:block; font-weight:650; font-size:1.02rem; line-height:1.25; }
.now-meta{ display:block; font-size:.79rem; opacity:.75; margin-top:3px; }
.now-clock{
  font-family:var(--ff-mono); font-size:1.05rem; opacity:.8;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.now.flash::after{
  content:""; position:absolute; inset:0; background:#fff; opacity:0;
  animation:nowFlash .5s var(--ease-out);
}
@keyframes nowFlash{ 0%{ opacity:.24; } 100%{ opacity:0; } }

.qlist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }

/* a queue row reads like the OPD slip it replaces — perforated edge and all */
.qrow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:14px; align-items:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:11px 14px 11px 12px;
  position:relative; overflow:hidden;
  animation:qIn .42s var(--ease-out) backwards;
}
@keyframes qIn{ from{ opacity:0; transform:translateY(-8px) scale(.985); } }
.qrow.leaving{ animation:qOut .42s var(--ease-soft) forwards; }
@keyframes qOut{ to{ opacity:0; transform:translateX(26px); height:0; margin-top:-8px; } }

.qrow::before{
  content:""; position:absolute; left:54px; top:6px; bottom:6px; width:1px;
  background-image:linear-gradient(var(--line) 50%, transparent 0);
  background-size:1px 6px;
}
.qtoken{
  width:40px; height:40px; border-radius:9px; display:grid; place-items:center;
  background:var(--ground); color:var(--brand);
  font-family:var(--ff-mono); font-weight:600; font-size:1rem;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.qwho{ min-width:0; }
.qname{
  font-weight:650; font-size:.95rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qmeta{
  font-size:.78rem; color:var(--ink-3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qwait{
  font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* stage pills — colour AND label AND a shape cue, never colour alone */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px; border-radius:20px;
  font-size:.74rem; font-weight:650; white-space:nowrap;
  border:1px solid transparent; transition:all .3s var(--ease-out);
}
.pill i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.pill--wait  { color:var(--st-wait);   background:var(--st-wait-bg);   border-color:color-mix(in srgb, var(--st-wait) 26%, transparent); }
.pill--active{ color:var(--st-active); background:var(--st-active-bg); border-color:color-mix(in srgb, var(--st-active) 26%, transparent); }
.pill--done  { color:var(--st-done);   background:var(--st-done-bg);   border-color:color-mix(in srgb, var(--st-done) 26%, transparent); }
.pill--miss  { color:var(--st-miss);   background:var(--st-miss-bg);   border-color:color-mix(in srgb, var(--st-miss) 26%, transparent); }
/* the one in the chair gets a soft breathing ring */
.pill--active i{ animation:beat 2s var(--ease-soft) infinite; }
.qrow.is-active{ border-color:color-mix(in srgb, var(--st-active) 38%, transparent); background:var(--st-active-bg); }
.qrow.is-active .qtoken{ background:var(--st-active); color:#fff; }

.queue-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
}
.queue-hint{ font-size:.79rem; color:var(--ink-3); }

/* ------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------ */
.dash{ padding:clamp(14px, 2vw, 20px); }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.kpi{
  background:var(--ground); border-radius:var(--radius); padding:15px 16px;
  border:1px solid transparent; display:flex; flex-direction:column; gap:4px;
  transition:border-color .26s, transform .3s var(--ease-out);
}
.kpi:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.kpi--warn{ background:var(--st-wait-bg); }
.kpi-cap{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.kpi-n{
  font-family:var(--ff-mono); font-weight:600; line-height:1;
  font-size:clamp(1.5rem, 3vw, 1.95rem); letter-spacing:-.035em;
  color:var(--brand); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:3px;
}
.kpi--warn .kpi-n{ color:var(--st-wait); }
.kpi-u{ font-size:.55em; font-weight:500; color:var(--ink-3); }
.kpi-sub{ font-size:.75rem; color:var(--ink-3); line-height:1.34; }

.dash-cols{ display:grid; grid-template-columns:1.25fr .75fr; gap:16px; }

.chart{ margin:0; background:var(--ground); border-radius:var(--radius); padding:18px; }
.chart figcaption{ margin-bottom:16px; }
.chart-title{ display:block; font-weight:650; font-size:.95rem; color:var(--ink); }
.chart-sub{ display:block; font-size:.76rem; color:var(--ink-3); margin-top:3px; }

.bars{ display:grid; gap:11px; }
.bar-row{
  display:grid; grid-template-columns:minmax(88px, 132px) 1fr auto;
  gap:12px; align-items:center;
}
.bar-lab{ font-size:.82rem; color:var(--ink-2); }
.bar-track{ height:13px; border-radius:0 4px 4px 0; background:var(--ground-2); display:block; }
.bar-track i{
  display:block; height:100%; width:0; border-radius:0 4px 4px 0;
  background:var(--chart-1);
  transition:width .85s var(--ease-out);
}
.bar-row:hover .bar-track i{ filter:brightness(1.1); }
.bar-val{
  font-family:var(--ff-mono); font-size:.82rem; color:var(--ink);
  font-variant-numeric:tabular-nums; min-width:20px; text-align:right; font-weight:600;
}

.week{ background:var(--ground); border-radius:var(--radius); padding:18px; }
.week-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.week-list li{ display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; }
.wd{ font-family:var(--ff-mono); font-size:.74rem; color:var(--ink-3); letter-spacing:.04em; }
.wt{ height:10px; border-radius:5px; background:var(--ground-2); display:block; overflow:hidden; }
.wt i{
  display:block; height:100%; border-radius:5px; background:var(--accent);
  width:calc(var(--f, 0) * 100%);
  transition:width .9s var(--ease-out);
}
.wv{
  font-family:var(--ff-mono); font-size:.73rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.week-list li.is-today .wd{ color:var(--brand); font-weight:700; }
.week-list li.is-today .wt i{ background:var(--brand-2); }
.week-list li.is-leave .wt{ background:repeating-linear-gradient(135deg, var(--ground-2) 0 5px, transparent 5px 10px); }
.week-list li.is-leave .wv{ color:var(--ink-3); font-style:italic; }

.dash-note{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:.76rem; color:var(--ink-3);
}

/* ------------------------------------------------------------
   QR scan cue on the "Connect WhatsApp" setup step
   ------------------------------------------------------------ */
.qr{
  display:block; position:relative; width:58px; height:58px; margin-top:12px;
  border:1.6px solid var(--line); border-radius:8px; background:var(--paper);
  overflow:hidden; flex:0 0 auto;
}
.qr b{
  position:absolute; width:15px; height:15px; border:3px solid var(--brand); border-radius:3px;
}
.qr b:nth-child(1){ top:7px;  left:7px;  border-right-color:transparent; border-bottom-color:transparent; }
.qr b:nth-child(2){ top:7px;  right:7px; border-left-color:transparent;  border-bottom-color:transparent; }
.qr b:nth-child(3){ bottom:7px; left:7px; border-right-color:transparent; border-top-color:transparent; }
.qr b:nth-child(4){ bottom:7px; right:7px; border-left-color:transparent; border-top-color:transparent; }
.qr i{
  position:absolute; left:4px; right:4px; height:2px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation:scan 2.4s var(--ease-soft) infinite;
}
@keyframes scan{
  0%,100%{ top:7px; opacity:0; }
  12%,88%{ opacity:1; }
  50%{ top:48px; opacity:1; }
}

/* ------------------------------------------------------------
   Responsive — the clinic screens
   ------------------------------------------------------------ */
@media (max-width: 980px){
  .dash-cols{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }}

@media (max-width: 720px){
  .ecg-rule svg{ height:40px; }
  .vitals-row{ grid-template-columns:1fr; gap:12px; }
  .vitals .hstat{ padding-right:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline; }
  .vitals .hstat + .hstat{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:12px; }
  .vitals .hstat .l{ margin-top:0; grid-column:2; }

  .now{ grid-template-columns:auto 1fr; gap:12px; padding:14px 16px; }
  .now-clock{ display:none; }
  .now-meta{ white-space:normal; }

  .qrow{ grid-template-columns:auto minmax(0,1fr) auto; gap:11px; padding:10px 12px; }
  .qrow::before{ display:none; }
  .qwait{ display:none; }
  .qtoken{ width:36px; height:36px; font-size:.92rem; }

  .bar-row{ grid-template-columns:1fr auto; gap:6px 10px; }
  .bar-lab{ grid-column:1; }
  .bar-val{ grid-column:2; grid-row:1; }
  .bar-track{ grid-column:1 / -1; }}

@media (max-width: 480px){
  .kpis{ grid-template-columns:1fr 1fr; gap:8px; }
  .kpi{ padding:12px 13px; }
  .app-title{ font-size:.66rem; }
  .queue-hint{ font-size:.74rem; }
  .pill{ padding:4px 9px 4px 8px; font-size:.7rem; }}

/* very wide screens: let the page breathe rather than stretch */
@media (min-width: 1500px){
  :root{ --maxw:1280px; }}

@media (prefers-reduced-motion: reduce){
  .ecg-live{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.55; }
  .live-dot::after, .qr i, .pill--active i{ animation:none; }
  .qr i{ top:28px; }
  .qrow{ animation:none; }}

@media print{
  .ecg-rule, .qr, .queue-foot{ display:none !important; }
  .app{ box-shadow:none; }
  .app[hidden]{ display:block !important; }}

/* ------------------------------------------------------------
   Fixes on top of the medical layer
   ------------------------------------------------------------ */

/* The tab wipe has to live in the BACKGROUND, not in a stacked
   pseudo-element: a pseudo painted over a button covers its text
   node, which has no z-index of its own to lift it back out. */
.tab{
  background-color:var(--paper);
  background-image:linear-gradient(var(--brand), var(--brand));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  transition:background-size .34s var(--ease-out), color .22s,
             border-color .22s, transform .2s var(--ease-back);
}
.tab::before{ content:none; }
.tab[aria-selected="true"]{ background-size:100% 100%; }

/* name and meta are separate lines of the slip */
.qname, .qmeta{ display:block; }
.qwho{ line-height:1.3; }

/* the caption under the hero's ECG shouldn't crowd the trace */
.hero .ecg-rule{ margin-top:-4px; }

/* ------------------------------------------------------------
   Real product screenshots
   ------------------------------------------------------------ */
.shot{ animation:panelIn .44s var(--ease-out); }

.shot-fig{
  margin:0 0 20px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.shot-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; background:var(--ground);
  border-bottom:1px solid var(--line);
}
.shot-bar .app-title{
  font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot-fig img{
  display:block; width:100%; height:auto;
  background:var(--ground);
}

.shot-notes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.shot-notes li{
  font-size:.92rem; color:var(--ink-2); line-height:1.5;
  padding-left:16px; border-left:2.5px solid var(--accent);
}
.shot-notes b{ color:var(--ink); font-weight:650; display:block; margin-bottom:3px; }

.shot-foot{
  margin-top:22px; font-size:.8rem; color:var(--ink-3);
  padding-top:14px; border-top:1px dashed var(--line);
}

@media (max-width: 860px){
  .shot-notes{ grid-template-columns:1fr; gap:12px; }}
@media (max-width: 560px){
  .shot-bar .app-title{ font-size:.64rem; }
  .shot-bar .app-live{ display:none; }}

/* A desktop UI shrunk to 350px is unreadable. Below the tablet break the
   capture keeps a legible width and pans inside its own frame instead —
   the page body still never scrolls sideways. */
@media (max-width: 820px){
  .shot-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scroll-snap-type:x proximity;
  }
  .shot-fig img{ min-width:740px; scroll-snap-align:start; }
  .shot-hint{ display:flex; }}
.shot-hint{
  display:none; align-items:center; gap:7px;
  margin:-10px 0 16px; font-size:.78rem; color:var(--ink-3);
  font-family:var(--ff-mono); letter-spacing:.02em;
}
.shot-hint svg{ animation:nudge 1.8s var(--ease-soft) infinite; }
@keyframes nudge{
  0%,100%{ transform:translateX(0); opacity:.6; }
  50%{ transform:translateX(5px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .shot-hint svg{ animation:none; }}

/* ------------------------------------------------------------
   Four-step strip — replaces the long vertical timeline
   ------------------------------------------------------------ */
.flow-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(18px, 2.4vw, 26px);
  padding-top:clamp(20px, 2.6vw, 28px);
  border-top:1px dashed var(--line);
}
.fs-step{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
}
.fs-n{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:.78rem; font-weight:600;
  background:var(--ground); color:var(--ink-3);
  border:1.5px solid var(--line);
}
.fs-step--auto .fs-n{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.fs-step h4{ color:var(--brand); margin-bottom:3px; font-size:.97rem; }
.fs-step p{ color:var(--ink-2); font-size:.87rem; line-height:1.48; }

/* ------------------------------------------------------------
   Three roles, as a strip rather than a whole section
   ------------------------------------------------------------ */
.roles-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:clamp(22px, 3vw, 32px);
  padding-top:clamp(20px, 2.6vw, 28px);
  border-top:1px dashed var(--line);
}
.rs{ border-left:2.5px solid var(--accent); padding-left:16px; }
.rs h4{ color:var(--brand); margin-bottom:5px; }
.rs p{ color:var(--ink-2); font-size:.9rem; line-height:1.5; }

@media (max-width: 980px){
  .flow-strip{ grid-template-columns:repeat(2,1fr); gap:18px; }}
@media (max-width: 720px){
  .flow-strip, .roles-strip{ grid-template-columns:1fr; gap:16px; }}

/* ============================================================
   ============================================================
   CALM MOTION PASS
   The motion vocabulary is deliberately small: fade-up on scroll,
   a 5px card lift, a 0.95 press, and a + that turns into an ×.
   Everything louder than that is switched off below.
   ============================================================
   ============================================================ */

/* ---------- 1. one reveal, used everywhere ---------- */
.js .rv{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
.js .rv.in{ opacity:1; transform:none; }

.js [data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js [data-stagger].in > *,
.js .in [data-stagger] > *{ opacity:1; transform:none; }

/* ---------- 2. one card hover ---------- */
.card, .chan, .feat, .chk, .res, .kpi, .qa{
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover, .chan:hover, .feat:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--line);
}
.chk:hover, .res:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.tl-card:hover{ transform:none; }
.prob:hover, .day:hover, .rs:hover{ padding-left:inherit; }

/* the number on a feature card stays put */
.feat:hover .feat-n{ transform:none; color:var(--ground-2); }
.feat::before{ display:none; }
.card:hover .ico{ transform:none; }

/* ---------- 3. one press ---------- */
.btn:hover{ transform:none; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent); box-shadow:var(--shadow-md); }
.btn:active, .tab:active, .icon-btn:active, .to-top:active{ transform:scale(.95); }
.btn--primary::before{ display:none; }
.icon-btn:hover{ transform:none; }
.logo:hover .logo-mark{ transform:none; }
.ripple{ display:none; }

/* ---------- 4. the FAQ, the way the reference does it ---------- */
.qa{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:visible;
}
.qa:hover{ transform:none; box-shadow:none; border-color:var(--accent-line); }
.qa[open]{ box-shadow:none; border-color:var(--accent-line); }

.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; list-style:none;
  padding:14px 16px;
  font-weight:700; font-size:.95rem; color:var(--brand);
  transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:none; }
.qa summary:hover{ color:var(--accent-2); }

.qa-toggle{
  width:28px; height:28px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent-2);
  font-family:var(--ff-body); font-size:1.05rem; font-weight:600; line-height:1;
  transition:transform .22s, background .22s;
}
.qa[open] .qa-toggle{
  transform:rotate(45deg);
  background:color-mix(in srgb, var(--accent) 20%, transparent);
}
.qa .a{
  padding:0 16px 16px; color:var(--ink-2);
  font-size:.93rem; line-height:1.6; max-width:70ch;
}
.qa .plus{ display:none; }

/* ---------- 5. quieten the ambient layer ---------- */
.hero-orbs i{ animation:none; opacity:.34; }
.phone{ animation:none; }
.bar i::after{ display:none; }
.hero-copy h1 .hl::after{ animation:none; transform:scaleX(1); }
.ecg-live{ animation-duration:7s; opacity:.85; }
.scroll-cue{ display:none; }

/* the entry sequence stays, matched to the same fade-up */
.js .seq{
  opacity:0; transform:translateY(18px);
  animation:seqIn .55s ease forwards;
  animation-delay:calc(var(--d, 0) * 80ms + 40ms);
}
@keyframes seqIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .js .rv, .js [data-stagger] > *, .js .seq{ opacity:1 !important; transform:none !important; }
  .qa-toggle{ transition:none; }}


/* ============================================================
   ============================================================
   CLINIC MANAGER SKIN
   The last layer: matches the typography, banner, buttons, bands
   and footer of theclinicmanager.com so the two sites read as one.
   ============================================================
   ============================================================ */

/* ---- Nunito is rounder and wider than the old display face, so the
   tight negative tracking it was set with has to come back out ---- */
h1,h2,h3,h4{ letter-spacing:-.005em; font-weight:700; }
h1{ letter-spacing:-.012em; line-height:1.12; }
h2{ letter-spacing:-.008em; }
.logo-word{ letter-spacing:-.01em; font-weight:800; }
.eyebrow,.vitals-tag{ letter-spacing:.13em; }
.hstat .n,.vitals .hstat .n,.res .rv,.tick-num{ letter-spacing:-.01em; }

/* ---- section heads: centred, in the main site's heading blue ---- */
.sec-head{ max-width:70ch; margin-inline:auto; text-align:center; }
.sec-head h2{ color:var(--head); font-weight:700; }
.sec-head .eyebrow{ justify-content:center; }
.sec-head .eyebrow::before{ display:none; }
.sec-head .lede{ margin-inline:auto; }

/* ---- buttons: square corners and the cyan of .stnavbtn ---- */
.btn{ border-radius:2px; font-weight:700; }
.btn--primary{
  background:var(--cyan); color:#fff; border-color:var(--cyan);
}
.btn--primary:hover{ background:var(--cyan-deep); border-color:var(--cyan-deep); }
.btn--ghost{ border-radius:2px; }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--accent-2); }

/* ---- nav: solid white with the header shadow the main site uses ---- */
.nav{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
.nav.is-stuck{ box-shadow:0 1px 3px rgba(129,130,130,.7); }
.logo-mark{ background:var(--cyan); color:#fff; border-radius:3px; }
.logo-word em{ color:var(--cyan-deep); }
.icon-btn{ border-radius:2px; }

/* ---- hero: plain white, the way the main site's inner banners are
   (.whyban is #fff with #141b34 text) ---- */
.hero{ background:#fff; color:var(--ink); }
.hero::before{ background:none; }
.hero-orbs{ display:none; }
.hero .eyebrow{ color:var(--accent-2); }
.hero-copy h1{ color:var(--brand); }
.hero-copy h1 .hl{ color:var(--head); }
.hero-copy h1 .hl::after{ background:rgba(2,200,231,.20); }
.hero-sub{ color:var(--ink-2); }
.hero-note{ color:var(--ink-3); }
.hero-note svg{ color:var(--cyan-deep); }
.hero .btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.hero .btn--ghost:hover{ background:#fff; color:var(--accent-2); border-color:var(--cyan); }
.hero .vitals{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm); }
.hero .vitals-tag{ color:var(--ink-3); border-bottom-color:var(--line); }
.hero .hstat .n{ color:var(--brand); }
.hero .hstat .l{ color:var(--ink-2); }
.hero .hstat + .hstat{ border-left-color:var(--line); }
.hero .vitals .hstat .n .u{ color:var(--cyan-deep); }
.phone-caption{ color:var(--ink-3); }
.scroll-cue{ color:var(--ink-3); }
.hero .ecg-rule{ background:transparent; border-color:var(--line-soft); }

/* ---- "Play the conversation": the thing to press, so it looks like it ---- */
.replay{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:16px; }
.replay .btn{
  overflow:visible;            /* the halo below sits outside the button */
  background:var(--cyan); color:#fff; border-color:var(--cyan);
  font-size:.95rem; font-weight:700; padding:13px 24px;
  box-shadow:0 2px 6px rgba(160,160,160,.55);
}
.replay .btn:hover{ background:var(--cyan-deep); border-color:var(--cyan-deep); color:#fff; }
.replay .btn[disabled]{ opacity:.6; cursor:default; transform:none; }
/* a soft halo, only until it has been played once */
.replay .btn::after{
  content:""; position:absolute; inset:-3px; border-radius:3px;
  border:2px solid var(--cyan); opacity:0; pointer-events:none;
}
.replay:not(.has-played) .btn:not([disabled])::after{ animation:playHalo 2.2s var(--ease-soft) infinite; }
@keyframes playHalo{
  0%  { transform:scale(1);    opacity:.55; }
  70% { transform:scale(1.12); opacity:0; }
  100%{ transform:scale(1.12); opacity:0; }
}
.replay-hint{
  font-size:.8rem; color:var(--ink-3); text-align:center; max-width:280px;
}
.replay-hint b{ color:var(--accent-2); font-weight:700; }
@media (prefers-reduced-motion: reduce){
  .replay:not(.has-played) .btn::after{ animation:none; }}

/* ---- bands, cards and panels: square, with the main site's shadow ---- */
.card,.chan,.feat,.rs,.fs-step,.tl-card,.qa,.shot-fig,.calc,.cta,
.panel,.setup .chk,.vitals,.res{ border-radius:3px; }
.chan:hover,.feat:hover,.rs:hover,.keyfet:hover{ box-shadow:0 10px 15px rgba(160,160,160,.6); }
.shot-fig,.phone-screen{ border-radius:3px; }
.phone{ border-radius:26px; }
/* ---- the CTA band picks up the same navy as the banner ---- */
.cta{ background:var(--hero-bg); color:#fff; border:0; }
.cta h2{ color:#fff; }
.cta .btn--primary{ background:var(--cyan); color:#fff; }

/* ---- footer: #212529 with cyan headings, like .sta-footer ---- */
.foot{ background:var(--foot-bg); border-top:0; color:var(--foot-ink); padding-block:40px; }
.foot-in{ color:var(--foot-ink); }
.foot-in strong{ color:var(--foot-head) !important; }

/* ---- small accents ---- */
.live-dot,.vitals-tag .live-dot{ background:var(--cyan); }
.to-top{ border-radius:2px; color:var(--accent-2); }
.qa-toggle{ background:color-mix(in srgb, var(--cyan) 16%, transparent); }
.qa[open] .qa-toggle{ background:color-mix(in srgb, var(--cyan) 26%, transparent); }
.tab{ border-radius:2px; }
.tab[aria-selected="true"]{ background:var(--brand); border-color:var(--brand); }
input[type=range]{ accent-color:var(--cyan); }
.chk-box{ border-radius:2px; }
.bar,.bar i{ border-radius:2px; }
.scroll-progress i{ background:linear-gradient(90deg, var(--cyan), var(--head), var(--cyan)); }

/* the medical accents follow the same family */
:root{ --chart-1:#17A2B8; }

/* ---- final polish ---- */
.to-top{ background:var(--cyan); border-color:var(--cyan); color:#fff; box-shadow:var(--shadow-md); }
.to-top:hover{ background:var(--cyan-deep); border-color:var(--cyan-deep); color:#fff; }
:root{ --grid-rx:rgba(20,27,52,.035); }
.foot-in{ font-weight:600; }
.nav-links a.is-active{ color:var(--accent-2); }

/* the conversation sits on the bottom of the screen, the way a real chat
   does, so the replay fills upward instead of hanging from the top */
.wa-day{ margin-top:auto; }


/* ============================================================
   Calculator results — the cost of the current setup, then the
   part of it that comes back. Colour is never the only signal:
   each block carries an arrow and a heading of its own.
   ============================================================ */

.loss{
  background:var(--st-miss-bg);
  border:1px solid color-mix(in srgb, var(--st-miss) 26%, transparent);
  border-left:4px solid var(--st-miss);
  border-radius:3px;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,22px) clamp(14px,1.8vw,18px);
}
.loss-tag,.gain-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; margin-bottom:10px;
}
.loss-tag{ color:var(--st-miss); }
.loss-main{
  display:flex; align-items:baseline; gap:3px; flex-wrap:wrap;
  font-family:var(--ff-display); font-weight:800;
  color:var(--st-miss); letter-spacing:-.02em; line-height:1;
  font-size:clamp(2.1rem,4.4vw,2.9rem); font-variant-numeric:tabular-nums;
}
.loss-cur{ font-size:.72em; }
.loss-per{
  font-family:var(--ff-body); font-size:.9rem; font-weight:600;
  color:var(--st-miss); opacity:.8; margin-left:6px; letter-spacing:0;
}
.loss-year{
  margin-top:9px; font-size:.88rem; color:var(--ink-2); line-height:1.45;
}
.loss-year .tick-num{ font-weight:700; color:var(--st-miss); }
.loss-list{
  list-style:none; margin:14px 0 0; padding:13px 0 0;
  border-top:1px dashed color-mix(in srgb, var(--st-miss) 34%, transparent);
  display:grid; gap:9px;
}
.loss-list li{
  display:grid; grid-template-columns:var(--numcol) 1fr;
  align-items:baseline; gap:var(--numgap);
}
.loss-list .ln{
  font-family:var(--ff-display); font-weight:800; font-size:1.05rem;
  color:var(--st-miss); text-align:right;
  font-variant-numeric:tabular-nums;
}
.loss-list .lt{ font-size:.85rem; color:var(--ink-2); line-height:1.4; }

.gain{
  margin-top:14px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-left:4px solid var(--cyan-deep);
  border-radius:3px;
  padding:clamp(16px,2vw,22px);
}
.gain-tag{ color:var(--accent-2); }
.gain-row{
  display:grid; grid-template-columns:var(--numcol) 1fr;
  align-items:baseline; gap:var(--numgap);
  padding:9px 0;
}
.gain-row + .gain-row{
  border-top:1px dashed color-mix(in srgb, var(--cyan-deep) 26%, transparent);
}
.gain-row .gv{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(1.35rem,2.4vw,1.7rem); color:var(--accent-2);
  letter-spacing:-.02em; line-height:1; white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right;
}
.gain-row .gv .ru{ font-size:.55em; font-weight:700; margin-left:3px; color:var(--accent-2); opacity:.75; }
.gain-row .gl{ font-size:.89rem; color:var(--ink); line-height:1.4; font-weight:600; }
.gain-row .gl small{ display:block; font-size:.79rem; color:var(--ink-3); font-weight:400; margin-top:2px; }

@media (max-width: 560px){
  /* narrower column and slightly smaller figures, still one shared
     grid line for both blocks */
  .results{ --numcol:6.5rem; --numgap:10px; }
  .gain-row .gv{ font-size:1.15rem; }
  .loss-list .ln{ font-size:.95rem; }
}


/* ============================================================
   ONE BOX
   The sliders and the figures are two halves of a single card,
   split by a hairline and sharing one baseline grid. Nothing
   inside is a card of its own.
   ============================================================ */

.calc{
  grid-template-columns:1fr 1.12fr;
  column-gap:0;                 /* the divider carries the spacing */
  row-gap:0;
  align-items:start;
  padding:0;                    /* each half sets its own padding */
  overflow:hidden;
}
.calc-inputs{ padding:clamp(22px,2.9vw,34px) clamp(20px,2.7vw,32px); }
.results{
  padding:clamp(22px,2.9vw,34px) clamp(20px,2.7vw,32px);
  border-left:1px solid var(--line);
  gap:0;
}
.calc-note{
  grid-column:1 / -1; margin:0;
  padding:14px clamp(20px,2.7vw,32px) 16px;
  border-top:1px solid var(--line);
  background:var(--ground);
}

/* both columns open with the same small heading, on the same line */
.col-tag,.loss-tag,.gain-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; margin:0 0 16px; line-height:1;
}
.col-tag{ color:var(--ink-3); }
.calc-inputs .field:first-of-type{ margin-top:0; }

/* the two figure groups: plain, told apart by their heading and
   the colour of their numbers — no nested panels */
.loss,.gain{
  background:none; border:0; border-radius:0; padding:0; margin:0;
}
.gain{
  margin-top:20px; padding-top:20px;
  border-top:1px solid var(--line);
}
.loss-list{
  border-top:1px dashed color-mix(in srgb, var(--st-miss) 30%, transparent);
}

/* stacked: the hairline moves from the side to the top */
@media (max-width: 860px){
  .calc{ grid-template-columns:1fr; }
  .results{ border-left:0; border-top:1px solid var(--line); }
}

/* every figure on the right hugs the same left rail as the headline
   number above it, instead of floating against a right edge */
.loss-list .ln,.gain-row .gv{ text-align:left; }