/* =====================================================================
   Scriptify — site.css
   Structure and skin: tokens, layout, type, header, footer, buttons,
   cards, forms and the responsive rules. Everything that decides how the
   page LOOKS standing still.
   Motion lives in animations.css, which loads after this file.
   ===================================================================== */

:root{
  --logo-url:url(/assets/logo/Scritptify\ Logo\ with\ Dots.png);
  --bg:#FFFFFF; --bg-soft:#F6F8FA; --bg-elev:#FFFFFF;
  --ink:#0A0D12; --ink-soft:#2A3039; --ink-muted:#5A6472; --ink-subtle:#8A95A5;
  --border:#E2E7EC; --border-strong:#CAD2DB; --grid:#EFF2F5;
  --cyan:#22B8E8; --cyan-deep:#0EA5D0; --cyan-dark:#0B7FA5;
  --cyan-soft:#D6F1FB; --cyan-ghost:rgba(34,184,232,.08); --cyan-line:rgba(34,184,232,.28);
  --ok:#10B37A; --ok-soft:rgba(16,179,122,.12);
  --warn:#E07856; --warn-soft:rgba(224,120,86,.12);
  --shadow-sm:0 1px 2px rgba(10,13,18,.05);
  --shadow-md:0 10px 28px -12px rgba(10,13,18,.12);
  --shadow-lg:0 28px 60px -24px rgba(10,13,18,.18);
  --ease:cubic-bezier(.4,0,.1,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --logo-filter:none;
  --r:14px;
}
[data-theme="dark"]{
  --bg:#000000; --bg-soft:#0b0c0e; --bg-elev:#141923;
  --ink:#F0F3F7; --ink-soft:#C8CFDA; --ink-muted:#8893A3; --ink-subtle:#5A6472;
  --border:#1F2530; --border-strong:#2A3140; --grid:#131822;
  --cyan:#36C6F4; --cyan-deep:#22B8E8; --cyan-dark:#0EA5D0;
  --cyan-soft:rgba(54,198,244,.14); --cyan-ghost:rgba(54,198,244,.06); --cyan-line:rgba(54,198,244,.3);
  --ok:#2DD198; --ok-soft:rgba(45,209,152,.15);
  --warn:#FF9478; --warn-soft:rgba(255,148,120,.15);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 10px 28px -12px rgba(0,0,0,.5);
  --shadow-lg:0 28px 60px -24px rgba(0,0,0,.7);
  --logo-filter:invert(1) hue-rotate(180deg) saturate(1.1);
}
.logo-mark{display:block;width:auto;aspect-ratio:760/124;background:var(--logo-url) no-repeat left center/contain;filter:var(--logo-filter);transition:filter .35s var(--ease)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease), color .35s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.flow>*,.hero-grid>*,.calc>*,.cards>*,.link>*,.rule>*{min-width:0}
.step>span{min-width:0}
.device{max-width:100%}
body{overflow-x:hidden}
.narrow{max-width:760px}
section.band{padding:96px 0;border-top:1px solid var(--border)}
section.band.first{border-top:none;padding-top:56px}
.soft{background:var(--bg-soft)}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.035em;font-weight:800}
h1{font-size:clamp(2.5rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.75rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.025em;font-weight:700}
h4{font-size:1.02rem;letter-spacing:-.015em;font-weight:700;line-height:1.35}
p{max-width:68ch}
.lede{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink-soft);font-weight:400}
.muted{color:var(--ink-muted)}
.subtle{color:var(--ink-subtle);font-size:.84rem;line-height:1.5}
.kicker{font-size:.82rem;font-weight:600;color:var(--cyan-dark);letter-spacing:.01em;margin-bottom:14px}
[data-theme="dark"] .kicker{color:var(--cyan)}
.sec-head{margin-bottom:44px}
.sv-scroll .sv-pin{margin-top:-8px}
.sec-head p{margin-top:16px}

/* ---------- header ---------- */
header.top{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px}
nav.main{display:flex;gap:2px;margin-left:auto;align-items:center}
nav.main a{
  padding:8px 13px;border-radius:9px;font-size:.925rem;font-weight:500;
  color:var(--ink-muted);transition:color .18s var(--ease),background .18s var(--ease);
}
nav.main a:hover{color:var(--ink);background:var(--bg-soft)}
nav.main a.active{color:var(--ink);font-weight:600;background:var(--cyan-ghost)}
.menu-btn{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;font-weight:600;font-size:.96rem;
  border:1px solid transparent;transition:transform .16s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--cyan-dark);color:#fff}
[data-theme="dark"] .btn-primary:hover{background:var(--cyan);color:#07090C}
.btn-ghost{border-color:var(--border-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-dark)}
[data-theme="dark"] .btn-ghost:hover{color:var(--cyan)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:9px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- pages ---------- */
.page{display:none}
.page.active{display:block}

/* ---------- hero ---------- */
.hero{position:relative;padding:78px 0 84px;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 12% 0%,var(--cyan-ghost),transparent 70%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:64px;align-items:center}
.hero h1{margin-bottom:22px}
.hero-grid .lede{max-width:34ch}
.hero-grid h1{font-size:clamp(2.4rem,4.4vw,3.55rem)}
.hero-note{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.86rem;color:var(--ink-muted)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.tick{color:var(--ok);font-weight:700}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-elev)}
.proof div{padding:26px 24px;border-right:1px solid var(--border)}
.proof div:last-child{border-right:none}
.proof b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:8px}
.proof b em{font-style:normal;color:var(--cyan)}
.proof span{font-size:.88rem;color:var(--ink-muted);line-height:1.4;display:block}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r);
  padding:28px;
}
.card h4{margin-bottom:10px}
.card p{font-size:.95rem;color:var(--ink-muted);max-width:none}
.card .num{
  font-size:.78rem;font-weight:700;color:var(--cyan-dark);
  display:block;margin-bottom:14px;font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .card .num{color:var(--cyan)}

/* rule list — bordered rows, no card kit */
.rules{border-top:1px solid var(--border)}
.rule{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:36px;padding:26px 0;border-bottom:1px solid var(--border);align-items:start}
.rule h4{color:var(--ink)}
.rule p{font-size:.96rem;color:var(--ink-muted)}
@media(max-width:760px){.rule{grid-template-columns:1fr;gap:8px}}

/* ---------- device frames ---------- */
.device{background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.dev-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.dev-title{margin-left:8px;font-size:.79rem;color:var(--ink-muted);font-weight:500}
.dev-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--ok)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok-soft);animation:pulse 2.4s infinite}

/* queue table */
.q{width:100%;border-collapse:collapse;font-size:.8rem}
.q th{
  text-align:left;padding:11px 14px;font-weight:600;color:var(--ink-subtle);
  font-size:.72rem;border-bottom:1px solid var(--border);white-space:nowrap;
}
.q td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--ink-soft);white-space:nowrap}
.q tr:last-child td{border-bottom:none}
.q .rx{font-variant-numeric:tabular-nums;color:var(--ink-subtle)}
.q .nm{font-weight:600;color:var(--ink)}
.q .med{color:var(--ink-muted)}
.q .med i{font-style:normal;color:var(--ink-subtle)}
.pill-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
.t-ok{background:var(--ok-soft);color:var(--ok)}
.t-no{background:var(--warn-soft);color:var(--warn)}
.t-wait{background:var(--cyan-soft);color:var(--cyan-dark)}
[data-theme="dark"] .t-wait{color:var(--cyan)}
.q-foot{display:flex;align-items:center;gap:10px;padding:13px 14px;border-top:1px solid var(--border);background:var(--bg-soft);font-size:.8rem;color:var(--ink-muted)}
.q-foot b{color:var(--ink);font-variant-numeric:tabular-nums}
.q-scroll{overflow-x:auto}
.q-wrap{overflow-x:auto}
.q .med{max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.q .med{max-width:130px}.q th,.q td{padding:10px}}
/* ---------- how it works stepper ---------- */
.flow{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:52px;align-items:start}
.rail{position:sticky;top:92px}
.step{
  display:grid;grid-template-columns:30px 1fr;gap:14px;padding:15px 16px 15px 12px;
  border-left:2px solid var(--border);border-radius:0 10px 10px 0;
  text-align:left;width:100%;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.step:hover{background:var(--bg-soft)}
.step[aria-selected="true"]{border-left-color:var(--cyan);background:var(--cyan-ghost)}
.step .sn{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);
  display:grid;place-items:center;font-size:.76rem;font-weight:700;color:var(--ink-subtle);
  font-variant-numeric:tabular-nums;transition:all .2s var(--ease);margin-top:2px;
}
.step[aria-selected="true"] .sn{background:var(--cyan);border-color:var(--cyan);color:#fff}
[data-theme="dark"] .step[aria-selected="true"] .sn{color:#07090C}
.step .st{font-weight:600;font-size:.99rem;letter-spacing:-.015em;line-height:1.3}
.step .sd{font-size:.87rem;color:var(--ink-muted);margin-top:4px;line-height:1.45;display:none}
.step[aria-selected="true"] .sd{display:block}
.stage-panel{display:none}
.stage-panel.on{display:block;animation:fade .32s var(--ease-out) both}
.panel-cap{margin-top:18px;font-size:.88rem;color:var(--ink-muted);max-width:62ch}
.panel-cap b{color:var(--ink);font-weight:600}

/* tablet — consent */
.ipad{
  position:relative;width:min(452px,100%);aspect-ratio:3/4;margin:0 auto;
  background:#0a0c0f;border-radius:32px;padding:15px;display:flex;
  box-shadow:0 50px 90px -32px rgba(10,13,18,.42),0 0 0 2px rgba(255,255,255,.06) inset;
}
[data-theme="dark"] .ipad{background:#050709;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 2px rgba(255,255,255,.08) inset}
.ipad-cam{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#1d232c;box-shadow:0 0 0 1.5px rgba(255,255,255,.05)}
.ipad-home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:26%;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.ipad-screen{flex:1;background:var(--bg);border-radius:20px;padding:0 22px 18px;display:flex;flex-direction:column;overflow:hidden}
.ipad-status{display:flex;align-items:center;gap:10px;padding:13px 2px 10px;font-size:.72rem;font-weight:600;color:var(--ink-muted)}
.ipad-status .st-mid{margin:0 auto;font-weight:500;color:var(--ink-subtle)}
.tablet-head{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:16px}
.tablet-head .ph{font-size:1.12rem;font-weight:700;letter-spacing:-.025em}
.tablet-head .sub{font-size:.82rem;color:var(--ink-muted);margin-top:2px}
.ipad-prompt{font-size:.76rem;font-weight:600;color:var(--ink-muted);margin-bottom:9px}
.consents{display:grid;gap:9px;margin-bottom:16px}
.ipad-submit{
  position:relative;display:grid;place-items:center;width:100%;margin-top:auto;
  padding:14px;border-radius:13px;font-weight:700;font-size:.92rem;overflow:hidden;
  background:var(--bg-soft);color:var(--ink-subtle);border:1px solid var(--border);
}
.ipad-submit > span{grid-area:1/1}
.ipad-submit .lbl-done{opacity:0}
.tapdot{
  position:absolute;width:54px;height:54px;border-radius:50%;background:#fff;
  opacity:0;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);
}
.consent{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--border);border-radius:11px;background:var(--bg-elev)}
.consent .cn{font-weight:600;font-size:.9rem;flex:1}
.consent .seal{width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.consent .lines{flex:1;display:grid;gap:4px;max-width:120px}
.consent .lines i{display:block;height:3px;border-radius:2px;background:var(--border);}
.consent .lines i:nth-child(2){width:78%}
.consent .lines i:nth-child(3){width:56%}
.sigpad{border:1px dashed var(--border-strong);border-radius:12px;padding:14px 16px 12px;position:relative;background:var(--bg-soft);margin-bottom:16px}
.sigpad svg{width:100%;height:72px;display:block}
.sigpad svg path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sigline{border-top:1px solid var(--border-strong);margin-top:6px;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink-subtle)}
.sigline .x{font-size:1rem;color:var(--ink-muted)}
.powered{margin-left:auto;display:flex;align-items:center;gap:6px}
.powered .logo-mark{height:13px}

/* phone */
.phone{width:300px;margin:0 auto;background:var(--ink);border-radius:38px;padding:11px;box-shadow:var(--shadow-lg)}
[data-theme="dark"] .phone{background:#1a2029}
.phone-screen{background:var(--bg);border-radius:29px;overflow:hidden}
.phone-status{display:flex;align-items:center;justify-content:space-between;padding:11px 20px 6px;font-size:.7rem;font-weight:600;color:var(--ink-muted)}
.phone-body{padding:8px 15px 22px}
.call-head{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--border);border-radius:14px;background:var(--bg-elev);margin-bottom:12px}
.av{width:36px;height:36px;border-radius:50%;background:var(--cyan);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700;flex-shrink:0}
[data-theme="dark"] .av{color:#07090C}
.av.g{background:var(--bg-soft);color:var(--ink-muted);border:1px solid var(--border)}
.call-head .who{font-weight:700;font-size:.88rem;line-height:1.25}
.call-head .role{font-size:.74rem;color:var(--ink-muted)}
.call-head .tag{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--ok);text-align:right;line-height:1.3}
.chat{display:grid;gap:7px}
.msg{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start}
.msg .tagx{font-size:.62rem;font-weight:700;color:var(--ink-subtle);padding-top:5px}
.msg .bub{padding:8px 11px;border-radius:11px;font-size:.79rem;line-height:1.4;background:var(--bg-soft);color:var(--ink-soft)}
.msg.ai .bub{background:var(--cyan-ghost);border:1px solid var(--cyan-line);color:var(--cyan-dark)}
[data-theme="dark"] .msg.ai .bub{color:var(--cyan)}
.msg.ai .tagx{color:var(--cyan)}

/* rpm card */
.rpm{border:1px solid var(--border);border-radius:14px;padding:15px;background:var(--bg-elev);margin-bottom:12px}
.rpm-top{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.rpm-top .dev{font-size:.78rem;font-weight:600;color:var(--ink-muted)}
.rpm-top .live{margin-left:auto;font-size:.66rem;font-weight:700;color:var(--ok)}
.rpm-val{display:flex;align-items:baseline;gap:6px}
.rpm-val b{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.rpm-val span{font-size:.76rem;color:var(--ink-muted)}
.rpm-val .inr{margin-left:auto;font-size:.7rem;font-weight:600;color:var(--ok);background:var(--ok-soft);padding:3px 8px;border-radius:999px}
.spark{height:44px;margin-top:10px}
.spark svg{width:100%;height:100%;overflow:visible}
.spark path{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round}
.spark .band{fill:var(--cyan-ghost);stroke:none}
.rpm-foot{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-subtle);margin-top:5px}

/* note / claim documents */
.doc{border:1px solid var(--border);border-radius:var(--r);background:var(--bg-elev);overflow:hidden;max-width:560px;margin:0 auto;box-shadow:var(--shadow-md)}
.doc-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.doc-head b{font-size:.93rem;letter-spacing:-.015em}
.doc-head .state{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--cyan-dark);background:var(--cyan-ghost);padding:4px 10px;border-radius:999px}
[data-theme="dark"] .doc-head .state{color:var(--cyan)}
.doc-head .state.done{color:var(--ok);background:var(--ok-soft)}
.doc-meta{display:flex;gap:26px;padding:13px 18px;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--ink-muted)}
.doc-meta b{color:var(--ink);font-weight:600}
.soap{padding:6px 18px 16px}
.soap-row{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);align-items:start}
.soap-row:last-child{border-bottom:none}
.soap-row .k{width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.7rem;font-weight:700}
.soap-row .v{font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.kv{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border);font-size:.84rem}
.kv:last-of-type{border-bottom:none}
.kv .k{color:var(--ink-muted)}
.kv .v{font-weight:600}
.doc-foot{padding:13px 18px;background:var(--bg-soft);border-top:1px solid var(--border);display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600}
.doc-foot .seal{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.68rem}

/* governance chain */
.chain{display:grid;gap:2px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--border)}
.link{background:var(--bg-elev);padding:22px 24px;display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:28px;align-items:start}
.link .lt{font-weight:700;font-size:.98rem;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.link .lt .bd{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0}
.link .ld{font-size:.92rem;color:var(--ink-muted)}
@media(max-width:760px){.link{grid-template-columns:1fr;gap:8px}}

/* ---------- P&L calculator: no frames, type and a live accrual chart ---------- */
.pl{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;align-items:start;
}

/* the control side */
.pl-dial{display:flex;align-items:baseline;gap:11px;margin-bottom:18px}
.pl-n{
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,4vw,3rem);line-height:1;letter-spacing:-.05em;
  color:var(--cyan-deep);font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .pl-n{color:var(--cyan)}
.pl-n-l{font-size:1rem;font-weight:600;color:var(--ink-muted)}

.pl-range{
  width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  outline:none;cursor:ew-resize;
  background:linear-gradient(90deg,var(--cyan) 0 var(--p,19%),var(--border) var(--p,19%) 100%);
}
.pl-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:3px solid var(--cyan);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.3);cursor:grab;
}
.pl-range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.pl-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:3px solid var(--cyan);cursor:grab;
}
.pl-range:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.pl-scale{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:.74rem;color:var(--ink-subtle);font-variant-numeric:tabular-nums;
}
.pl-note{font-size:.86rem;color:var(--ink-muted);margin-top:18px;max-width:42ch}

.pl-fee{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--border);
  display:grid;gap:6px;
}
.pl-fee-amt{
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;font-size:1.7rem;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.pl-fee-l{font-size:.92rem;color:var(--ink-soft)}
.pl-fee-l b{color:var(--cyan-deep)}
[data-theme="dark"] .pl-fee-l b{color:var(--cyan)}
.pl-fee-sub{font-size:.8rem;color:var(--ink-subtle);max-width:46ch;margin-top:4px}

/* the output side */
.pl-yr{
  display:flex;align-items:flex-start;gap:6px;
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;
  font-size:clamp(2.9rem,6vw,4.4rem);line-height:.94;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.pl-cur{font-size:.42em;font-weight:600;color:var(--ink-subtle);margin-top:.22em}
.pl-yr-l{font-size:.94rem;color:var(--ink-muted);margin-top:8px}

/* twelve bars that build as the panel grows: the point is that it accrues */
.pl-chart{margin-top:18px}
.pl-bars{
  display:flex;align-items:flex-end;gap:6px;height:84px;
  border-bottom:1px solid var(--border);
}
.pl-bars span{
  flex:1;border-radius:5px 5px 0 0;height:4%;
  background:linear-gradient(180deg,var(--cyan),color-mix(in srgb,var(--cyan) 42%,transparent));
  transition:height .45s cubic-bezier(.22,.9,.24,1);
  transition-delay:calc(var(--i) * 14ms);
}
.pl-axis{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:.74rem;color:var(--ink-subtle);
}
.pl-axis span:nth-child(2){color:var(--ink-muted);font-weight:600}

.pl-facts{margin-top:24px;display:grid}
.pl-facts > div{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.pl-facts > div:first-child{border-top:1px solid var(--border)}
.pl-facts dt{font-size:.92rem;color:var(--ink-muted)}
.pl-facts dd{font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums}
.pl-fine{font-size:.76rem;color:var(--ink-subtle);margin-top:16px;max-width:52ch}

@media(max-width:900px){
  .pl{grid-template-columns:1fr;gap:34px;align-items:start}
  .pl-bars{height:88px;gap:5px}
}

/* ---------- protocols ---------- */
.protos{border-top:1px solid var(--border)}
.proto{border-bottom:1px solid var(--border)}
.proto-btn{display:flex;align-items:center;gap:16px;width:100%;padding:20px 4px;text-align:left}
.proto-btn .pname{font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.proto-btn .pmeta{margin-left:auto;font-size:.82rem;color:var(--ink-muted);display:none}
@media(min-width:700px){.proto-btn .pmeta{display:block}}
.proto-btn .chev{width:24px;height:24px;display:grid;place-items:center;color:var(--ink-subtle);transition:transform .25s var(--ease);font-size:1rem}
.proto[open-state="1"] .chev{transform:rotate(45deg);color:var(--cyan)}
.proto-body{display:none;padding:0 4px 26px;grid-template-columns:1fr 1fr;gap:32px}
.proto[open-state="1"] .proto-body{display:grid}
@media(max-width:700px){.proto-body{grid-template-columns:1fr;gap:22px}}
.plist h5{font-size:.82rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.plist h5 .sw{width:8px;height:8px;border-radius:2px}
.plist ul{list-style:none;display:grid;gap:9px}
.plist li{font-size:.9rem;color:var(--ink-muted);padding-left:18px;position:relative;line-height:1.45}
.plist li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:1.5px;background:var(--border-strong)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.member{background:var(--bg-elev);padding:28px 26px}
.member .av{width:44px;height:44px;font-size:.9rem;margin-bottom:16px}
.member h4{margin-bottom:3px}
.member .rl{font-size:.88rem;color:var(--cyan-dark);font-weight:600;margin-bottom:10px}
[data-theme="dark"] .member .rl{color:var(--cyan)}
.member .cr{font-size:.83rem;color:var(--ink-muted);line-height:1.5}
.advisors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px}
.adv{border-top:1px solid var(--border);padding-top:16px}
.adv b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.adv span{font-size:.84rem;color:var(--ink-muted);line-height:1.45;display:block}

/* ---------- cta ---------- */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:transparent;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cta-half{background:transparent;padding:40px 36px;transition:background .2s var(--ease)}
.cta-half:hover{background:var(--bg-soft)}
.cta-half h3{margin-bottom:10px}
.cta-half p{font-size:.95rem;color:var(--ink-muted);margin-bottom:22px}
.cta-band{background:transparent;color:var(--bg);border-radius:var(--r);padding:56px 48px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
[data-theme="dark"] .cta-band{background:transparent;border:1px solid var(--border-strong);color:var(--ink)}
.cta-band h2{margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.68);max-width:48ch}
[data-theme="dark"] .cta-band p{color:var(--ink-muted)}
.cta-band .btn-primary{background:var(--cyan);color:#07090C}
.cta-band .btn-primary:hover{background:#fff;color:var(--ink)}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
[data-theme="dark"] .cta-band .btn-ghost{border-color:var(--border-strong);color:var(--ink)}
.cta-band .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:56px 0 44px;margin-top:8px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot .logo-mark{height:22px;margin-bottom:14px}
.foot h5{font-size:.8rem;font-weight:700;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a,.foot li{font-size:.88rem;color:var(--ink-muted)}
.foot a:hover{color:var(--cyan-dark)}
[data-theme="dark"] .foot a:hover{color:var(--cyan)}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.8rem;color:var(--ink-subtle)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .flow{grid-template-columns:1fr;gap:32px}
  .rail{position:static}
  .c3{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .advisors{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr 1fr}
  .proof div:nth-child(2){border-right:none}
  .proof div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16px}
  section.band{padding:64px 0}
  .wrap{padding:0 20px}
  .menu-panel{min-width:240px}
  .c3,.c2,.team,.advisors,.cta-split,.proof{grid-template-columns:1fr}
  .proof div{border-right:none;border-bottom:1px solid var(--border)}
  .proof div:last-child{border-bottom:none}
  .cta-band{grid-template-columns:1fr;padding:36px 26px}
  .foot{grid-template-columns:1fr}
  .doc-meta{gap:16px;flex-wrap:wrap}
}

/* =====================================================================
   HERO — the pharmacy sketching itself
   ===================================================================== */
.sketch{position:relative;color:var(--ink)}
.sketch svg{width:100%;height:auto;display:block;overflow:visible}
.sketch .letters text{font-family:'Figtree',system-ui,sans-serif;opacity:0;transition:opacity .8s ease}
.sketch.drawn .letters text{opacity:1}
.sketch.drawn .letters text{opacity:1}
.sketch.clearing svg{opacity:0}
.sketch-cap{
  display:flex;align-items:center;gap:9px;margin-top:10px;
  font-size:.82rem;color:var(--ink-subtle);
}
.sketch-cap i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0;animation:nib 1.6s ease-in-out infinite}

/* =====================================================================
   HOW IT WORKS — MOTION
   Panels are display:none when inactive, so every animation below
   restarts from zero the moment its step is selected.
   ===================================================================== */

.stage-panel{position:relative}
.device,.doc,.ipad{position:relative}

/* ---------- step progress on the rail ---------- */
.step{position:relative;overflow:hidden}
.step .sbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);opacity:.5}

/* =====================================================================
   THE PHARMACY PORTAL — the only screen a partner pharmacy ever sees
   ===================================================================== */
.portal{border:1px solid var(--border-strong);border-radius:16px;background:var(--bg-elev);box-shadow:var(--shadow-lg);overflow:hidden}
.pt-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.pt-bar .logo-mark{height:14px}
.pt-bar .sepr{width:1px;height:15px;background:var(--border-strong)}
.pt-bar .shop{font-size:.83rem;font-weight:600}
.bell{margin-left:auto;position:relative;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink-muted)}
.bell .badge{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--cyan);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;
  opacity:0;transform:scale(0);
}
[data-theme="dark"] .bell .badge{color:#06202b}

.pt-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.pt-stats div{padding:14px 16px;border-right:1px solid var(--border)}
.pt-stats div:last-child{border-right:none}
.pt-stats b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.pt-stats span{font-size:.73rem;color:var(--ink-muted);line-height:1.3}
@media(max-width:620px){.pt-stats{grid-template-columns:1fr 1fr}.pt-stats div:nth-child(2){border-right:none}.pt-stats div:nth-child(-n+2){border-bottom:1px solid var(--border)}}

.pt-sec{display:flex;align-items:center;gap:9px;padding:12px 16px;font-size:.77rem;font-weight:600;color:var(--ink-muted);border-bottom:1px solid var(--border)}
.pt-sec .cnt{margin-left:auto;font-weight:500;color:var(--ink-subtle)}

.pt-list{display:block}
.pt-row{
  display:grid;grid-template-columns:1.35fr 1fr .8fr auto;gap:14px;align-items:center;
  width:100%;text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);
  transition:background .16s var(--ease);
}
.pt-row:last-child{border-bottom:none}
button.pt-row{cursor:pointer}
button.pt-row:hover{background:var(--bg-soft)}
.pt-row .who{display:block;font-weight:600;font-size:.9rem;line-height:1.25}
.pt-row .cond{display:block;font-size:.76rem;color:var(--ink-muted);margin-top:2px}
.pt-row .when{display:block;font-size:.8rem;color:var(--ink-muted)}
.pt-row .act{display:block;font-size:.78rem;font-weight:600;color:var(--cyan-dark);white-space:nowrap}
[data-theme="dark"] .pt-row .act{color:var(--cyan)}
.pt-row.fresh{background:var(--cyan-ghost)}
.pt-row .newdot{width:7px;height:7px;border-radius:50%;background:var(--cyan);display:inline-block;margin-right:6px;vertical-align:1px}
@media(max-width:620px){
  .pt-row{grid-template-columns:1fr auto;gap:6px}
  .pt-row .when{display:none}
}

/* toast */
.toast{
  position:absolute;left:16px;right:16px;top:60px;z-index:9;
  display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:13px;
  background:var(--ink);color:var(--bg);box-shadow:0 22px 44px -18px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-14px);
}
[data-theme="dark"] .toast{background:var(--bg-elev);color:var(--ink);border:1px solid var(--border-strong)}
.toast .tdot{width:9px;height:9px;border-radius:50%;background:var(--cyan);margin-top:5px;flex-shrink:0}
.toast > span{flex:1;min-width:0}
.toast b{display:block;font-size:.86rem;font-weight:700;letter-spacing:-.015em}
.toast span{display:block;font-size:.78rem;opacity:.72;margin-top:2px}
.toast .tcta{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--cyan);white-space:nowrap;align-self:center}

/* note detail */
.pt-note{display:none;padding:0}
.portal[data-view="note"] .pt-list,
.portal[data-view="note"] .toast,
.portal[data-view="note"] .pt-sec,
.portal[data-view="note"] .pt-stats{display:none}
.portal[data-view="note"] .pt-note.on{display:block;animation:noteIn .35s var(--ease-out) both}
.note-top{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.note-back{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--ink-muted)}
.note-back:hover{color:var(--cyan-dark)}
[data-theme="dark"] .note-back:hover{color:var(--cyan)}
.note-top .st{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:4px 10px;border-radius:999px}
.note-meta{display:flex;flex-wrap:wrap;gap:8px 26px;padding:14px 16px;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--ink-muted)}
.note-meta b{color:var(--ink);font-weight:600}
.note-signs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-top:1px solid var(--border)}
.note-signs div{background:var(--bg-elev);padding:13px 16px;font-size:.78rem;color:var(--ink-muted)}
.note-signs b{display:block;color:var(--ink);font-weight:600;font-size:.85rem;margin-top:2px}
.note-foot{padding:13px 16px;background:var(--bg-soft);border-top:1px solid var(--border);display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--ink-muted)}
.note-foot .seal{width:19px;height:19px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.64rem;flex-shrink:0}
@media(max-width:620px){.note-signs{grid-template-columns:1fr}}

/* statement */
.stmt-row{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--border);font-size:.86rem}
.stmt-row .k{color:var(--ink-muted)}
.stmt-row .v{font-weight:600;font-variant-numeric:tabular-nums}
.stmt-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 16px;background:var(--bg-soft);border-top:1px solid var(--border)}
.stmt-total .k{font-size:.86rem;font-weight:600}
.stmt-total .v{font-size:1.85rem;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}

/* ---------- 1 · the patient list ---------- */
.stage-panel[data-panel="0"] .pt-stats div,
.stage-panel[data-panel="0"] .pt-row{opacity:0}

/* ---------- 2 · consent on the tablet ---------- */
.stage-panel[data-panel="1"] .consent,
.stage-panel[data-panel="1"] .sigpad,
.stage-panel[data-panel="1"] .sigline{opacity:0}
.stage-panel[data-panel="1"] .consent .lines i{width:0}
.sig-tick{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:700;opacity:0;transform:scale(0)}

/* ---------- 4 · the notification landing ---------- */
.stage-panel[data-panel="3"] .pt-row{opacity:0}
.stage-panel[data-panel="3"] .pt-row.fresh{background:transparent}
.stage-panel[data-panel="3"] .pt-row.fresh .newdot,
.stage-panel[data-panel="3"] .pt-row.fresh .act{opacity:0}

/* ---------- 5 · opening the note ---------- */
.stage-panel[data-panel="4"] .pt-row{opacity:0}
.stage-panel[data-panel="4"] .soap-row{opacity:0}
.cursor-hint{
  position:absolute;z-index:12;width:22px;height:22px;pointer-events:none;opacity:0;
  color:var(--ink);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* ---------- 6 · the statement ---------- */
.stage-panel[data-panel="5"] .stmt-row{opacity:0}
.stage-panel[data-panel="5"] .stmt-total{opacity:0}
/* =====================================================================
   3 · THE PHONE — recreated from the pitch deck's slide 8
   One 13s cycle, looping: incoming call → accept → app opens →
   live call with waveform → transcript drafts itself → card pops out.
   ===================================================================== */
.iphone{
  position:relative;width:300px;height:646px;margin:0 auto;
  background:#0a0c0f;border-radius:48px;padding:11px;display:flex;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.42),0 0 0 2px rgba(255,255,255,.06) inset;
}
[data-theme="dark"] .iphone{background:#050709;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 2px rgba(255,255,255,.08) inset}
.ip-screen{flex:1;background:var(--bg);border-radius:38px;position:relative;display:flex;flex-direction:column;overflow:visible}
.ip-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:32%;height:4px;border-radius:2px;background:rgba(255,255,255,.32);z-index:4}

/* --- dynamic island --- */
.ip-island{
  position:absolute;top:13px;left:50%;z-index:6;height:30px;width:52%;min-width:168px;
  background:#000;border-radius:20px;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:0 .7rem;overflow:hidden;transform:translateX(-50%) scaleX(.55);
}
.ip-island > *{opacity:0}
.ip-isl-icon{width:17px;height:17px;color:#34c759;flex-shrink:0;display:grid;place-items:center}
.ip-isl-icon svg{width:100%;height:100%}
.ip-isl-wave{flex:1;height:13px;display:flex;align-items:center;justify-content:center;gap:2px}
.ip-isl-wave span{width:2.5px;border-radius:2px;background:#34c759;height:40%}
.ip-isl-time{font-weight:700;font-size:.7rem;color:#34c759;flex-shrink:0;font-variant-numeric:tabular-nums}

/* --- incoming call notification --- */
.ip-notif{position:absolute;top:54px;left:0;right:0;padding:0 .7rem;z-index:8;opacity:0;transform:translateY(-20%)}
.ip-notif-card{background:rgba(28,32,40,.94);backdrop-filter:blur(18px);border-radius:18px;padding:12px 13px;color:#fff;box-shadow:0 18px 36px -14px rgba(0,0,0,.6)}
.ip-notif-row{display:flex;gap:10px;align-items:flex-start}
.ip-notif-av{width:34px;height:34px;border-radius:50%;background:var(--cyan);color:#06202b;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.ip-notif-app{display:flex;align-items:center;gap:5px;font-size:.62rem;color:rgba(255,255,255,.6);margin-bottom:2px}
.ip-notif-app i{width:5px;height:5px;border-radius:50%;background:var(--cyan);display:inline-block}
.ip-notif-caller{font-weight:700;font-size:.88rem;line-height:1.2}
.ip-notif-sub{font-size:.68rem;color:rgba(255,255,255,.62);margin-top:1px}
.ip-notif-acts{display:flex;gap:8px;margin-top:11px}
.ip-notif-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:11px;font-size:.7rem;font-weight:600;background:rgba(255,255,255,.12);color:#fff;position:relative}
.ip-notif-btn.accept{background:#34c759;color:#06280f}
.stage-panel.on .ip-notif-btn.accept::after{
  content:'';position:absolute;inset:0;border-radius:11px;border:2px solid #34c759;
  animation:acceptRing 1.2s ease-out infinite;
}

/* --- app --- */
.ip-app{flex:1;min-height:0;padding:.3rem .8rem .9rem;display:flex;flex-direction:column;gap:.5rem;opacity:0;transform:scale(.98)}
.ip-status{display:flex;justify-content:space-between;align-items:center;padding:.75rem .3rem .3rem;font-size:.76rem;font-weight:700;color:var(--ink)}
.ip-head{display:flex;justify-content:space-between;align-items:center;margin-top:.15rem}
.ip-head .logo-mark{height:15px}
.ip-hello{font-size:.64rem;color:var(--ink-muted);margin-top:.1rem}
.ip-hello b{display:block;font-size:1rem;color:var(--ink);letter-spacing:-.03em;line-height:1.15}

/* --- live call card --- */
.ip-call{
  background:var(--bg-elev);border:1.5px solid var(--ok);border-radius:18px;
  padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.4rem;
  position:relative;flex:1;min-height:0;overflow:hidden;transform-origin:50% 50%;
}
.ip-call-head{display:flex;justify-content:space-between;align-items:center}
.ip-call-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:600;color:var(--ink-soft)}
.ip-call-status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.ip-call-pill{font-size:.6rem;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:3px 7px;border-radius:999px}
.ip-call-body{display:flex;gap:.6rem;align-items:center}
.ip-call-body > span:last-child{flex:1;min-width:0}
.ip-portrait{width:44px;height:44px;border-radius:14px;background:var(--cyan);color:#06202b;display:grid;place-items:center;font-size:.86rem;font-weight:800;flex-shrink:0}
.ip-call-name{display:block;font-weight:700;font-size:.86rem;letter-spacing:-.02em;line-height:1.2}
.ip-call-sub{display:block;font-size:.66rem;color:var(--ink-muted)}
.ip-call-wave{display:flex;align-items:flex-end;gap:2px;height:12px;margin-top:.25rem}
.ip-call-wave span{width:2.5px;height:5px;background:var(--ok);border-radius:2px;opacity:.8}
.ip-trans{display:flex;flex-direction:column;gap:.15rem;padding-top:.3rem;border-top:1px solid var(--border);margin-top:.1rem}
.ip-line{display:grid;grid-template-columns:23px 1fr;gap:.3rem;align-items:start;font-size:.6rem;line-height:1.2;opacity:0;transform:translateY(5px)}
.ip-line .tg{padding:1px 3px;border-radius:3px;font-size:.5rem;font-weight:800;text-align:center;letter-spacing:.03em}
.ip-line .tg.rph{background:var(--cyan-ghost);color:var(--cyan-dark)}
[data-theme="dark"] .ip-line .tg.rph{color:var(--cyan)}
.ip-line .tg.pt{background:var(--bg-soft);color:var(--ink-muted)}
.ip-line .tg.ai{background:var(--ok-soft);color:var(--ok)}
.ip-line .tx{color:var(--ink-soft)}
.ip-line.aiw .tx{color:var(--ink);font-weight:600}

/* --- dexcom card inside the phone --- */
.ip-dex{background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;padding:.6rem .7rem;box-shadow:var(--shadow-md);transform-origin:50% 50%}
.ip-dex-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.ip-dex-head .nm{font-size:.68rem;font-weight:600;color:var(--ink-muted)}
.ip-dex-head .lv{font-size:.58rem;font-weight:700;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.ip-dex-read{display:flex;align-items:baseline;gap:5px}
.ip-dex-read b{font-size:1.7rem;font-weight:800;letter-spacing:-.045em;line-height:1;padding:0 3px;border-radius:5px}
.ip-dex-read span{font-size:.64rem;color:var(--ink-muted)}
.ip-dex-read .inr{margin-left:auto;font-size:.58rem;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:3px 7px;border-radius:999px}
.ip-dex-graph{height:48px;margin-top:.3rem}
.ip-dex-graph svg{width:100%;height:100%}
.ip-trace{fill:none;stroke:var(--cyan-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900}
.ip-dot{fill:var(--cyan);opacity:0}
.ip-halo{fill:var(--cyan);opacity:0}
.ip-axis{display:flex;justify-content:space-between;font-size:.55rem;color:var(--ink-subtle);margin-top:2px}
.ip-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:13px;padding:.5rem .65rem;background:var(--bg-elev)}
.ip-chip b{font-size:1.15rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.ip-chip .cl{font-size:.62rem;color:var(--ink-muted);line-height:1.3}
.ip-chip .rd{margin-left:auto;display:inline-flex;gap:4px}
.ip-chip .rd i{width:6px;height:6px;border-radius:50%;background:var(--border-strong)}
.ip-chip .rd i.on{background:var(--cyan)}

@media(max-width:760px){
  .iphone{width:268px;height:590px}
  .ipad{aspect-ratio:auto;border-radius:26px;padding:12px}
  .ipad-screen{padding:0 16px 14px;border-radius:16px}
  .ipad-status{font-size:.68rem;padding:10px 2px 8px}
  .ipad-status .st-mid{display:none}
  .tablet-head .ph{font-size:1rem}
  .consent{padding:11px 12px}
  .consent .cn{font-size:.83rem}
  .consent .lines{max-width:58px}
  .ipad-submit{padding:12px;font-size:.86rem}
}

/* =====================================================================
   HEADER — menu button centered, logo split on either side
   ===================================================================== */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px}
.brand-cluster{display:flex;align-items:center;gap:20px;justify-self:start}
.logo .logo-mark{height:25px}

/* the pill icon: two "D" halves in CSS, the menu's three dots fill the gap.
   On hover (or hovering the button itself) the halves ease outward to give
   the dots' orbit animation some breathing room. */
.pill-lockup{display:flex;align-items:center;gap:0;justify-self:center}
.pill-half{
  display:block;width:25px;height:22px;background:var(--ink);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.pill-half.left{border-radius:15px 0 0 15px;margin-right:-12.5px}
.pill-half.right{border-radius:0 15px 15px 0;margin-left:-13px}

.pill-lockup:hover .pill-half.left{transform:translateX(-7px)}
.pill-lockup:hover .pill-half.right{transform:translateX(7px)}

.menu-wrap{position:relative}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:38px;height:38px;padding:0;border-radius:10px;
  border:none;font-size:.92rem;font-weight:600;color:var(--ink);
  transition:background .18s var(--ease);
}
.menu-toggle:hover{background:transparent}

.menu-toggle .bars{
  position:relative;width:16px;height:16px;
}
.menu-toggle .bars i{
  position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--ink) 40%, #fff) 0%, var(--ink) 55%, color-mix(in srgb, var(--ink) 70%, #000) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:background .18s var(--ease);
  will-change:transform;
}
.menu-toggle .bars i:nth-child(2){
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--cyan) 40%, #fff) 0%, var(--cyan) 55%, color-mix(in srgb, var(--cyan) 70%, #000) 100%);
}

/* idle: three dots stacked vertically */
.menu-toggle .bars i:nth-child(1){transform:translateY(-6px)}
.menu-toggle .bars i:nth-child(2){transform:translateY(0)}
.menu-toggle .bars i:nth-child(3){transform:translateY(6px)}

/* hover: all three become independent orbiting bodies — different paths,
   speeds, directions and phase, so they never look like one rigid unit */
.menu-toggle:hover .bars i:nth-child(1){animation:orbit1 2.2s ease-in-out infinite}
.menu-toggle:hover .bars i:nth-child(2){animation:orbit2 1.9s ease-in-out infinite -.6s}
.menu-toggle:hover .bars i:nth-child(3){animation:orbit3 2.6s ease-in-out infinite -1.1s}

@keyframes orbit1{
  0%{transform:translate(0,-6px) scale(.82);box-shadow:0 1px 1px rgba(0,0,0,.18)}
  25%{transform:translate(5px,-1px) scale(1.05);box-shadow:0 2px 3px rgba(0,0,0,.3)}
  50%{transform:translate(0,6px) scale(1.18);box-shadow:0 2px 4px rgba(0,0,0,.38)}
  75%{transform:translate(-5px,-1px) scale(1.0);box-shadow:0 1px 2px rgba(0,0,0,.25)}
  100%{transform:translate(0,-6px) scale(.82);box-shadow:0 1px 1px rgba(0,0,0,.18)}
}
@keyframes orbit2{
  0%{transform:translate(5px,4px) scale(1.12);box-shadow:0 2px 3px rgba(0,0,0,.32)}
  33%{transform:translate(-3px,-6px) scale(.85);box-shadow:0 1px 1px rgba(0,0,0,.18)}
  66%{transform:translate(-5px,3px) scale(1.02);box-shadow:0 2px 3px rgba(0,0,0,.28)}
  100%{transform:translate(5px,4px) scale(1.12);box-shadow:0 2px 3px rgba(0,0,0,.32)}
}
@keyframes orbit3{
  0%{transform:translate(-6px,2px) scale(.9);box-shadow:0 1px 2px rgba(0,0,0,.22)}
  30%{transform:translate(1px,-6px) scale(1.15);box-shadow:0 2px 4px rgba(0,0,0,.36)}
  60%{transform:translate(6px,4px) scale(.86);box-shadow:0 1px 1px rgba(0,0,0,.18)}
  100%{transform:translate(-6px,2px) scale(.9);box-shadow:0 1px 2px rgba(0,0,0,.22)}
}

.menu-panel{
  position:absolute;top:calc(100% + 10px);left:50%;min-width:248px;z-index:90;
  background:rgba(0,0,0,.97);border:none;border-radius:14px;
  box-shadow:var(--shadow-lg);padding:8px;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease-out),visibility .18s;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.menu-wrap:hover .menu-panel,
.menu-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.menu-panel a{
  display:block;width:100%;text-align:center;padding:11px 13px;border-radius:9px;
  font-size:.95rem;font-weight:500;color:var(--ink-soft);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.menu-panel a:hover{background:var(--bg-soft);color:var(--ink)}
.menu-panel a.active{color:var(--ink);font-weight:600;background:var(--cyan-ghost)}
.menu-panel hr{border:none;border-top:1px solid var(--border);margin:8px 4px;width:100%}
.top-actions{display:flex;align-items:center;gap:8px;justify-self:end;margin-left:0}
@media(max-width:620px){
  .top-actions .btn-signin{display:none}
  .menu-toggle .mlabel{display:none}
  .menu-toggle{padding:9px 11px}
}

/* =====================================================================
   HOME — the full-bleed sketch, then the claim
   ===================================================================== */
.hero-full{
  min-height:calc(100svh - 66px);display:grid;place-items:center;
  padding:56px 24px;position:relative;overflow:hidden;
}
.hero-full::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 55% at 50% 42%,var(--cyan-ghost),transparent 72%);
}
.sketch{position:relative;color:var(--ink)}
.sketch svg{width:100%;height:auto;display:block;overflow:visible}
.sketch .letters text{font-family:'Figtree',system-ui,sans-serif;opacity:0;transition:opacity .8s ease}
.sketch.drawn .letters text{opacity:1}
.sketch.drawn .letters text{opacity:1}
.sketch.clearing svg{opacity:0}
.sketch.big{width:min(920px,88vw);z-index:1}
.sketch.big .ink path{stroke-width:3.1}
.sketch.big .accent path{stroke-width:3.6}
.sketch.big .accent path:nth-child(3){stroke-width:2.8}
.sketch.big .letters text:first-child{font-size:27px}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;font-size:.78rem;color:var(--ink-subtle);z-index:2;
}

.hero-say{padding:90px 0 96px}
.say-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px;align-items:center}
.typer{min-height:2.2em}
.typer .caret{
  display:inline-block;width:.055em;height:.86em;background:var(--cyan);
  vertical-align:-.06em;margin-left:.06em;animation:blink .75s step-end infinite;
}
.say-grid .btn-row{opacity:0}
@media(max-width:980px){
  .say-grid{grid-template-columns:1fr;gap:28px}
  .hero-full{min-height:auto;padding:24px 20px 64px}
  .scroll-cue{display:none}
  .sketch.big{width:100%}
}

/* =====================================================================
   CONDITION STRIP — same pen as the storefront
   ===================================================================== */
.marquee{position:relative;overflow:hidden;padding:6px 0}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-soft),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg-soft),transparent)}
.marquee{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.marquee:active{cursor:grabbing}
.marquee-track{display:flex;gap:14px;width:max-content;will-change:transform}
.cdx{
  width:168px;flex-shrink:0;display:grid;justify-items:center;gap:12px;
  padding:24px 16px;border:1px solid var(--border);border-radius:var(--r);background:transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.cdx svg{width:56px;height:56px;color:var(--ink)}
.cdx svg [stroke]{vector-effect:non-scaling-stroke}
.cdx .cn{font-size:.88rem;font-weight:600;letter-spacing:-.015em;text-align:center;line-height:1.25}
.cdx .cs{font-size:.72rem;color:var(--ink-subtle)}
.cdx.soon svg{opacity:.4}
.cdx.soon .cn{color:var(--ink-muted)}

/* =====================================================================
   JOIN — the account fork
   ===================================================================== */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.fork a{
  display:block;padding:38px 34px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg-elev);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.fork a:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.fork .fi{width:46px;height:46px;border-radius:13px;background:var(--cyan-ghost);color:var(--cyan-dark);display:grid;place-items:center;margin-bottom:20px}
[data-theme="dark"] .fork .fi{color:var(--cyan)}
.fork h3{margin-bottom:9px}
.fork p{font-size:.94rem;color:var(--ink-muted);margin-bottom:20px}
.fork .go{font-size:.9rem;font-weight:600;color:var(--cyan-dark)}
[data-theme="dark"] .fork .go{color:var(--cyan)}
@media(max-width:760px){.fork{grid-template-columns:1fr}}

/* =====================================================================
   HOW IT WORKS — scroll-driven, rail pinned left
   ===================================================================== */
.flow-scroll{display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);gap:56px;align-items:start}
.flow-scroll>*,.flow-scroll .stage,.scroll-step,.scroll-step>*{min-width:0}
.laptop,.lid{max-width:100%}
.rail-sticky{position:sticky;top:96px;align-self:start;padding:4px 0}
.rail-sticky .step{cursor:pointer}
.rail-sticky .step .sbar{display:none}
.scroll-step{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.scroll-step:first-child{min-height:78vh;padding-top:0}
.scroll-step:last-child{min-height:80vh}
.flow-scroll .stage-panel{display:block}
.flow-scroll .panel-cap{max-width:66ch;font-size:.94rem}
.step-tag{
  display:none;font-size:.78rem;font-weight:700;color:var(--cyan-dark);margin-bottom:12px;
}
[data-theme="dark"] .step-tag{color:var(--cyan)}
@media(max-width:980px){
  .flow-scroll{grid-template-columns:1fr;gap:0}
  .rail-sticky{display:none}
  .scroll-step{min-height:auto;padding:34px 0;border-top:1px solid var(--border)}
  .scroll-step:first-child{border-top:none;padding-top:0}
  .step-tag{display:block}
}
/* the devices get more room now */
.flow-scroll .iphone{width:322px;height:686px}
.flow-scroll .ipad{width:min(486px,100%)}
.flow-scroll .ip-call{flex:0 0 auto}
.flow-scroll .ip-dex{margin-top:auto}
.flow-scroll .portal{font-size:1.02rem}
.flow-scroll .pt-stats b{font-size:1.55rem}
.flow-scroll .pt-row{padding:16px 18px}
.flow-scroll .pt-row .who{font-size:.96rem}
.flow-scroll .stmt-row{padding:15px 18px;font-size:.92rem}
.flow-scroll .stmt-total .v{font-size:2.1rem}
@media(max-width:760px){
  .flow-scroll .iphone{width:268px;height:590px}
}

/* =====================================================================
   INSIGHTS — ask the pharmacy's own data
   ===================================================================== */
.ask{border:1px solid var(--border-strong);border-radius:18px;background:var(--bg-elev);box-shadow:var(--shadow-lg);overflow:hidden}
.ask-head{display:grid;justify-items:center;gap:14px;padding:38px 28px 26px;text-align:center}
.pillmark{width:52px;height:24px}
.pillmark .cap{fill:var(--ink)}
.pillmark .dot{fill:var(--ink)}
.pillmark .mid{fill:var(--cyan)}
.ask-head .ah{font-size:1.12rem;font-weight:700;letter-spacing:-.025em}
.ask-head .as{font-size:.9rem;color:var(--ink-muted)}
.ask-bar{
  display:flex;align-items:center;gap:12px;margin:0 24px;padding:14px 16px;
  border:1px solid var(--border-strong);border-radius:13px;background:var(--bg);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ask-bar:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-ghost)}
.ask-bar input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:.95rem;color:var(--ink)}
.ask-bar input::placeholder{color:var(--ink-subtle)}
.ask-send{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--bg);display:grid;place-items:center;flex-shrink:0}
.ask-send:hover{background:var(--cyan-dark);color:#fff}
[data-theme="dark"] .ask-send:hover{background:var(--cyan);color:#07090C}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 22px}
.ask-chips button{
  padding:8px 13px;border-radius:999px;border:1px solid var(--border);
  font-size:.83rem;color:var(--ink-muted);transition:all .16s var(--ease);
}
.ask-chips button:hover{border-color:var(--cyan);color:var(--cyan-dark);background:var(--cyan-ghost)}
[data-theme="dark"] .ask-chips button:hover{color:var(--cyan)}
.ask-chips button[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan-ghost);color:var(--cyan-dark);font-weight:600}
[data-theme="dark"] .ask-chips button[aria-pressed="true"]{color:var(--cyan)}
.ask-out{border-top:1px solid var(--border);background:var(--bg-soft);padding:22px 24px 24px}
.ask-q{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:600;margin-bottom:16px}
.ask-q .qm{width:22px;height:22px;border-radius:50%;background:var(--border-strong);color:var(--bg);display:grid;place-items:center;font-size:.68rem;font-weight:800;flex-shrink:0}
[data-theme="dark"] .ask-q .qm{color:var(--ink)}
.ask-a{display:grid;gap:14px}
.ask-a p{font-size:.93rem;color:var(--ink-soft);max-width:none}
.ask-a ul{list-style:none;display:grid;gap:9px}
.ask-a li{font-size:.91rem;color:var(--ink-muted);padding-left:20px;position:relative;line-height:1.5}
.ask-a li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--cyan)}
.ask-a li b{color:var(--ink);font-weight:600}
.ask-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.ask-figs div{background:var(--bg-elev);padding:14px 15px}
.ask-figs b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:5px;font-variant-numeric:tabular-nums}
.ask-figs span{font-size:.74rem;color:var(--ink-muted);line-height:1.3}
.ask-foot{font-size:.76rem;color:var(--ink-subtle);margin-top:16px;display:flex;align-items:center;gap:7px}
.ask-out.typing .ask-a{opacity:.45}
@media(max-width:620px){.ask-figs{grid-template-columns:1fr}}

/* =====================================================================
   LAPTOP — the portal screens, shown on the machine they run on
   ===================================================================== */
.laptop{width:100%;margin:0 auto;position:relative}
.lid{
  position:relative;background:#0a0c0f;border-radius:16px 16px 5px 5px;padding:16px 14px 16px;
  box-shadow:0 46px 80px -34px rgba(10,13,18,.42),0 0 0 2px rgba(255,255,255,.06) inset;
}
[data-theme="dark"] .lid{background:#050709;box-shadow:0 46px 80px -32px rgba(0,0,0,.85),0 0 0 2px rgba(255,255,255,.08) inset}
.lid-cam{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#1d232c;box-shadow:0 0 0 1.5px rgba(255,255,255,.05)}
.screen{
  position:relative;border-radius:5px;background:var(--bg);overflow:hidden;
}
.screen::-webkit-scrollbar{width:9px;height:9px}
.screen::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:9px}
.screen::-webkit-scrollbar-track{background:transparent}
.zoom-canvas{width:880px;height:556px;overflow:hidden auto;transform-origin:0 0;will-change:transform}
.screen .portal,.screen .ask{border:none;border-radius:0;box-shadow:none}
.screen .ask{min-height:100%}

.zoom-ctl{display:none !important;
  position:absolute;right:24px;bottom:26px;z-index:14;display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:11px;background:color-mix(in srgb, var(--bg-elev) 92%, transparent);
  border:1px solid var(--border);box-shadow:var(--shadow-md);backdrop-filter:blur(10px);
}
.zoom-ctl button{
  min-width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-size:1rem;font-weight:600;color:var(--ink-muted);line-height:1;
}
.zoom-ctl button:hover{background:var(--bg-soft);color:var(--ink)}
.zoom-ctl button:disabled{opacity:.35;cursor:default}
.zoom-ctl .zlabel{
  min-width:46px;text-align:center;font-size:.74rem;font-weight:600;
  color:var(--ink-muted);font-variant-numeric:tabular-nums;
}
.zoom-ctl .zfit{font-size:.72rem;font-weight:700;padding:0 9px;letter-spacing:.01em}
.lap-base{
  height:13px;margin:0 -26px;border-radius:0 0 13px 13px;position:relative;
  background:linear-gradient(180deg,#242b35,#0d1116);
}
[data-theme="dark"] .lap-base{background:linear-gradient(180deg,#151a22,#05070a)}
.lap-base::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:5px;border-radius:0 0 7px 7px;background:rgba(0,0,0,.45);
}
.lap-hint{
  display:none;align-items:center;gap:7px;justify-content:center;
  margin-top:14px;font-size:.76rem;color:var(--ink-subtle);
}
@media(max-width:760px){
  .zoom-canvas{width:760px;height:480px}
  .lid{padding:12px 10px 12px;border-radius:12px 12px 4px 4px}
  .zoom-ctl{right:16px;bottom:18px}
  .lap-base{margin:0 -14px}
}

/* =====================================================================
   HEAT MAP — population concentration, filterable
   ===================================================================== */
.hm{border-top:1px solid var(--border);padding:26px 24px 28px;background:var(--bg)}
.hm-top{margin-bottom:18px}
.hm-top h5{font-size:1rem;font-weight:700;letter-spacing:-.025em;margin-bottom:5px}
.hm-top p{font-size:.85rem;color:var(--ink-muted);max-width:62ch}
.hm-ctl{display:grid;gap:12px;margin-bottom:20px}
.hm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hm-row .lab{font-size:.74rem;font-weight:700;color:var(--ink-subtle);min-width:74px}
.hm-row button{
  padding:7px 12px;border-radius:999px;border:1px solid var(--border);
  font-size:.81rem;color:var(--ink-muted);transition:all .16s var(--ease);white-space:nowrap;
}
.hm-row button:hover{border-color:var(--border-strong);color:var(--ink)}
.hm-row button[aria-pressed="true"]{
  border-color:var(--cyan);background:var(--cyan-ghost);color:var(--cyan-dark);font-weight:600;
}
[data-theme="dark"] .hm-row button[aria-pressed="true"]{color:var(--cyan)}

.hm-grid{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.hm-head,.hm-line{display:grid;grid-template-columns:172px repeat(6,1fr)}
.hm-head span{
  padding:11px 8px;font-size:.7rem;font-weight:700;color:var(--ink-subtle);
  text-align:center;border-bottom:1px solid var(--border);line-height:1.25;
}
.hm-head span:first-child{text-align:left;padding-left:14px}
.hm-line .rl{
  padding:0 14px;display:flex;align-items:center;font-size:.8rem;font-weight:600;
  border-right:1px solid var(--border);min-height:54px;line-height:1.25;
}
.hm-cell{
  position:relative;min-height:54px;display:grid;place-items:center;
  font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;
  border-right:1px solid var(--bg);border-bottom:1px solid var(--bg);
  transition:background .35s var(--ease),color .35s var(--ease);cursor:pointer;
}
.hm-cell:last-child{border-right:none}
.hm-line:last-child .hm-cell{border-bottom:none}
.hm-cell:hover{outline:2px solid var(--cyan);outline-offset:-2px;z-index:2}
.hm-cell[aria-pressed="true"]{outline:2.5px solid var(--ink);outline-offset:-3px;z-index:3}
[data-theme="dark"] .hm-cell[aria-pressed="true"]{outline-color:var(--ink)}

.hm-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.hm-legend{display:flex;align-items:center;gap:9px;font-size:.73rem;color:var(--ink-subtle)}
.hm-scale{
  width:132px;height:9px;border-radius:5px;border:1px solid var(--border);
  background:linear-gradient(90deg,rgba(34,184,232,.07),rgba(34,184,232,.45),rgba(34,184,232,1));
}
.hm-read{
  flex:1;min-width:260px;font-size:.83rem;color:var(--ink-muted);
  padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);
}
.hm-read b{color:var(--ink);font-weight:600}
.hm-note{font-size:.73rem;color:var(--ink-subtle);margin-top:14px;line-height:1.5;max-width:74ch}
@media(max-width:620px){
  .hm-head,.hm-line{grid-template-columns:120px repeat(6,minmax(56px,1fr))}
  .hm{padding:20px 16px 22px}
}

/* =====================================================================
   ONE BACKGROUND — no alternating bands
   ===================================================================== */
section.band.soft,.soft{background:transparent}  /* was var(--bg); transparent lets the blob layer read through */
.marquee::before{background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{background:linear-gradient(270deg,var(--bg),transparent)}
/* The navbar is black glass in both themes. Its contents therefore carry the
   dark palette whatever the page around them is doing, which is done by
   redeclaring the tokens on the header itself rather than restyling each
   child: the logo, the menu rules, the panel and both account buttons all
   read their colours from these. */
header.top{
  --bg:#0A0D12; --bg-soft:rgba(255,255,255,.08); --bg-elev:#141923;
  --ink:#F0F3F7; --ink-soft:#C8CFDA; --ink-muted:#9AA5B4; --ink-subtle:#6B7686;
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.28);
  --cyan:#36C6F4; --cyan-deep:#22B8E8; --cyan-dark:#0EA5D0;
  --cyan-ghost:rgba(54,198,244,.14); --cyan-soft:rgba(54,198,244,.16);
  --logo-filter:invert(1) hue-rotate(180deg) saturate(1.1);
  --shadow-lg:0 28px 60px -24px rgba(0,0,0,.7);
  border-bottom:none;
  background:rgba(0,0,0,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
/* At the very top of the home page the bar thins out so the storefront reads
   through it, but it keeps enough black to carry the white controls. */
header.top.clear{
  background:rgba(0, 0, 0, 0.76);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
/* Hover states that assume a light page, restated for the dark bar. */
header.top .btn-primary:hover{background:var(--cyan);color:#07090C}
header.top .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.logo.shown .logo-mark{opacity:1}
.menu-toggle{padding:9px 11px;gap:0}
.menu-toggle .mlabel{display:none}
.tabs-peek{
  display:flex;align-items:center;gap:2px;overflow:hidden;
  max-width:0;opacity:0;pointer-events:none;
  transition:max-width .55s var(--ease-out),opacity .35s ease;
}
.tabs-peek.show{max-width:620px;opacity:1}
.tabs-peek a{
  padding:8px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-muted);
  white-space:nowrap;opacity:0;transform:translateY(-6px);
}
@media(max-width:900px){.tabs-peek{display:none}}
@media(max-width:900px){
  /* the flying-logo intro is a desktop flourish; small screens just get the header mark */
  #flyLogo{display:none !important}
  .logo .logo-mark{opacity:1}
}
.btn{white-space:nowrap}
@media(max-width:430px){
  .logo-split{--lg-h:21px}
  .top-actions{gap:6px}
  .top-actions .btn{padding:8px 12px;font-size:.85rem}
  .menu-toggle{padding:8px 10px}
}

/* =====================================================================
   HERO CINEMATIC — the door opens, the logo comes out, then flies up
   ===================================================================== */
.hero-full{position:relative}
.door-light{opacity:0}

#flyLogo{
  position:fixed;z-index:95;left:0;top:0;pointer-events:none;
  width:300px;aspect-ratio:760/124;
  background:var(--logo-url) no-repeat center/contain;filter:var(--logo-filter);
  opacity:0;transform-origin:0 0;will-change:transform,opacity;
}
#flyLogo.live{opacity:1}
.hero-full.done .sketch{pointer-events:none}
.hero-full.flying .scroll-cue{opacity:0}

/* =====================================================================
   MICRO-ANIMATIONS — one idea per scroll beat
   ===================================================================== */
.beats{display:grid}
.beat{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;
  padding:56px 0;border-top:1px solid var(--border);
}
.beat:first-child{border-top:none}
.beat .bt{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:14px}
.beat p{font-size:.98rem;color:var(--ink-muted)}
.micro{
  position:relative;
  background:transparent;padding:26px 24px;overflow:hidden;
}
.micro svg{width:100%;height:auto;display:block;overflow:visible}
.micro .cap{
  margin-top:16px;font-size:.76rem;font-weight:600;color:var(--ink-subtle);
  display:flex;align-items:center;gap:8px;
}
.micro .cap i{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0}
@media(max-width:860px){
  .beat{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .beat .txt{order:2}
}

/* shared micro primitives */
.mi-line{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-linecap:round}
.mi-ink{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mi-cyan{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mi-lbl{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;fill:var(--ink-muted)}
.mi-lbl.big{font-size:13px;font-weight:800;fill:var(--ink)}
.mi-lbl.cy{fill:var(--cyan-dark)}
[data-theme="dark"] .mi-lbl.cy{fill:var(--cyan)}

/* 1 · contact frequency */
.mf-dot{fill:var(--border-strong);opacity:0}
.mf-rx{fill:var(--cyan);opacity:0}
.mf-md{opacity:0}
.mf-key{opacity:0}

/* 2 · money flow */
.mm-path{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-dasharray:5 5}
.mm-coin{
  fill:var(--cyan);opacity:0;
  offset-path:path("M104 88 C180 88 200 44 300 44");offset-rotate:0deg;offset-distance:0%;
}
.mm-box{fill:none;stroke:var(--ink);stroke-width:2;rx:8}
.mm-empty{stroke-dasharray:6 6;stroke:var(--border-strong)}
.mm-x{opacity:0}

/* 3 · pharmacy evolution */
.me-step{opacity:0}

/* 4 · recurring revenue */
.mr-pay{opacity:0}
.mr-tot{opacity:0}

/* 5 · api / cloud sign-in */
.ma-pulse{opacity:.25}
.ma-flow{stroke-dasharray:6 5;stroke-dashoffset:0;stroke-linecap:butt}

/* 6 · margin erosion at the counter */
.mg-bottle{opacity:0}
.mg-val{opacity:0}
.mg-fall{opacity:0}

/* =====================================================================
   POV TABS on how it works
   ===================================================================== */
.pov-tabs{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:transparent}
.pov-tabs button{
  padding:10px 18px;border-radius:9px;font-size:.92rem;font-weight:600;color:var(--ink-muted);
  transition:background .18s var(--ease),color .18s var(--ease);white-space:nowrap;
}
.pov-tabs button:hover{color:var(--ink)}
.pov-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .pov-tabs button[aria-selected="true"]{background:var(--cyan);color:#06202b}
.pov{display:none}
.pov.on{display:block}
@media(max-width:620px){
  .pov-tabs{width:100%;overflow-x:auto}
  .pov-tabs button{padding:10px 13px;font-size:.86rem}
}

/* =====================================================================
   PRICE CALLOUT
   ===================================================================== */
.price-out{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  border:1px solid var(--cyan-line);border-radius:var(--r);background:var(--cyan-ghost);
  padding:28px 30px;margin-bottom:36px;
}
.price-out .amt{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--cyan-dark);white-space:nowrap}
[data-theme="dark"] .price-out .amt{color:var(--cyan)}
.price-out .amt small{display:block;font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-muted);margin-top:8px}
.price-out p{font-size:.96rem;color:var(--ink-soft)}
@media(max-width:700px){.price-out{grid-template-columns:1fr;gap:16px;padding:24px}}

/* conditions: bigger drawings, no subtext */
.cdx{width:158px;padding:26px 14px;gap:16px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.cdx:hover{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-ghost),0 10px 26px -14px rgba(34,184,232,.55);transform:translateY(-3px)}
.cdx:hover svg{color:var(--cyan)}
.cdx:hover .cn{color:var(--cyan-dark)}
[data-theme="dark"] .cdx:hover .cn{color:var(--cyan)}
.cdx svg{width:76px;height:76px}
.cdx .cs{display:none}

/* ---------- iPad: the scheduling screen after consent ---------- */
.ipad-screen{position:relative}
.sched{
  position:absolute;inset:0;padding:0 22px 18px;display:flex;flex-direction:column;
  background:var(--bg);opacity:0;pointer-events:none;
}
.sched-head{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:16px}
.sched-head .ph{font-size:1.05rem;font-weight:700;letter-spacing:-.025em}
.sched-head .sub{font-size:.8rem;color:var(--ink-muted);margin-top:2px}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px}
.day{
  border:1px solid var(--border);border-radius:11px;padding:10px 4px;text-align:center;
  transition:all .3s var(--ease);
}
.day .dn{display:block;font-size:.66rem;font-weight:600;color:var(--ink-subtle)}
.day .dd{display:block;font-size:1rem;font-weight:700;margin-top:2px}
.day.pick{opacity:0}
.slots-lbl{font-size:.74rem;font-weight:700;color:var(--ink-subtle);margin-bottom:10px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{
  border:1px solid var(--border);border-radius:10px;padding:11px 4px;text-align:center;
  font-size:.84rem;font-weight:600;color:var(--ink-soft);opacity:0;position:relative;
}
.slot.gone{color:var(--ink-subtle);text-decoration:line-through;opacity:.45}
.slot.take{overflow:hidden}
.sched-cta{
  margin-top:auto;padding:14px;border-radius:13px;text-align:center;font-weight:700;font-size:.9rem;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--ink-subtle);position:relative;overflow:hidden;
}
.sched-cta > span{display:block}
.sched-cta .s-wait{opacity:1}
.sched-cta .s-done{opacity:0;position:absolute;inset:0;display:grid;place-items:center}

/* ---------- clinician-side screens ---------- */
.rec-card{border-top:1px solid var(--border)}
.rec-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:.86rem}
.rec-row:last-child{border-bottom:none}
.rec-row .k{color:var(--ink-muted)}
.rec-row .v{font-weight:600}
.rec-row .v.ok{color:var(--ok)}
.chk{display:grid;gap:9px;padding:16px 18px}
.chk div{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--ink-soft);opacity:0}
.chk .tick{width:19px;height:19px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.62rem;font-weight:700;flex-shrink:0;margin-top:1px}
.chk .tick.warn{background:var(--warn)}

/* ---------- generic reveal for the newer panels ---------- */
.stage-panel .fu{opacity:0}

/* =====================================================================
   PHARMACY ACTIVATION — rebuilt: real pill mark, clean 9s loop
   ===================================================================== */
.activate{border:1px solid var(--border);border-radius:var(--r);padding:26px 20px;background:var(--bg);overflow:hidden}
.activate svg{width:100%;height:auto;display:block;overflow:visible}

.ac-box{
  fill:rgba(34,184,232,0);stroke:var(--border-strong);stroke-width:2.2;
}

.ac-label{
  font-family:'Figtree',sans-serif;font-size:14px;font-weight:800;letter-spacing:1.4px;
  fill:var(--ink-muted);
}

.ac-sub{font-family:'Figtree',sans-serif;font-size:10.5px;font-weight:600;fill:var(--ink-subtle);opacity:0}

.ac-foot{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;fill:var(--ink-subtle)}

.ac-spoke{stroke:var(--border-strong);stroke-width:1.5;stroke-dasharray:3 6;opacity:.55}

.ac-node{fill:var(--bg);stroke:var(--border-strong);stroke-width:2}

.ac-pill{opacity:0;filter:var(--logo-filter)}

/* ---------- still visuals inside the three home cards ---------- */
.cardviz{margin:-6px 0 18px}
.cardviz svg{width:100%;height:auto;display:block;max-width:240px}
.viz-pill{filter:var(--logo-filter)}

/* ---------- activation: the lockup pans in ---------- */
.ac-logo{opacity:0;filter:var(--logo-filter)}
.mg-lift{opacity:0}
.nps-jump{opacity:0}
.wh-slot{opacity:0}

/* ---------- the price, given room ---------- */
.price-lead{
  display:grid;grid-template-columns:auto 1px minmax(0,1fr);gap:0 46px;align-items:center;
  padding:10px 0 34px;
}
.price-lead .rule{background:var(--border);width:1px;height:78%;align-self:center}
.price-lead .amt{
  font-size:clamp(5rem,11vw,8.5rem);font-weight:800;letter-spacing:-.06em;line-height:.82;
  color:var(--ink);display:flex;align-items:flex-start;
}

.price-lead .unit{margin-top:16px;font-size:.92rem;font-weight:600;color:var(--ink-muted);line-height:1.4}
.price-lead .unit b{display:block;color:var(--cyan-dark);font-size:.8rem;letter-spacing:.02em;margin-top:6px}
[data-theme="dark"] .price-lead .unit b{color:var(--cyan)}
.price-lead p{font-size:1.02rem;color:var(--ink-soft);max-width:54ch}
.price-lead p + p{margin-top:14px}
.price-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.price-facts div{padding:22px 26px 22px 0;border-right:1px solid var(--border)}
.price-facts div:last-child{border-right:none}
.price-facts div:not(:first-child){padding-left:26px}
.price-facts b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.price-facts span{font-size:.88rem;color:var(--ink-muted);line-height:1.45}
@media(max-width:860px){
  .price-lead{grid-template-columns:1fr;gap:24px}
  .price-lead .rule{display:none}
  .price-facts{grid-template-columns:1fr}
  .price-facts div{border-right:none;border-bottom:1px solid var(--border);padding:18px 0}
  .price-facts div:last-child{border-bottom:none}
  .price-facts div:not(:first-child){padding-left:0}
}

/* ---------- pharmacist at home: the camera pans, nothing dims ---------- */
.remote{border:1px solid var(--border);border-radius:var(--r);padding:26px 20px;background:var(--bg);overflow:hidden}
.remote svg{width:100%;height:auto;display:block}
.rm-walk{opacity:1}
.rm-seated,.rm-cap{opacity:0}
.rm-pill{opacity:0;filter:var(--logo-filter)}

/* ---------- the pill mark inverts with the theme ---------- */
.pillmark{filter:var(--logo-filter)}

/* ---------- sign-in card, modelled on the deck ---------- */
.signin{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);z-index:4}
.signin-card{width:340px;border:1px solid var(--border);border-radius:14px;background:var(--bg-elev);box-shadow:var(--shadow-md);overflow:hidden}
.signin-bar{display:flex;gap:6px;padding:10px 13px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.signin-bar i{width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.signin-body{padding:22px}
.signin-body .logo-mark{height:18px;margin-bottom:18px}
.signin-welcome{font-size:.8rem;color:var(--ink-muted)}
.signin-who{font-size:1.05rem;font-weight:700;letter-spacing:-.025em;margin-bottom:18px}
.signin-field{margin-bottom:13px}
.signin-label{font-size:.7rem;font-weight:600;color:var(--ink-subtle);margin-bottom:5px}
.signin-input{border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:.85rem;min-height:36px;background:var(--bg);color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.signin-input .typed{display:inline-block;width:0;overflow:hidden;vertical-align:bottom}
.signin-btn{margin-top:6px;padding:11px;border-radius:10px;background:var(--ink);color:var(--bg);text-align:center;font-weight:700;font-size:.88rem}

/* phase timing */
.seq{position:relative;height:556px}
.phase{position:absolute;inset:0;opacity:0;pointer-events:none}

/* ---------- clinician preferences + availability ---------- */
.prefs{padding:22px 24px}
.prefs h5{font-size:1rem;font-weight:700;letter-spacing:-.025em;margin-bottom:4px}
.prefs .sub{font-size:.84rem;color:var(--ink-muted);margin-bottom:18px}
.prefs .grp{font-size:.72rem;font-weight:700;color:var(--ink-subtle);margin:16px 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  padding:8px 13px;border-radius:999px;border:1px solid var(--border);font-size:.83rem;color:var(--ink-muted);
}
.chips span.pick{opacity:0}
.chips span.off{opacity:.55}

.avail{padding:22px 24px}
.avail-grid{display:grid;grid-template-columns:70px repeat(5,1fr);gap:6px;margin-top:14px}
.avail-grid .hd{font-size:.7rem;font-weight:700;color:var(--ink-subtle);text-align:center;padding:4px 0}
.avail-grid .hr{font-size:.74rem;color:var(--ink-muted);display:flex;align-items:center}
.avail-grid .cell{height:30px;border:1px solid var(--border);border-radius:7px;background:var(--bg)}
.avail-grid .cell.on-slot{opacity:0}
.avail-foot{display:flex;align-items:center;gap:10px;margin-top:18px;padding:13px 15px;border:1px solid var(--cyan-line);border-radius:11px;background:var(--cyan-ghost);font-size:.85rem;color:var(--ink-soft);opacity:0}
.avail-foot b{color:var(--ink)}

.ph-signin{opacity:1}

/* The logo is physically behind the opaque SVG door; scrolling moves the camera. */
#flyLogo{display:block!important;transition:none}
.hero-full{display:block;height:220svh;padding:0;overflow:visible}
.door-stage{position:sticky;top:66px;height:calc(100svh - 66px);display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.door-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--cyan-ghost),transparent 70%)}
.door-stage .sketch{width:min(920px,88vw)}
.door-logo{filter:var(--logo-filter)}
.door-light{display:none}
.logo.shown .logo-mark{opacity:1}
@media(max-width:980px){
 .hero-full{height:180svh;padding:0}
 .door-stage .scroll-cue{display:grid}
 .door-stage .sketch{width:88vw}
}

#sketch .ink > path, #sketch .door-leaf, #sketch .letters, #sketch .accent{opacity:var(--building-opacity,1)}

/* One continuous, left-to-right service carousel. */
.service-bundle .sec-head{margin-bottom:40px}
.service-plus{flex:0 0 32px;font-size:36px;font-weight:400;color:var(--cyan);align-self:center;text-align:center}
@media(max-width:700px){
 .service-plus{flex-basis:24px}
}

/* Reveal details on hover, keyboard focus, or a click. */
.service-plus{align-self:flex-start;margin-top:100px}

/* Larger illustrations with a compact title and a glowing side detail. */

.activate.on .ac-label,.activate.on .ac-sub{animation:acRevealLabel 8s ease infinite;fill:var(--cyan)}

/* The caption is grey while the network is grey, then switches with it. */
.ac-foot2{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;fill:var(--cyan);opacity:0}
.activate.on .ac-foot{animation:acFootGrey 8s ease infinite;fill:var(--ink-muted)}

/* =====================================================================
   ADDITIONS — brand accent, borderless beats, onboarding, carousels
   ===================================================================== */

/* the brand blue, used inline inside headings and copy */
.sfy-blue{color:var(--cyan-deep)}
[data-theme="dark"] .sfy-blue{color:var(--cyan)}
h1 .sfy-blue,h2 .sfy-blue{color:var(--cyan)}
[data-theme="dark"] h1 .sfy-blue,[data-theme="dark"] h2 .sfy-blue{color:var(--cyan)}
.price-lead .amt.sfy-blue{color:var(--cyan-deep)}
[data-theme="dark"] .price-lead .amt.sfy-blue{color:var(--cyan)}
a.ln{color:var(--cyan-deep);font-weight:600;border-bottom:1px solid var(--cyan-line)}
[data-theme="dark"] a.ln{color:var(--cyan)}
a.ln:hover{border-bottom-color:var(--cyan)}

/* the header mark stays visible (and clickable) on every page but home */
html[data-route]:not([data-route="/"]) .logo .logo-mark{opacity:1}
.logo{display:inline-flex;align-items:center;flex-shrink:0}

/* social buttons in the footer */
.socials{display:flex;gap:9px;margin-top:16px}
.socials a{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--ink-muted);
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.socials a:hover{border-color:var(--cyan-line);color:var(--cyan-deep);background:var(--cyan-ghost)}
[data-theme="dark"] .socials a:hover{color:var(--cyan)}

/* --- FOR PHARMACIES: the beat visuals lose their frames --- */
.page[data-page="/pharmacies"] .micro,
.page[data-page="/pharmacies"] .activate{
  border:none;border-radius:0;padding:0;background:transparent;
}
.page[data-page="/pharmacies"] .micro .cap{margin-top:14px}
.page[data-page="/pharmacies"] .beat{padding:52px 0}
.page[data-page="/pharmacies"] .price-lead{padding:10px 0 8px}
.page[data-page="/pharmacies"] .price-lead + .beats .beat:first-child{border-top:1px solid var(--border);padding-top:52px}

/* --- FOR PHARMACIES: onboarding, rebuilt as a plain readable list --- */
.onboard{margin-top:6px;border-top:1px solid var(--border)}
.ob-list{list-style:none;display:grid}
.ob-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--border);
}
.ob-n{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:700;color:var(--cyan-deep);
  background:var(--cyan-ghost);border:1px solid var(--cyan-line);
}
[data-theme="dark"] .ob-n{color:var(--cyan)}
.ob-txt b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.ob-txt span{display:block;font-size:.93rem;color:var(--ink-muted);max-width:62ch}
.ob-when{
  font-size:.78rem;font-weight:700;color:var(--ink-subtle);white-space:nowrap;
  padding-top:8px;font-variant-numeric:tabular-nums;
}
@media(max-width:720px){
  .ob-list li{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .ob-when{grid-column:2;padding-top:8px}
}

/* --- FOR PHARMACISTS: the scope summary --- */
.scope-note p{font-size:1.02rem;color:var(--ink-soft)}
.scope-note p + p{margin-top:16px}
.scope-note .btn-row{margin-top:26px}

/* --- ABOUT: the counter, drawn --- */
.counter-art{color:var(--ink-soft);max-width:760px;margin:0 auto}
.counter-art svg{width:100%;height:auto;display:block;overflow:visible}
.counter-art .ca-word{opacity:0}

/* --- ABOUT: the perpetual carousels --- */
.tl{
  position:relative;overflow:hidden;cursor:grab;
  -webkit-user-select:none;user-select:none;touch-action:pan-y;
}
.tl:active{cursor:grabbing}
.tl::before,.tl::after{
  content:'';position:absolute;top:0;bottom:0;width:70px;z-index:3;pointer-events:none;
}
.tl::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tl::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.band.soft .tl::before{background:linear-gradient(90deg,var(--bg-soft),transparent)}
.band.soft .tl::after{background:linear-gradient(270deg,var(--bg-soft),transparent)}
[data-theme="light"] .band.soft .tl::before,[data-theme="light"] .band.soft .tl::after{
  background-image:linear-gradient(90deg,var(--bg),transparent);
}
[data-theme="light"] .band.soft .tl::after{background-image:linear-gradient(270deg,var(--bg),transparent)}
.tl-track{display:flex;gap:16px;will-change:transform}
.tl-card{
  flex:0 0 268px;min-height:186px;padding:22px 22px 20px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg-elev);
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.tl-yr{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--cyan-deep);
  margin-bottom:10px;font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .tl-yr{color:var(--cyan)}
.tl-card h4{margin-bottom:8px}
.tl-card p{font-size:.86rem;color:var(--ink-muted);max-width:none}
.tl-logo{
  margin-top:auto;height:42px;border:1px dashed var(--border-strong);border-radius:9px;
  background:var(--bg-soft);
}
.supported .tl-track{gap:30px;align-items:center}
.sup-card{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 14px;min-width:96px;
  opacity:.84;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
/* explicit heights all the way down: nothing here depends on the image
   being measured before layout */
.sup-logo{display:flex;align-items:center;justify-content:center;height:72px}
.sup-img{height:72px;width:auto;max-width:300px;object-fit:contain;display:block}
.sup-img.dm{display:none}
[data-theme="dark"] .sup-img.lm{display:none}
[data-theme="dark"] .sup-img.dm{display:block}
@media(max-width:560px){
  .sup-card{height:82px}
  .sup-logo,.sup-img{height:54px}
  .sup-img{max-width:190px}
}
@media(max-width:560px){
  .tl-card{flex-basis:232px}
  .tl::before,.tl::after{width:34px}
}

/* =====================================================================
   ROUND TWO — scroll cue, price lockup, escalation map, competitions
   ===================================================================== */

/* the scroll cue pulses in the brand blue */
.scroll-cue{color:var(--cyan-deep)}
[data-theme="dark"] .scroll-cue{color:var(--cyan)}
.scroll-cue span{font-weight:600;animation:cuePulse 2.2s ease-in-out infinite}

/* the $5 lockup sits centred between the rules above and below it */
.page[data-page="/pharmacies"] .price-lead{padding:0}
.page[data-page="/pharmacies"] .price-lead + .beats .beat:first-child{
  border-top:1px solid var(--border);padding-top:96px;
}
@media(max-width:860px){
  .page[data-page="/pharmacies"] .price-lead + .beats .beat:first-child{padding-top:48px}
}

/* FOR PHARMACISTS — every beat visual loses its frame too */
.page[data-page="/pharmacists"] .micro,
.page[data-page="/pharmacists"] .remote{
  border:none;border-radius:0;padding:0;background:transparent;
}
.page[data-page="/pharmacists"] .micro .cap{margin-top:14px}

/* the desk occludes whatever sits behind it */
.rm-desk{fill:var(--bg)}

/* --- the escalation map, beside the scope copy --- */
.scope-grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:54px;align-items:center;
}
.scope-grid .scope-note p{font-size:1rem}
.escal svg{width:100%;height:auto;display:block;overflow:visible}
.es-box{fill:var(--cyan-ghost);stroke:var(--cyan-line);stroke-width:1.6;stroke-dasharray:7 6}
.es-boxlbl{font-weight:700;fill:var(--cyan-dark)}
[data-theme="dark"] .es-boxlbl{fill:var(--cyan)}
.es-note{fill:var(--ink-subtle);font-size:10.5px}
.es-g{opacity:0}
@media(max-width:940px){
  .scope-grid{grid-template-columns:1fr;gap:34px}
  .escal{order:-1}
}

/* --- ABOUT: the drawing now leads the page --- */
.page[data-page="/about"] .counter-art{margin:38px 0 0;max-width:100%}

/* --- ABOUT: competition cards, no frames --- */
.tl.cmp .tl-track{gap:8px}
.cmp-card{
  flex:0 0 268px;min-height:252px;padding:18px 20px 20px;
  border:none;background:transparent;box-shadow:none;
  display:flex;flex-direction:column;
}
.cmp-logo{
  height:104px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px;
}
/* transparent marks, swapped per theme: the blacks and whites trade places,
   the crimson stays crimson */
.cmp-img{max-height:100px;max-width:236px;width:auto;height:auto;object-fit:contain;object-position:left center}
.cmp-img.dm{display:none}
[data-theme="dark"] .cmp-img.lm{display:none}
[data-theme="dark"] .cmp-img.dm{display:block}
.cmp-ph{
  width:150px;height:84px;border:1px dashed var(--border-strong);border-radius:9px;background:var(--bg-soft);
}
.cmp-yr{
  font-size:.76rem;font-weight:700;letter-spacing:.05em;color:var(--ink-subtle);
  margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.cmp-card h4{font-size:.97rem;line-height:1.3;margin-bottom:9px}
.cmp-place{
  margin-top:auto;font-size:.82rem;font-weight:600;color:var(--cyan-deep);
}
[data-theme="dark"] .cmp-place{color:var(--cyan)}
@media(max-width:560px){.cmp-card{flex-basis:236px}.cmp-logo{height:88px}.cmp-img{max-height:84px}}

/* the note portal anchors the floating toast */
.portal{position:relative}

/* =====================================================================
   ROUND THREE — header, school colours, nested clinic, team views
   ===================================================================== */

.top-actions .menu-wrap{position:relative;display:flex;align-items:center}

/* school colours */
.sch-mit{color:#A31F34}
.sch-harvard{color:#A51C30}
.sch-mcphs{color:#A0203A}
[data-theme="dark"] .sch-mit{color:#E2566C}
[data-theme="dark"] .sch-harvard{color:#E85A70}
[data-theme="dark"] .sch-mcphs{color:#E4596E}

/* RPh. on the coat pocket */
.ca-rph{
  font-family:'Figtree',sans-serif;font-size:11px;font-weight:800;
  fill:var(--cyan);stroke:none;letter-spacing:-.02em;opacity:0;
}

/* the pharmacy that hosts the clinic */
.es-shop{fill:none;stroke:var(--border-strong);stroke-width:1.6;rx:20}
.es-shoplbl{font-weight:700;fill:var(--ink-muted)}

/* footer investor-relations button */
.ir-btn{margin-top:18px;padding:9px 14px;font-size:.84rem}

/* --- TEAM: two ways to look at the same people --- */
.team-head{display:flex;justify-content:flex-end;margin-bottom:22px}
.team-foot{display:flex;justify-content:center;margin-top:28px}
.view-switch{
  display:inline-flex;gap:3px;padding:4px;border-radius:12px;
  border:1px solid var(--border);background:var(--bg-soft);
}
.vs-btn{
  display:grid;place-items:center;width:40px;height:36px;border-radius:9px;
  color:var(--ink-subtle);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.vs-btn:hover{color:var(--ink)}
.vs-btn.is-on{background:var(--bg-elev);color:var(--ink);box-shadow:var(--shadow-sm)}
.team-view[hidden]{display:none}

.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.tm-card{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-elev);
}
.tm-portrait{
  display:grid;place-items:center;aspect-ratio:1/1;width:100%;
  background:linear-gradient(160deg,var(--bg-soft),var(--cyan-ghost));
}
.tm-initials{
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.04em;color:var(--ink-subtle);
}
.tm-meta{
  position:absolute;inset:auto 0 0 0;display:block;padding:20px 20px 18px;
  background:linear-gradient(to top,rgba(10,13,18,.94) 12%,rgba(10,13,18,.72) 62%,rgba(10,13,18,0));
  color:#fff;opacity:0;transform:translateY(10px);
  transition:opacity .26s var(--ease),transform .3s var(--ease-out);
}
.tm-name{display:block;font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.25}
.tm-role{display:block;margin-top:4px;font-size:.85rem;font-weight:600;color:var(--cyan)}
.tm-cr{display:block;margin-top:9px;font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.78)}
.tm-card:not(.big) .tm-cr{display:none}

/* carousel: one card the footprint of four gallery tiles */
.team-rail{container-type:inline-size}
.team-rail .tl-track{gap:18px}
/* two gallery tiles wide plus the gap between them, so the card covers 2x2 tiles */
.tm-card.big{flex:0 0 min(740px,74vw)}
@supports (width:1cqw){
  .tm-card.big{flex:0 0 calc((200cqw - 72px) / 3 + 18px)}
}
.tm-card.big .tm-initials{font-size:clamp(2.6rem,6vw,4rem)}
.team-carousel::before,.team-carousel::after{width:56px}
@media(max-width:860px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-card.big{flex:0 0 min(620px,88vw)}
  @supports (width:1cqw){ .tm-card.big{flex:0 0 92cqw} }
}
@media(max-width:520px){
  .team-grid{grid-template-columns:1fr}
  .team-head{justify-content:center}
  .tm-card.big{flex:0 0 88vw}
  @supports (width:1cqw){ .tm-card.big{flex:0 0 88cqw} }
}

/* =====================================================================
   ROUND FOUR — member profiles, pull quote, speech bubble, back to top
   ===================================================================== */

/* --- team member profile --- */
.pf-back{
  display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
  color:var(--ink-muted);margin-bottom:30px;
}
.pf-back:hover{color:var(--cyan-deep)}
[data-theme="dark"] .pf-back:hover{color:var(--cyan)}
.pf-name{margin-bottom:10px;font-weight:300;letter-spacing:-.03em}
.pf-ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--ink-muted);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.pf-ico:hover{color:var(--cyan-deep);border-color:var(--cyan-line);background:var(--cyan-ghost)}
[data-theme="dark"] .pf-ico:hover{color:var(--cyan)}
.pf-role{font-size:1.06rem;font-weight:600;color:var(--cyan-deep);margin-bottom:22px}
[data-theme="dark"] .pf-role{color:var(--cyan)}
.pf-links{display:flex;flex-wrap:wrap;gap:10px}
.pf-links .btn{display:inline-flex;align-items:center;gap:8px}

.pf-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:start}
.pf-photo{
  aspect-ratio:1/1;width:100%;border-radius:var(--r);
  border:1px solid var(--border);background-color:var(--bg-soft);
}
.pf-bio p{font-size:1.02rem;line-height:1.66;color:var(--ink-soft);max-width:62ch}
.pf-bio p + p{margin-top:16px}
.pf-lead{font-weight:600;color:var(--ink)}

/* anything still waiting on real copy reads as obviously unfinished */
[data-placeholder]{color:var(--ink-subtle);font-style:italic}

@media(max-width:860px){
  .pf-grid{grid-template-columns:1fr;gap:28px}
  .pf-photo{max-width:420px}
}

/* the team cards are links now */
a.tm-card{color:inherit;text-decoration:none}
a.tm-card:hover{border-color:var(--cyan-line)}

/* --- pull quote on the team page --- */
.pull{margin-bottom:26px}
.pull p{
  font-family:'Outfit','Figtree',sans-serif;font-weight:800;
  font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.08;letter-spacing:-.035em;
  max-width:18ch;
}
.pull cite{
  display:block;margin-top:18px;font-style:normal;
  font-size:.86rem;font-weight:600;color:var(--ink-subtle);letter-spacing:.01em;
}

/* --- speech bubble in the counter drawing --- */
.ca-bub{opacity:0}
.ca-cloud{fill:var(--bg-elev);stroke:var(--cyan);stroke-width:2.2;stroke-linejoin:round}
.ca-bub-t{
  font-family:'Figtree',sans-serif;font-size:14px;font-style:italic;font-weight:600;
  fill:var(--ink-soft);stroke:none;
}
.ca-say-c{
  font-family:'Figtree',sans-serif;font-size:14.5px;font-style:italic;font-weight:600;
  fill:var(--ink-muted);stroke:none;
}

/* --- back to top --- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--ink-muted);
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .24s var(--ease),transform .24s var(--ease-out),
             visibility .24s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.to-top:hover{color:var(--cyan-deep);border-color:var(--cyan-line)}
[data-theme="dark"] .to-top:hover{color:var(--cyan)}
@media(max-width:600px){.to-top{right:14px;bottom:14px;width:40px;height:40px}}

/* team portraits — declared once each, reused by the card and the profile page */
.tm-portrait,.pf-photo{background-size:cover;background-position:center 16%;background-repeat:no-repeat}
.pf-photo{aspect-ratio:1/1;padding:0}
.pt-nomase-iyamu{background-image:url('../img/img-611a9a4dda.jpg')}
.pt-haroon-hyder{background-image:url('../img/img-a0dab3a292.jpg')}
.pt-jana-attia{background-image:url('../img/img-08344b15fd.jpg')}
.pt-alem-osman{background-image:url('../img/img-3663f825be.jpg')}
.pt-christine-huang{background-image:url('../img/img-5f673be18d.jpg')}
.pt-jake-giguere{background-image:url('../img/img-50dc024934.jpg')}
.pt-nathaniel-kitcher{background-image:url('../img/img-93f71c893b.jpg')}
.pt-dominic-co{background-image:url('../img/img-f90b981089.jpg')}

/* =====================================================================
   Home: the service slideshow. The pane is pinned while the page scrolls
   past it, and the copy changes sideways rather than scrolling upward.
   ===================================================================== */
.sv-scroll{position:relative;height:300vh}
.sv-pin{
  /* the heading is pinned with the slides so it stays on screen while they
     change — it used to scroll away under the header before the show began */
  position:sticky;top:66px;
  height:min(calc(100vh - 66px),640px);min-height:0;
  display:grid;align-content:center;gap:34px;
}
.sv-head{max-width:760px}
.sv-head h2{margin:0}
.sv-head p{margin-top:14px}
.sv-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;align-items:center;
}
.sv-stage{position:relative;aspect-ratio:220/140;width:100%;overflow:hidden}
.sv-pin{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.sv-pin[data-dragging]{cursor:grabbing}
.sv-frame{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:translateX(34px);
  transition:opacity .45s var(--ease),transform .55s var(--ease-out);
}
.sv-frame svg{width:100%;height:auto;max-height:100%}

.sv-copy{display:block}
.sv-slides{position:relative;min-height:290px;overflow:hidden}
.sv-panel{
  position:absolute;inset:0;display:block;color:inherit;text-decoration:none;
  opacity:0;transform:translateX(52px);pointer-events:none;
  transition:opacity .42s var(--ease),transform .55s var(--ease-out);
}
.sv-num{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink-subtle);margin-bottom:16px;font-variant-numeric:tabular-nums;
}
.sv-panel h3{font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.03em;margin-bottom:16px}
.sv-panel p{font-size:1.06rem;line-height:1.7;color:var(--ink-soft);max-width:44ch}
.sv-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-size:.92rem;font-weight:600;color:var(--cyan-deep);
  transition:gap .2s var(--ease);
}
[data-theme="dark"] .sv-cta{color:var(--cyan)}
.sv-panel:hover .sv-cta{gap:14px}

/* the tracking bar */
.sv-bar{
  position:relative;height:2px;margin-top:8px;border-radius:2px;
  background:var(--border);overflow:hidden;
}
.sv-bar i{
  position:absolute;left:0;top:0;bottom:0;width:33.3333%;
  background:var(--cyan);border-radius:2px;
  transform:translateX(0);
}

@media(max-width:900px){
  /* one column, still pinned, so each slide keeps its own visual */
  .sv-scroll{height:260vh}
  .sv-pin{gap:20px;height:min(calc(100vh - 66px),760px)}
  .sv-body{grid-template-columns:1fr;gap:20px}
  .sv-head h2{font-size:clamp(1.6rem,6.4vw,2rem)}
  .sv-head p{font-size:.94rem;margin-top:10px}
  .sv-stage{aspect-ratio:auto;height:min(30vh,240px)}
  .sv-slides{min-height:320px}
  .sv-panel h3{font-size:clamp(1.65rem,7vw,2.1rem)}
  .sv-panel p{font-size:1rem}
  .sv-cta{margin-top:20px}
}

/* =====================================================================
   News: press cards on the same rail as the team carousel
   ===================================================================== */
.tl.news .tl-track{gap:20px}
.nw-card{
  flex:0 0 min(430px,78vw);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-elev);
  color:inherit;text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.nw-card:hover{border-color:var(--cyan-line);box-shadow:var(--shadow-md)}
.nw-art{
  display:grid;place-items:center;height:190px;padding:26px;
  background:linear-gradient(160deg,var(--bg-soft),var(--cyan-ghost));
}
.nw-img{max-height:104px;max-width:262px;width:auto;object-fit:contain;display:block}
.nw-img.dm{display:none}
[data-theme="dark"] .nw-img.lm{display:none}
[data-theme="dark"] .nw-img.dm{display:block}
/* typographic stand-ins where we do not hold the publisher's logo file */
.nw-mark{
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;font-size:2.1rem;
  letter-spacing:-.04em;color:var(--ink);
}
.nw-mark.serif{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.02em}
.nw-meta{display:block;padding:22px 24px 24px;border-top:1px solid var(--border)}
.nw-pub{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-subtle);margin-bottom:10px;
}
.nw-title{display:block;font-weight:700;font-size:1.06rem;line-height:1.35;letter-spacing:-.02em}
.nw-sum{
  display:block;font-size:.9rem;line-height:1.6;color:var(--ink-muted);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .42s var(--ease-out),opacity .3s var(--ease),margin-top .42s var(--ease-out);
}
.nw-card:hover .nw-sum,.nw-card:focus-visible .nw-sum{max-height:260px;opacity:1;margin-top:12px}
.nw-go{
  display:block;margin-top:14px;font-size:.88rem;font-weight:600;
  color:var(--cyan-deep);
}
[data-theme="dark"] .nw-go{color:var(--cyan)}
@media(hover:none){
  .nw-sum{max-height:260px;opacity:1;margin-top:12px}
}
@media(max-width:560px){
  .nw-art{height:150px}
  .nw-img{max-height:74px}
  .nw-mark{font-size:1.7rem}
}

/* Clinic slide: a solid supervision bracket in place of the dashed triangle */
.cl-link{stroke:var(--border-strong);stroke-width:1.6;stroke-linecap:round;fill:none}

/* profile portrait fallback until a photograph is supplied */
.pf-photo{display:grid;place-items:center}
.pf-initials{
  font-family:'Outfit','Figtree',sans-serif;font-weight:700;
  font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em;color:var(--ink-subtle);
}
.pf-photo[class*="pt-"] .pf-initials{display:none}

/* =====================================================================
   AMBIENT BACKGROUND — three drifting blobs
   A fixed layer behind the page: the body paints the base colour, this
   sits on top of it, and the content sits on top of that. The motion is
   in animations.css; only size, placement and colour live here.
   ===================================================================== */
:root{
  /* The source used Tailwind's w-72 + blur-xl + opacity-70. Those values were
     written for an empty decorative section; behind real body copy the dark
     blobs swallow the text, so they are bigger, softer and much fainter here.
     Turn these four up to go back toward the original weight. */
  --blob-size:460px;          /* source: 288px (w-72)  */
  --blob-blur:90px;           /* source: 24px (blur-xl) */
  --blob-ink-opacity:.50;     /* source: .7 on the two dark blobs */
  --blob-cyan-opacity:.42;    /* source: .7 */
  --blob-blend:multiply;      /* dark pigment on a light page */
  --blob-1:#0A0D12;
  --blob-2:#67E8F9;
  --blob-3:#0A0D12;
}
[data-theme="dark"]{
  /* multiply would swallow these on a near-black page, so they glow instead */
  --blob-blend:screen;
  --blob-ink-opacity:.90;
  --blob-cyan-opacity:.20;
  --blob-1:#36C6F4;
  --blob-2:#36C6F4;
  --blob-3:#000000;
}
.blobs{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  contain:layout paint style;
}
.blob{
  position:absolute;display:block;
  width:var(--blob-size);height:var(--blob-size);
  border-radius:50%;
  filter:blur(var(--blob-blur));
  mix-blend-mode:var(--blob-blend);
}
.blob-1{top:22%;left:22%;background:var(--blob-1);opacity:var(--blob-cyan-opacity)}
.blob-2{top:20%;right:20%;background:var(--blob-2);opacity:var(--blob-cyan-opacity)}
.blob-3{bottom:20%;left:33.333%;background:var(--blob-3);opacity:var(--blob-ink-opacity)}

/* The page rides above the blob layer. */
main#main,footer{position:relative;z-index:1}